feat: enhance CatalogDesignTable with search functionality and improved column permissions

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -25,6 +25,7 @@ interface CatalogDesignsTableProps {
   columnVisibility: Record<string, boolean>;
   colViews: ColView[];
   handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
+  setSearch?: (search: string) => void;
   handleBulkpatternsDataUnpublishModal: (
     selected: any,
     patterns: Pattern[],
@@ -46,6 +47,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   columnVisibility = {},
   colViews = [],
   handleBulkDeleteModal,
+  setSearch,
   handleBulkpatternsDataUnpublishModal
 }) => {
   const theme = useTheme();
@@ -106,6 +108,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         case 'changeRowsPerPage':
           setPageSize(tableState.rowsPerPage);
           break;
+        case 'search':
+          setSearch && setSearch(tableState.searchText !== null ? tableState.searchText : '');
+          break;
         case 'sort':
           if (
             sortInfo.length === 2 &&
@@ -124,7 +129,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
           break;
       }
     },
-    [columns, setPage, setPageSize, setSortOrder, sortOrder]
+    [columns, setPage, setSearch, setPageSize, setSortOrder, sortOrder]
   );
 
   const options = useMemo(
@@ -137,6 +142,11 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       rowsPerPage: pageSize,
       page,
       elevation: 0,
+      sortOrder: {
+        name: 'updated_at At',
+        direction: 'desc'
+      },
+
       onTableChange: handleTableChange,
       customToolbarSelect: _.isNil(filter)
         ? (selected: any) => (

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -25,11 +25,14 @@ interface ColumnConfigProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   handleClone: (name: string, id: string) => void;
   handleShowDetails: (designId: string, designName: string) => void;
-  isDownloadDisabled: boolean;
-  isCopyLinkDisabled: boolean;
-  isDeleteDisabled: boolean;
-  isPublishDisabled: boolean;
-  isUnpublishDisabled: boolean;
+  isDownloadAllowed: boolean;
+  isCopyLinkAllowed: boolean;
+  isDeleteAllowed: boolean;
+  isPublishAllowed: boolean;
+  isUnpublishAllowed: boolean;
+  // for workspace designs table page only
+  isFromWorkspaceTable?: boolean;
+  isRemoveAllowed?: boolean;
 }
 
 export const colViews: ColView[] = [
@@ -49,11 +52,13 @@ export const createDesignsColumnsConfig = ({
   handleCopyUrl,
   handleClone,
   handleShowDetails,
-  isUnpublishDisabled,
-  isCopyLinkDisabled,
-  isDeleteDisabled,
-  isPublishDisabled,
-  isDownloadDisabled
+  isUnpublishAllowed,
+  isCopyLinkAllowed,
+  isDeleteAllowed,
+  isPublishAllowed,
+  isDownloadAllowed,
+  isRemoveAllowed,
+  isFromWorkspaceTable = false
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
     {
@@ -153,12 +158,12 @@ export const createDesignsColumnsConfig = ({
             {
               title: 'Download',
               onClick: () => downloadYaml(rowData?.pattern_file, rowData?.name),
-              disabled: isDownloadDisabled,
+              disabled: !isDownloadAllowed,
               icon: <Download width={24} height={24} fill={CHARCOAL} />
             },
             {
               title: 'Copy Link',
-              disabled: rowData.visibility === 'private' || isCopyLinkDisabled,
+              disabled: rowData.visibility === 'private' || !isCopyLinkAllowed,
               onClick: () => {
                 handleCopyUrl(RESOURCE_TYPES.DESIGNS, rowData?.name, rowData?.id);
               },
@@ -179,24 +184,24 @@ export const createDesignsColumnsConfig = ({
               icon: <KanvasIcon width={24} height={24} primaryFill={CHARCOAL} />
             },
             {
-              title: 'Delete',
-              disabled: isDeleteDisabled,
+              title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
+              disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
               icon: <L5DeleteIcon />
             }
           ];
 
           const publishAction = {
             title: 'Publish',
-            disabled: isPublishDisabled,
+            disabled: !isPublishAllowed,
             onClick: () => handlePublishModal(rowData),
             icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
           };
 
           const unpublishAction = {
             title: 'Unpublish',
             onClick: () => handleUnpublishModal(rowData)(),
-            disabled: isUnpublishDisabled,
+            disabled: !isUnpublishAllowed,
             icon: <PublishIcon width={24} height={24} fill={CHARCOAL} />
           };
 

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -8,7 +8,7 @@ import { FormControlLabel } from '../../base/FormControlLabel';
 import { ColumnIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import PopperListener from '../PopperListener';
-import TooltipIcon from '../TooltipIcon';
+import { TooltipIcon } from '../TooltipIconButton';
 
 export interface CustomColumnVisibilityControlProps {
   columns: MUIDataTableColumn[];

src/custom/ResponsiveDataTable.tsx

@@ -5,7 +5,7 @@ import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
 import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
-import TooltipIcon from './TooltipIcon';
+import { TooltipIcon } from './TooltipIconButton';
 
 export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
   cursor: disabled ? 'not-allowed' : 'pointer',

src/custom/SearchBar.tsx

@@ -7,7 +7,7 @@ import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';
 import { CloseIcon, SearchIcon } from '../icons';
 import { useTheme } from '../theme';
-import TooltipIcon from './TooltipIcon';
+import { TooltipIcon } from './TooltipIconButton';
 
 const customTheme = (theme: Theme) =>
   createTheme({
@@ -92,7 +92,8 @@ function SearchBar({
     debouncedOnSearch(value);
   };
 
-  const handleClearIconClick = (): void => {
+  const handleClearIconClick = (e: React.MouseEvent): void => {
+    e.stopPropagation();
     debouncedOnSearch('');
     setSearchText('');
     setExpanded(false);
@@ -101,7 +102,8 @@ function SearchBar({
     }
   };
 
-  const handleSearchIconClick = (): void => {
+  const handleSearchIconClick = (e: React.MouseEvent): void => {
+    e.stopPropagation();
     if (expanded) {
       debouncedOnSearch('');
       setSearchText('');
@@ -119,17 +121,18 @@ function SearchBar({
   return (
     <ClickAwayListener
       onClickAway={(event) => {
+        event.stopPropagation();
         const isTable = (event.target as HTMLElement)?.closest('#ref');
 
         if (searchText !== '') {
           return;
         }
         if (isTable) {
-          handleClearIconClick(); // Close the search bar as needed
+          handleClearIconClick(event as unknown as React.MouseEvent);
         }
       }}
     >
-      <div>
+      <>
         <ThemeProvider theme={customTheme(theme)}>
           <TextField
             variant="standard"
@@ -159,7 +162,7 @@ function SearchBar({
             arrow
           />
         )}
-      </div>
+      </>
     </ClickAwayListener>
   );
 }

src/custom/UniversalFilter.tsx

@@ -9,7 +9,7 @@ import { Select } from '../base/Select';
 import { FilterIcon } from '../icons';
 import { useTheme } from '../theme';
 import PopperListener from './PopperListener';
-import TooltipIcon from './TooltipIcon';
+import { TooltipIcon } from './TooltipIconButton';
 
 export interface FilterColumn {
   name: string;