feat: add support for views to workspace

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

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,19 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
   disableTransfer,
   isAssignAllowed,
   isRemoveAllowed,
-  helpText
+  helpText,
+  showViews,
+  nameViews,
+  assignableViewsData,
+  handleAssignedViewsData,
+  originalAssignedViewsData,
+  emptyStateViewsIcon,
+  handleAssignableViewsPage,
+  handleAssignedViewsPage,
+  originalLeftViewsCount,
+  originalRightViewsCount,
+  isAssignAllowedViews = false,
+  isRemoveAllowedViews = false
 }) => {
   return (
     <Modal
@@ -71,11 +99,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={isAssignAllowedViews}
+            rightPermission={isRemoveAllowedViews}
+            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

@@ -264,6 +264,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
         helpText={`Assign Designs to ${workspaceName}`}
         isAssignAllowed={isAssignAllowed}
         isRemoveAllowed={isRemoveAllowed}
+        showViews={false}
       />
       <GenericRJSFModal
         open={publishModal.open}

src/custom/Workspaces/hooks/useDesignAssignment.tsx

@@ -104,6 +104,11 @@ const useDesignAssignment = ({
     return { addedDesignsIds, removedDesignsIds };
   };
 
+  const isDesignsActivityOccurred = (allAssignedDesigns: Pattern[]): boolean => {
+    const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(allAssignedDesigns);
+    return addedDesignsIds.length > 0 || removedDesignsIds.length > 0;
+  };
+
   const handleAssignDesigns = async (): Promise<void> => {
     const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(assignedDesigns);
 
@@ -144,6 +149,7 @@ const useDesignAssignment = ({
     handleAssignedPage: handleAssignedPageDesign,
     handleAssign: handleAssignDesigns,
     handleAssignData: handleAssignDesignsData,
+    isActivityOccurred: isDesignsActivityOccurred,
     disableTransferButton,
     assignedItems: assignedDesigns
   };

src/custom/Workspaces/hooks/useViewsAssignment.tsx

@@ -0,0 +1,158 @@
+/* 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 isViewsActivityOccurred = (allViews: Pattern[]): boolean => {
+    const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(allViews);
+    return addedviewsIds.length > 0 || removedviewsIds.length > 0;
+  };
+
+  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,
+    isActivityOccurred: isViewsActivityOccurred,
+    handleAssignData: handleAssignviewsData,
+    disableTransferButton,
+    assignedItems: assignedviews
+  };
+};
+
+export default useViewAssignment;

src/custom/Workspaces/index.ts

@@ -2,16 +2,20 @@ import AssignmentModal from './AssignmentModal';
 import DesignTable from './DesignTable';
 import EnvironmentTable from './EnvironmentTable';
 import WorkspaceTeamsTable from './WorkspaceTeamsTable';
+import WorkspaceViewsTable from './WorkspaceViewsTable';
 import useDesignAssignment from './hooks/useDesignAssignment';
 import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
 import useTeamAssignment from './hooks/useTeamAssignment';
+import useViewAssignment from './hooks/useViewsAssignment';
 
 export {
   AssignmentModal,
   DesignTable,
   EnvironmentTable,
   WorkspaceTeamsTable,
+  WorkspaceViewsTable,
   useDesignAssignment,
   useEnvironmentAssignment,
-  useTeamAssignment
+  useTeamAssignment,
+  useViewAssignment
 };

src/custom/Workspaces/types.ts

@@ -8,6 +8,7 @@ export interface AssignmentHookResult<T> {
   handleAssignedPage: () => void;
   handleAssign: () => void;
   handleAssignData: (data: T[]) => void;
+  isActivityOccurred?: (allItems: T[]) => boolean;
   disableTransferButton: boolean;
   assignedItems: T[];
 }