AppCatalog: Adds comp and story for AppCatalogSettings

Signed-off-by: Vincent T <[email protected]>

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 },
+};

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>
+    );
+}

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