Merge pull request #1001 from amitamrutiya/update-workspace-table

Update workspace table component

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -10,6 +10,8 @@ import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AuthorCell from './AuthorCell';
 import { getColumnValue } from './helper';
 import { L5DeleteIcon, NameDiv } from './style';
@@ -146,7 +148,10 @@ export const createDesignsColumnsConfig = ({
       options: {
         filter: false,
         sort: false,
-        searchable: true
+        searchable: true,
+        customBodyRender: (value: VIEW_VISIBILITY) => {
+          return <VisibilityChipMenu value={value} enabled={false} />;
+        }
       }
     },
     {
@@ -180,8 +185,7 @@ export const createDesignsColumnsConfig = ({
         filter: false,
         sort: false,
         searchable: false,
-        setCellHeaderProps: () => ({ align: 'center' as const }),
-        setCellProps: () => ({ align: 'center' as const }),
+
         customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
           const rowIndex = (tableMeta as TableMeta).rowIndex;
           const rowData = (tableMeta as TableMeta).tableData[rowIndex];
@@ -203,7 +207,7 @@ export const createDesignsColumnsConfig = ({
               icon: <ChainIcon width={'24'} height={'24'} fill={theme?.palette.icon.secondary} />
             },
             {
-              title: 'Open in playground',
+              title: 'Open in Playground',
               onClick: () => {
                 window.open(
                   `https://playground.meshery.io/extension/meshmap?mode=${
@@ -217,7 +221,7 @@ export const createDesignsColumnsConfig = ({
               )
             },
             {
-              title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
+              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
               disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
               icon: <L5DeleteIcon />

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}>

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 &&

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -15,8 +15,8 @@ export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBIL
 
 interface VisibilityChipMenuProps {
   value: VIEW_VISIBILITY;
-  onChange: (value: string) => void;
-  options: [string, React.ElementType][];
+  onChange?: (value: string) => void;
+  options?: [string, React.ElementType][];
   enabled: boolean;
 }
 
@@ -95,7 +95,9 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
   };
   const handleChange = (e: MouseEvent, value: string) => {
     e.stopPropagation();
-    onChange(value);
+    if (onChange) {
+      onChange(value);
+    }
     close(e);
   };
   const theme = useTheme();
@@ -122,7 +124,7 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
           left: (anchorEl?.getBoundingClientRect().left ?? 0) + 5
         }}
       >
-        {options.map(([visibility, Icon], index) => (
+        {options?.map(([visibility, Icon], index) => (
           <StyledMenuItem
             key={index}
             data-testid={`visibility-toggle-${visibility.toLowerCase()}`}

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}

src/custom/Workspaces/WorkspaceCard.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from '@mui/material';
 import { Backdrop, CircularProgress, Grid } from '../../base';
+import { getRelativeTime } from '../../utils';
 import { FlipCard } from '../FlipCard';
 import { RecordRow, RedirectButton, TransferButton } from './WorkspaceTransferButton';
-import { formattoLongDate } from './helper';
 import {
   AllocationColumnGrid,
   AllocationWorkspace,
@@ -408,12 +408,12 @@ const CardBack = ({
       <DateGrid xs={12}>
         <DateColumnGrid xs={6}>
           <DateLabel onClick={(e) => e.stopPropagation()}>
-            Updated At: {formattoLongDate(updatedDate)}
+            Updated At: {getRelativeTime(updatedDate)}
           </DateLabel>
         </DateColumnGrid>
         <DateColumnGrid xs={6}>
           <DateLabel onClick={(e) => e.stopPropagation()}>
-            Created At: {formattoLongDate(createdDate)}
+            Created At: {getRelativeTime(createdDate)}
           </DateLabel>
         </DateColumnGrid>
       </DateGrid>

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

src/custom/Workspaces/WorkspaceTransferButton.tsx

@@ -1,7 +1,8 @@
 import { SyncAlt as SyncAltIcon } from '@mui/icons-material';
-import { Grid, Tooltip, Typography } from '../../base';
+import { Grid, Typography } from '../../base';
 import { useTheme } from '../../theme';
-import { formatShortDate, formatShortDateTime } from './helper';
+import { getFullFormattedTime, getRelativeTime } from '../../utils';
+import { CustomTooltip } from '../CustomTooltip';
 import { PopupButton, Record, TabCount, TabTitle } from './styles';
 
 interface TransferButtonProps {
@@ -89,25 +90,32 @@ export const RecordRow: React.FC<RecordRowProps> = ({ title, name, date }) => {
           {title}
         </Typography>
         <Typography
-          sx={{ ml: 1, fontStyle: 'italic', color: theme.palette.background.brand?.default }}
+          sx={{
+            marginInline: '0.5rem',
+            fontStyle: 'italic',
+            color: theme.palette.background.brand?.default,
+            textWrap: 'nowrap'
+          }}
         >
           {name}
         </Typography>
       </Grid>
       <Grid xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Tooltip title={date ? formatShortDateTime(date) : ''} placement="top">
-          <Typography
-            sx={{
-              fontSize: 14,
-              fontStyle: 'italic',
-              color: `${theme.palette.text.disabled}`,
-              paddingRight: '12px',
-              textAlign: 'end'
-            }}
-          >
-            {date ? formatShortDate(date) : '-'}
-          </Typography>
-        </Tooltip>
+        <CustomTooltip title={date ? getFullFormattedTime(date as string) : ''} placement="top">
+          <div>
+            <Typography
+              sx={{
+                fontSize: 14,
+                fontStyle: 'italic',
+                color: `${theme.palette.text.disabled}`,
+                paddingRight: '12px',
+                textAlign: 'end'
+              }}
+            >
+              {date ? getRelativeTime(date as string) : '-'}
+            </Typography>
+          </div>
+        </CustomTooltip>
       </Grid>
     </Record>
   );