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>

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({
-  root: {
-    margin: 0,
-    "& .MuiTypography-root": {
-      fontSize: 14,
-      fontWeight: 500,
-      flex: 1,
-      color: "var(--textColorAccent)",
-    },
-  },
-});
+interface FormControlLabelProps {
+  control: React.ReactElement<any, any>;
+  label: React.ReactNode;
+}
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export function FormSwitch(props: FormControlLabelProps) {
-  const classes = useStyles();
+export function FormSwitch(props: FormControlLabelProps & { children?: React.ReactNode }) {
+  const ClonedElement = React.cloneElement(props.control, {
+    children: <span>{props.label}</span>,
+  });
 
-  return (
-    <FormControlLabel
-      control={props.control}
-      labelPlacement="start"
-      label={props.label}
-      className={classes.root}
-    />
-  );
+  return ClonedElement;
 }

src/renderer/components/switch/switcher.tsx

@@ -4,75 +4,28 @@
  */
 
 import React from "react";
-import type { Theme } from "@material-ui/core/styles";
-import { createStyles, withStyles } from "@material-ui/core/styles";
-import type { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
-import Switch from "@material-ui/core/Switch";
+import { Switch } from "./switch";
 
-interface Styles extends Partial<Record<SwitchClassKey, string>> {
-  focusVisible?: string;
-}
-
-export interface SwitcherProps extends SwitchProps {
-  classes: Styles;
+export interface SwitcherProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+  checked?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  name?: string;
 }
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export const Switcher = withStyles((theme: Theme) =>
-  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) => {
+export function Switcher({ disabled, checked, onChange, name, children }: SwitcherProps) {
   return (
     <Switch
-      focusVisibleClassName={classes.focusVisible}
-      disableRipple
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-      }}
-      {...props}
-    />
+      disabled={disabled}
+      checked={checked}
+      name={name}
+      onChange={(checked, event) => onChange?.(event, checked)}
+    >
+      {children}
+    </Switch>
   );
-});
+}