Merge pull request #43 from headlamp-k8s/filter-verified-charts

frontend: Adds filter feature for app catalog

app-catalog/.gitignore

@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 
+/dist
+
 # testing
 /coverage
 

app-catalog/src/api/charts.tsx

@@ -1,23 +1,32 @@
 import { PAGE_OFFSET_COUNT_FOR_CHARTS } from '../components/charts/List';
 
-export function fetchChartsFromArtifact(
+export async function fetchChartsFromArtifact(
   search: string = '',
+  verified: boolean,
   category: { title: string; value: number },
   page: number,
   limit: number = PAGE_OFFSET_COUNT_FOR_CHARTS
 ) {
-  if (!category || category.value === 0) {
-    return fetch(
-      `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&sort=relevance&facets=true&limit=${limit}&offset=${
-        (page - 1) * limit
-      }`
-    ).then(response => response.json());
+  // note: we are currently defaulting to search by verified and official as default
+  const url = new URL('https://artifacthub.io/api/v1/packages/search');
+  url.searchParams.set('offset', ((page - 1) * limit).toString());
+  url.searchParams.set('limit', limit.toString());
+  url.searchParams.set('facets', 'true');
+  url.searchParams.set('kind', '0');
+  url.searchParams.set('ts_query_web', search);
+  if (category.value) {
+    url.searchParams.set('category', category.value.toString());
   }
-  return fetch(
-    `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&category=${
-      category.value
-    }&sort=relevance&facets=true&limit=${limit}&offset=${(page - 1) * limit}`
-  ).then(response => response.json());
+  url.searchParams.set('sort', 'relevance');
+  url.searchParams.set('deprecated', 'false');
+  url.searchParams.set('verified_publisher', verified.toString());
+
+  const response = await fetch(url.toString());
+  const total = response.headers.get('pagination-total-count');
+
+  const dataResponse = await response.json();
+
+  return { dataResponse, total };
 }
 
 export function fetchChartDetailFromArtifact(chartName: string, repoName: string) {

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

@@ -0,0 +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 = {};

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

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

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

@@ -32,27 +32,62 @@ const mockCharts = [
       url: 'https://example2.com',
     },
   },
+  {
+    name: 'MockChart3',
+    version: '1.0',
+    description: 'This is a mock chart description.',
+    logo_image_id: 'zzzzz-3fce-4b63-bbf3-b9f649512a86',
+    repository: {
+      name: 'MockRepoy',
+      url: 'https://exampley.com',
+      verified_publisher: true,
+    },
+  },
+  {
+    name: 'MockChart4',
+    version: '1.1',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.',
+    logo_image_id: 'zzzzz-28b3-4ee8-98a2-30e00abf9f02',
+    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 = ({ initialState, ...args }) => {
+  const mockStore = configureStore({
+    reducer: (state = initialState) => state,
+  });
 
-const Template: Story = args => (
-  <Provider store={mockStore}>
-    <BrowserRouter>
-      <ChartsList {...args} />
-    </BrowserRouter>
-  </Provider>
-);
+  return (
+    <Provider store={mockStore}>
+      <BrowserRouter>
+        <ChartsList {...args} />
+      </BrowserRouter>
+    </Provider>
+  );
+};
 
 export const EmptyCharts = Template.bind({});
 EmptyCharts.args = {
@@ -81,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 }],
+        },
+      ],
+    }),
+};