feat: convert workspaces assignment modal into sistent component

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogDesignTable/index.ts

@@ -4,7 +4,7 @@ import { colViews, createDesignColumns } from './columnConfig';
 import {
   createDesignsColumnsConfig,
   colViews as designColumnsColViews
-} from './DesignColumnConfig';
+} from './DesignTableColumnConfig';
 export { TableVisibilityControl } from './TableVisibilityControl';
 export { ViewSwitch } from './ViewSwitch';
 export {

src/custom/TransferModal/TransferList/TransferList.tsx

@@ -46,7 +46,7 @@ export interface TransferListProps {
   leftPermission: boolean;
 }
 
-interface ListItemType {
+export interface ListItemType {
   id: number;
   name: string;
   kind: string | undefined;

src/custom/Workspaces/AssignmentModal.tsx

@@ -0,0 +1,87 @@
+import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
+import { TransferList } from '../TransferModal/TransferList';
+import { ListItemType } from '../TransferModal/TransferList/TransferList';
+import { ModalActionDiv } from './styles';
+
+interface AssignmentModalProps {
+  open: boolean;
+  onClose: (e?: React.MouseEvent) => void;
+  title: string;
+  headerIcon: JSX.Element;
+  name: string;
+  assignableData: ListItemType[];
+  handleAssignedData: (data: ListItemType[]) => void;
+  originalAssignedData: ListItemType[];
+  emptyStateIcon: JSX.Element;
+  handleAssignablePage: () => void;
+  handleAssignedPage: () => void;
+  originalLeftCount: number;
+  originalRightCount: number;
+  onAssign: () => void;
+  disableTransfer: boolean;
+  isAssignDisabled: boolean;
+  isRemoveDisabled: boolean;
+  helpText: string;
+}
+
+const AssignmentModal: React.FC<AssignmentModalProps> = ({
+  open,
+  onClose,
+  title,
+  headerIcon,
+  name,
+  assignableData,
+  handleAssignedData,
+  originalAssignedData,
+  emptyStateIcon,
+  handleAssignablePage,
+  handleAssignedPage,
+  originalLeftCount,
+  originalRightCount,
+  onAssign,
+  disableTransfer,
+  isAssignDisabled,
+  isRemoveDisabled,
+  helpText
+}) => {
+  return (
+    <Modal
+      open={open}
+      closeModal={onClose}
+      title={title}
+      headerIcon={headerIcon}
+      maxWidth="md"
+      reactNode={undefined}
+    >
+      <ModalBody>
+        <TransferList
+          name={name}
+          assignableData={assignableData}
+          assignedData={handleAssignedData}
+          originalAssignedData={originalAssignedData}
+          emptyStateIconLeft={emptyStateIcon}
+          emtyStateMessageLeft={`No ${name.toLowerCase()} available`}
+          emptyStateIconRight={emptyStateIcon}
+          emtyStateMessageRight={`No ${name.toLowerCase()} assigned`}
+          assignablePage={handleAssignablePage}
+          assignedPage={handleAssignedPage}
+          originalLeftCount={originalLeftCount}
+          originalRightCount={originalRightCount}
+          leftPermission={isAssignDisabled}
+          rightPermission={isRemoveDisabled}
+          transferComponentType={''}
+        />
+      </ModalBody>
+      <ModalFooter variant="filled" helpText={helpText}>
+        <ModalActionDiv>
+          <ModalButtonSecondary onClick={onClose}>Cancel</ModalButtonSecondary>
+          <ModalButtonPrimary onClick={onAssign} disabled={disableTransfer}>
+            Save
+          </ModalButtonPrimary>
+        </ModalActionDiv>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default AssignmentModal;

src/custom/Workspaces/index.ts

@@ -0,0 +1,3 @@
+import AssignmentModal from './AssignmentModal';
+
+export { AssignmentModal };

src/custom/Workspaces/styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '../../theme';
+
+export const ModalActionDiv = styled('div')({
+  display: 'flex',
+  gap: '1rem'
+});

src/custom/Workspaces/types.ts

@@ -136,4 +136,5 @@ export type {
 export * from './CatalogDesignTable';
 export * from './CatalogDetail';
 export * from './Dialog';
+export * from './Workspaces';
 export * from './permissions';