diff --git a/src/custom/UsersTable/UsersTable.tsx b/src/custom/UsersTable/UsersTable.tsx index ba389b1c..b2f8f6eb 100644 --- a/src/custom/UsersTable/UsersTable.tsx +++ b/src/custom/UsersTable/UsersTable.tsx @@ -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 = ({ tableMeta, handleRemoveFromTeam, - isRemoveFromTeamAllowed + isRemoveFromTeamAllowed, + theme }) => { return (
@@ -39,12 +42,12 @@ const ActionButtons: React.FC = ({ title="Remove user membership from team" iconType="delete" > - + ) : ( - + )}
@@ -58,6 +61,7 @@ interface UsersTableProps { useRemoveUserFromTeamMutation: any; useNotificationHandlers: any; isRemoveFromTeamAllowed: boolean; + theme?: Theme; } const UsersTable: React.FC = ({ @@ -66,7 +70,8 @@ const UsersTable: React.FC = ({ org_id, useRemoveUserFromTeamMutation, useNotificationHandlers, - isRemoveFromTeamAllowed + isRemoveFromTeamAllowed, + theme }) => { const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(10); @@ -75,7 +80,6 @@ const UsersTable: React.FC = ({ const availableRoles: string[] = []; const { handleError, handleSuccess, handleInfo } = useNotificationHandlers(); const ref: any = useRef(null); - const { width } = useWindowDimensions(); const { data: userData } = useGetUsersForOrgQuery({ @@ -98,7 +102,8 @@ const UsersTable: React.FC = ({ 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({ @@ -127,20 +132,6 @@ const UsersTable: React.FC = ({ 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) => ( <>

Are you sure you want to remove this user? (This action is irreversible)

@@ -253,29 +244,12 @@ const UsersTable: React.FC = ({ searchable: false, customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => ( img': { mr: 2, flexShrink: 0 } }}> - - - - { - window.open( - `/user/${getValidColumnValue(tableMeta.rowData, 'user_id', columns)}` - ); - }} - alt={getValidColumnValue(tableMeta.rowData, 'first_name', columns)} - src={value} - > - {value ? '' : } - - - - - {tableMeta.rowData[4]} {tableMeta.rowData[5]} - - {tableMeta.rowData[2]} - - - + ) } @@ -440,6 +414,7 @@ const UsersTable: React.FC = ({ tableMeta={tableMeta} handleRemoveFromTeam={handleRemoveFromTeam} isRemoveFromTeamAllowed={isRemoveFromTeamAllowed} + theme={theme} /> ) } @@ -457,9 +432,8 @@ const UsersTable: React.FC = ({ }); return initialVisibility; }); - return ( - +
= ({ tableCols={tableCols} updateCols={updateCols} columnVisibility={columnVisibility} + backgroundColor={theme?.palette.background.tabs} />
- + ); }; diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index 0ad01f4d..ae407734 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -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, @@ -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; @@ -43,6 +41,7 @@ export interface DesignTableProps { handlePublish: (publishModal: PublishModalState, data: any) => void; publishModalHandler: any; handleUnpublishModal: (design: Pattern, modalRef: React.RefObject) => void; + handleDownload: (design: Pattern) => void; handleBulkUnpublishModal: ( selected: any, designs: Pattern[], @@ -81,6 +80,7 @@ const DesignTable: React.FC = ({ handleClone, handleCopyUrl, handlePublish, + handleDownload, handleShowDetails, handleUnpublishModal, handleWorkspaceDesignDeleteModal, @@ -116,7 +116,7 @@ const DesignTable: React.FC = ({ pattern: result }); }; - + const theme = useTheme(); const columns = createDesignsColumnsConfig({ handleDeleteModal: (design) => () => handleWorkspaceDesignDeleteModal(design.id, workspaceId), handlePublishModal, @@ -125,13 +125,15 @@ const DesignTable: React.FC = ({ handleClone, handleShowDetails, getDownloadUrl, + handleDownload, isCopyLinkAllowed, isDeleteAllowed, isDownloadAllowed, isPublishAllowed, isUnpublishAllowed, isFromWorkspaceTable: true, - isRemoveAllowed + isRemoveAllowed, + theme }); const [publishSchema, setPublishSchema] = useState<{ @@ -152,7 +154,7 @@ const DesignTable: React.FC = ({ return initialVisibility; }); - const [expanded, setExpanded] = useState(true); + const [expanded, setExpanded] = useState(false); const handleAccordionChange = () => { setExpanded(!expanded); }; @@ -184,7 +186,7 @@ const DesignTable: React.FC = ({ const tableHeaderContent = ( - + Assigned Designs @@ -207,13 +209,13 @@ const DesignTable: React.FC = ({ }} id={'catalog-table'} /> - + ); return ( - + <> } @@ -242,6 +244,7 @@ const DesignTable: React.FC = ({ } filter={'my-designs'} setSearch={setDesignSearch} + tableBackgroundColor={theme.palette.background.constant?.table} /> @@ -276,7 +279,7 @@ const DesignTable: React.FC = ({ buttonTitle="Publish" /> - + ); }; diff --git a/src/custom/Workspaces/EnvironmentTable.tsx b/src/custom/Workspaces/EnvironmentTable.tsx index 79aa6739..24515245 100644 --- a/src/custom/Workspaces/EnvironmentTable.tsx +++ b/src/custom/Workspaces/EnvironmentTable.tsx @@ -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'; @@ -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; @@ -62,8 +67,9 @@ const EnvironmentTable: React.FC = ({ useAssignEnvironmentToWorkspaceMutation, isAssignAllowed }) => { - const [expanded, setExpanded] = useState(true); - const handleAccordionChange = () => { + const [expanded, setExpanded] = useState(false); + const handleAccordionChange = (e: React.SyntheticEvent) => { + e.stopPropagation(); setExpanded(!expanded); }; const [search, setSearch] = useState(''); @@ -79,6 +85,7 @@ const EnvironmentTable: React.FC = ({ order: sortOrder }); const { width } = useWindowDimensions(); + const theme = useTheme(); const [unassignEnvironmentFromWorkspace] = useUnassignEnvironmentFromWorkspaceMutation(); const columns: MUIDataTableColumn[] = [ { @@ -164,7 +171,7 @@ const EnvironmentTable: React.FC = ({ }} iconType="delete" > - + ) @@ -236,7 +243,7 @@ const EnvironmentTable: React.FC = ({ const [tableCols, updateCols] = useState(columns); return ( - + <> } @@ -245,7 +252,7 @@ const EnvironmentTable: React.FC = ({ }} > - + Assigned Environments @@ -268,7 +275,7 @@ const EnvironmentTable: React.FC = ({ }} id={'environments-table'} /> - @@ -284,6 +291,7 @@ const EnvironmentTable: React.FC = ({ tableCols={tableCols} updateCols={updateCols} columnVisibility={columnVisibility} + // backgroundColor={theme.palette.background.card} /> @@ -308,7 +316,7 @@ const EnvironmentTable: React.FC = ({ isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} /> - + ); }; diff --git a/src/custom/Workspaces/WorkspaceTeamsTable.tsx b/src/custom/Workspaces/WorkspaceTeamsTable.tsx index 61475377..09379a21 100644 --- a/src/custom/Workspaces/WorkspaceTeamsTable.tsx +++ b/src/custom/Workspaces/WorkspaceTeamsTable.tsx @@ -3,15 +3,13 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useState } from 'react'; import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base'; import { TeamsIcon } from '../../icons'; -import { SistentThemeProvider } from '../../theme'; import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'; import SearchBar from '../SearchBar'; import { TeamTableConfiguration } from '../TeamTable'; import TeamTable from '../TeamTable/TeamTable'; import AssignmentModal from './AssignmentModal'; -import EditButton from './EditButton'; import useTeamAssignment from './hooks/useTeamAssignment'; -import { TableHeader, TableRightActionHeader } from './styles'; +import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles'; export interface TeamsTableProps { workspaceId: string; @@ -51,7 +49,7 @@ const TeamsTable: React.FC = ({ const [pageSize, setPageSize] = useState(10); const [sortOrder, setSortOrder] = useState('updated_at desc'); const [bulkSelect, setBulkSelect] = useState(false); - const [expanded, setExpanded] = useState(true); + const [expanded, setExpanded] = useState(false); const handleAccordionChange = () => { setExpanded(!expanded); }; @@ -106,14 +104,14 @@ const TeamsTable: React.FC = ({ }); return ( - + <> } sx={{ backgroundColor: 'background.paper' }} > - + Assigned Teams @@ -136,7 +134,7 @@ const TeamsTable: React.FC = ({ }} id={'teams-table'} /> - @@ -189,7 +187,7 @@ const TeamsTable: React.FC = ({ isAssignAllowed={isAssignTeamAllowed} isRemoveAllowed={isRemoveTeamFromWorkspaceAllowed} /> - + ); }; diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx index 2335dcf0..4fd4cf96 100644 --- a/src/custom/Workspaces/WorkspaceViewsTable.tsx +++ b/src/custom/Workspaces/WorkspaceViewsTable.tsx @@ -2,9 +2,9 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables'; import React, { useState } from 'react'; -import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base'; +import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base'; import { DeleteIcon, EnvironmentIcon } from '../../icons'; -import { CHARCOAL, SistentThemeProvider } from '../../theme'; +import { useTheme } from '../../theme'; import { NameDiv } from '../CatalogDesignTable/style'; import { RESOURCE_TYPES } from '../CatalogDetail/types'; import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'; @@ -18,10 +18,16 @@ import { import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; import SearchBar from '../SearchBar'; import { TooltipIcon } from '../TooltipIconButton'; +import { UserTableAvatarInfo } from '../UsersTable'; import AssignmentModal from './AssignmentModal'; -import EditButton from './EditButton'; import useViewAssignment from './hooks/useViewsAssignment'; -import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles'; +import { + CellStyle, + CustomBodyRenderStyle, + L5EditIcon, + TableHeader, + TableRightActionHeader +} from './styles'; interface ViewsTableProps { workspaceId: string; @@ -36,10 +42,13 @@ interface ViewsTableProps { const colViews: ColView[] = [ ['id', 'na'], + ['avatar_url', 'xs'], + ['email', 'na'], ['name', 'xs'], - ['description', 'm'], - ['organization_id', 'l'], - ['created_at', 'xl'], + ['first_name', 'na'], + ['last_name', 'na'], + ['organization_id', 'xl'], + ['created_at', 'na'], ['updated_at', 'xl'], ['visibility', 'l'], ['actions', 'xs'] @@ -67,7 +76,8 @@ const WorkspaceViewsTable: React.FC = ({ isAssignAllowed, handleShowDetails }) => { - const [expanded, setExpanded] = useState(true); + const theme = useTheme(); + const [expanded, setExpanded] = useState(false); const handleAccordionChange = () => { setExpanded(!expanded); }; @@ -81,8 +91,10 @@ const WorkspaceViewsTable: React.FC = ({ page: page, pageSize: pageSize, search: search, - order: sortOrder + order: sortOrder, + expandUser: true }); + console.log('kutrond', viewsOfWorkspace); const { width } = useWindowDimensions(); const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); const columns: MUIDataTableColumn[] = [ @@ -112,6 +124,63 @@ const WorkspaceViewsTable: React.FC = ({ } } }, + { + name: 'avatar_url', + label: 'Owner', + options: { + filter: false, + sort: false, + searchable: false, + customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => { + console.log('tableMeta', tableMeta); + const getValidColumnValue = ( + rowData: any, + columnName: string, + columns: MUIDataTableColumn[] + ) => { + const columnIndex = columns.findIndex((column: any) => column.name === columnName); + return rowData[columnIndex]; + }; + return ( + img': { mr: 2, flexShrink: 0 } }}> + + + ); + } + } + }, + { + name: 'email', + label: 'Email', + options: { + filter: false, + sort: true, + searchable: true + } + }, + { + name: 'first_name', + label: 'First Name', + options: { + filter: false, + sort: true, + searchable: true + } + }, + { + name: 'last_name', + label: 'Last Name', + options: { + filter: false, + sort: true, + searchable: true + } + }, { name: 'created_at', label: 'Created At', @@ -169,7 +238,7 @@ const WorkspaceViewsTable: React.FC = ({ }} iconType="delete" > - + ) @@ -236,7 +305,7 @@ const WorkspaceViewsTable: React.FC = ({ const [tableCols, updateCols] = useState(columns); return ( - + <> } @@ -245,7 +314,7 @@ const WorkspaceViewsTable: React.FC = ({ }} > - + Assigned Views @@ -268,7 +337,7 @@ const WorkspaceViewsTable: React.FC = ({ }} id={'views-table'} /> - + @@ -305,7 +374,7 @@ const WorkspaceViewsTable: React.FC = ({ isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} /> - + ); };