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>
This commit is contained in:
Alex Andreev
GitHub
parent
572d7ba237
commit
121a50ecf3
@ -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,75 +3,60 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import type { Cluster } from "../../../common/cluster/cluster";
|
||||
import { observable } from "mobx";
|
||||
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import React from "react";
|
||||
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 { MenuActions, MenuItem } from "../menu";
|
||||
import { Avatar } from "../avatar";
|
||||
import autoBindReact from "auto-bind/react";
|
||||
|
||||
enum GeneralInputStatus {
|
||||
CLEAN = "clean",
|
||||
ERROR = "error",
|
||||
}
|
||||
import type { ShowNotification } from "../notifications";
|
||||
import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
|
||||
import type { ClusterIconMenuItem } from "./cluster-settings-menu-injection-token";
|
||||
import { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
|
||||
|
||||
export interface ClusterIconSettingProps {
|
||||
cluster: Cluster;
|
||||
entity: KubernetesCluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ClusterIconSetting extends React.Component<ClusterIconSettingProps> {
|
||||
@observable status = GeneralInputStatus.CLEAN;
|
||||
@observable errorText?: string;
|
||||
|
||||
constructor(props: ClusterIconSettingProps) {
|
||||
super(props);
|
||||
autoBindReact(this);
|
||||
interface Dependencies {
|
||||
menuItems: IComputedValue<ClusterIconMenuItem[]>;
|
||||
showErrorNotification: ShowNotification;
|
||||
}
|
||||
|
||||
private element = React.createRef<HTMLDivElement>();
|
||||
|
||||
async onIconPick([file]: File[]) {
|
||||
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()}`;
|
||||
|
||||
const onIconPick = async ([file]: File[]) => {
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { cluster } = this.props;
|
||||
|
||||
try {
|
||||
const buf = Buffer.from(await file.arrayBuffer());
|
||||
|
||||
cluster.preferences.icon = `data:${file.type};base64,${buf.toString("base64")}`;
|
||||
} catch (e) {
|
||||
this.errorText = String(e);
|
||||
this.status = GeneralInputStatus.ERROR;
|
||||
}
|
||||
props.showErrorNotification(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
clearIcon() {
|
||||
/**
|
||||
* 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
|
||||
const onUploadClick = () => {
|
||||
element
|
||||
.current
|
||||
?.querySelector<HTMLInputElement>("input[type=file]")
|
||||
?.click();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { entity } = this.props;
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={this.element}>
|
||||
<div ref={element}>
|
||||
<div className="file-loader flex flex-row items-center">
|
||||
<div className="mr-5">
|
||||
<FilePicker
|
||||
@ -85,24 +70,42 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
|
||||
/>
|
||||
)}
|
||||
onOverSizeLimit={OverSizeLimitStyle.FILTER}
|
||||
handler={this.onIconPick}
|
||||
handler={onIconPick}
|
||||
/>
|
||||
</div>
|
||||
<MenuActions
|
||||
id={`menu-actions-for-cluster-icon-settings-for-${entity.getId()}`}
|
||||
id={menuId}
|
||||
data-testid={menuId}
|
||||
toolbar={false}
|
||||
autoCloseOnSelect={true}
|
||||
triggerIcon={{ material: "more_horiz" }}
|
||||
>
|
||||
<MenuItem onClick={this.onUploadClick}>
|
||||
<MenuItem onClick={onUploadClick}>
|
||||
Upload Icon
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => this.clearIcon()} disabled={!this.props.cluster.preferences.icon}>
|
||||
Clear
|
||||
{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>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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