Take cluster settings menu icon items from computedInjectMany

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

packages/core/src/renderer/components/cluster-settings/cluster-settings-menu-clear-item.injectable.ts

@@ -0,0 +1,22 @@
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ClusterPreferences } from "../../../common/cluster-types";
+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: ClusterPreferences) => !preferences.icon,
+    /**
+     * NOTE: this needs to be `null` rather than `undefined` so that we can
+     * tell the difference between it not being there and being cleared.
+     */
+    onClick: (preferences: ClusterPreferences) => ({ icon: null })
+  }),
+
+  injectionToken: clusterIconSettingsMenuInjectionToken
+})
+
+export default clusterIconSettingsMenuClearItem;

packages/core/src/renderer/components/cluster-settings/cluster-settings-menu-injection-token.ts

@@ -0,0 +1,13 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { ClusterPreferences } from "../../../common/cluster-types";
+
+export type ClusterIconMenuItem = {
+  id: string,
+  title: string,
+  disabled: (preferences: ClusterPreferences) => boolean,
+  onClick: (preferences: ClusterPreferences) => Partial<ClusterPreferences>,
+}
+
+export const clusterIconSettingsMenuInjectionToken = getInjectionToken<ClusterIconMenuItem>({
+  id: "cluster-icon-settings-menu-injection-token",
+});

packages/core/src/renderer/components/cluster-settings/icon-settings.tsx

@@ -3,106 +3,105 @@
  * 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 React from "react";
 import type { KubernetesCluster } from "../../../common/catalog-entities";
+import type { ClusterPreferences } from "../../../common/cluster-types";
+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 type { ShowNotification } from "../notifications";
-import autoBindReact from "auto-bind/react";
+import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
-
+import { ClusterIconMenuItem, clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
-enum GeneralInputStatus {
-  CLEAN = "clean",
-  ERROR = "error",
-}
 
 export interface ClusterIconSettingProps {
   cluster: Cluster;
   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;
 
-  async onIconPick([file]: File[]) {
+  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);
+      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
       ?.querySelector<HTMLInputElement>("input[type=file]")
       ?.click();
   }
 
-  render() {
+  const save = ([kind, value]: [kind: keyof ClusterPreferences, value: any]) => {
-    const { entity } = this.props;
+    cluster.preferences[kind] = value
-
-    return (
-      <div ref={this.element}>
-        <div className="file-loader flex flex-row items-center">
-          <div className="mr-5">
-            <FilePicker
-              accept="image/*"
-              label={(
-                <Avatar
-                  colorHash={`${entity.getName()}-${entity.metadata.source}`}
-                  title={entity.getName()}
-                  src={entity.spec.icon?.src}
-                  size={53}
-                />
-              )}
-              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>
-    );
   }
-}
+
+  return (
+    <div ref={element}>
+      <div className="file-loader flex flex-row items-center">
+        <div className="mr-5">
+          <FilePicker
+            accept="image/*"
+            label={(
+              <Avatar
+                colorHash={`${entity.getName()}-${entity.metadata.source}`}
+                title={entity.getName()}
+                src={entity.spec.icon?.src}
+                size={53}
+              />
+            )}
+            onOverSizeLimit={OverSizeLimitStyle.FILTER}
+            handler={onIconPick}
+          />
+        </div>
+        <MenuActions
+          id={`menu-actions-for-cluster-icon-settings-for-${entity.getId()}`}
+          toolbar={false}
+          autoCloseOnSelect={true}
+          triggerIcon={{ material: "more_horiz" }}
+        >
+          <MenuItem onClick={onUploadClick}>
+            Upload Icon
+          </MenuItem>
+          {props.menuItems.get().map(item =>
+            <MenuItem onClick={() => save(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),
+   }
+  }
+});