app-catalog: ChartsList.stories: Fix stories for List

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

app-catalog/src/components/charts/AppCatalogTitle.stories.tsx

@@ -1,15 +1,21 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { AppCatalogTitle } from './AppCatalogTitle';
-
-export default {
-    title: 'Components/AppCatalogTitle',
-    component: AppCatalogTitle,
-    decorators: [(Story) => <Router><Story /></Router>],
-} as Meta;
-
-const Template: Story = (args) => <AppCatalogTitle {...args} />;
-
-export const Title = Template.bind({});
-Title.args = {};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { AppCatalogTitle } from './AppCatalogTitle';
+
+export default {
+  title: 'Components/AppCatalogTitle',
+  component: AppCatalogTitle,
+  decorators: [
+    Story => (
+      <Router>
+        <Story />
+      </Router>
+    ),
+  ],
+} as Meta;
+
+const Template: Story = args => <AppCatalogTitle {...args} />;
+
+export const Title = Template.bind({});
+Title.args = {};

app-catalog/src/components/charts/AppCatalogTitle.tsx

@@ -1,22 +1,17 @@
-import {
-    Box,
-    Typography,
-} from '@mui/material';
-import { SettingsLink } from './SettingsLink';
-
-
-
-export function AppCatalogTitle() {
-    return (
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-            <Typography
-                sx={{
-                    fontSize: '2rem',
-                }}
-            >
-                Applications
-            </Typography>
-            <SettingsLink />
-        </Box>
-    );
-}
+import { Box, Typography } from '@mui/material';
+import { SettingsLink } from './SettingsLink';
+
+export function AppCatalogTitle() {
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Typography
+        sx={{
+          fontSize: '2rem',
+        }}
+      >
+        Applications
+      </Typography>
+      <SettingsLink />
+    </Box>
+  );
+}

app-catalog/src/components/charts/ChartsList.stories.tsx

@@ -40,6 +40,7 @@ const mockCharts = [
     repository: {
       name: 'MockRepoy',
       url: 'https://exampley.com',
+      verified_publisher: true,
     },
   },
   {
@@ -51,29 +52,42 @@ const mockCharts = [
     repository: {
       name: 'MockRepo2y',
       url: 'https://example2y.com',
+      verified_publisher: true,
     },
   },
 ];
 
-const initialState = {
+const initialStateTrue = {
   config: {
+    showOnlyVerified: true,
     settings: {
       tableRowsPerPageOptions: [15, 25, 50],
     },
   },
 };
 
-const mockStore = configureStore({
-  reducer: (state = initialState) => state,
-});
+const initialStateFalse = {
+  config: {
+    showOnlyVerified: false,
+    settings: {
+      tableRowsPerPageOptions: [15, 25, 50],
+    },
+  },
+};
 
-const Template: Story = args => (
-  <Provider store={mockStore}>
-    <BrowserRouter>
-      <ChartsList {...args} />
-    </BrowserRouter>
-  </Provider>
-);
+const Template: Story = ({ initialState, ...args }) => {
+  const mockStore = configureStore({
+    reducer: (state = initialState) => state,
+  });
+
+  return (
+    <Provider store={mockStore}>
+      <BrowserRouter>
+        <ChartsList {...args} />
+      </BrowserRouter>
+    </Provider>
+  );
+};
 
 export const EmptyCharts = Template.bind({});
 EmptyCharts.args = {
@@ -102,3 +116,33 @@ SomeCharts.args = {
       ],
     }),
 };
+
+export const WithShowOnlyVerifiedTrue = Template.bind({});
+WithShowOnlyVerifiedTrue.args = {
+  initialState: initialStateTrue,
+  fetchCharts: () =>
+    Promise.resolve({
+      packages: mockCharts,
+      facets: [
+        {
+          title: 'Category',
+          options: [{ name: 'All', total: 0 }],
+        },
+      ],
+    }),
+};
+
+export const WithShowOnlyVerifiedFalse = Template.bind({});
+WithShowOnlyVerifiedFalse.args = {
+  initialState: initialStateFalse,
+  fetchCharts: () =>
+    Promise.resolve({
+      packages: mockCharts,
+      facets: [
+        {
+          title: 'Category',
+          options: [{ name: 'All', total: 0 }],
+        },
+      ],
+    }),
+};

app-catalog/src/components/charts/List.tsx

@@ -75,6 +75,10 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
 
       store.set({ showOnlyVerified: showOnlyVerified });
 
+      if (props.showOnlyVerified!!) {
+        store.set({ showOnlyVerified: props.showOnlyVerified });
+      }
+
       async function fetchData() {
         try {
           const response: any = await fetchCharts(search, showOnlyVerified, chartCategory, page);
@@ -165,8 +169,9 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
         ) : charts.length === 0 ? (
           <Box mt={2} mx={2}>
             <Typography variant="h5" component="h2">
-              {`No charts found for ${search ? `search term: ${search}` : `category: ${chartCategory.title}`
-                }`}
+              {`No charts found for ${
+                search ? `search term: ${search}` : `category: ${chartCategory.title}`
+              }`}
             </Typography>
           </Box>
         ) : (

app-catalog/src/components/charts/SettingsLink.stories.tsx

@@ -1,16 +1,21 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { SettingsLink } from './SettingsLink';
-
-
-export default {
-    title: 'Components/SettingsLink',
-    component: SettingsLink,
-    decorators: [(Story) => <Router><Story /></Router>],
-} as Meta;
-
-const Template: Story = (args) => <SettingsLink {...args} />;
-
-export const Title = Template.bind({});
-Title.args = {};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { SettingsLink } from './SettingsLink';
+
+export default {
+  title: 'Components/SettingsLink',
+  component: SettingsLink,
+  decorators: [
+    Story => (
+      <Router>
+        <Story />
+      </Router>
+    ),
+  ],
+} as Meta;
+
+const Template: Story = args => <SettingsLink {...args} />;
+
+export const Title = Template.bind({});
+Title.args = {};

app-catalog/src/components/charts/SettingsLink.tsx

@@ -1,25 +1,20 @@
-import { Link as RouterLink } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import {
-    Typography,
-    useTheme,
-} from '@mui/material';
-
-
-
-export function SettingsLink() {
-    const theme = useTheme();
-
-    return (
-        <RouterLink routeName="/settings/plugins/app-catalog" tooltip="App-Catalog Settings">
-            <Typography
-                sx={{
-                    size: '1rem',
-                    marginLeft: '3rem',
-                    color: theme.palette.text.primary,
-                }}
-            >
-                Settings
-            </Typography>
-        </RouterLink>
-    );
-}
+import { Link as RouterLink } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Typography, useTheme } from '@mui/material';
+
+export function SettingsLink() {
+  const theme = useTheme();
+
+  return (
+    <RouterLink routeName="/settings/plugins/app-catalog" tooltip="App-Catalog Settings">
+      <Typography
+        sx={{
+          size: '1rem',
+          marginLeft: '3rem',
+          color: theme.palette.text.primary,
+        }}
+      >
+        Settings
+      </Typography>
+    </RouterLink>
+  );
+}

app-catalog/src/components/settings/AppCatalogSettings.stories.tsx

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