feat: update workspace table

amitamrutiya · amitamrutiya · commit 83e9fa18a86f · 2025-04-17T22:25:09.000+05:30
Signed-off-by: amitamrutiya &lt;amitamrutiya2210@gmail.com&gt;
diff --git a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx
@@ -217,7 +217,7 @@ export const createDesignsColumnsConfig = ({
               )
             },
             {
-              title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
+              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
               disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
               icon: <L5DeleteIcon />
diff --git a/src/custom/TeamTable/TeamTable.tsx b/src/custom/TeamTable/TeamTable.tsx
@@ -59,7 +59,8 @@ const TeamTable: React.FC<TeamTableProps> = ({
               <TableCell
                 colSpan={6}
                 sx={{
-                  padding: '0.5rem'
+                  paddingInline: '4rem',
+                  backgroundColor: `${theme.palette.background.secondary} !important`
                 }}
               >
                 <StyledGrid container xs={12}>
diff --git a/src/custom/TeamTable/TeamTableConfiguration.tsx b/src/custom/TeamTable/TeamTableConfiguration.tsx
@@ -250,7 +250,7 @@ export default function TeamTableConfiguration({
                 <IconWrapper disabled={!isRemoveTeamFromWorkspaceAllowed}>
                   <TooltipIcon
                     id={`remove_team-${tableMeta.rowIndex}`}
-                    title={'Remove Team'}
+                    title={'Move Team'}
                     onClick={() => {
                       isRemoveTeamFromWorkspaceAllowed &&
                         handleRemoveTeamFromWorkspace &&
diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base';
+import { Box, Typography } from '../../base';
 import { DesignIcon } from '../../icons';
 import { publishCatalogItemSchema } from '../../schemas';
 import { useTheme } from '../../theme';
@@ -154,11 +153,6 @@ const DesignTable: React.FC<DesignTableProps> = ({
     return initialVisibility;
   });
 
-  const [expanded, setExpanded] = useState<boolean>(true);
-  const handleAccordionChange = () => {
-    setExpanded(!expanded);
-  };
-
   useEffect(() => {
     const fetchSchema = async () => {
       const modelNames = _.uniq(
@@ -186,14 +180,14 @@ const DesignTable: React.FC<DesignTableProps> = ({
   });
 
   const tableHeaderContent = (
-    <TableHeader>
+    <TableHeader style={{ padding: '1rem' }}>
       <Box display={'flex'} alignItems="center" gap={1} width="100%">
         <DesignIcon height="1.5rem" width="1.5rem" />
         <Typography variant="body1" fontWeight={'bold'}>
           Assigned Designs
         </Typography>
       </Box>
-      <TableRightActionHeader>
+      <TableRightActionHeader style={{ marginRight: '0rem' }}>
         <SearchBar
           onSearch={(value) => {
             setDesignSearch(value);
@@ -224,37 +218,26 @@ const DesignTable: React.FC<DesignTableProps> = ({
 
   return (
     <>
-      <Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          sx={{
-            backgroundColor: 'background.paper'
-          }}
-        >
-          {tableHeaderContent}
-        </AccordionSummary>
-        <AccordionDetails style={{ padding: 0 }}>
-          <CatalogDesignsTable
-            patterns={designsOfWorkspace?.designs || []}
-            totalCount={designsOfWorkspace?.total_count}
-            sortOrder={sortOrder}
-            setSortOrder={setSortOrder}
-            pageSize={pageSize}
-            setPageSize={setPageSize}
-            page={page}
-            setPage={setPage}
-            columnVisibility={columnVisibility}
-            colViews={designColumnsColViews}
-            columns={columns}
-            handleBulkpatternsDataUnpublishModal={handleBulkUnpublishModal}
-            handleBulkDeleteModal={(designs, modalRef) =>
-              handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
-            }
-            filter={'my-designs'}
-            setSearch={setDesignSearch}
-          />
-        </AccordionDetails>
-      </Accordion>
+      {tableHeaderContent}
+      <CatalogDesignsTable
+        patterns={designsOfWorkspace?.designs || []}
+        totalCount={designsOfWorkspace?.total_count}
+        sortOrder={sortOrder}
+        setSortOrder={setSortOrder}
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+        page={page}
+        setPage={setPage}
+        columnVisibility={columnVisibility}
+        colViews={designColumnsColViews}
+        columns={columns}
+        handleBulkpatternsDataUnpublishModal={handleBulkUnpublishModal}
+        handleBulkDeleteModal={(designs, modalRef) =>
+          handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
+        }
+        filter={'my-designs'}
+        setSearch={setDesignSearch}
+      />
       <AssignmentModal
         open={designAssignment.assignModal}
         onClose={designAssignment.handleAssignModalClose}
diff --git a/src/custom/Workspaces/WorkspaceTeamsTable.tsx b/src/custom/Workspaces/WorkspaceTeamsTable.tsx
@@ -110,7 +110,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
           onClick={teamAssignment.handleAssignModal}
           style={{ margin: '1rem' }}
         >
-          Assign Teams
+          Manage Teams
         </Button>
         <TableRightActionHeader>
           <SearchBar
diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import React, { useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base';
+import { Box, Typography } from '../../base';
 import { DeleteIcon, EnvironmentIcon, ViewIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { NameDiv } from '../CatalogDesignTable/style';
@@ -77,23 +76,25 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   handleShowDetails
 }) => {
   const theme = useTheme();
-  const [expanded, setExpanded] = useState<boolean>(true);
-  const handleAccordionChange = () => {
-    setExpanded(!expanded);
-  };
+
   const [search, setSearch] = useState('');
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
   const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
-  const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery({
-    workspaceId,
-    page: page,
-    pageSize: pageSize,
-    search: search,
-    order: sortOrder,
-    expandUser: true
-  });
+  const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery(
+    {
+      workspaceId,
+      page: page,
+      pageSize: pageSize,
+      search: search,
+      order: sortOrder,
+      expandUser: true
+    },
+    {
+      skip: !workspaceId
+    }
+  );
   const { width } = useWindowDimensions();
   const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation();
   const columns: MUIDataTableColumn[] = [
@@ -305,60 +306,50 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
 
   return (
     <>
-      <Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          sx={{
-            backgroundColor: 'background.paper'
-          }}
-        >
-          <TableHeader>
-            <Box display={'flex'} alignItems="center" gap={1} width="100%">
-              <ViewIcon height="1.5rem" width="1.5rem" fill={theme.palette.icon.brand} />
-              <Typography variant="body1" fontWeight={'bold'}>
-                Assigned Views
-              </Typography>
-            </Box>
-            <TableRightActionHeader>
-              <SearchBar
-                onSearch={(value) => {
-                  setSearch(value);
-                }}
-                onClear={() => {
-                  setSearch('');
-                }}
-                expanded={isSearchExpanded}
-                setExpanded={setIsSearchExpanded}
-                placeholder="Search workspaces..."
-              />
-              <CustomColumnVisibilityControl
-                columns={columns}
-                customToolsProps={{
-                  columnVisibility,
-                  setColumnVisibility
-                }}
-                id={'views-table'}
-              />
-              <L5EditIcon
-                onClick={viewAssignment.handleAssignModal}
-                disabled={!isAssignAllowed}
-                title="Assign Views"
-              />
-            </TableRightActionHeader>
-          </TableHeader>
-        </AccordionSummary>
-        <AccordionDetails style={{ padding: 0 }}>
-          <ResponsiveDataTable
+      <TableHeader style={{ padding: '1rem' }}>
+        <Box display={'flex'} alignItems="center" gap={1} width="100%">
+          <ViewIcon height="1.5rem" width="1.5rem" fill={theme.palette.icon.brand} />
+          <Typography variant="body1" fontWeight={'bold'}>
+            Assigned Views
+          </Typography>
+        </Box>
+        <TableRightActionHeader style={{ marginRight: '0rem' }}>
+          <SearchBar
+            onSearch={(value) => {
+              setSearch(value);
+            }}
+            onClear={() => {
+              setSearch('');
+            }}
+            expanded={isSearchExpanded}
+            setExpanded={setIsSearchExpanded}
+            placeholder="Search workspaces..."
+          />
+          <CustomColumnVisibilityControl
             columns={columns}
-            data={viewsOfWorkspace?.views}
-            options={options}
-            colViews={colViews}
-            tableCols={tableCols}
-            updateCols={updateCols}
-            columnVisibility={columnVisibility}
+            customToolsProps={{
+              columnVisibility,
+              setColumnVisibility
+            }}
+            id={'views-table'}
+          />
+          <L5EditIcon
+            onClick={viewAssignment.handleAssignModal}
+            disabled={!isAssignAllowed}
+            title="Assign Views"
           />
-        </AccordionDetails>
-      </Accordion>
+        </TableRightActionHeader>
+      </TableHeader>
+
+      <ResponsiveDataTable
+        columns={columns}
+        data={viewsOfWorkspace?.views}
+        options={options}
+        colViews={colViews}
+        tableCols={tableCols}
+        updateCols={updateCols}
+        columnVisibility={columnVisibility}
+      />
 
       <AssignmentModal
         open={viewAssignment.assignModal}

Original file line number	Diff line number	Diff line change
`@@ -217,7 +217,7 @@ export const createDesignsColumnsConfig = ({`
`217`	`217`	`)`
`218`	`218`	`},`
`219`	`219`	`{`
`220`		`- title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',`
	`220`	`+ title: isFromWorkspaceTable ? 'Move Design' : 'Delete',`
`221`	`221`	`disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,`
`222`	`222`	`onClick: () => handleDeleteModal(rowData)(),`
`223`	`223`	`icon: <L5DeleteIcon />`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({`
`110`	`110`	`onClick={teamAssignment.handleAssignModal}`
`111`	`111`	`style={{ margin: '1rem' }}`
`112`	`112`	`>`
`113`		`- Assign Teams`
	`113`	`+ Manage Teams`
`114`	`114`	`</Button>`
`115`	`115`	`<TableRightActionHeader>`
`116`	`116`	`<SearchBar`