Skip to content

Commit bbb0588

Browse files
amitamrutiyaamitamrutiya
committed
feat: update AssignmentModal and EnvironmentTable to use isAssignAllowed
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 487e4fd commit bbb0588

4 files changed

Lines changed: 102 additions & 76 deletions

File tree

‎src/custom/Workspaces/AssignmentModal.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ interface AssignmentModalProps {
1919
originalRightCount: number;
2020
onAssign: () => void;
2121
disableTransfer: boolean;
22-
isAssignDisabled: boolean;
23-
isRemoveDisabled: boolean;
22+
isAssignAllowed: boolean;
23+
isRemoveAllowed: boolean;
2424
helpText: string;
2525
}
2626

@@ -40,8 +40,8 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
4040
originalRightCount,
4141
onAssign,
4242
disableTransfer,
43-
isAssignDisabled,
44-
isRemoveDisabled,
43+
isAssignAllowed,
44+
isRemoveAllowed,
4545
helpText
4646
}) => {
4747
return (
@@ -67,8 +67,8 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
6767
assignedPage={handleAssignedPage}
6868
originalLeftCount={originalLeftCount}
6969
originalRightCount={originalRightCount}
70-
leftPermission={isAssignDisabled}
71-
rightPermission={isRemoveDisabled}
70+
leftPermission={isAssignAllowed}
71+
rightPermission={isRemoveAllowed}
7272
transferComponentType={''}
7373
/>
7474
</ModalBody>

‎src/custom/Workspaces/DesignTable.tsx‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'
1616
import { useWindowDimensions } from '../Helpers/Dimension';
1717
import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
1818
import PromptComponent from '../Prompt';
19+
import SearchBar from '../SearchBar';
1920
import AssignmentModal from './AssignmentModal';
2021
import EditButton from './EditButton';
2122
import useDesignAssignment from './hooks/useDesignAssignment';
2223
import { TableHeader, TableRightActionHeader } from './styles';
23-
import { ColumnVisibility } from './types';
2424

2525
export interface DesignTableProps {
2626
workspaceId: string;
@@ -48,14 +48,15 @@ export interface DesignTableProps {
4848
modalRef: React.RefObject<any>
4949
) => void;
5050
handleShowDetails: (designId: string, designName: string) => void;
51-
isDownloadDisabled: boolean;
52-
isCopyLinkDisabled: boolean;
53-
isDeleteDisabled: boolean;
54-
isPublishDisabled: boolean;
55-
isUnpublishDisabled: boolean;
5651
GenericRJSFModal: any;
57-
isAssignDisabled: boolean;
58-
isRemoveDisabled: boolean;
52+
isDownloadAllowed: boolean;
53+
isCopyLinkAllowed: boolean;
54+
isDeleteAllowed: boolean;
55+
isPublishAllowed: boolean;
56+
isUnpublishAllowed: boolean;
57+
isAssignAllowed: boolean;
58+
isRemoveAllowed: boolean;
59+
setDesignSearch: (value: string) => void;
5960
}
6061

6162
export interface PublishModalState {
@@ -83,17 +84,18 @@ const DesignTable: React.FC<DesignTableProps> = ({
8384
handleUnpublishModal,
8485
handleWorkspaceDesignDeleteModal,
8586
publishModalHandler,
86-
isCopyLinkDisabled,
87-
isDeleteDisabled,
88-
isDownloadDisabled,
89-
isPublishDisabled,
90-
isUnpublishDisabled,
87+
isCopyLinkAllowed,
88+
isDeleteAllowed,
89+
isDownloadAllowed,
90+
isPublishAllowed,
91+
isUnpublishAllowed,
9192
useAssignDesignToWorkspaceMutation,
9293
useUnassignDesignFromWorkspaceMutation,
9394
GenericRJSFModal,
94-
isAssignDisabled,
95-
isRemoveDisabled,
96-
useGetWorkspaceDesignsQuery
95+
isAssignAllowed,
96+
isRemoveAllowed,
97+
useGetWorkspaceDesignsQuery,
98+
setDesignSearch
9799
}) => {
98100
const [publishModal, setPublishModal] = useState<PublishModalState>({
99101
open: false,
@@ -103,6 +105,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
103105
const [page, setPage] = useState<number>(0);
104106
const [pageSize, setPageSize] = useState<number>(10);
105107
const [sortOrder, setSortOrder] = useState<string>('');
108+
const [isSearchExpanded, setIsSearchExpanded] = useState(false);
106109

107110
const handlePublishModal = (pattern: Pattern): void => {
108111
const result = publishModalHandler(pattern);
@@ -119,11 +122,13 @@ const DesignTable: React.FC<DesignTableProps> = ({
119122
handleCopyUrl,
120123
handleClone,
121124
handleShowDetails,
122-
isDownloadDisabled,
123-
isCopyLinkDisabled,
124-
isDeleteDisabled,
125-
isPublishDisabled,
126-
isUnpublishDisabled
125+
isCopyLinkAllowed,
126+
isDeleteAllowed,
127+
isDownloadAllowed,
128+
isPublishAllowed,
129+
isUnpublishAllowed,
130+
isFromWorkspaceTable: true,
131+
isRemoveAllowed
127132
});
128133

129134
const [publishSchema, setPublishSchema] = useState<{
@@ -135,9 +140,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
135140
});
136141

137142
const { width } = useWindowDimensions();
138-
const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(() => {
143+
const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
139144
const showCols = updateVisibleColumns(designColumnsColViews, width);
140-
const initialVisibility: ColumnVisibility = {};
145+
const initialVisibility: Record<string, boolean> = {};
141146
columns.forEach((col) => {
142147
initialVisibility[col.name] = showCols[col.name];
143148
});
@@ -167,19 +172,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
167172
fetchSchema();
168173
}, [meshModelModelsData]);
169174

170-
const {
171-
disableTransferButton,
172-
assignModal,
173-
handleAssignModalClose,
174-
handleAssignModal,
175-
assignedItems,
176-
data,
177-
workspaceData,
178-
handleAssignablePage,
179-
handleAssignedPage,
180-
handleAssign,
181-
handleAssignData
182-
} = useDesignAssignment({
175+
const designAssignment = useDesignAssignment({
183176
workspaceId,
184177
useAssignDesignToWorkspaceMutation,
185178
useUnassignDesignFromWorkspaceMutation,
@@ -192,6 +185,17 @@ const DesignTable: React.FC<DesignTableProps> = ({
192185
Assigned Designs
193186
</Typography>
194187
<TableRightActionHeader>
188+
<SearchBar
189+
onSearch={(value) => {
190+
setDesignSearch(value);
191+
}}
192+
onClear={() => {
193+
setDesignSearch('');
194+
}}
195+
expanded={isSearchExpanded}
196+
setExpanded={setIsSearchExpanded}
197+
placeholder="Search designs..."
198+
/>
195199
<CustomColumnVisibilityControl
196200
columns={columns}
197201
customToolsProps={{
@@ -200,7 +204,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
200204
}}
201205
id={'catalog-table'}
202206
/>
203-
<EditButton onClick={handleAssignModal} disabled={!isAssignDisabled} />
207+
<EditButton onClick={designAssignment.handleAssignModal} disabled={!isAssignAllowed} />
204208
</TableRightActionHeader>
205209
</TableHeader>
206210
);
@@ -234,28 +238,29 @@ const DesignTable: React.FC<DesignTableProps> = ({
234238
handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
235239
}
236240
filter={'my-designs'}
241+
setSearch={setDesignSearch}
237242
/>
238243
</AccordionDetails>
239244
</Accordion>
240245
<AssignmentModal
241-
open={assignModal}
242-
onClose={handleAssignModalClose}
246+
open={designAssignment.assignModal}
247+
onClose={designAssignment.handleAssignModalClose}
243248
title={`Assign Designs to ${workspaceName}`}
244249
headerIcon={<DesignIcon height="40" width="40" secondaryFill="white" />}
245250
name="Designs"
246-
assignableData={data}
247-
handleAssignedData={handleAssignData}
248-
originalAssignedData={workspaceData}
251+
assignableData={designAssignment.data}
252+
handleAssignedData={designAssignment.handleAssignData}
253+
originalAssignedData={designAssignment.workspaceData}
249254
emptyStateIcon={<DesignIcon height="5rem" width="5rem" secondaryFill={'#808080'} />}
250-
handleAssignablePage={handleAssignablePage}
251-
handleAssignedPage={handleAssignedPage}
252-
originalLeftCount={data?.length}
253-
originalRightCount={assignedItems?.length}
254-
onAssign={handleAssign}
255-
disableTransfer={disableTransferButton}
255+
handleAssignablePage={designAssignment.handleAssignablePage}
256+
handleAssignedPage={designAssignment.handleAssignedPage}
257+
originalLeftCount={designAssignment.data?.length}
258+
originalRightCount={designAssignment.assignedItems?.length}
259+
onAssign={designAssignment.handleAssign}
260+
disableTransfer={designAssignment.disableTransferButton}
256261
helpText={`Assign Designs to ${workspaceName}`}
257-
isAssignDisabled={isAssignDisabled}
258-
isRemoveDisabled={isRemoveDisabled}
262+
isAssignAllowed={isAssignAllowed}
263+
isRemoveAllowed={isRemoveAllowed}
259264
/>
260265
<GenericRJSFModal
261266
open={publishModal.open}

‎src/custom/Workspaces/EnvironmentTable.tsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ import {
1414
updateVisibleColumns
1515
} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
1616
import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable';
17+
import SearchBar from '../SearchBar';
18+
import { TooltipIcon } from '../TooltipIconButton';
1719
import AssignmentModal from './AssignmentModal';
1820
import EditButton from './EditButton';
19-
import TooltipIcon from './TooltipIcon';
2021
import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
2122
import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles';
22-
import { ColumnVisibility } from './types';
2323

2424
interface EnvironmentTableProps {
2525
workspaceId: string;
2626
workspaceName: string;
2727
useGetEnvironmentsOfWorkspaceQuery: any;
2828
useUnassignEnvironmentFromWorkspaceMutation: any;
2929
useAssignEnvironmentToWorkspaceMutation: any;
30-
isRemoveDisabled: boolean;
31-
isAssignDisabled: boolean;
30+
isRemoveAllowed: boolean;
31+
isAssignAllowed: boolean;
3232
}
3333

3434
const colViews: ColView[] = [
@@ -56,23 +56,26 @@ export const ResizableDescriptionCell = ({ value }: { value: string }) => (
5656
const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
5757
workspaceId,
5858
workspaceName,
59-
isRemoveDisabled,
59+
isRemoveAllowed,
6060
useGetEnvironmentsOfWorkspaceQuery,
6161
useUnassignEnvironmentFromWorkspaceMutation,
6262
useAssignEnvironmentToWorkspaceMutation,
63-
isAssignDisabled
63+
isAssignAllowed
6464
}) => {
6565
const [expanded, setExpanded] = useState<boolean>(true);
6666
const handleAccordionChange = () => {
6767
setExpanded(!expanded);
6868
};
69+
const [search, setSearch] = useState('');
70+
const [isSearchExpanded, setIsSearchExpanded] = useState(false);
6971
const [page, setPage] = useState<number>(0);
7072
const [pageSize, setPageSize] = useState<number>(10);
7173
const [sortOrder, setSortOrder] = useState<string>('');
7274
const { data: environmentsOfWorkspace } = useGetEnvironmentsOfWorkspaceQuery({
7375
workspaceId,
7476
page: page,
7577
pageSize: pageSize,
78+
search: search,
7679
order: sortOrder
7780
});
7881
const { width } = useWindowDimensions();
@@ -148,26 +151,20 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
148151
sort: false,
149152
searchable: false,
150153
customBodyRender: (_: any, tableMeta: MUIDataTableMeta) => (
151-
<IconWrapper disabled={isRemoveDisabled}>
154+
<IconWrapper disabled={!isRemoveAllowed}>
152155
<TooltipIcon
153156
id={`delete_team-${tableMeta.rowIndex}`}
154157
title="Remove Environment"
155158
onClick={() => {
156-
!isRemoveDisabled &&
159+
isRemoveAllowed &&
157160
unassignEnvironmentFromWorkspace({
158161
workspaceId,
159162
environmentId: tableMeta.rowData[0]
160163
});
161164
}}
162165
iconType="delete"
163166
>
164-
<DeleteIcon
165-
height={28}
166-
width={28}
167-
style={{
168-
color: CHARCOAL
169-
}}
170-
/>
167+
<DeleteIcon height={28} width={28} fill={CHARCOAL} />
171168
</TooltipIcon>
172169
</IconWrapper>
173170
)
@@ -182,9 +179,9 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
182179
useAssignEnvironmentToWorkspaceMutation
183180
});
184181

185-
const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(() => {
182+
const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
186183
const showCols = updateVisibleColumns(colViews, width);
187-
const initialVisibility: ColumnVisibility = {};
184+
const initialVisibility: Record<string, boolean> = {};
188185
columns.forEach((col) => {
189186
initialVisibility[col.name] = showCols[col.name];
190187
});
@@ -214,6 +211,9 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
214211
case 'changeRowsPerPage':
215212
setPageSize(tableState.rowsPerPage);
216213
break;
214+
case 'search':
215+
setSearch(tableState.searchText !== null ? tableState.searchText : '');
216+
break;
217217
case 'sort':
218218
if (sortInfo.length == 2) {
219219
if (sortInfo[1] === 'ascending') {
@@ -245,6 +245,17 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
245245
Assigned Environments
246246
</Typography>
247247
<TableRightActionHeader>
248+
<SearchBar
249+
onSearch={(value) => {
250+
setSearch(value);
251+
}}
252+
onClear={() => {
253+
setSearch('');
254+
}}
255+
expanded={isSearchExpanded}
256+
setExpanded={setIsSearchExpanded}
257+
placeholder="Search workspaces..."
258+
/>
248259
<CustomColumnVisibilityControl
249260
columns={columns}
250261
customToolsProps={{
@@ -255,7 +266,7 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
255266
/>
256267
<EditButton
257268
onClick={environmentAssignment.handleAssignModal}
258-
disabled={isAssignDisabled}
269+
disabled={!isAssignAllowed}
259270
/>
260271
</TableRightActionHeader>
261272
</TableHeader>
@@ -290,8 +301,8 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
290301
onAssign={environmentAssignment.handleAssign}
291302
disableTransfer={environmentAssignment.disableTransferButton}
292303
helpText={`Assign Environments to ${workspaceName}`}
293-
isAssignDisabled={!isAssignDisabled}
294-
isRemoveDisabled={!isRemoveDisabled}
304+
isAssignAllowed={isAssignAllowed}
305+
isRemoveAllowed={isRemoveAllowed}
295306
/>
296307
</SistentThemeProvider>
297308
);

0 commit comments

Comments
 (0)