Add support for views in transferList

src/custom/Modal/index.tsx

@@ -51,6 +51,7 @@ const StyledDialog = styled(Dialog)`
   && {
     .MuiDialog-paper {
       border-radius: 0.5rem;
+      max-height: 62vh;
     }
   }
 `;

src/custom/TransferModal/TransferList/TransferList.tsx

@@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme
 }
 
 export interface TransferListProps {
-  name: string;
+  name?: string;
   assignableData: ListItemType[];
   assignedData: (data: ListItemType[]) => void;
   originalAssignedData: ListItemType[];

src/custom/Workspaces/AssignmentModal.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Divider } from '../../base';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import { TransferList } from '../TransferModal/TransferList';
 import { ModalActionDiv } from './styles';
@@ -22,6 +23,21 @@ interface AssignmentModalProps {
   isAssignAllowed: boolean;
   isRemoveAllowed: boolean;
   helpText: string;
+  showViews?: boolean;
+  nameViews?: string;
+  assignableViewsData?: any[];
+  handleAssignedViewsData?: (data: any) => void;
+  originalAssignedViewsData?: any[];
+
+  emptyStateViewsIcon?: JSX.Element;
+  handleAssignableViewsPage?: () => void;
+  handleAssignedViewsPage?: () => void;
+  originalLeftViewsCount?: number;
+  originalRightViewsCount?: number;
+  onAssignViews?: () => void;
+  disableTransferViews?: boolean;
+  isAssignAllowedViews?: boolean;
+  isRemoveAllowedViews?: boolean;
 }
 
 const AssignmentModal: React.FC<AssignmentModalProps> = ({
@@ -42,7 +58,21 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
   disableTransfer,
   isAssignAllowed,
   isRemoveAllowed,
-  helpText
+  helpText,
+  showViews,
+  nameViews,
+  assignableViewsData,
+  handleAssignedViewsData,
+  originalAssignedViewsData,
+  emptyStateViewsIcon,
+  handleAssignableViewsPage,
+  handleAssignedViewsPage,
+  originalLeftViewsCount,
+  originalRightViewsCount,
+  // onAssignViews,
+  disableTransferViews
+  // isAssignAllowedViews,
+  // isRemoveAllowedViews
 }) => {
   return (
     <Modal
@@ -71,11 +101,38 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
           rightPermission={isRemoveAllowed}
           transferComponentType={''}
         />
+        <Divider
+          style={{
+            margin: 'auto',
+            width: '80%',
+            marginTop: '22px',
+            marginBottom: '22px'
+          }}
+        />
+        {showViews && (
+          <TransferList
+            name={nameViews}
+            assignableData={assignableViewsData || []}
+            assignedData={handleAssignedViewsData || (() => {})}
+            originalAssignedData={originalAssignedViewsData || []}
+            emptyStateIconLeft={emptyStateViewsIcon || <></>}
+            emtyStateMessageLeft={`No views available`}
+            emptyStateIconRight={emptyStateViewsIcon || <></>}
+            emtyStateMessageRight={`No views assigned`}
+            assignablePage={handleAssignableViewsPage || (() => {})}
+            assignedPage={handleAssignedViewsPage || (() => {})}
+            originalLeftCount={originalLeftViewsCount ?? 0}
+            originalRightCount={originalRightViewsCount ?? 0}
+            leftPermission={true}
+            rightPermission={true}
+            transferComponentType={''}
+          />
+        )}
       </ModalBody>
       <ModalFooter variant="filled" helpText={helpText}>
         <ModalActionDiv>
           <ModalButtonSecondary onClick={onClose}>Cancel</ModalButtonSecondary>
-          <ModalButtonPrimary onClick={onAssign} disabled={disableTransfer}>
+          <ModalButtonPrimary onClick={onAssign} disabled={disableTransfer || disableTransferViews}>
             Save
           </ModalButtonPrimary>
         </ModalActionDiv>

src/custom/Workspaces/DesignTable.tsx

@@ -20,6 +20,7 @@ import SearchBar from '../SearchBar';
 import AssignmentModal from './AssignmentModal';
 import EditButton from './EditButton';
 import useDesignAssignment from './hooks/useDesignAssignment';
+import useViewAssignment from './hooks/useViewsAssignment';
 import { TableHeader, TableRightActionHeader } from './styles';
 
 export interface DesignTableProps {
@@ -57,6 +58,10 @@ export interface DesignTableProps {
   isAssignAllowed: boolean;
   isRemoveAllowed: boolean;
   setDesignSearch: (value: string) => void;
+  showViews: boolean;
+  useGetWorkspaceViewsQuery: any;
+  useAssignviewToWorkspaceMutation: any;
+  useUnassignviewFromWorkspaceMutation: any;
 }
 
 export interface PublishModalState {
@@ -95,7 +100,11 @@ const DesignTable: React.FC<DesignTableProps> = ({
   isAssignAllowed,
   isRemoveAllowed,
   useGetWorkspaceDesignsQuery,
-  setDesignSearch
+  useGetWorkspaceViewsQuery,
+  setDesignSearch,
+  showViews,
+  useAssignviewToWorkspaceMutation,
+  useUnassignviewFromWorkspaceMutation
 }) => {
   const [publishModal, setPublishModal] = useState<PublishModalState>({
     open: false,
@@ -179,6 +188,13 @@ const DesignTable: React.FC<DesignTableProps> = ({
     useGetDesignsOfWorkspaceQuery: useGetWorkspaceDesignsQuery
   });
 
+  const viewsAssignment = useViewAssignment({
+    workspaceId,
+    useAssignviewToWorkspaceMutation,
+    useUnassignviewFromWorkspaceMutation,
+    useGetviewsOfWorkspaceQuery: useGetWorkspaceViewsQuery
+  });
+
   const tableHeaderContent = (
     <TableHeader>
       <Typography variant="h6" fontWeight={'bold'}>
@@ -256,11 +272,25 @@ const DesignTable: React.FC<DesignTableProps> = ({
         handleAssignedPage={designAssignment.handleAssignedPage}
         originalLeftCount={designAssignment.data?.length}
         originalRightCount={designAssignment.assignedItems?.length}
-        onAssign={designAssignment.handleAssign}
+        onAssign={designAssignment.handleAssign || viewsAssignment.handleAssign}
         disableTransfer={designAssignment.disableTransferButton}
         helpText={`Assign Designs to ${workspaceName}`}
         isAssignAllowed={isAssignAllowed}
         isRemoveAllowed={isRemoveAllowed}
+        showViews={showViews}
+        nameViews="Views"
+        assignableViewsData={viewsAssignment.data}
+        handleAssignedViewsData={viewsAssignment.handleAssignData}
+        originalAssignedViewsData={viewsAssignment.workspaceData}
+        emptyStateViewsIcon={<DesignIcon height="5rem" width="5rem" secondaryFill={'#808080'} />}
+        handleAssignableViewsPage={viewsAssignment.handleAssignablePage}
+        handleAssignedViewsPage={viewsAssignment.handleAssignedPage}
+        originalLeftViewsCount={viewsAssignment.data?.length}
+        originalRightViewsCount={viewsAssignment.assignedItems?.length}
+        onAssignViews={viewsAssignment.handleAssign}
+        disableTransferViews={viewsAssignment.disableTransferButton}
+        // isAssignAllowedViews={isAssignAllowed}
+        // isRemoveAllowedViews={isRemoveAllowed}
       />
       <GenericRJSFModal
         open={publishModal.open}

src/custom/Workspaces/hooks/useViewsAssignment.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react';
+import { Pattern } from '../../CustomCatalog/CustomCard';
+import { withDefaultPageArgs } from '../../PerformersSection/PerformersSection';
+import { AssignmentHookResult } from '../types';
+
+interface AddedAndRemovedViews {
+  addedviewsIds: string[];
+  removedviewsIds: string[];
+}
+
+interface useViewAssignmentProps {
+  workspaceId: string;
+  useGetviewsOfWorkspaceQuery: any;
+  useAssignviewToWorkspaceMutation: any;
+  useUnassignviewFromWorkspaceMutation: any;
+}
+
+const useViewAssignment = ({
+  workspaceId,
+  useGetviewsOfWorkspaceQuery,
+  useAssignviewToWorkspaceMutation,
+  useUnassignviewFromWorkspaceMutation
+}: useViewAssignmentProps): AssignmentHookResult<Pattern> => {
+  const [viewsPage, setviewsPage] = useState<number>(0);
+  const [viewsData, setviewsData] = useState<Pattern[]>([]);
+  const viewsPageSize = 25;
+  const [viewsOfWorkspacePage, setviewsOfWorkspacePage] = useState<number>(0);
+  const [workspaceviewsData, setWorkspaceviewsData] = useState<Pattern[]>([]);
+  const [assignviewModal, setAssignviewModal] = useState<boolean>(false);
+  const [skipviews, setSkipviews] = useState<boolean>(true);
+  const [disableTransferButton, setDisableTransferButton] = useState<boolean>(true);
+  const [assignedviews, setAssignedviews] = useState<Pattern[]>([]);
+
+  const { data: views } = useGetviewsOfWorkspaceQuery(
+    withDefaultPageArgs({
+      workspaceId,
+      page: viewsPage,
+      pagesize: viewsPageSize,
+      filter: '{"assigned":false}'
+    }),
+    {
+      skip: skipviews
+    }
+  );
+
+  const { data: viewsOfWorkspace } = useGetviewsOfWorkspaceQuery(
+    withDefaultPageArgs({
+      workspaceId,
+      page: viewsOfWorkspacePage,
+      pagesize: viewsPageSize
+    }),
+    {
+      skip: skipviews
+    }
+  );
+
+  const [assignviewToWorkspace] = useAssignviewToWorkspaceMutation();
+  const [unassignviewFromWorkspace] = useUnassignviewFromWorkspaceMutation();
+
+  useEffect(() => {
+    const viewsDataRtk = views?.views ? views.views : [];
+    setviewsData((prevData) => [...prevData, ...viewsDataRtk]);
+  }, [views]);
+
+  useEffect(() => {
+    const viewsOfWorkspaceDataRtk = viewsOfWorkspace?.views ? viewsOfWorkspace.views : [];
+    setWorkspaceviewsData((prevData) => [...prevData, ...viewsOfWorkspaceDataRtk]);
+  }, [viewsOfWorkspace]);
+
+  const handleAssignviewModal = (e?: React.MouseEvent): void => {
+    e?.stopPropagation();
+    setAssignviewModal(true);
+    setSkipviews(false);
+  };
+
+  const handleAssignviewModalClose = (e?: React.MouseEvent): void => {
+    e?.stopPropagation();
+    setAssignviewModal(false);
+    setSkipviews(true);
+  };
+
+  const handleAssignablePageview = (): void => {
+    const pagesCount = Math.ceil(Number(views?.total_count) / viewsPageSize);
+    if (viewsPage < pagesCount - 1) {
+      setviewsPage((prevviewsPage) => prevviewsPage + 1);
+    }
+  };
+
+  const handleAssignedPageview = (): void => {
+    const pagesCount = Math.ceil(Number(viewsOfWorkspace?.total_count) / viewsPageSize);
+    if (viewsOfWorkspacePage < pagesCount - 1) {
+      setviewsOfWorkspacePage((prevPage) => prevPage + 1);
+    }
+  };
+
+  const getAddedAndRemovedviews = (allAssignedviews: Pattern[]): AddedAndRemovedViews => {
+    const originalviewsIds = workspaceviewsData.map((view) => view.id);
+    const updatedviewsIds = allAssignedviews.map((view) => view.id);
+
+    const addedviewsIds = updatedviewsIds.filter((id) => !originalviewsIds.includes(id));
+    const removedviewsIds = originalviewsIds.filter((id) => !updatedviewsIds.includes(id));
+
+    return { addedviewsIds, removedviewsIds };
+  };
+
+  const handleAssignviews = async (): Promise<void> => {
+    const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(assignedviews);
+
+    addedviewsIds.map((id) =>
+      assignviewToWorkspace({
+        workspaceId,
+        viewId: id
+      }).unwrap()
+    );
+
+    removedviewsIds.map((id) =>
+      unassignviewFromWorkspace({
+        workspaceId,
+        viewId: id
+      }).unwrap()
+    );
+
+    setviewsData([]);
+    setWorkspaceviewsData([]);
+    setviewsPage(0);
+    setviewsOfWorkspacePage(0);
+    handleAssignviewModalClose();
+  };
+
+  const handleAssignviewsData = (updatedAssignedData: Pattern[]): void => {
+    const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(updatedAssignedData);
+    setDisableTransferButton(!(addedviewsIds.length > 0 || removedviewsIds.length > 0));
+    setAssignedviews(updatedAssignedData);
+  };
+
+  return {
+    data: viewsData,
+    workspaceData: workspaceviewsData,
+    assignModal: assignviewModal,
+    handleAssignModal: handleAssignviewModal,
+    handleAssignModalClose: handleAssignviewModalClose,
+    handleAssignablePage: handleAssignablePageview,
+    handleAssignedPage: handleAssignedPageview,
+    handleAssign: handleAssignviews,
+    handleAssignData: handleAssignviewsData,
+    disableTransferButton,
+    assignedItems: assignedviews
+  };
+};
+
+export default useViewAssignment;

src/custom/Workspaces/index.ts

@@ -5,6 +5,7 @@ import WorkspaceTeamsTable from './WorkspaceTeamsTable';
 import useDesignAssignment from './hooks/useDesignAssignment';
 import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
 import useTeamAssignment from './hooks/useTeamAssignment';
+import useViewAssignment from './hooks/useViewsAssignment';
 
 export {
   AssignmentModal,
@@ -13,5 +14,6 @@ export {
   WorkspaceTeamsTable,
   useDesignAssignment,
   useEnvironmentAssignment,
-  useTeamAssignment
+  useTeamAssignment,
+  useViewAssignment
 };