Replace deprecated <FormSwitcher/> in metrics-cluster-feature extension (#6060)

* Use new <Switch/> inside deprecated material switcher

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

* Clean up material UI (except types) from FormSwitch

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

* Fix button size in Metrics Settings

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

* Remove material-ui references from

<Switcher/> & <FormSwitcher/>

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

* Change to newer <Switch/> component

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

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

extensions/metrics-cluster-feature/src/metrics-settings.tsx

@@ -15,7 +15,7 @@ const {
     forCluster, StatefulSet, DaemonSet, Deployment,
   },
   Component: {
-    SubTitle, FormSwitch, Switcher, Button,
+    SubTitle, Switch, Button,
   },
 } = Renderer;
 
@@ -207,17 +207,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
         )}
         <section>
           <SubTitle title="Prometheus" />
-          <FormSwitch
+          <Switch
-            control={(
+            disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
-              <Switcher
+            checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
-                disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
+            onChange={checked => this.togglePrometheus(checked)}
-                checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
+            name="prometheus"
-                onChange={v => this.togglePrometheus(v.target.checked)}
+          >
-                name="prometheus"
+            Enable bundled Prometheus metrics stack
-              />
+          </Switch>
-            )}
-            label="Enable bundled Prometheus metrics stack"
-          />
           <small className="hint">
             Enable timeseries data visualization (Prometheus stack) for your cluster.
           </small>
@@ -225,17 +222,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
 
         <section>
           <SubTitle title="Kube State Metrics" />
-          <FormSwitch
+          <Switch
-            control={(
+            disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
-              <Switcher
+            checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
-                disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
+            onChange={checked => this.toggleKubeStateMetrics(checked)}
-                checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
+            name="kube-state-metrics"
-                onChange={v => this.toggleKubeStateMetrics(v.target.checked)}
+          >
-                name="node-exporter"
+            Enable bundled kube-state-metrics stack
-              />
+          </Switch>
-            )}
-            label="Enable bundled kube-state-metrics stack"
-          />
           <small className="hint">
             Enable Kubernetes API object metrics for your cluster.
             Enable this only if you don&apos;t have existing kube-state-metrics stack installed.
@@ -244,17 +238,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
 
         <section>
           <SubTitle title="Node Exporter" />
-          <FormSwitch
+          <Switch
-            control={(
+            disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
-              <Switcher
+            checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
-                disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
+            onChange={checked => this.toggleNodeExporter(checked)}
-                checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
+            name="node-exporter"
-                onChange={v => this.toggleNodeExporter(v.target.checked)}
+          >
-                name="node-exporter"
+            Enable bundled node-exporter stack
-              />
+          </Switch>
-            )}
-            label="Enable bundled node-exporter stack"
-          />
           <small className="hint">
             Enable node level metrics for your cluster.
             Enable this only if you don&apos;t have existing node-exporter stack installed.
@@ -262,20 +253,22 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
         </section>
 
         <section>
-          <Button
+          <div>
-            label={this.buttonLabel}
+            <Button
-            waiting={this.inProgress}
+              primary
-            onClick={() => this.save()}
+              label={this.buttonLabel}
-            primary
+              waiting={this.inProgress}
-            disabled={!this.changed}
+              onClick={() => this.save()}
-            className="w-60 h-14"
+              disabled={!this.changed}
-          />
+              style={{ width: "20ch", padding: "0.5rem" }}
+            />
 
-          {this.canUpgrade && (
+            {this.canUpgrade && (
-            <small className="hint">
+              <small className="hint">
-              An update is available for enabled metrics components.
+                An update is available for enabled metrics components.
-            </small>
+              </small>
-          )}
+            )}
+          </div>
         </section>
       </>
     );

src/renderer/components/switch/form-switcher.tsx

@@ -4,34 +4,19 @@
  */
 
 import React from "react";
-import type { FormControlLabelProps } from "@material-ui/core/FormControlLabel";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import { makeStyles } from "@material-ui/styles";
 
-const useStyles = makeStyles({
+interface FormControlLabelProps {
-  root: {
+  control: React.ReactElement<any, any>;
-    margin: 0,
+  label: React.ReactNode;
-    "& .MuiTypography-root": {
+}
-      fontSize: 14,
-      fontWeight: 500,
-      flex: 1,
-      color: "var(--textColorAccent)",
-    },
-  },
-});
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export function FormSwitch(props: FormControlLabelProps) {
+export function FormSwitch(props: FormControlLabelProps & { children?: React.ReactNode }) {
-  const classes = useStyles();
+  const ClonedElement = React.cloneElement(props.control, {
+    children: <span>{props.label}</span>,
+  });
 
-  return (
+  return ClonedElement;
-    <FormControlLabel
-      control={props.control}
-      labelPlacement="start"
-      label={props.label}
-      className={classes.root}
-    />
-  );
 }

src/renderer/components/switch/switcher.tsx

@@ -4,75 +4,28 @@
  */
 
 import React from "react";
-import type { Theme } from "@material-ui/core/styles";
+import { Switch } from "./switch";
-import { createStyles, withStyles } from "@material-ui/core/styles";
-import type { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
-import Switch from "@material-ui/core/Switch";
 
-interface Styles extends Partial<Record<SwitchClassKey, string>> {
+export interface SwitcherProps {
-  focusVisible?: string;
+  disabled?: boolean;
-}
+  children?: React.ReactNode;
-
+  checked?: boolean;
-export interface SwitcherProps extends SwitchProps {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-  classes: Styles;
+  name?: string;
 }
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export const Switcher = withStyles((theme: Theme) =>
+export function Switcher({ disabled, checked, onChange, name, children }: SwitcherProps) {
-  createStyles({
-    root: {
-      width: 40,
-      height: 24,
-      padding: 0,
-      margin: "0 0 0 8px",
-    },
-    switchBase: {
-      padding: 1,
-      paddingLeft: 4,
-      "&$checked": {
-        transform: "translateX(14px)",
-        color: "white",
-        "& + $track": {
-          backgroundColor: "#52d869",
-          opacity: 1,
-          border: "none",
-        },
-      },
-      "&$focusVisible $thumb": {
-        color: "#52d869",
-        border: "6px solid #fff",
-      },
-    },
-    thumb: {
-      width: 18,
-      height: 18,
-      marginTop: 2,
-      boxShadow: "none",
-    },
-    track: {
-      borderRadius: 26 / 2,
-      backgroundColor: "#72767b",
-      opacity: 1,
-      transition: theme.transitions.create(["background-color", "border"]),
-    },
-    checked: {},
-    focusVisible: {},
-  }),
-)(({ classes, ...props }: SwitcherProps) => {
   return (
     <Switch
-      focusVisibleClassName={classes.focusVisible}
+      disabled={disabled}
-      disableRipple
+      checked={checked}
-      classes={{
+      name={name}
-        root: classes.root,
+      onChange={(checked, event) => onChange?.(event, checked)}
-        switchBase: classes.switchBase,
+    >
-        thumb: classes.thumb,
+      {children}
-        track: classes.track,
+    </Switch>
-        checked: classes.checked,
-      }}
-      {...props}
-    />
   );
-});
+}