Skip to content

Commit 36561c0

Browse files
amitamrutiyaamitamrutiya
committed
chore: enhance workspaces tables
Signed-off-by: amitamrutiya <amitamrutiya2210@gmail.com>
1 parent 07387b9 commit 36561c0

3 files changed

Lines changed: 63 additions & 70 deletions

File tree

‎src/custom/Workspaces/DesignTable.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
33
import _ from 'lodash';
44
import React, { useEffect, useRef, useState } from 'react';
5-
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
5+
import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base';
66
import { DesignIcon } from '../../icons';
77
import { publishCatalogItemSchema } from '../../schemas';
88
import { useTheme } from '../../theme';
@@ -154,7 +154,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
154154
return initialVisibility;
155155
});
156156

157-
const [expanded, setExpanded] = useState<boolean>(false);
157+
const [expanded, setExpanded] = useState<boolean>(true);
158158
const handleAccordionChange = () => {
159159
setExpanded(!expanded);
160160
};
@@ -187,9 +187,12 @@ const DesignTable: React.FC<DesignTableProps> = ({
187187

188188
const tableHeaderContent = (
189189
<TableHeader>
190-
<Typography variant="body1" fontWeight={'bold'}>
191-
Assigned Designs
192-
</Typography>
190+
<Box display={'flex'} alignItems="center" gap={1} width="100%">
191+
<DesignIcon height="1.5rem" width="1.5rem" />
192+
<Typography variant="body1" fontWeight={'bold'}>
193+
Assigned Designs
194+
</Typography>
195+
</Box>
193196
<TableRightActionHeader>
194197
<SearchBar
195198
onSearch={(value) => {
@@ -256,7 +259,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
256259
open={designAssignment.assignModal}
257260
onClose={designAssignment.handleAssignModalClose}
258261
title={`Assign Designs to ${workspaceName}`}
259-
headerIcon={<DesignIcon height="40" width="40" secondaryFill="white" />}
262+
headerIcon={<DesignIcon height="40" width="40" />}
260263
name="Designs"
261264
assignableData={designAssignment.data}
262265
handleAssignedData={designAssignment.handleAssignData}

‎src/custom/Workspaces/WorkspaceTeamsTable.tsx‎

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
2+
import AddIcon from '@mui/icons-material/Add';
33
import { useState } from 'react';
4-
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
4+
import { Button } from '../../base';
55
import { TeamsIcon } from '../../icons';
66
import { useTheme } from '../../theme';
77
import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
@@ -10,7 +10,7 @@ import { TeamTableConfiguration } from '../TeamTable';
1010
import TeamTable from '../TeamTable/TeamTable';
1111
import AssignmentModal from './AssignmentModal';
1212
import useTeamAssignment from './hooks/useTeamAssignment';
13-
import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
13+
import { TableHeader, TableRightActionHeader } from './styles';
1414

1515
export interface TeamsTableProps {
1616
workspaceId: string;
@@ -50,10 +50,6 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
5050
const [pageSize, setPageSize] = useState<number>(10);
5151
const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
5252
const [bulkSelect, setBulkSelect] = useState<boolean>(false);
53-
const [expanded, setExpanded] = useState<boolean>(false);
54-
const handleAccordionChange = () => {
55-
setExpanded(!expanded);
56-
};
5753
const [search, setSearch] = useState<string>('');
5854
const [isSearchExpanded, setIsSearchExpanded] = useState<boolean>(false);
5955

@@ -107,60 +103,51 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
107103
const theme = useTheme();
108104
return (
109105
<>
110-
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
111-
<AccordionSummary
112-
expandIcon={<ExpandMoreIcon />}
113-
sx={{ backgroundColor: 'background.paper' }}
106+
<TableHeader>
107+
<Button
108+
variant="contained"
109+
startIcon={<AddIcon />}
110+
onClick={teamAssignment.handleAssignModal}
111+
style={{ margin: '1rem' }}
114112
>
115-
<TableHeader>
116-
<Typography variant="body1" fontWeight={'bold'}>
117-
Assigned Teams
118-
</Typography>
119-
<TableRightActionHeader>
120-
<SearchBar
121-
onSearch={(value) => {
122-
setSearch(value);
123-
}}
124-
onClear={() => {
125-
setSearch('');
126-
}}
127-
expanded={isSearchExpanded}
128-
setExpanded={setIsSearchExpanded}
129-
placeholder="Search workspaces..."
130-
/>
131-
<CustomColumnVisibilityControl
132-
columns={tableProps.columns}
133-
customToolsProps={{
134-
columnVisibility: tableProps.columnVisibility,
135-
setColumnVisibility: tableProps.setColumnVisibility
136-
}}
137-
id={'teams-table'}
138-
/>
139-
<L5EditIcon
140-
onClick={teamAssignment.handleAssignModal}
141-
disabled={!isAssignTeamAllowed}
142-
title="Assign Teams"
143-
/>
144-
</TableRightActionHeader>
145-
</TableHeader>
146-
</AccordionSummary>
147-
<AccordionDetails style={{ padding: 0 }}>
148-
<TeamTable
149-
teams={teamsOfWorkspace?.teams}
150-
tableOptions={tableProps.tableOptions}
151-
columnVisibility={tableProps.columnVisibility}
152-
colViews={tableProps.colViews}
153-
tableCols={tableProps.tableCols}
154-
updateCols={tableProps.updateCols}
113+
Assign Teams
114+
</Button>
115+
<TableRightActionHeader>
116+
<SearchBar
117+
onSearch={(value) => {
118+
setSearch(value);
119+
}}
120+
onClear={() => {
121+
setSearch('');
122+
}}
123+
expanded={isSearchExpanded}
124+
setExpanded={setIsSearchExpanded}
125+
placeholder="Search workspaces..."
126+
/>
127+
<CustomColumnVisibilityControl
155128
columns={tableProps.columns}
156-
isRemoveFromTeamAllowed={isRemoveTeamFromWorkspaceAllowed}
157-
org_id={org_id}
158-
useGetUsersForOrgQuery={useGetUsersForOrgQuery}
159-
useNotificationHandlers={useNotificationHandlers}
160-
useRemoveUserFromTeamMutation={useRemoveUserFromTeamMutation}
129+
customToolsProps={{
130+
columnVisibility: tableProps.columnVisibility,
131+
setColumnVisibility: tableProps.setColumnVisibility
132+
}}
133+
id={'teams-table'}
161134
/>
162-
</AccordionDetails>
163-
</Accordion>
135+
</TableRightActionHeader>
136+
</TableHeader>
137+
<TeamTable
138+
teams={teamsOfWorkspace?.teams}
139+
tableOptions={tableProps.tableOptions}
140+
columnVisibility={tableProps.columnVisibility}
141+
colViews={tableProps.colViews}
142+
tableCols={tableProps.tableCols}
143+
updateCols={tableProps.updateCols}
144+
columns={tableProps.columns}
145+
isRemoveFromTeamAllowed={isRemoveTeamFromWorkspaceAllowed}
146+
org_id={org_id}
147+
useGetUsersForOrgQuery={useGetUsersForOrgQuery}
148+
useNotificationHandlers={useNotificationHandlers}
149+
useRemoveUserFromTeamMutation={useRemoveUserFromTeamMutation}
150+
/>
164151

165152
<AssignmentModal
166153
open={teamAssignment.assignModal}

‎src/custom/Workspaces/WorkspaceViewsTable.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
33
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
44
import React, { useState } from 'react';
55
import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '../../base';
6-
import { DeleteIcon, EnvironmentIcon } from '../../icons';
6+
import { DeleteIcon, EnvironmentIcon, ViewIcon } from '../../icons';
77
import { useTheme } from '../../theme';
88
import { NameDiv } from '../CatalogDesignTable/style';
99
import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -77,7 +77,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
7777
handleShowDetails
7878
}) => {
7979
const theme = useTheme();
80-
const [expanded, setExpanded] = useState<boolean>(false);
80+
const [expanded, setExpanded] = useState<boolean>(true);
8181
const handleAccordionChange = () => {
8282
setExpanded(!expanded);
8383
};
@@ -125,7 +125,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
125125
},
126126
{
127127
name: 'avatar_url',
128-
label: 'Owner',
128+
label: 'Author',
129129
options: {
130130
filter: false,
131131
sort: false,
@@ -313,9 +313,12 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
313313
}}
314314
>
315315
<TableHeader>
316-
<Typography variant="body1" fontWeight={'bold'}>
317-
Assigned Views
318-
</Typography>
316+
<Box display={'flex'} alignItems="center" gap={1} width="100%">
317+
<ViewIcon height="1.5rem" width="1.5rem" fill={theme.palette.icon.brand} />
318+
<Typography variant="body1" fontWeight={'bold'}>
319+
Assigned Views
320+
</Typography>
321+
</Box>
319322
<TableRightActionHeader>
320323
<SearchBar
321324
onSearch={(value) => {

0 commit comments

Comments
 (0)