Skip to content

Commit 4b41c18

Browse files
amitamrutiyaamitamrutiya
committed
feat: add support for mesehery ui workspace in the sistent
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 5cb7371 commit 4b41c18

5 files changed

Lines changed: 147 additions & 94 deletions

File tree

‎src/custom/UsersTable/UsersTable.tsx‎

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { Theme } from '@mui/material';
23
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
34
import { useRef, useState } from 'react';
4-
import { Avatar, Box, Grid, Tooltip, Typography } from '../../base';
5-
import { EditIcon, PersonIcon } from '../../icons';
5+
import { Box, Tooltip } from '../../base';
6+
import { EditIcon } from '../../icons';
67
import Github from '../../icons/Github/GithubIcon';
78
import Google from '../../icons/Google/GoogleIcon';
89
import LogoutIcon from '../../icons/Logout/LogOutIcon';
9-
import { CHARCOAL, SistentThemeProvider } from '../../theme';
10+
import { CHARCOAL, SistentThemeProviderWithoutBaseLine } from '../../theme';
1011
import { useWindowDimensions } from '../Helpers/Dimension';
1112
import {
1213
ColView,
1314
updateVisibleColumns
1415
} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
15-
import PromptComponent from '../Prompt';
16+
import PromptComponent, { PROMPT_VARIANTS } from '../Prompt';
1617
import ResponsiveDataTable from '../ResponsiveDataTable';
1718
import { TooltipIcon } from '../TooltipIconButton';
1819
import { parseDeletionTimestamp } from '../Workspaces/helper';
1920
import { TableIconsContainer, TableIconsDisabledContainer } from '../Workspaces/styles';
20-
21+
import UserTableAvatarInfo from './UserTableAvatarInfo';
2122
interface ActionButtonsProps {
2223
tableMeta: MUIDataTableMeta;
2324
isRemoveFromTeamAllowed: boolean;
2425
handleRemoveFromTeam: (data: any[]) => () => void;
26+
theme?: Theme;
2527
}
2628

2729
const ActionButtons: React.FC<ActionButtonsProps> = ({
2830
tableMeta,
2931
handleRemoveFromTeam,
30-
isRemoveFromTeamAllowed
32+
isRemoveFromTeamAllowed,
33+
theme
3134
}) => {
3235
return (
3336
<div>
@@ -39,12 +42,12 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
3942
title="Remove user membership from team"
4043
iconType="delete"
4144
>
42-
<LogoutIcon fill={CHARCOAL} secondaryFill={CHARCOAL} />
45+
<LogoutIcon fill={theme?.palette.icon.default} />
4346
</TooltipIcon>
4447
</TableIconsContainer>
4548
) : (
4649
<TableIconsDisabledContainer>
47-
<LogoutIcon fill={CHARCOAL} secondaryFill={CHARCOAL} />
50+
<LogoutIcon fill={theme?.palette.icon.disabled} secondaryFill={CHARCOAL} />
4851
</TableIconsDisabledContainer>
4952
)}
5053
</div>
@@ -58,6 +61,7 @@ interface UsersTableProps {
5861
useRemoveUserFromTeamMutation: any;
5962
useNotificationHandlers: any;
6063
isRemoveFromTeamAllowed: boolean;
64+
theme?: Theme;
6165
}
6266

