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,75 +3,63 @@
  * 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>();
 
-  async onIconPick([file]: File[]) {
+const NonInjectedClusterIconSetting = observer((props: ClusterIconSettingProps & Dependencies) => {
+  const element = React.createRef<HTMLDivElement>();
+  const { cluster, entity } = props;
+
+  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 ref={element}>
       <div className="file-loader flex flex-row items-center">
         <div className="mr-5">
           <FilePicker
@@ -85,7 +73,7 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
               />
             )}
             onOverSizeLimit={OverSizeLimitStyle.FILTER}
-              handler={this.onIconPick}
+            handler={onIconPick}
           />
         </div>
         <MenuActions
@@ -94,15 +82,26 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
           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}>
+          {props.menuItems.get().map(item =>
-              Clear
+            <MenuItem onClick={() => save(item.onClick(cluster.preferences))} key={item.id} disabled={item.disabled(cluster.preferences)}>{item.title}</MenuItem>
-            </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),
    }
   }
+});