mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Adding cluster settings icon menu items using injection token (#7341)
* Take cluster settings menu icon items from computedInjectMany Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing changed cluster preference typing: using tuple array Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Export data from cluster-settings-menu-injection-token Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Exporting ClusterPreferences to extensions Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Linter fixes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove legacy api token export Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing legacy exports part 2 Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> --------- Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Signed-off-by: Gabriel <gaccettola@mirantis.com>
This commit is contained in:
Alex Andreev
Gabriel
parent
10a342fcf2
commit
13a52505c5
@ -0,0 +1,53 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Icon settings given no external registrations for cluster settings menu injection token renders 1`] = `
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="file-loader flex flex-row items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mr-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="FilePicker"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="flex gaps align-center"
|
||||||
|
for="file-upload"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="Avatar rounded"
|
||||||
|
style="width: 53px; height: 53px; background: rgb(9, 124, 92);"
|
||||||
|
>
|
||||||
|
skc
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
accept="image/*"
|
||||||
|
id="file-upload"
|
||||||
|
name="FilePicker"
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i
|
||||||
|
class="Icon material interactive focusable"
|
||||||
|
data-testid="icon-for-menu-actions-for-cluster-icon-settings-for-some-entity-id"
|
||||||
|
id="menu-actions-for-cluster-icon-settings-for-some-entity-id"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="icon"
|
||||||
|
data-icon-name="more_horiz"
|
||||||
|
>
|
||||||
|
more_horiz
|
||||||
|
</span>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import type { DiContainer } from "@ogre-tools/injectable";
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import type { RenderResult } from "@testing-library/react";
|
||||||
|
import React from "react";
|
||||||
|
import { KubernetesCluster } from "../../../../common/catalog-entities";
|
||||||
|
import { Cluster } from "../../../../common/cluster/cluster";
|
||||||
|
import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
|
||||||
|
import { renderFor } from "../../test-utils/renderFor";
|
||||||
|
import { ClusterIconSetting } from "../icon-settings";
|
||||||
|
import { screen } from "@testing-library/react";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import { clusterIconSettingsMenuInjectionToken } from "../cluster-settings-menu-injection-token";
|
||||||
|
import { runInAction } from "mobx";
|
||||||
|
|
||||||
|
const cluster = new Cluster({
|
||||||
|
contextName: "some-context",
|
||||||
|
id: "some-id",
|
||||||
|
kubeConfigPath: "/some/path/to/kubeconfig",
|
||||||
|
}, {
|
||||||
|
clusterServerUrl: "https://localhost:9999",
|
||||||
|
});
|
||||||
|
|
||||||
|
const clusterEntity = new KubernetesCluster({
|
||||||
|
metadata: {
|
||||||
|
labels: {},
|
||||||
|
name: "some-kubernetes-cluster",
|
||||||
|
uid: "some-entity-id",
|
||||||
|
},
|
||||||
|
spec: {
|
||||||
|
kubeconfigContext: "some-context",
|
||||||
|
kubeconfigPath: "/some/path/to/kubeconfig",
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
phase: "connecting",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const newMenuItem = getInjectable({
|
||||||
|
id: "cluster-icon-settings-menu-test-item",
|
||||||
|
|
||||||
|
instantiate: () => ({
|
||||||
|
id: "test-menu-item",
|
||||||
|
title: "Hello World",
|
||||||
|
onClick: (preferences) => {
|
||||||
|
preferences.clusterName = "Hello World";
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
injectionToken: clusterIconSettingsMenuInjectionToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Icon settings", () => {
|
||||||
|
let rendered: RenderResult;
|
||||||
|
let di: DiContainer;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
di = getDiForUnitTesting();
|
||||||
|
|
||||||
|
const render = renderFor(di);
|
||||||
|
|
||||||
|
rendered = render(
|
||||||
|
<ClusterIconSetting cluster={cluster} entity={clusterEntity} />,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("given no external registrations for cluster settings menu injection token", () => {
|
||||||
|
it("renders", () => {
|
||||||
|
expect(rendered.baseElement).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has predefined menu item", async () => {
|
||||||
|
userEvent.click(await screen.findByTestId("icon-for-menu-actions-for-cluster-icon-settings-for-some-entity-id"));
|
||||||
|
|
||||||
|
expect(rendered.getByText("Upload Icon")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has menu item from build-in registration", async () => {
|
||||||
|
userEvent.click(await screen.findByTestId("icon-for-menu-actions-for-cluster-icon-settings-for-some-entity-id"));
|
||||||
|
|
||||||
|
expect(rendered.getByText("Clear")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("given external registrations for cluster settings menu injection token", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
runInAction(() => {
|
||||||
|
di.register(newMenuItem);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has menu item from external registration", async () => {
|
||||||
|
userEvent.click(await screen.findByTestId("icon-for-menu-actions-for-cluster-icon-settings-for-some-entity-id"));
|
||||||
|
|
||||||
|
expect(rendered.getByText("Hello World")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
|
||||||
|
|
||||||
|
const clusterIconSettingsMenuClearItem = getInjectable({
|
||||||
|
id: "cluster-icon-settings-menu-clear-item",
|
||||||
|
|
||||||
|
instantiate: () => ({
|
||||||
|
id: "clear-icon-menu-item",
|
||||||
|
title: "Clear",
|
||||||
|
disabled: (preferences) => !preferences.icon,
|
||||||
|
onClick: (preferences) => {
|
||||||
|
/**
|
||||||
|
* NOTE: this needs to be `null` rather than `undefined` so that we can
|
||||||
|
* tell the difference between it not being there and being cleared.
|
||||||
|
*/
|
||||||
|
preferences.icon = null;
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
injectionToken: clusterIconSettingsMenuInjectionToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default clusterIconSettingsMenuClearItem;
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||||
|
import type { ClusterPreferences } from "../../../common/cluster-types";
|
||||||
|
|
||||||
|
export interface ClusterIconMenuItem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
disabled?: (preferences: ClusterPreferences) => boolean;
|
||||||
|
onClick: (preferences: ClusterPreferences) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const clusterIconSettingsMenuInjectionToken = getInjectionToken<ClusterIconMenuItem>({
|
||||||
|
id: "cluster-icon-settings-menu-injection-token",
|
||||||
|
});
|
||||||
@ -3,106 +3,109 @@
|
|||||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
|
||||||
import type { Cluster } from "../../../common/cluster/cluster";
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
import { observable } from "mobx";
|
import type { IComputedValue } from "mobx";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
|
import React from "react";
|
||||||
import type { KubernetesCluster } from "../../../common/catalog-entities";
|
import type { KubernetesCluster } from "../../../common/catalog-entities";
|
||||||
|
import type { Cluster } from "../../../common/cluster/cluster";
|
||||||
|
import { Avatar } from "../avatar";
|
||||||
import { FilePicker, OverSizeLimitStyle } from "../file-picker";
|
import { FilePicker, OverSizeLimitStyle } from "../file-picker";
|
||||||
import { MenuActions, MenuItem } from "../menu";
|
import { MenuActions, MenuItem } from "../menu";
|
||||||
import { Avatar } from "../avatar";
|
import type { ShowNotification } from "../notifications";
|
||||||
import autoBindReact from "auto-bind/react";
|
import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
|
||||||
|
import type { ClusterIconMenuItem } from "./cluster-settings-menu-injection-token";
|
||||||
enum GeneralInputStatus {
|
import { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
|
||||||
CLEAN = "clean",
|
|
||||||
ERROR = "error",
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ClusterIconSettingProps {
|
export interface ClusterIconSettingProps {
|
||||||
cluster: Cluster;
|
cluster: Cluster;
|
||||||
entity: KubernetesCluster;
|
entity: KubernetesCluster;
|
||||||
}
|
}
|
||||||
|
|
||||||
@observer
|
interface Dependencies {
|
||||||
export class ClusterIconSetting extends React.Component<ClusterIconSettingProps> {
|
menuItems: IComputedValue<ClusterIconMenuItem[]>;
|
||||||
@observable status = GeneralInputStatus.CLEAN;
|
showErrorNotification: ShowNotification;
|
||||||
@observable errorText?: string;
|
}
|
||||||
|
|
||||||
constructor(props: ClusterIconSettingProps) {
|
|
||||||
super(props);
|
|
||||||
autoBindReact(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
private element = React.createRef<HTMLDivElement>();
|
const NonInjectedClusterIconSetting = observer((props: ClusterIconSettingProps & Dependencies) => {
|
||||||
|
const element = React.createRef<HTMLDivElement>();
|
||||||
|
const { cluster, entity } = props;
|
||||||
|
const menuId = `menu-actions-for-cluster-icon-settings-for-${entity.getId()}`;
|
||||||
|
|
||||||
async onIconPick([file]: File[]) {
|
const onIconPick = async ([file]: File[]) => {
|
||||||
if (!file) {
|
if (!file) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { cluster } = this.props;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const buf = Buffer.from(await file.arrayBuffer());
|
const buf = Buffer.from(await file.arrayBuffer());
|
||||||
|
|
||||||
cluster.preferences.icon = `data:${file.type};base64,${buf.toString("base64")}`;
|
cluster.preferences.icon = `data:${file.type};base64,${buf.toString("base64")}`;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.errorText = String(e);
|
props.showErrorNotification(String(e));
|
||||||
this.status = GeneralInputStatus.ERROR;
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
clearIcon() {
|
const onUploadClick = () => {
|
||||||
/**
|
element
|
||||||
* NOTE: this needs to be `null` rather than `undefined` so that we can
|
|
||||||
* tell the difference between it not being there and being cleared.
|
|
||||||
*/
|
|
||||||
this.props.cluster.preferences.icon = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
onUploadClick() {
|
|
||||||
this.element
|
|
||||||
.current
|
.current
|
||||||
?.querySelector<HTMLInputElement>("input[type=file]")
|
?.querySelector<HTMLInputElement>("input[type=file]")
|
||||||
?.click();
|
?.click();
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
return (
|
||||||
const { entity } = this.props;
|
<div ref={element}>
|
||||||
|
<div className="file-loader flex flex-row items-center">
|
||||||
return (
|
<div className="mr-5">
|
||||||
<div ref={this.element}>
|
<FilePicker
|
||||||
<div className="file-loader flex flex-row items-center">
|
accept="image/*"
|
||||||
<div className="mr-5">
|
label={(
|
||||||
<FilePicker
|
<Avatar
|
||||||
accept="image/*"
|
colorHash={`${entity.getName()}-${entity.metadata.source}`}
|
||||||
label={(
|
title={entity.getName()}
|
||||||
<Avatar
|
src={entity.spec.icon?.src}
|
||||||
colorHash={`${entity.getName()}-${entity.metadata.source}`}
|
size={53}
|
||||||
title={entity.getName()}
|
/>
|
||||||
src={entity.spec.icon?.src}
|
)}
|
||||||
size={53}
|
onOverSizeLimit={OverSizeLimitStyle.FILTER}
|
||||||
/>
|
handler={onIconPick}
|
||||||
)}
|
/>
|
||||||
onOverSizeLimit={OverSizeLimitStyle.FILTER}
|
|
||||||
handler={this.onIconPick}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<MenuActions
|
|
||||||
id={`menu-actions-for-cluster-icon-settings-for-${entity.getId()}`}
|
|
||||||
toolbar={false}
|
|
||||||
autoCloseOnSelect={true}
|
|
||||||
triggerIcon={{ material: "more_horiz" }}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={this.onUploadClick}>
|
|
||||||
Upload Icon
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={() => this.clearIcon()} disabled={!this.props.cluster.preferences.icon}>
|
|
||||||
Clear
|
|
||||||
</MenuItem>
|
|
||||||
</MenuActions>
|
|
||||||
</div>
|
</div>
|
||||||
|
<MenuActions
|
||||||
|
id={menuId}
|
||||||
|
data-testid={menuId}
|
||||||
|
toolbar={false}
|
||||||
|
autoCloseOnSelect={true}
|
||||||
|
triggerIcon={{ material: "more_horiz" }}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={onUploadClick}>
|
||||||
|
Upload Icon
|
||||||
|
</MenuItem>
|
||||||
|
{props.menuItems.get().map(item => (
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => item.onClick(cluster.preferences)}
|
||||||
|
key={item.id}
|
||||||
|
disabled={item.disabled?.(cluster.preferences)}>
|
||||||
|
{item.title}
|
||||||
|
</MenuItem>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</MenuActions>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
|
export const ClusterIconSetting = withInjectables<Dependencies, ClusterIconSettingProps>(NonInjectedClusterIconSetting, {
|
||||||
|
getProps: (di, props) => {
|
||||||
|
const computedInjectMany = di.inject(computedInjectManyInjectable);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...props,
|
||||||
|
menuItems: computedInjectMany(clusterIconSettingsMenuInjectionToken),
|
||||||
|
showErrorNotification: di.inject(showErrorNotificationInjectable),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user