Skip to content

Commit

Permalink
feat: add support for mesehery ui workspace in the sistent
Browse files Browse the repository at this point in the history 
Signed-off-by: Amit Amrutiya <[email protected]>
  • Loading branch information
@amitamrutiya
amitamrutiya committed Jan 31, 2025
1 parent 5cb7371 commit 4b41c18
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 94 deletions.
77 changes: 26 additions & 51 deletions src/custom/UsersTable/UsersTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Theme } from '@mui/material';
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
import { useRef, useState } from 'react';
import { Avatar, Box, Grid, Tooltip, Typography } from '../../base';
import { EditIcon, PersonIcon } from '../../icons';
import { Box, Tooltip } from '../../base';
import { EditIcon } from '../../icons';
import Github from '../../icons/Github/GithubIcon';
import Google from '../../icons/Google/GoogleIcon';
import LogoutIcon from '../../icons/Logout/LogOutIcon';
import { CHARCOAL, SistentThemeProvider } from '../../theme';
import { CHARCOAL, SistentThemeProviderWithoutBaseLine } from '../../theme';
import { useWindowDimensions } from '../Helpers/Dimension';
import {
ColView,
updateVisibleColumns
} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
import PromptComponent from '../Prompt';
import PromptComponent, { PROMPT_VARIANTS } from '../Prompt';
import ResponsiveDataTable from '../ResponsiveDataTable';
import { TooltipIcon } from '../TooltipIconButton';
import { parseDeletionTimestamp } from '../Workspaces/helper';
import { TableIconsContainer, TableIconsDisabledContainer } from '../Workspaces/styles';

import UserTableAvatarInfo from './UserTableAvatarInfo';
interface ActionButtonsProps {
tableMeta: MUIDataTableMeta;
isRemoveFromTeamAllowed: boolean;
handleRemoveFromTeam: (data: any[]) => () => void;
theme?: Theme;
}

const ActionButtons: React.FC<ActionButtonsProps> = ({
tableMeta,
handleRemoveFromTeam,
isRemoveFromTeamAllowed
isRemoveFromTeamAllowed,
theme
}) => {
return (
<div>
Expand All @@ -39,12 +42,12 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
title="Remove user membership from team"
iconType="delete"
>
<LogoutIcon fill={CHARCOAL} secondaryFill={CHARCOAL} />
<LogoutIcon fill={theme?.palette.icon.default} />
</TooltipIcon>
</TableIconsContainer>
) : (
<TableIconsDisabledContainer>
<LogoutIcon fill={CHARCOAL} secondaryFill={CHARCOAL} />
<LogoutIcon fill={theme?.palette.icon.disabled} secondaryFill={CHARCOAL} />
</TableIconsDisabledContainer>
)}
</div>
Expand All @@ -58,6 +61,7 @@ interface UsersTableProps {
useRemoveUserFromTeamMutation: any;
useNotificationHandlers: any;
isRemoveFromTeamAllowed: boolean;
theme?: Theme;
}

