Skip to content

Commit d2e6bec

Browse files
amitamrutiyaamitamrutiya
authored
Merge pull request #1001 from amitamrutiya/update-workspace-table
Update workspace table component
2 parents fb751c5 + 9a47d56 commit d2e6bec

12 files changed

Lines changed: 158 additions & 148 deletions

File tree

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { Pattern } from '../CustomCatalog/CustomCard';
1010
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
1111
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
1212
import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
13+
import { VisibilityChipMenu } from '../VisibilityChipMenu';
14+
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
1315
import AuthorCell from './AuthorCell';
1416
import { getColumnValue } from './helper';
1517
import { L5DeleteIcon, NameDiv } from './style';
@@ -146,7 +148,10 @@ export const createDesignsColumnsConfig = ({
146148
options: {
147149
filter: false,
148150
sort: false,
149-
searchable: true
151+
searchable: true,
152+
customBodyRender: (value: VIEW_VISIBILITY) => {
153+
return <VisibilityChipMenu value={value} enabled={false} />;
154+
}
150155
}
151156
},
152157
{
@@ -180,8 +185,7 @@ export const createDesignsColumnsConfig = ({
180185
filter: false,
181186
sort: false,
182187
searchable: false,
183-
setCellHeaderProps: () => ({ align: 'center' as const }),
184-
setCellProps: () => ({ align: 'center' as const }),
188+
185189
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
186190
const rowIndex = (tableMeta as TableMeta).rowIndex;
187191
const rowData = (tableMeta as TableMeta).tableData[rowIndex];
@@ -203,7 +207,7 @@ export const createDesignsColumnsConfig = ({
203207
icon: <ChainIcon width={'24'} height={'24'} fill={theme?.palette.icon.secondary} />
204208
},
205209
{
206-
title: 'Open in playground',
210+
title: 'Open in Playground',
207211
onClick: () => {
208212
window.open(
209213
`https://playground.meshery.io/extension/meshmap?mode=${
@@ -217,7 +221,7 @@ export const createDesignsColumnsConfig = ({
217221
)
218222
},
219223
{
220-
title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
224+
title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
221225
disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
222226
onClick: () => handleDeleteModal(rowData)(),
223227
icon: <L5DeleteIcon />

‎src/custom/TeamTable/TeamTable.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ const TeamTable: React.FC<TeamTableProps> = ({
5959
<TableCell
6060
colSpan={6}
6161
sx={{
62-
padding: '0.5rem'
62+
paddingInline: '4rem',
63+
backgroundColor: `${theme.palette.background.secondary} !important`
6364
}}
6465
>
6566
<StyledGrid container xs={12}>

‎src/custom/TeamTable/TeamTableConfiguration.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export default function TeamTableConfiguration({
250250
<IconWrapper disabled={!isRemoveTeamFromWorkspaceAllowed}>
251251
<TooltipIcon
252252
id={`remove_team-${tableMeta.rowIndex}`}
253-
title={'Remove Team'}
253+
title={'Move Team'}
254254
onClick={() => {
255255
isRemoveTeamFromWorkspaceAllowed &&
256256
handleRemoveTeamFromWorkspace &&

‎src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBIL
1515

1616
interface VisibilityChipMenuProps {
1717
value: VIEW_VISIBILITY;
18-
onChange: (value: string) => void;
19-
options: [string, React.ElementType][];
18+
onChange?: (value: string) => void;
19+
options?: [string, React.ElementType][];
2020
enabled: boolean;
2121
}
2222

@@ -95,7 +95,9 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
9595
};
9696
const handleChange = (e: MouseEvent, value: string) => {
9797
e.stopPropagation();
98-
onChange(value);
98+
if (onChange) {
99+
onChange(value);
100+
}
99101
close(e);
100102
};
101103
const theme = useTheme();
@@ -122,7 +124,7 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
122124
left: (anchorEl?.getBoundingClientRect().left ?? 0) + 5
123125
}}
124126
>
125-
{options.map(([visibility, Icon], index) => (
127+
{options?.map(([visibility, Icon], index) => (
126128
<StyledMenuItem
127129
key={index}
128130
data-testid={`visibility-toggle-${visibility.toLowerCase()}`}

‎src/custom/Workspaces/DesignTable.tsx‎

Lines changed: 23 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
32
import _ from 'lodash';
43
import React, { useEffect, useRef, useState } from 'react';
5-
import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base';
4+
import { Box, Typography } from '../../base';
65
import { DesignIcon } from '../../icons';
76
import { publishCatalogItemSchema } from '../../schemas';
87
import { useTheme } from '../../theme';
@@ -154,11 +153,6 @@ const DesignTable: React.FC<DesignTableProps> = ({
154153
return initialVisibility;
155154
});
156155

157-
const [expanded, setExpanded] = useState<boolean>(true);
158-
const handleAccordionChange = () => {
159-
setExpanded(!expanded);
160-
};
161-
162156
useEffect(() => {
163157
const fetchSchema = async () => {
164158
const modelNames = _.uniq(
@@ -186,14 +180,14 @@ const DesignTable: React.FC<DesignTableProps> = ({
186180
});
187181

188182
const tableHeaderContent = (
189-
<TableHeader>
183+
<TableHeader style={{ padding: '1rem' }}>
190184
<Box display={'flex'} alignItems="center" gap={1} width="100%">
191185
<DesignIcon height="1.5rem" width="1.5rem" />
192186
<Typography variant="body1" fontWeight={'bold'}>
193187
Assigned Designs
194188
</Typography>
195189
</Box>
196-
<TableRightActionHeader>
190+
<TableRightActionHeader style={{ marginRight: '0rem' }}>
197191
<SearchBar
198192
onSearch={(value) => {
199193
setDesignSearch(value);
@@ -224,37 +218,26 @@ const DesignTable: React.FC<DesignTableProps> = ({
224218

225219
return (
226220
<>
227-
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
228-
<AccordionSummary
229-
expandIcon={<ExpandMoreIcon />}
230-
sx={{
231-
backgroundColor: 'background.paper'
232-
}}
233-
>
234-
{tableHeaderContent}
235-
</AccordionSummary>
236-
<AccordionDetails style={{ padding: 0 }}>
237-
<CatalogDesignsTable
238-
patterns={designsOfWorkspace?.designs || []}
239-
totalCount={designsOfWorkspace?.total_count}
240-
sortOrder={sortOrder}
241-
setSortOrder={setSortOrder}
242-
pageSize={pageSize}
243-
setPageSize={setPageSize}
244-
page={page}
245-
setPage={setPage}
246-
columnVisibility={columnVisibility}
247-
colViews={designColumnsColViews}
248-
columns={columns}
249-
handleBulkpatternsDataUnpublishModal={handleBulkUnpublishModal}
250-
handleBulkDeleteModal={(designs, modalRef) =>
251-
handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
252-
}
253-
filter={'my-designs'}
254-
setSearch={setDesignSearch}
255-
/>
256-
</AccordionDetails>
257-
</Accordion>
221+
{tableHeaderContent}
222+
<CatalogDesignsTable
223+
patterns={designsOfWorkspace?.designs || []}
224+
totalCount={designsOfWorkspace?.total_count}
225+
sortOrder={sortOrder}
226+
setSortOrder={setSortOrder}
227+
pageSize={pageSize}
228+
setPageSize={setPageSize}
229+
page={page}
230+
setPage={setPage}
231+
columnVisibility={columnVisibility}
232+
colViews={designColumnsColViews}
233+
columns={columns}
234+
handleBulkpatternsDataUnpublishModal={handleBulkUnpublishModal}
235+
handleBulkDeleteModal={(designs, modalRef) =>
236+
handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
237+
}
238+
filter={'my-designs'}
239+
setSearch={setDesignSearch}
240+
/>
258241
<AssignmentModal
259242
open={designAssignment.assignModal}
260243
onClose={designAssignment.handleAssignModalClose}

‎src/custom/Workspaces/WorkspaceCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useTheme } from '@mui/material';
22
import { Backdrop, CircularProgress, Grid } from '../../base';
3+
import { getRelativeTime } from '../../utils';
34
import { FlipCard } from '../FlipCard';
45
import { RecordRow, RedirectButton, TransferButton } from './WorkspaceTransferButton';
5-
import { formattoLongDate } from './helper';
66
import {
77
AllocationColumnGrid,
88
AllocationWorkspace,
@@ -408,12 +408,12 @@ const CardBack = ({
408408
<DateGrid xs={12}>
409409
<DateColumnGrid xs={6}>
410410
<DateLabel onClick={(e) => e.stopPropagation()}>
411-
Updated At: {formattoLongDate(updatedDate)}
411+
Updated At: {getRelativeTime(updatedDate)}
412412
</DateLabel>
413413
</DateColumnGrid>
414414
<DateColumnGrid xs={6}>
415415
<DateLabel onClick={(e) => e.stopPropagation()}>
416-
Created At: {formattoLongDate(createdDate)}
416+
Created At: {getRelativeTime(createdDate)}
417417
</DateLabel>
418418
</DateColumnGrid>
419419
</DateGrid>

‎src/custom/Workspaces/WorkspaceTeamsTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
110110
onClick={teamAssignment.handleAssignModal}
111111
style={{ margin: '1rem' }}
112112
>
113-
Assign Teams
113+
Manage Teams
114114
</Button>
115115
<TableRightActionHeader>
116116
<SearchBar

‎src/custom/Workspaces/WorkspaceTransferButton.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { SyncAlt as SyncAltIcon } from '@mui/icons-material';
2-
import { Grid, Tooltip, Typography } from '../../base';
2+
import { Grid, Typography } from '../../base';
33
import { useTheme } from '../../theme';
4-
import { formatShortDate, formatShortDateTime } from './helper';
4+
import { getFullFormattedTime, getRelativeTime } from '../../utils';
5+
import { CustomTooltip } from '../CustomTooltip';
56
import { PopupButton, Record, TabCount, TabTitle } from './styles';
67

78
interface TransferButtonProps {
@@ -89,25 +90,32 @@ export const RecordRow: React.FC<RecordRowProps> = ({ title, name, date }) => {
8990
{title}
9091
</Typography>
9192
<Typography
92-
sx={{ ml: 1, fontStyle: 'italic', color: theme.palette.background.brand?.default }}
93+
sx={{
94+
marginInline: '0.5rem',
95+
fontStyle: 'italic',
96+
color: theme.palette.background.brand?.default,
97+
textWrap: 'nowrap'
98+
}}
9399
>
94100
{name}
95101
</Typography>
96102
</Grid>
97103
<Grid xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
98-
<Tooltip title={date ? formatShortDateTime(date) : ''} placement="top">
99-
<Typography
100-
sx={{
101-
fontSize: 14,
102-
fontStyle: 'italic',
103-
color: `${theme.palette.text.disabled}`,
104-
paddingRight: '12px',
105-
textAlign: 'end'
106-
}}
107-
>
108-
{date ? formatShortDate(date) : '-'}
109-
</Typography>
110-
</Tooltip>
104+
<CustomTooltip title={date ? getFullFormattedTime(date as string) : ''} placement="top">
105+
<div>
106+
<Typography
107+
sx={{
108+
fontSize: 14,
109+
fontStyle: 'italic',
110+
color: `${theme.palette.text.disabled}`,
111+
paddingRight: '12px',
112+
textAlign: 'end'
113+
}}
114+
>
115+
{date ? getRelativeTime(date as string) : '-'}
116+
</Typography>
117+
</div>
118+
</CustomTooltip>
111119
</Grid>
112120
</Record>
113121
);

0 commit comments

Comments
 (0)