6367
const UsersTable: React.FC<UsersTableProps> = ({
@@ -66,7 +70,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
6670
org_id,
6771
useRemoveUserFromTeamMutation,
6872
useNotificationHandlers,
69-
isRemoveFromTeamAllowed
73+
isRemoveFromTeamAllowed,
74+
theme
7075
}) => {
7176
const [page, setPage] = useState<number>(0);
7277
const [pageSize, setPageSize] = useState<number>(10);
@@ -75,7 +80,6 @@ const UsersTable: React.FC<UsersTableProps> = ({
7580
const availableRoles: string[] = [];
7681
const { handleError, handleSuccess, handleInfo } = useNotificationHandlers();
7782
const ref: any = useRef(null);
78-
7983
const { width } = useWindowDimensions();
8084

8185
const { data: userData } = useGetUsersForOrgQuery({
@@ -98,7 +102,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
98102
const response = await ref.current?.show({
99103
title: `Remove User From Team ?`,
100104
subtitle: removeUserFromTeamModalContent(data[3], data[2]),
101-
primaryOption: 'Proceed'
105+
primaryOption: 'Proceed',
106+
variant: PROMPT_VARIANTS.DANGER
102107
});
103108
if (response === 'Proceed') {
104109
removeUserFromTeam({
@@ -127,20 +132,6 @@ const UsersTable: React.FC<UsersTableProps> = ({
127132
return rowData[columnIndex];
128133
};
129134

130-
// const fetchAvailableRoles = () => {
131-
// axios
132-
// .get(process.env.API_ENDPOINT_PREFIX + `/api/identity/orgs/${org_id}/roles?all=true`)
133-
// .then((res) => {
134-
// let roles = [];
135-
// res?.data?.roles?.forEach((role) => roles.push(role?.role_name));
136-
// setAvailableRoles(roles);
137-
// })
138-
// .catch((err) => {
139-
// let error = err.response?.data?.message || 'Failed to fetch roles';
140-
// handleError(error);
141-
// });
142-
// };
143-
144135
const removeUserFromTeamModalContent = (user: string, email: string) => (
145136
<>
146137
<p>Are you sure you want to remove this user? (This action is irreversible)</p>
@@ -253,29 +244,12 @@ const UsersTable: React.FC<UsersTableProps> = ({
253244
searchable: false,
254245
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => (
255246
<Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
256-
<Grid container alignItems="center">
257-
<Grid item>
258-
<Box sx={{ color: 'text.secondary', mr: 2 }}>
259-
<Avatar
260-
onClick={() => {
261-
window.open(
262-
`/user/${getValidColumnValue(tableMeta.rowData, 'user_id', columns)}`
263-
);
264-
}}
265-
alt={getValidColumnValue(tableMeta.rowData, 'first_name', columns)}
266-
src={value}
267-
>
268-
{value ? '' : <PersonIcon />}
269-
</Avatar>
270-
</Box>
271-
</Grid>
272-
<Grid item xs>
273-
{tableMeta.rowData[4]} {tableMeta.rowData[5]}
274-
<Typography variant="body2" color="text.secondary">
275-
{tableMeta.rowData[2]}
276-
</Typography>
277-
</Grid>
278-
</Grid>
247+
<UserTableAvatarInfo
248+
userId={getValidColumnValue(tableMeta.rowData, 'user_id', columns)}
249+
userName={`${tableMeta.rowData[4]} ${tableMeta.rowData[5]}`}
250+
userEmail={tableMeta.rowData[2]}
251+
profileUrl={value}
252+
/>
279253
</Box>
280254
)
281255
}
@@ -440,6 +414,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
440414
tableMeta={tableMeta}
441415
handleRemoveFromTeam={handleRemoveFromTeam}
442416
isRemoveFromTeamAllowed={isRemoveFromTeamAllowed}
417+
theme={theme}
443418
/>
444419
)
445420
}
@@ -457,9 +432,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
457432
});
458433
return initialVisibility;
459434
});
460-
461435
return (
462-
<SistentThemeProvider>
436+
<SistentThemeProviderWithoutBaseLine initialMode={theme?.palette.mode}>
463437
<div style={{ margin: 'auto', width: '100%' }}>
464438
<ResponsiveDataTable
465439
columns={columns}
@@ -469,10 +443,11 @@ const UsersTable: React.FC<UsersTableProps> = ({
469443
tableCols={tableCols}
470444
updateCols={updateCols}
471445
columnVisibility={columnVisibility}
446+
backgroundColor={theme?.palette.background.tabs}
472447
/>
473448
</div>
474449
<PromptComponent ref={ref} />
475-
</SistentThemeProvider>
450+
</SistentThemeProviderWithoutBaseLine>
476451
);
477452
};
478453

‎src/custom/Workspaces/DesignTable.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from 'react';
55
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
66
import { DesignIcon } from '../../icons';
77
import { publishCatalogItemSchema } from '../../schemas';
8-
import { SistentThemeProvider } from '../../theme';
8+
import { useTheme } from '../../theme';
99
import {
1010
CatalogDesignsTable,
1111
createDesignsColumnsConfig,
@@ -18,10 +18,8 @@ import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-co
1818
import PromptComponent from '../Prompt';
1919
import SearchBar from '../SearchBar';
2020
import AssignmentModal from './AssignmentModal';
21-
import EditButton from './EditButton';
2221
import useDesignAssignment from './hooks/useDesignAssignment';
23-
import { TableHeader, TableRightActionHeader } from './styles';
24-
22+
import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
2523
export interface DesignTableProps {
2624
workspaceId: string;
2725
workspaceName: string;
@@ -43,6 +41,7 @@ export interface DesignTableProps {
4341
handlePublish: (publishModal: PublishModalState, data: any) => void;
4442
publishModalHandler: any;
4543
handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;
44+
handleDownload: (design: Pattern) => void;
4645
handleBulkUnpublishModal: (
4746
selected: any,
4847
designs: Pattern[],
@@ -81,6 +80,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
8180
handleClone,
8281
handleCopyUrl,
8382
handlePublish,
83+
handleDownload,
8484
handleShowDetails,
8585
handleUnpublishModal,
8686
handleWorkspaceDesignDeleteModal,
@@ -116,7 +116,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
116116
pattern: result
117117
});
118118
};
119-
119+
const theme = useTheme();
120120
const columns = createDesignsColumnsConfig({
121121
handleDeleteModal: (design) => () => handleWorkspaceDesignDeleteModal(design.id, workspaceId),
122122
handlePublishModal,
@@ -125,13 +125,15 @@ const DesignTable: React.FC<DesignTableProps> = ({
125125
handleClone,
126126
handleShowDetails,
127127
getDownloadUrl,
128+
handleDownload,
128129
isCopyLinkAllowed,
129130
isDeleteAllowed,
130131
isDownloadAllowed,
131132
isPublishAllowed,
132133
isUnpublishAllowed,
133134
isFromWorkspaceTable: true,
134-
isRemoveAllowed
135+
isRemoveAllowed,
136+
theme
135137
});
136138

137139
const [publishSchema, setPublishSchema] = useState<{
@@ -152,7 +154,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
152154
return initialVisibility;
153155
});
154156

155-
const [expanded, setExpanded] = useState<boolean>(true);
157+
const [expanded, setExpanded] = useState<boolean>(false);
156158
const handleAccordionChange = () => {
157159
setExpanded(!expanded);
158160
};
@@ -184,7 +186,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
184186

185187
const tableHeaderContent = (
186188
<TableHeader>
187-
<Typography variant="h6" fontWeight={'bold'}>
189+
<Typography variant="body1" fontWeight={'bold'}>
188190
Assigned Designs
189191
</Typography>
190192
<TableRightActionHeader>
@@ -207,13 +209,13 @@ const DesignTable: React.FC<DesignTableProps> = ({
207209
}}
208210
id={'catalog-table'}
209211
/>
210-
<EditButton onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
212+
<L5EditIcon onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
211213
</TableRightActionHeader>
212214
</TableHeader>
213215
);
214216

215217
return (
216-
<SistentThemeProvider>
218+
<>
217219
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
218220
<AccordionSummary
219221
expandIcon={<ExpandMoreIcon />}
@@ -242,6 +244,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
242244
}
243245
filter={'my-designs'}
244246
setSearch={setDesignSearch}
247+
tableBackgroundColor={theme.palette.background.constant?.table}
245248
/>
246249
</AccordionDetails>
247250
</Accordion>
@@ -276,7 +279,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
276279
buttonTitle="Publish"
277280
/>
278281
<PromptComponent ref={modalRef} />
279-
</SistentThemeProvider>
282+
</>
280283
);
281284
};
282285

‎src/custom/Workspaces/EnvironmentTable.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
44
import React, { useState } from 'react';
55
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
66
import { DeleteIcon, EnvironmentIcon } from '../../icons';
7-
import { CHARCOAL, SistentThemeProvider } from '../../theme';
7+
import { useTheme } from '../../theme';
88
import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
99
import { CustomTooltip } from '../CustomTooltip';
1010
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
@@ -17,9 +17,14 @@ import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable';
1717
import SearchBar from '../SearchBar';
1818
import { TooltipIcon } from '../TooltipIconButton';
1919
import AssignmentModal from './AssignmentModal';
20-
import EditButton from './EditButton';
2120
import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
22-
import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles';
21+
import {
22+
CellStyle,
23+
CustomBodyRenderStyle,
24+
L5EditIcon,
25+
TableHeader,
26+
TableRightActionHeader
27+
} from './styles';
2328

2429
interface EnvironmentTableProps {
2530
workspaceId: string;
@@ -62,8 +67,9 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
6267
useAssignEnvironmentToWorkspaceMutation,
6368
isAssignAllowed
6469
}) => {
65-
const [expanded, setExpanded] = useState<boolean>(true);
66-
const handleAccordionChange = () => {
70+
const [expanded, setExpanded] = useState<boolean>(false);
71+
const handleAccordionChange = (e: React.SyntheticEvent) => {
72+
e.stopPropagation();
6773
setExpanded(!expanded);
6874
};
6975
const [search, setSearch] = useState('');
@@ -79,6 +85,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
7985
order: sortOrder
8086
});
8187
const { width } = useWindowDimensions();
88+
const theme = useTheme();
8289
const [unassignEnvironmentFromWorkspace] = useUnassignEnvironmentFromWorkspaceMutation();
8390
const columns: MUIDataTableColumn[] = [
8491
{
@@ -164,7 +171,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
164171
}}
165172
iconType="delete"
166173
>
167-
<DeleteIcon height={28} width={28} fill={CHARCOAL} />
174+
<DeleteIcon height={28} width={28} fill={theme.palette.icon.default} />
168175
</TooltipIcon>
169176
</IconWrapper>
170177
)
@@ -236,7 +243,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
236243
const [tableCols, updateCols] = useState(columns);
237244

238245
return (
239-
<SistentThemeProvider>
246+
<>
240247
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
241248
<AccordionSummary
242249
expandIcon={<ExpandMoreIcon />}
@@ -245,7 +252,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
245252
}}
246253
>
247254
<TableHeader>
248-
<Typography variant="h6" fontWeight={'bold'}>
255+
<Typography variant="body1" fontWeight={'bold'}>
249256
Assigned Environments
250257
</Typography>
251258
<TableRightActionHeader>
@@ -268,7 +275,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
268275
}}
269276
id={'environments-table'}
270277
/>
271-
<EditButton
278+
<L5EditIcon
272279
onClick={environmentAssignment.handleAssignModal}
273280
disabled={!isAssignAllowed}
274281
/>
@@ -284,6 +291,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
284291
tableCols={tableCols}
285292
updateCols={updateCols}
286293
columnVisibility={columnVisibility}
294+
// backgroundColor={theme.palette.background.card}
287295
/>
288296
</AccordionDetails>
289297
</Accordion>
@@ -308,7 +316,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
308316
isAssignAllowed={isAssignAllowed}
309317
isRemoveAllowed={isRemoveAllowed}
310318
/>
311-
</SistentThemeProvider>
319+
</>
312320
);
313321
};
314322

0 commit comments

Comments
 (0)