const UsersTable: React.FC<UsersTableProps> = ({
Expand All @@ -66,7 +70,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
org_id,
useRemoveUserFromTeamMutation,
useNotificationHandlers,
isRemoveFromTeamAllowed
isRemoveFromTeamAllowed,
theme
}) => {
const [page, setPage] = useState<number>(0);
const [pageSize, setPageSize] = useState<number>(10);
Expand All @@ -75,7 +80,6 @@ const UsersTable: React.FC<UsersTableProps> = ({
const availableRoles: string[] = [];
const { handleError, handleSuccess, handleInfo } = useNotificationHandlers();
const ref: any = useRef(null);

const { width } = useWindowDimensions();

const { data: userData } = useGetUsersForOrgQuery({
Expand All @@ -98,7 +102,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
const response = await ref.current?.show({
title: `Remove User From Team ?`,
subtitle: removeUserFromTeamModalContent(data[3], data[2]),
primaryOption: 'Proceed'
primaryOption: 'Proceed',
variant: PROMPT_VARIANTS.DANGER
});
if (response === 'Proceed') {
removeUserFromTeam({
Expand Down Expand Up @@ -127,20 +132,6 @@ const UsersTable: React.FC<UsersTableProps> = ({
return rowData[columnIndex];
};

// const fetchAvailableRoles = () => {
// axios
// .get(process.env.API_ENDPOINT_PREFIX + `/api/identity/orgs/${org_id}/roles?all=true`)
// .then((res) => {
// let roles = [];
// res?.data?.roles?.forEach((role) => roles.push(role?.role_name));
// setAvailableRoles(roles);
// })
// .catch((err) => {
// let error = err.response?.data?.message || 'Failed to fetch roles';
// handleError(error);
// });
// };

const removeUserFromTeamModalContent = (user: string, email: string) => (
<>
<p>Are you sure you want to remove this user? (This action is irreversible)</p>
Expand Down Expand Up @@ -253,29 +244,12 @@ const UsersTable: React.FC<UsersTableProps> = ({
searchable: false,
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => (
<Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
<Grid container alignItems="center">
<Grid item>
<Box sx={{ color: 'text.secondary', mr: 2 }}>
<Avatar
onClick={() => {
window.open(
`/user/${getValidColumnValue(tableMeta.rowData, 'user_id', columns)}`
);
}}
alt={getValidColumnValue(tableMeta.rowData, 'first_name', columns)}
src={value}
>
{value ? '' : <PersonIcon />}
</Avatar>
</Box>
</Grid>
<Grid item xs>
{tableMeta.rowData[4]} {tableMeta.rowData[5]}
<Typography variant="body2" color="text.secondary">
{tableMeta.rowData[2]}
</Typography>
</Grid>
</Grid>
<UserTableAvatarInfo
userId={getValidColumnValue(tableMeta.rowData, 'user_id', columns)}
userName={`${tableMeta.rowData[4]} ${tableMeta.rowData[5]}`}
userEmail={tableMeta.rowData[2]}
profileUrl={value}
/>
</Box>
)
}
Expand Down Expand Up @@ -440,6 +414,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
tableMeta={tableMeta}
handleRemoveFromTeam={handleRemoveFromTeam}
isRemoveFromTeamAllowed={isRemoveFromTeamAllowed}
theme={theme}
/>
)
}
Expand All @@ -457,9 +432,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
});
return initialVisibility;
});

return (
<SistentThemeProvider>
<SistentThemeProviderWithoutBaseLine initialMode={theme?.palette.mode}>
<div style={{ margin: 'auto', width: '100%' }}>
<ResponsiveDataTable
columns={columns}
Expand All @@ -469,10 +443,11 @@ const UsersTable: React.FC<UsersTableProps> = ({
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
backgroundColor={theme?.palette.background.tabs}
/>
</div>
<PromptComponent ref={ref} />
</SistentThemeProvider>
</SistentThemeProviderWithoutBaseLine>
);
};

Expand Down
25 changes: 14 additions & 11 deletions src/custom/Workspaces/DesignTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from 'react';
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
import { DesignIcon } from '../../icons';
import { publishCatalogItemSchema } from '../../schemas';
import { SistentThemeProvider } from '../../theme';
import { useTheme } from '../../theme';
import {
CatalogDesignsTable,
createDesignsColumnsConfig,
Expand All @@ -18,10 +18,8 @@ import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-co
import PromptComponent from '../Prompt';
import SearchBar from '../SearchBar';
import AssignmentModal from './AssignmentModal';
import EditButton from './EditButton';
import useDesignAssignment from './hooks/useDesignAssignment';
import { TableHeader, TableRightActionHeader } from './styles';

import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
export interface DesignTableProps {
workspaceId: string;
workspaceName: string;
Expand All @@ -43,6 +41,7 @@ export interface DesignTableProps {
handlePublish: (publishModal: PublishModalState, data: any) => void;
publishModalHandler: any;
handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;
handleDownload: (design: Pattern) => void;
handleBulkUnpublishModal: (
selected: any,
designs: Pattern[],
Expand Down Expand Up @@ -81,6 +80,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
handleClone,
handleCopyUrl,
handlePublish,
handleDownload,
handleShowDetails,
handleUnpublishModal,
handleWorkspaceDesignDeleteModal,
Expand Down Expand Up @@ -116,7 +116,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
pattern: result
});
};

const theme = useTheme();
const columns = createDesignsColumnsConfig({
handleDeleteModal: (design) => () => handleWorkspaceDesignDeleteModal(design.id, workspaceId),
handlePublishModal,
Expand All @@ -125,13 +125,15 @@ const DesignTable: React.FC<DesignTableProps> = ({
handleClone,
handleShowDetails,
getDownloadUrl,
handleDownload,
isCopyLinkAllowed,
isDeleteAllowed,
isDownloadAllowed,
isPublishAllowed,
isUnpublishAllowed,
isFromWorkspaceTable: true,
isRemoveAllowed
isRemoveAllowed,
theme
});

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

const [expanded, setExpanded] = useState<boolean>(true);
const [expanded, setExpanded] = useState<boolean>(false);
const handleAccordionChange = () => {
setExpanded(!expanded);
};
Expand Down Expand Up @@ -184,7 +186,7 @@ const DesignTable: React.FC<DesignTableProps> = ({

const tableHeaderContent = (
<TableHeader>
<Typography variant="h6" fontWeight={'bold'}>
<Typography variant="body1" fontWeight={'bold'}>
Assigned Designs
</Typography>
<TableRightActionHeader>
Expand All @@ -207,13 +209,13 @@ const DesignTable: React.FC<DesignTableProps> = ({
}}
id={'catalog-table'}
/>
<EditButton onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
<L5EditIcon onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
</TableRightActionHeader>
</TableHeader>
);

return (
<SistentThemeProvider>
<>
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
Expand Down Expand Up @@ -242,6 +244,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
}
filter={'my-designs'}
setSearch={setDesignSearch}
tableBackgroundColor={theme.palette.background.constant?.table}
/>
</AccordionDetails>
</Accordion>
Expand Down Expand Up @@ -276,7 +279,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
buttonTitle="Publish"
/>
<PromptComponent ref={modalRef} />
</SistentThemeProvider>
</>
);
};

Expand Down
28 changes: 18 additions & 10 deletions src/custom/Workspaces/EnvironmentTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
import React, { useState } from 'react';
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
import { DeleteIcon, EnvironmentIcon } from '../../icons';
import { CHARCOAL, SistentThemeProvider } from '../../theme';
import { useTheme } from '../../theme';
import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
import { CustomTooltip } from '../CustomTooltip';
import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
Expand All @@ -17,9 +17,14 @@ import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable';
import SearchBar from '../SearchBar';
import { TooltipIcon } from '../TooltipIconButton';
import AssignmentModal from './AssignmentModal';
import EditButton from './EditButton';
import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles';
import {
CellStyle,
CustomBodyRenderStyle,
L5EditIcon,
TableHeader,
TableRightActionHeader
} from './styles';

interface EnvironmentTableProps {
workspaceId: string;
Expand Down Expand Up @@ -62,8 +67,9 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
useAssignEnvironmentToWorkspaceMutation,
isAssignAllowed
}) => {
const [expanded, setExpanded] = useState<boolean>(true);
const handleAccordionChange = () => {
const [expanded, setExpanded] = useState<boolean>(false);
const handleAccordionChange = (e: React.SyntheticEvent) => {
e.stopPropagation();
setExpanded(!expanded);
};
const [search, setSearch] = useState('');
Expand All @@ -79,6 +85,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
order: sortOrder
});
const { width } = useWindowDimensions();
const theme = useTheme();
const [unassignEnvironmentFromWorkspace] = useUnassignEnvironmentFromWorkspaceMutation();
const columns: MUIDataTableColumn[] = [
{
Expand Down Expand Up @@ -164,7 +171,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
}}
iconType="delete"
>
<DeleteIcon height={28} width={28} fill={CHARCOAL} />
<DeleteIcon height={28} width={28} fill={theme.palette.icon.default} />
</TooltipIcon>
</IconWrapper>
)
Expand Down Expand Up @@ -236,7 +243,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
const [tableCols, updateCols] = useState(columns);

return (
<SistentThemeProvider>
<>
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
Expand All @@ -245,7 +252,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
}}
>
<TableHeader>
<Typography variant="h6" fontWeight={'bold'}>
<Typography variant="body1" fontWeight={'bold'}>
Assigned Environments
</Typography>
<TableRightActionHeader>
Expand All @@ -268,7 +275,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
}}
id={'environments-table'}
/>
<EditButton
<L5EditIcon
onClick={environmentAssignment.handleAssignModal}
disabled={!isAssignAllowed}
/>
Expand All @@ -284,6 +291,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
// backgroundColor={theme.palette.background.card}
/>
</AccordionDetails>
</Accordion>
Expand All @@ -308,7 +316,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
isAssignAllowed={isAssignAllowed}
isRemoveAllowed={isRemoveAllowed}
/>
</SistentThemeProvider>
</>
);
};

Expand Down
Loading

0 comments on commit 4b41c18

Please sign in to comment.