Glued InstallMetrics & InstallUserMode into 1 component

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

src/renderer/components/+cluster-settings/components/install-feature.tsx

@@ -1,29 +1,26 @@
 import React from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { clusterIpc } from "../../../../common/cluster-ipc";
 import { Cluster } from "../../../../main/cluster";
 import { Button } from "../../button";
-import { MetricsFeature } from "../../../../features/metrics";
-import { Spinner } from "../../spinner";
-import { clusterIpc } from "../../../../common/cluster-ipc";
-import { observable } from "mobx";
-import { ActionStatus } from "./statuses"
-import { observer } from "mobx-react";
-import { SubTitle } from "../../layout/sub-title";
 import { Notifications } from "../../notifications";
+import { Spinner } from "../../spinner";
 
 interface Props {
-  cluster: Cluster;
+  cluster: Cluster
+  feature: string
 }
 
 @observer
-export class InstallMetrics extends React.Component<Props> {
+export class InstallFeature extends React.Component<Props> {
-  @observable status = ActionStatus.IDLE;
+  @observable loading = false;
-  @observable errorText?: string;
 
   getActionButtons() {
-    const { cluster } = this.props;
+    const { cluster, feature } = this.props;
-    const features = cluster.features[MetricsFeature.id];
+    const features = cluster.features[feature];
-    const disabled = !cluster.isAdmin || this.status === ActionStatus.PROCESSING;
+    const disabled = !cluster.isAdmin || this.loading;
-    const loadingIcon = this.status === ActionStatus.PROCESSING ? <Spinner/> : null;
+    const loadingIcon = this.loading ? <Spinner/> : null;
     if (!features) return null;
     return (
       <div className="flex gaps align-center">
@@ -62,27 +59,21 @@ export class InstallMetrics extends React.Component<Props> {
 
   runAction(action: keyof typeof clusterIpc): () => Promise<void> {
     return async () => {
-      const { cluster } = this.props;
+      const { cluster, feature } = this.props;
       try {
-        this.status = ActionStatus.PROCESSING
+        this.loading = true;
-        await clusterIpc[action].invokeFromRenderer(cluster.id, MetricsFeature.id);
+        await clusterIpc[action].invokeFromRenderer(cluster.id, feature);
       } catch (err) {
         Notifications.error(err.toString());
       }
-      this.status = ActionStatus.IDLE;
+      this.loading = false;
     };
   }
 
   render() {
     return (
       <>
-        <SubTitle title="Metrics"/>
+        {this.props.children}
-        <p>
-          Enable timeseries data visualization (Prometheus stack) for your cluster.
-          Install this only if you don't have existing Prometheus stack installed.
-          You can see preview of manifests{" "}
-          <a href="https://github.com/lensapp/lens/tree/master/src/features/metrics" target="_blank">here</a>.
-        </p>
         {this.getActionButtons()}
       </>
     );

src/renderer/components/+cluster-settings/components/install-user-mode.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { Cluster } from "../../../../main/cluster";
-import { Button } from "../../button";
-import { autobind } from "../../../utils";
-import { Tooltip, TooltipPosition } from "../../tooltip";
-import { Spinner } from "../../spinner";
-import { Icon } from "../../icon";
-import { UserModeFeature } from "../../../../features/user-mode";
-import { clusterIpc } from "../../../../common/cluster-ipc";
-import { observable } from "mobx";
-import { ActionStatus } from "./statuses"
-import { observer } from "mobx-react";
-
-interface Props {
-    cluster: Cluster;
-}
-
-@observer
-export class InstallUserMode extends React.Component<Props> {
-  @observable status = ActionStatus.IDLE;
-  @observable errorText?: string;
-
-  render() {
-    return <>
-      <h4>User Mode</h4>
-      <p>
-        User Mode feature enables non-admin users to see namespaces they have access to. 
-        This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
-      </p>
-      <div className="center">
-        {this.getActionButtons()}
-      </div>
-    </>;
-  }
-
-
-  getStatusIcon(): React.ReactNode {
-    switch (this.status) {
-    case ActionStatus.IDLE:
-      return null;
-    case ActionStatus.PROCESSING:
-      return <Spinner key="spinner" />;
-    case ActionStatus.ERROR:
-      return <Icon key="error" size="16px" material="error" title={this.errorText}></Icon>
-    }
-  }
-
-  getDisabledToolTip(id: string, action: string): React.ReactNode {
-    const { cluster } = this.props;
-    if (cluster.isAdmin) {
-      return null;
-    }
-
-    return <Tooltip targetId={id} position={TooltipPosition.TOP}>
-      {action} only allowed by admins
-    </Tooltip>;
-  }
-
-  getActionButtons(): React.ReactNode[] {
-    const { cluster } = this.props
-    const buttons = [];
-
-    if (cluster.features[UserModeFeature.id]?.canUpgrade) {
-      buttons.push(
-        <Button key="upgrade" id="cluster-feature-user-mode-upgrade" disabled={!cluster.isAdmin} primary onClick={this.runAction("upgradeFeature")}>
-          Upgrade {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-upgrade", "Upgrading")}
-        </Button>
-      );
-    }
-
-    if (cluster.features[UserModeFeature.id]?.installed) {
-      buttons.push(
-        <Button key="uninstall" id="cluster-feature-user-mode-uninstall" disabled={!cluster.isAdmin} primary onClick={this.runAction("uninstallFeature")}>
-          Uninstall {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-uninstall", "Uninstalling")}
-        </Button>
-      );
-    } else {
-      buttons.push(
-        <Button key="install" id="cluster-feature-user-mode-install" disabled={!cluster.isAdmin} primary onClick={this.runAction("installFeature")}>
-          Install {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-install", "Installing")}
-        </Button>
-      );
-    }
-
-    return buttons;
-  }
-
-  runAction(action: keyof typeof clusterIpc): () => Promise<void> {
-    return async () => {
-      const { cluster } = this.props;
-      console.log(`running ${action} ${UserModeFeature.id} onto ${cluster.preferences.clusterName}`);
-
-      try {
-        this.status = ActionStatus.PROCESSING
-        await clusterIpc[action].invokeFromRenderer(cluster.id, UserModeFeature.id);
-        try {
-          await cluster.refresh();
-        } catch (err) {
-          console.error(err);
-        }
-        this.status = ActionStatus.IDLE
-      } catch (err) {
-        this.status = ActionStatus.ERROR
-        this.errorText = err.toString()
-      }
-    };
-  }
-}

src/renderer/components/+cluster-settings/features.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Cluster } from "../../../main/cluster";
-import { InstallMetrics } from "./components/install-metrics";
+import { InstallFeature } from "./components/install-feature";
-import { InstallUserMode } from "./components/install-user-mode";
+import { SubTitle } from "../layout/sub-title";
+import { MetricsFeature } from "../../../features/metrics";
+import { UserModeFeature } from "../../../features/user-mode";
 
 interface Props {
   cluster: Cluster;
@@ -11,10 +13,30 @@ export class Features extends React.Component<Props> {
   render() {
     const { cluster } = this.props;
 
-    return <div>
+    return (
-      <h2>Features</h2>
+      <div>
-      <InstallMetrics cluster={cluster}/>
+        <h2>Features</h2>
-      <InstallUserMode cluster={cluster}/>
+        <InstallFeature cluster={cluster} feature={MetricsFeature.id}>
-    </div>;
+          <>
+            <SubTitle title="Metrics"/>
+            <p>
+              Enable timeseries data visualization (Prometheus stack) for your cluster.
+              Install this only if you don't have existing Prometheus stack installed.
+              You can see preview of manifests{" "}
+              <a href="https://github.com/lensapp/lens/tree/master/src/features/metrics" target="_blank">here</a>.
+            </p>
+          </>
+        </InstallFeature>
+        <InstallFeature cluster={cluster} feature={UserModeFeature.id}>
+          <>
+            <SubTitle title="User Mode"/>
+            <p>
+              User Mode feature enables non-admin users to see namespaces they have access to.{" "}
+              This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
+            </p>
+          </>
+        </InstallFeature>
+      </div>
+    );
   }
 }