From 47e36a8312bafb36ce9d12e1762758d73eebd195 Mon Sep 17 00:00:00 2001
From: Vincent T <vtaylor@microsoft.com>
Date: Wed, 28 Aug 2024 14:48:53 -0400
Subject: [PATCH] AppCatalog: Adds comp and story for AppCatalogSettings

Signed-off-by: Vincent T <vtaylor@microsoft.com>
---
 .../settings/AppCatalogSettings.stories.tsx   |  30 +++++
 .../settings/AppCatalogSettings.tsx           |  52 +++++++++
 app-catalog/src/index.tsx                     |   2 +-
 app-catalog/src/settings.tsx                  | 106 ------------------
 4 files changed, 83 insertions(+), 107 deletions(-)
 create mode 100644 app-catalog/src/components/settings/AppCatalogSettings.stories.tsx
 create mode 100644 app-catalog/src/components/settings/AppCatalogSettings.tsx
 delete mode 100644 app-catalog/src/settings.tsx

diff --git a/app-catalog/src/components/settings/AppCatalogSettings.stories.tsx b/app-catalog/src/components/settings/AppCatalogSettings.stories.tsx
new file mode 100644
index 0000000..e3a7631
--- /dev/null
+++ b/app-catalog/src/components/settings/AppCatalogSettings.stories.tsx
@@ -0,0 +1,30 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { AppCatalogSettings, AppCatalogSettingsProps } from './AppCatalogSettings';
+
+export default {
+    title: 'Components/AppCatalogSettings',
+    component: AppCatalogSettings,
+} as Meta
+
+const theme = createTheme();
+
+const Template: Story<AppCatalogSettingsProps> = (args) => (
+    <ThemeProvider theme={theme}>
+        <AppCatalogSettings {...args} />
+    </ThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const ShowOnlyVerifiedTrue = Template.bind({});
+ShowOnlyVerifiedTrue.args = {
+    initialConfig: { showOnlyVerified: true },
+};
+
+export const ShowOnlyVerifiedFalse = Template.bind({});
+ShowOnlyVerifiedFalse.args = {
+    initialConfig: { showOnlyVerified: false },
+};
\ No newline at end of file
diff --git a/app-catalog/src/components/settings/AppCatalogSettings.tsx b/app-catalog/src/components/settings/AppCatalogSettings.tsx
new file mode 100644
index 0000000..dd0e4ca
--- /dev/null
+++ b/app-catalog/src/components/settings/AppCatalogSettings.tsx
@@ -0,0 +1,52 @@
+import { HoverInfoLabel, NameValueTable } from '@kinvolk/headlamp-plugin/lib/components/common';
+import { Box, Typography } from '@mui/material';
+import { useState } from 'react';
+import { store } from '../charts/List';
+import { EnableSwitch } from './EnableSwitch';
+
+export interface AppCatalogSettingsProps {
+    initialConfig?: { showOnlyVerified: boolean };
+}
+
+export function AppCatalogSettings({ initialConfig }: AppCatalogSettingsProps) {
+    const config = initialConfig || store.get();
+
+    const [currentConfig, setCurrentConfig] = useState(config);
+
+    function handleSave(value) {
+        const updatedConfig = { showOnlyVerified: value };
+        store.set(updatedConfig);
+        setCurrentConfig(store.get());
+        return;
+    }
+
+    function toggleShowOnlyVerified() {
+        const newShowOnlyVerified = currentConfig?.showOnlyVerified;
+        handleSave(!newShowOnlyVerified);
+    }
+
+    return (
+        <Box
+            style={{
+                marginTop: '3rem',
+            }}
+        >
+            <Typography variant="h5">App Catalog Settings</Typography>
+            <NameValueTable
+                rows={[
+                    {
+                        name: (
+                            <HoverInfoLabel
+                                label="Only verified"
+                                hoverInfo="Show charts from verified publishers only"
+                            />
+                        ),
+                        value: (
+                            <EnableSwitch checked={!!currentConfig?.showOnlyVerified} onChange={toggleShowOnlyVerified} />
+                        ),
+                    },
+                ]}
+            />
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/app-catalog/src/index.tsx b/app-catalog/src/index.tsx
index 9d80734..dc019e2 100644
--- a/app-catalog/src/index.tsx
+++ b/app-catalog/src/index.tsx
@@ -3,11 +3,11 @@ import {
   registerRoute,
   registerSidebarEntry,
 } from '@kinvolk/headlamp-plugin/lib';
+import { AppCatalogSettings } from '../src/components/settings/AppCatalogSettings';
 import ChartDetails from './components/charts/Details';
 import { ChartsList } from './components/charts/List';
 import ReleaseDetail from './components/releases/Detail';
 import ReleaseList from './components/releases/List';
-import { AppCatalogSettings } from './settings';
 
 export function isElectron(): boolean {
   // Renderer process
diff --git a/app-catalog/src/settings.tsx b/app-catalog/src/settings.tsx
deleted file mode 100644
index 8387613..0000000
--- a/app-catalog/src/settings.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { HoverInfoLabel, NameValueTable } from '@kinvolk/headlamp-plugin/lib/components/common';
-import { Box, Switch, SwitchProps, Typography, useTheme } from '@mui/material';
-import { useState } from 'react';
-import { store } from './components/charts/List';
-
-export function AppCatalogSettings() {
-  const config = store.get();
-
-  const [currentConfig, setCurrentConfig] = useState(config);
-
-  function handleSave(value) {
-    const updatedConfig = { showOnlyVerified: value };
-    store.set(updatedConfig);
-    setCurrentConfig(store.get());
-    return;
-  }
-
-  function toggleShowOnlyVerified() {
-    const newShowOnlyVerified = currentConfig?.showOnlyVerified;
-    handleSave(!newShowOnlyVerified);
-  }
-
-  return (
-    <Box
-      style={{
-        marginTop: '3rem',
-      }}
-    >
-      <Typography variant="h5">App Catalog Settings</Typography>
-      <NameValueTable
-        rows={[
-          {
-            name: (
-              <HoverInfoLabel
-                label="Only verified"
-                hoverInfo="Show charts from verified publishers only"
-              />
-            ),
-            value: (
-              <EnableSwitch checked={!!currentConfig?.showOnlyVerified} onChange={toggleShowOnlyVerified} />
-            ),
-          },
-        ]}
-      />
-    </Box>
-  );
-}
-
-const EnableSwitch = (props: SwitchProps) => {
-  const theme = useTheme();
-
-  return (
-    <Switch
-      focusVisibleClassName=".Mui-focusVisible"
-      disableRipple
-      sx={{
-        width: 42,
-        height: 26,
-        padding: 0,
-        '& .MuiSwitch-switchBase': {
-          padding: 0,
-          margin: '2px',
-
-          transitionDuration: '300ms',
-          '&.Mui-checked': {
-            transform: 'translateX(16px)',
-            color: '#fff',
-            '& + .MuiSwitch-track': {
-              backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#0078d4',
-              opacity: 1,
-              border: 0,
-            },
-            '&.Mui-disabled + .MuiSwitch-track': {
-              opacity: 0.5,
-            },
-          },
-          '&.Mui-focusVisible .MuiSwitch-thumb': {
-            color: '#33cf4d',
-            border: '6px solid #fff',
-          },
-          '&.Mui-disabled .MuiSwitch-thumb': {
-            color:
-              theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
-          },
-          '&.Mui-disabled + .MuiSwitch-track': {
-            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-          },
-        },
-        '& .MuiSwitch-thumb': {
-          boxSizing: 'border-box',
-          width: 22,
-          height: 22,
-        },
-        '& .MuiSwitch-track': {
-          borderRadius: 26 / 2,
-          backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
-          opacity: 1,
-          transition: theme.transitions.create(['background-color'], {
-            duration: 500,
-          }),
-        },
-      }}
-      {...props}
-    />
-  );
-};