Refactor/upsert unit and project modal frameworks

src/renderer/components/blocks/modals/UpsertProjectModal.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ComponentCenteredSpinner, Modal } from '@/components';
+import { useWildCardUrlHash } from '@/hooks';
+import { useGetProjectQuery } from '@/api';
+import { FormattedMessage } from 'react-intl';
+
+interface UpsertModalProps {
+  onClose: () => void;
+}
+
+const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalProps) => {
+  const [, createProjectModalActive] = useWildCardUrlHash('create-project');
+  const [projectUpsertFragment] = useWildCardUrlHash('edit-project');
+  const warehouseProjectId = projectUpsertFragment.replace('edit-project-', '');
+  const { data: projectData, isLoading: projectLoading } = useGetProjectQuery({ warehouseProjectId });
+
+  const ModalHeader: React.FC = () => {
+    return (
+      <Modal.Header>
+        {createProjectModalActive ? <FormattedMessage id="create-project" /> : <FormattedMessage id="edit-project" />}
+      </Modal.Header>
+    );
+  };
+
+  if (projectLoading) {
+    return (
+      <Modal show={true} onClose={onClose}>
+        <ModalHeader />
+        <Modal.Body>
+          <ComponentCenteredSpinner />
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal show={true} onClose={onClose}>
+      <ModalHeader />
+      <Modal.Body>
+        <>
+          {createProjectModalActive || !projectData ? (
+            <>
+              <p>todo blank project details form</p>
+            </>
+          ) : (
+            <>
+              <p>todo edit project details for project id {projectData?.projectId}</p>
+            </>
+          )}
+        </>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export { UpsertProjectModal };

src/renderer/components/blocks/modals/UpsertUnitModal.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ComponentCenteredSpinner, Modal } from '@/components';
+import { useWildCardUrlHash } from '@/hooks';
+import { useGetUnitQuery } from '@/api';
+import { FormattedMessage } from 'react-intl';
+
+interface UpsertModalProps {
+  onClose: () => void;
+}
+
+const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalProps) => {
+  const [, createUnitModalActive] = useWildCardUrlHash('create-unit');
+  const [UnitUpsertFragment] = useWildCardUrlHash('edit-unit');
+  const warehouseUnitId = UnitUpsertFragment.replace('edit-unit-', '');
+  const { data: UnitData, isLoading: UnitLoading } = useGetUnitQuery({ warehouseUnitId });
+
+  const ModalHeader: React.FC = () => {
+    return (
+      <Modal.Header>
+        {createUnitModalActive ? <FormattedMessage id="create-unit" /> : <FormattedMessage id="edit-unit" />}
+      </Modal.Header>
+    );
+  };
+
+  if (UnitLoading) {
+    return (
+      <Modal show={true} onClose={onClose}>
+        <ModalHeader />
+        <Modal.Body>
+          <ComponentCenteredSpinner />
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal show={true} onClose={onClose}>
+      <ModalHeader />
+      <Modal.Body>
+        <>
+          {createUnitModalActive || !UnitData ? (
+            <>
+              <p>todo blank Unit details form</p>
+            </>
+          ) : (
+            <>
+              <p>todo edit Unit details for Unit id {UnitData?.warehouseUnitId}</p>
+            </>
+          )}
+        </>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export { UpsertUnitModal };

src/renderer/components/blocks/modals/index.ts

@@ -3,3 +3,5 @@ export * from './CreateOrganizationModal';
 export * from './ConnectModal';
 export * from './UnitModal';
 export * from './StagingDiffModal';
+export * from './UpsertProjectModal';
+export * from './UpsertUnitModal';

src/renderer/components/blocks/tabs/CommittedProjectsTab.tsx

@@ -15,7 +15,7 @@ const CommittedProjectsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoa
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
   const [order, setOrder] = useQueryParamState('order', undefined);
   const handleSetOrder = useColumnOrderHandler(order, setOrder);
-  const [projectDetailsFragment, projectDetailsModalActive, setProjectModalActive] = useWildCardUrlHash('project-');
+  const [projectDetailsFragment, projectDetailsModalActive, setProjectModalActive] = useWildCardUrlHash('project');
   const {
     data: projectsData,
     isLoading: projectsLoading,
@@ -53,6 +53,7 @@ const CommittedProjectsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoa
           isLoading={projectsLoading}
           currentPage={Number(currentPage)}
           onPageChange={handlePageChange}
+          onRowClick={(row) => setProjectModalActive(true, row.warehouseProjectId)}
           setOrder={handleSetOrder}
           order={order}
           totalPages={projectsData.pageCount}

src/renderer/components/blocks/tabs/CommittedUnitsTab.tsx

@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
-import { SkeletonTable, UnitsListTable } from '@/components';
+import { SkeletonTable, UnitModal, UnitsListTable } from '@/components';
 import React, { useCallback, useEffect } from 'react';
 import { useGetUnitsQuery } from '@/api';
-import { useColumnOrderHandler, useQueryParamState } from '@/hooks';
+import { useColumnOrderHandler, useQueryParamState, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 
 interface PageTabProps {
@@ -15,8 +15,7 @@ const CommittedUnitsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoadin
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
   const [order, setOrder] = useQueryParamState('order', undefined);
   const handleSetOrder = useColumnOrderHandler(order, setOrder);
-  //todo: uncomment when units modal added
-  //const [unitDetailsFragment, unitDetailsModalActive, setUnitsModalActive] = useWildCardUrlHash('unit-');
+  const [unitDetailsFragment, unitDetailsModalActive, setUnitsModalActive] = useWildCardUrlHash('unit');
   const {
     data: unitsData,
     isLoading: unitsLoading,
@@ -53,14 +52,20 @@ const CommittedUnitsTab: React.FC<PageTabProps> = ({ orgUid, search, setIsLoadin
           data={unitsData?.data || []}
           isLoading={unitsLoading}
           currentPage={Number(currentPage)}
+          onRowClick={(row) => setUnitsModalActive(true, row.warehouseUnitId)}
           onPageChange={handlePageChange}
           setOrder={handleSetOrder}
           order={order}
           totalPages={unitsData.pageCount}
           totalCount={unitsData.pageCount * 10}
         />
       )}
-      {/* todo: add units modal here */}
+      {unitDetailsModalActive && (
+        <UnitModal
+          onClose={() => setUnitsModalActive(false)}
+          warehouseUnitId={unitDetailsFragment.replace('unit-', '')}
+        />
+      )}
     </>
   );
 };

src/renderer/pages/MyProjectsPage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState } from '@/hooks';
+import { useQueryParamState, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -12,6 +12,7 @@ import {
   StagingTableTab,
   SyncIndicator,
   Tabs,
+  UpsertProjectModal,
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
@@ -37,6 +38,8 @@ const MyProjectsPage: React.FC = () => {
   const navigate = useNavigate();
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
+  const [, editProjectModalActive, setEditProjectModalActive] = useWildCardUrlHash('edit-project');
+  const [, createProjectModalActive, setCreateProjectModalActive] = useWildCardUrlHash('create-project');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
@@ -91,59 +94,67 @@ const MyProjectsPage: React.FC = () => {
     [setSearch, debounce],
   );
 
+  const handleCloseUpsertModal = () => {
+    setEditProjectModalActive(false);
+    setCreateProjectModalActive(false);
+  };
+
   if (!myOrganization || organizationsListLoading) {
     return <ComponentCenteredSpinner />;
   }
 
   return (
-    <div className="m-2">
-      {contentsLoading && <IndeterminateProgressOverlay />}
-      <div className="flex flex-col md:flex-row gap-6 my-2.5 relative z-30 items-center">
-        <Button disabled={contentsLoading}>
-          <FormattedMessage id="create-project" />
-        </Button>
-        {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
-        {orgUid && <OrgUidBadge orgUid={orgUid} registryId={organizationsMap?.[orgUid].registryId} />}
-        <SyncIndicator detailed={true} orgUid={orgUid} />
-      </div>
+    <>
+      <div className="m-2">
+        {contentsLoading && <IndeterminateProgressOverlay />}
+        <div className="flex flex-col md:flex-row gap-6 my-2.5 relative z-30 items-center">
+          <Button disabled={contentsLoading}>
+            <FormattedMessage id="create-project" />
+          </Button>
+          {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
+          {orgUid && <OrgUidBadge orgUid={orgUid} registryId={organizationsMap?.[orgUid].registryId} />}
+          <SyncIndicator detailed={true} orgUid={orgUid} />
+        </div>
 
-      <Tabs onActiveTabChange={(tab: TabTypes) => setActiveTab(tab)}>
-        <Tabs.Item title={<FormattedMessage id="committed" />}>
-          <CommittedProjectsTab orgUid={orgUid} search={search} setIsLoading={setCommittedDataLoading} />
-        </Tabs.Item>
-        <Tabs.Item
-          title={
-            <p>
-              <FormattedMessage id="staging" />
-              {' (' + String(processedStagingData.staged.length + ') ')}
-            </p>
-          }
-        >
-          <StagingTableTab stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
-        </Tabs.Item>
-        <Tabs.Item
-          title={
-            <p>
-              <FormattedMessage id="pending" />
-              {' (' + String(processedStagingData.pending.length + ') ')}
-            </p>
-          }
-        >
-          <StagingTableTab stagingData={processedStagingData.pending} showLoading={stagingDataLoading} />
-        </Tabs.Item>
-        <Tabs.Item
-          title={
-            <p>
-              <FormattedMessage id="failed" />
-              {' (' + String(processedStagingData.failed.length + ') ')}
-            </p>
-          }
-        >
-          <StagingTableTab stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
-        </Tabs.Item>
-        <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
-      </Tabs>
-    </div>
+        <Tabs onActiveTabChange={(tab: TabTypes) => setActiveTab(tab)}>
+          <Tabs.Item title={<FormattedMessage id="committed" />}>
+            <CommittedProjectsTab orgUid={orgUid} search={search} setIsLoading={setCommittedDataLoading} />
+          </Tabs.Item>
+          <Tabs.Item
+            title={
+              <p>
+                <FormattedMessage id="staging" />
+                {' (' + String(processedStagingData.staged.length + ') ')}
+              </p>
+            }
+          >
+            <StagingTableTab stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
+          </Tabs.Item>
+          <Tabs.Item
+            title={
+              <p>
+                <FormattedMessage id="pending" />
+                {' (' + String(processedStagingData.pending.length + ') ')}
+              </p>
+            }
+          >
+            <StagingTableTab stagingData={processedStagingData.pending} showLoading={stagingDataLoading} />
+          </Tabs.Item>
+          <Tabs.Item
+            title={
+              <p>
+                <FormattedMessage id="failed" />
+                {' (' + String(processedStagingData.failed.length + ') ')}
+              </p>
+            }
+          >
+            <StagingTableTab stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
+          </Tabs.Item>
+          <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
+        </Tabs>
+      </div>
+      {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
+    </>
   );
 };