feat: Add empty result handling to DataGrid component, add search by …

…displayname in marketplace list (#22) Jira: EPMDEDP-12467 Resolves: #22 Change-Id: I63dfced27895557d43902dba02bfe27fc1bf086e
epam · Aug 25, 2023 · ba8a611 · ba8a611
1 parent 4c9e229
commit ba8a611
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/src/components/DataGrid/index.tsx b/src/components/DataGrid/index.tsx
@@ -1,6 +1,7 @@
 import { CircularProgress, Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { usePagination } from '../../hooks/usePagination';
+import { EmptyList } from '../EmptyList';
 import { Render } from '../Render';
 import { Pagination } from './components/Pagination';
 import { useReadyData } from './hooks/useReadyData';
@@ -17,6 +18,7 @@ export const DataGrid = <DataType extends unknown>({
     reflectInURL = false,
     initialPage = 0,
     rowsPerPage = 9,
+    emptyListComponent,
 }: DataGridProps<DataType>) => {
     const prefix = reflectInURL === true ? '' : reflectInURL || '';
 
@@ -40,6 +42,14 @@ export const DataGrid = <DataType extends unknown>({
         error,
     });
 
+    const hasEmptyResult = React.useMemo(() => {
+        if (!data || !readyData) {
+            return;
+        }
+
+        return !!data.length && !readyData?.length;
+    }, [data, readyData]);
+
     return (
         <Grid container spacing={2}>
             <Grid item xs={12}>
@@ -65,6 +75,10 @@ export const DataGrid = <DataType extends unknown>({
                                 return <>{renderItem(item)}</>;
                             })}
                     </Grid>
+                ) : hasEmptyResult ? (
+                    <EmptyList customText={'No results found!'} isSearch />
+                ) : !data?.length ? (
+                    <>{emptyListComponent}</>
                 ) : null}
             </Grid>
             <Render condition={showPagination && data?.length > _rowsPerPage}>

diff --git a/src/components/DataGrid/types.ts b/src/components/DataGrid/types.ts
@@ -12,4 +12,5 @@ export interface DataGridProps<DataType = unknown> {
     reflectInURL?: boolean;
     initialPage?: number;
     rowsPerPage?: number;
+    emptyListComponent?: React.ReactElement;
 }
diff --git a/src/pages/edp-marketplace/components/MarketplaceList/index.tsx b/src/pages/edp-marketplace/components/MarketplaceList/index.tsx
@@ -2,6 +2,7 @@ import { Utils } from '@kinvolk/headlamp-plugin/lib';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { DataGrid } from '../../../../components/DataGrid';
+import { EmptyList } from '../../../../components/EmptyList';
 import { Resources } from '../../../../icons/sprites/Resources';
 import { EDPTemplateKubeObject } from '../../../../k8s/EDPTemplate';
 import { EDPTemplateKubeObjectInterface } from '../../../../k8s/EDPTemplate/types';
@@ -14,7 +15,10 @@ import { TemplatesTable } from './components/TemplatesTable';
 export const MarketplaceList = () => {
     const { viewMode } = useViewModeContext();
     const [items, error] = EDPTemplateKubeObject.useList();
-    const filterFunction = Utils.useFilterFunc();
+    const filterFunction = Utils.useFilterFunc([
+        '.jsonData.spec.displayName',
+        '.jsonData.metadata.name',
+    ]);
     const [drawerOpen, setDrawerOpen] = React.useState<boolean>(false);
     const [activeTemplate, setActiveTemplate] =
         React.useState<EDPTemplateKubeObjectInterface>(null);
@@ -69,6 +73,7 @@ export const MarketplaceList = () => {
                     isLoading={items === null}
                     spacing={2}
                     filterFunction={filterFunction}
+                    emptyListComponent={<EmptyList missingItemName={'templates'} />}
                     renderItem={item => {
                         const key = `marketplace-item-${item?.spec?.displayName}`;
 

diff --git a/src/pages/edp-overview-list/view.tsx b/src/pages/edp-overview-list/view.tsx
@@ -5,6 +5,7 @@ import { Grid, IconButton, Typography, useTheme } from '@material-ui/core';
 import React from 'react';
 import { DataGrid } from '../../components/DataGrid';
 import { DocLink } from '../../components/DocLink';
+import { EmptyList } from '../../components/EmptyList';
 import { PageWrapper } from '../../components/PageWrapper';
 import { EDP_USER_GUIDE } from '../../constants/urls';
 import { ICONS } from '../../icons/iconify-icons-mapping';
@@ -100,6 +101,7 @@ export const PageView = () => {
                         isLoading={EDPComponents === null}
                         spacing={2}
                         filterFunction={filterFunction}
+                        emptyListComponent={<EmptyList missingItemName={'EDPComponents'} />}
                         renderItem={component => {
                             const key = `marketplace-item-${component?.metadata?.uid}`;
 

diff --git a/src/widgets/CreateEditCodebase/components/Create/components/Inner/components/Form/index.tsx b/src/widgets/CreateEditCodebase/components/Create/components/Inner/components/Form/index.tsx
@@ -38,8 +38,6 @@ export const Form = ({ formActiveTabIdx, editorOpen, editorData, setEditorOpen }
         [getValues, handleCloseEditor, handleEditorSave]
     );
 
-    console.log('editorData', editorData);
-
     return (
         <>
             <TabPanel value={formActiveTabIdx} index={TAB_INDEXES[FORM_PART_CODEBASE_INFO]}>