Merge pull request #1023 from layer5io/fix-pagination

fix: pagination for workspace designs and views table

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -45,12 +45,13 @@ interface ColumnConfigProps {
   showPlaygroundActions: boolean;
   handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
   currentUserId?: string;
+  refetchWorkspaceDesigns: () => void;
 }
 
 export const colViews: ColView[] = [
   ['id', 'na'],
   ['name', 'xs'],
-  ['first_name', 'xs'],
+  ['user', 'xs'],
   ['created_at', 'na'],
   ['updated_at', 'l'],
   ['visibility', 'l'],
@@ -78,7 +79,8 @@ export const createDesignsColumnsConfig = ({
   showPlaygroundActions = true,
   isFromWorkspaceTable = false,
   currentUserId,
-  handleVisibilityChange
+  handleVisibilityChange,
+  refetchWorkspaceDesigns
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
     {
@@ -105,7 +107,7 @@ export const createDesignsColumnsConfig = ({
       }
     },
     {
-      name: 'first_name',
+      name: 'user',
       label: 'Author',
       options: {
         filter: false,
@@ -169,9 +171,12 @@ export const createDesignsColumnsConfig = ({
           return (
             <VisibilityChipMenu
               value={value as VIEW_VISIBILITY}
-              onChange={(value) =>
-                handleVisibilityChange && handleVisibilityChange(designId, value as VIEW_VISIBILITY)
-              }
+              onChange={(value) => {
+                if (handleVisibilityChange) {
+                  handleVisibilityChange(designId, value as VIEW_VISIBILITY);
+                  refetchWorkspaceDesigns();
+                }
+              }}
               enabled={isEnabled}
               options={[
                 [VIEW_VISIBILITY.PUBLIC, Public],

src/custom/ResponsiveDataTable.tsx

@@ -11,6 +11,7 @@ import { TooltipIcon } from './TooltipIconButton';
 export const IconWrapper = styled('div', {
   shouldForwardProp: (prop) => prop !== 'disabled'
 })<{ disabled?: boolean }>(({ disabled = false }) => ({
+  width: 'fit-content',
   cursor: disabled ? 'not-allowed' : 'pointer',
   opacity: disabled ? '0.5' : '1',
   display: 'flex',

src/custom/TooltipIconButton/TooltipIconButton.tsx

@@ -48,7 +48,6 @@ export function TooltipIcon({
             },
             ...style
           }}
-          disableRipple
         >
           {icon || children}
         </IconButton>

src/custom/Workspaces/DesignTable.tsx

@@ -24,7 +24,6 @@ export interface DesignTableProps {
   workspaceId: string;
   isKanvasEnabled: boolean;
   workspaceName: string;
-  designsOfWorkspace: any;
   meshModelModelsData: any;
   useGetWorkspaceDesignsQuery: any;
   useAssignDesignToWorkspaceMutation: any;
@@ -57,7 +56,6 @@ export interface DesignTableProps {
   isUnpublishAllowed: boolean;
   isAssignAllowed: boolean;
   isRemoveAllowed: boolean;
-  setDesignSearch: (value: string) => void;
   handleOpenInDesigner?: (designId: string, designName: string) => void;
   showPlaygroundActions?: boolean;
   handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
@@ -78,7 +76,6 @@ export interface TableColumn {
 const DesignTable: React.FC<DesignTableProps> = ({
   workspaceId,
   workspaceName,
-  designsOfWorkspace,
   meshModelModelsData,
   handleBulkUnpublishModal,
   handleBulkWorkspaceDesignDeleteModal,
@@ -102,7 +99,6 @@ const DesignTable: React.FC<DesignTableProps> = ({
   isAssignAllowed,
   isRemoveAllowed,
   useGetWorkspaceDesignsQuery,
-  setDesignSearch,
   handleOpenInDesigner,
   showPlaygroundActions = true,
   handleVisibilityChange,
@@ -112,12 +108,28 @@ const DesignTable: React.FC<DesignTableProps> = ({
     open: false,
     pattern: {}
   });
+
   const modalRef = useRef(null);
+  const [search, setSearch] = useState('');
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
   const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
 
+  const { data: designsOfWorkspace, refetch: refetchWorkspaceDesigns } =
+    useGetWorkspaceDesignsQuery(
+      {
+        workspaceId,
+        page: page,
+        pagesize: pageSize,
+        search: search,
+        order: sortOrder,
+        expandUser: true
+      },
+      {
+        skip: !workspaceId
+      }
+    );
   const handlePublishModal = (pattern: Pattern): void => {
     const result = publishModalHandler(pattern);
     setPublishModal({
@@ -146,7 +158,8 @@ const DesignTable: React.FC<DesignTableProps> = ({
     handleOpenInDesigner,
     showPlaygroundActions,
     handleVisibilityChange,
-    currentUserId
+    currentUserId,
+    refetchWorkspaceDesigns
   });
 
   const [publishSchema, setPublishSchema] = useState<{
@@ -206,10 +219,10 @@ const DesignTable: React.FC<DesignTableProps> = ({
       >
         <SearchBar
           onSearch={(value) => {
-            setDesignSearch(value);
+            setSearch(value);
           }}
           onClear={() => {
-            setDesignSearch('');
+            setSearch('');
           }}
           expanded={isSearchExpanded}
           setExpanded={setIsSearchExpanded}
@@ -252,7 +265,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
           handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
         }
         filter={'my-designs'}
-        setSearch={setDesignSearch}
+        setSearch={setSearch}
       />
       <AssignmentModal
         open={designAssignment.assignModal}

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -89,7 +89,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
     {
       workspaceId,
       page: page,
-      pageSize: pageSize,
+      pagesize: pageSize,
       search: search,
       order: sortOrder,
       expandUser: true
@@ -292,6 +292,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
     selectableRows: 'none',
     count: viewsOfWorkspace?.total_count,
     rowsPerPage: pageSize,
+    serverSide: true,
     page,
     elevation: 0,
     sortOrder: {