From d69ba1e6a08ba318e78c341705bdafd80645faea Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Tue, 23 Apr 2024 13:28:12 -0400
Subject: [PATCH 1/5] feat: added edit and delete actions to the staging table
 feat: corrected modal messages feat: added delete staged item endpoint

---
 src/renderer/api/cadt/v1/staging/index.ts     |  1 +
 .../api/cadt/v1/staging/staging.api.ts        | 14 +++-
 src/renderer/api/index.ts                     |  3 +-
 ...sx => ConfirmDeleteCommittedItemModal.tsx} | 17 +++--
 .../modals/ConfirmDeleteStagedItemModal.tsx   | 47 ++++++++++++++
 .../blocks/modals/StagingDiffModal.tsx        |  2 +-
 .../components/blocks/modals/index.ts         |  3 +-
 .../components/blocks/tables/StagingTable.tsx |  7 ++
 .../blocks/widgets/ProjectAndUnitActions.tsx  |  8 ++-
 .../blocks/widgets/StagedItemActions.tsx      | 64 +++++++++++++++++++
 .../components/blocks/widgets/index.ts        |  1 +
 src/renderer/pages/MyProjectsPage.tsx         |  2 +-
 src/renderer/pages/MyUnitsPage.tsx            |  2 +-
 src/renderer/translations/tokens/en-US.json   |  5 +-
 14 files changed, 161 insertions(+), 15 deletions(-)
 rename src/renderer/components/blocks/modals/{ConfirmDeleteModal.tsx => ConfirmDeleteCommittedItemModal.tsx} (78%)
 create mode 100644 src/renderer/components/blocks/modals/ConfirmDeleteStagedItemModal.tsx
 create mode 100644 src/renderer/components/blocks/widgets/StagedItemActions.tsx

diff --git a/src/renderer/api/cadt/v1/staging/index.ts b/src/renderer/api/cadt/v1/staging/index.ts
index e69de29b..80a89a20 100644
--- a/src/renderer/api/cadt/v1/staging/index.ts
+++ b/src/renderer/api/cadt/v1/staging/index.ts
@@ -0,0 +1 @@
+export * from './staging.api';
diff --git a/src/renderer/api/cadt/v1/staging/staging.api.ts b/src/renderer/api/cadt/v1/staging/staging.api.ts
index 6d665c13..55ab8f07 100644
--- a/src/renderer/api/cadt/v1/staging/staging.api.ts
+++ b/src/renderer/api/cadt/v1/staging/staging.api.ts
@@ -27,10 +27,22 @@ const stagingApi = cadtApi.injectEndpoints({
       },
       providesTags: [stagedUnitsTag],
     }),
+
+    deleteStagedItem: builder.mutation<any, { uuid: string }>({
+      query: ({ uuid }) => {
+        return {
+          url: `/v1/staging`,
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: { uuid },
+        };
+      },
+      invalidatesTags: [stagedUnitsTag, stagedProjectsTag],
+    }),
   }),
 });
 
 const invalidateStagingApiTag = stagingApi.util.invalidateTags;
 export { invalidateStagingApiTag };
 
-export const { useGetStagedProjectsQuery, useGetStagedUnitsQuery } = stagingApi;
+export const { useGetStagedProjectsQuery, useGetStagedUnitsQuery, useDeleteStagedItemMutation } = stagingApi;
diff --git a/src/renderer/api/index.ts b/src/renderer/api/index.ts
index 2b5bbb84..a1f666b7 100644
--- a/src/renderer/api/index.ts
+++ b/src/renderer/api/index.ts
@@ -3,4 +3,5 @@ export * from './cadt/v1/units';
 export * from './cadt/v1/projects';
 export * from './cadt/v1/audit';
 export * from './cadt/v1/issuances';
-export * from './cadt/v1/governance';
\ No newline at end of file
+export * from './cadt/v1/governance';
+export * from './cadt/v1/staging';
diff --git a/src/renderer/components/blocks/modals/ConfirmDeleteModal.tsx b/src/renderer/components/blocks/modals/ConfirmDeleteCommittedItemModal.tsx
similarity index 78%
rename from src/renderer/components/blocks/modals/ConfirmDeleteModal.tsx
rename to src/renderer/components/blocks/modals/ConfirmDeleteCommittedItemModal.tsx
index 3c0b72f6..a3ed78a9 100644
--- a/src/renderer/components/blocks/modals/ConfirmDeleteModal.tsx
+++ b/src/renderer/components/blocks/modals/ConfirmDeleteCommittedItemModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useDeleteProjectMutation, useDeleteUnitMutation } from '@/api';
-import { invalidateStagingApiTag } from '@/api/cadt/v1/staging/staging.api';
+import { invalidateStagingApiTag } from '@/api/cadt/v1/staging/';
 import { stagedProjectsTag, stagedUnitsTag } from '@/api/cadt/v1';
 import { useDispatch } from 'react-redux';
 
@@ -12,7 +12,7 @@ interface ConfirmDeleteModalProps {
   onClose: () => void;
 }
 
-const ConfirmDeleteModal: React.FC<ConfirmDeleteModalProps> = ({
+const ConfirmDeleteCommittedItemModal: React.FC<ConfirmDeleteModalProps> = ({
   type,
   warehouseId,
   onClose,
@@ -41,9 +41,14 @@ const ConfirmDeleteModal: React.FC<ConfirmDeleteModalProps> = ({
         <FormattedMessage id="confirm-delete" />
       </Modal.Header>
       <Modal.Body>
-        <p>
-          <FormattedMessage id="this-action-cannot-be-undone" />
-        </p>
+        <div className="space-y-2">
+          <p>
+            <FormattedMessage id="deleting-this-item-will-add-a-corresponding-delete-entry-to-the-staging-table" />.
+          </p>
+          <p>
+            <FormattedMessage id="no-items-will-be-deleted-until-staged-changes-are-committed" />.
+          </p>
+        </div>
       </Modal.Body>
       <Modal.Footer>
         <Button color="gray" onClick={handleClickClose} disabled={projectDeletionLoading || unitDeletionLoading}>
@@ -61,4 +66,4 @@ const ConfirmDeleteModal: React.FC<ConfirmDeleteModalProps> = ({
   );
 };
 
-export { ConfirmDeleteModal };
+export { ConfirmDeleteCommittedItemModal };
diff --git a/src/renderer/components/blocks/modals/ConfirmDeleteStagedItemModal.tsx b/src/renderer/components/blocks/modals/ConfirmDeleteStagedItemModal.tsx
new file mode 100644
index 00000000..1cc45768
--- /dev/null
+++ b/src/renderer/components/blocks/modals/ConfirmDeleteStagedItemModal.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, Modal } from '@/components';
+import { FormattedMessage } from 'react-intl';
+import { useDeleteStagedItemMutation } from '@/api/cadt/v1/staging';
+
+interface ConfirmDeleteModalProps {
+  uuid: string;
+  onClose: () => void;
+}
+
+const ConfirmDeleteStagedItemModal: React.FC<ConfirmDeleteModalProps> = ({
+  uuid,
+  onClose,
+}: ConfirmDeleteModalProps) => {
+  const [triggerDeleteStagedItem, { isLoading: stagedItemDeletionLoading }] = useDeleteStagedItemMutation();
+  const handleConfirm = async () => {
+    await triggerDeleteStagedItem({ uuid });
+    onClose();
+  };
+
+  const handleClickClose = async () => {
+    onClose();
+  };
+
+  return (
+    <Modal show={true} onClose={onClose}>
+      <Modal.Header>
+        <FormattedMessage id="confirm-delete" />
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          <FormattedMessage id="deleting-a-staged-item-is-a-permanent-action" />.
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button color="gray" onClick={handleClickClose} disabled={stagedItemDeletionLoading}>
+          <FormattedMessage id="cancel" />
+        </Button>
+        <Button onClick={handleConfirm} isProcessing={stagedItemDeletionLoading} disabled={stagedItemDeletionLoading}>
+          <FormattedMessage id="delete" />
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export { ConfirmDeleteStagedItemModal };
diff --git a/src/renderer/components/blocks/modals/StagingDiffModal.tsx b/src/renderer/components/blocks/modals/StagingDiffModal.tsx
index 0867ed29..ef7a8a26 100644
--- a/src/renderer/components/blocks/modals/StagingDiffModal.tsx
+++ b/src/renderer/components/blocks/modals/StagingDiffModal.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { DiffViewer, Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
-import { useGetStagedProjectsQuery } from '@/api/cadt/v1/staging/staging.api';
+import { useGetStagedProjectsQuery } from '@/api/cadt/v1/staging';
 
 interface ProjectModalProps {
   stagingUuid: string;
diff --git a/src/renderer/components/blocks/modals/index.ts b/src/renderer/components/blocks/modals/index.ts
index 16cd0d7b..9c7c6920 100644
--- a/src/renderer/components/blocks/modals/index.ts
+++ b/src/renderer/components/blocks/modals/index.ts
@@ -5,4 +5,5 @@ export * from './UnitModal';
 export * from './StagingDiffModal';
 export * from './UpsertProjectModal';
 export * from './UpsertUnitModal';
-export * from './ConfirmDeleteModal';
+export * from './ConfirmDeleteCommittedItemModal';
+export * from './ConfirmDeleteStagedItemModal';
diff --git a/src/renderer/components/blocks/tables/StagingTable.tsx b/src/renderer/components/blocks/tables/StagingTable.tsx
index a8374900..0875c590 100644
--- a/src/renderer/components/blocks/tables/StagingTable.tsx
+++ b/src/renderer/components/blocks/tables/StagingTable.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Badge, DataTable } from '@/components';
 import dayjs from 'dayjs';
+import { StagedItemActions } from '@/components/blocks/widgets/StagedItemActions';
 
 interface TableProps {
   data: any[];
@@ -14,6 +15,12 @@ interface TableProps {
 const StagingTable: React.FC<TableProps> = ({ data, isLoading, onRowClick, setOrder, order }) => {
   const columns = useMemo(
     () => [
+      {
+        title: '',
+        key: 'actionColumn',
+        ignoreChildEvents: true,
+        render: (row: any) => <StagedItemActions stagedItem={row} />,
+      },
       {
         title: <FormattedMessage id={'table'} />,
         key: 'table',
diff --git a/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx b/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
index 2c020aeb..609350dc 100644
--- a/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
+++ b/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { HiDotsVertical } from 'react-icons/hi';
-import { Button, ConfirmDeleteModal, Tooltip, UpsertProjectModal, UpsertUnitModal } from '@/components';
+import { Button, Tooltip, UpsertProjectModal, UpsertUnitModal } from '@/components';
 import { useWildCardUrlHash } from '@/hooks';
 import { FormattedMessage } from 'react-intl';
 
@@ -51,7 +51,11 @@ const ProjectAndUnitActions: React.FC<ProjectAndUnitActionsProps> = ({
       {editProjectModalActive && <UpsertProjectModal onClose={() => setEditProjectModalActive(false)} />}
       {editUnitModalActive && <UpsertUnitModal onClose={() => setEditUnitModalActive(false)} />}
       {showDeleteModal && (
-        <ConfirmDeleteModal type={type} warehouseId={warehouseId} onClose={() => setShowDeleteModal(false)} />
+        <ConfirmDeleteCommittedItemModal
+          type={type}
+          warehouseId={warehouseId}
+          onClose={() => setShowDeleteModal(false)}
+        />
       )}
     </>
   );
diff --git a/src/renderer/components/blocks/widgets/StagedItemActions.tsx b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
new file mode 100644
index 00000000..28d934c2
--- /dev/null
+++ b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { HiDotsVertical } from 'react-icons/hi';
+import { Button, ConfirmDeleteStagedItemModal, Tooltip, UpsertProjectModal, UpsertUnitModal } from '@/components';
+import { useWildCardUrlHash } from '@/hooks';
+import { FormattedMessage } from 'react-intl';
+
+interface ActionsProps {
+  stagedItem: any;
+}
+
+const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps) => {
+  const [, editProjectModalActive, setEditProjectModalActive] = useWildCardUrlHash('edit-project');
+  const [, editUnitModalActive, setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
+
+  const handleClickDelete = () => {
+    setShowDeleteModal(true);
+  };
+
+  const handleClickEdit = () => {
+    if (stagedItem?.table === 'Projects') {
+      setEditProjectModalActive(true); //todo: need a way to get staged data into form without using warehouseId
+    } else {
+      setEditUnitModalActive(true); //todo: need a way to get staged data into form without using warehouseId
+    }
+  };
+
+  return (
+    <>
+      <Tooltip
+        style="light"
+        trigger="click"
+        placement="right"
+        content={
+          <>
+            {stagedItem?.action === 'DELETE' ? (
+              <Button onClick={handleClickDelete} outline>
+                <FormattedMessage id="delete" />
+              </Button>
+            ) : (
+              <Button.Group>
+                <Button onClick={handleClickEdit} outline>
+                  <FormattedMessage id="edit" />
+                </Button>
+                <Button onClick={handleClickDelete} outline>
+                  <FormattedMessage id="delete" />
+                </Button>
+              </Button.Group>
+            )}
+          </>
+        }
+      >
+        <HiDotsVertical size="25" />
+      </Tooltip>
+      {editProjectModalActive && <UpsertProjectModal onClose={() => setEditProjectModalActive(false)} />}
+      {editUnitModalActive && <UpsertUnitModal onClose={() => setEditUnitModalActive(false)} />}
+      {showDeleteModal && stagedItem?.uuid && (
+        <ConfirmDeleteStagedItemModal uuid={stagedItem.uuid} onClose={() => setShowDeleteModal(false)} />
+      )}
+    </>
+  );
+};
+
+export { StagedItemActions };
diff --git a/src/renderer/components/blocks/widgets/index.ts b/src/renderer/components/blocks/widgets/index.ts
index 25a9762a..d1a64eb1 100644
--- a/src/renderer/components/blocks/widgets/index.ts
+++ b/src/renderer/components/blocks/widgets/index.ts
@@ -6,3 +6,4 @@ export * from './ThemeSelector';
 export * from './UnitSummary';
 export * from './DiffViewer';
 export * from './ProjectAndUnitActions';
+export * from './StagedItemActions';
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index c949e8d6..5c6a8e99 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -18,7 +18,7 @@ import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
 import { Organization } from '@/schemas/Organization.schema';
 import { useNavigate } from 'react-router-dom';
-import { useGetStagedProjectsQuery } from '@/api/cadt/v1/staging/staging.api';
+import { useGetStagedProjectsQuery } from '@/api/cadt/v1/staging';
 
 enum TabTypes {
   COMMITTED,
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index 69e5d579..d9bb58ed 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -18,7 +18,7 @@ import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
 import { Organization } from '@/schemas/Organization.schema';
 import { useNavigate } from 'react-router-dom';
-import { useGetStagedUnitsQuery } from '@/api/cadt/v1/staging/staging.api';
+import { useGetStagedUnitsQuery } from '@/api/cadt/v1/staging';
 
 enum TabTypes {
   COMMITTED,
diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json
index 8fa09534..4fba2f2a 100644
--- a/src/renderer/translations/tokens/en-US.json
+++ b/src/renderer/translations/tokens/en-US.json
@@ -106,5 +106,8 @@
   "confirm-delete": "Confirm Delete",
   "this-action-cannot-be-undone": "This action cannot be undone",
   "ratings": "Ratings",
-  "edit-unit": "Edit Unit"
+  "edit-unit": "Edit Unit",
+  "deleting-this-item-will-add-a-corresponding-delete-entry-to-the-staging-table": "Deleting this item will add a corresponding delete entry to the staging table",
+  "no-items-will-be-deleted-until-staged-changes-are-committed": "No items will be deleted until staged changes are committed",
+  "deleting-a-staged-item-is-a-permanent-action": "Deleting a staged item is a permanent action"
 }

From fd6d9b5074d5a95a08e81e7c278f30214568e022 Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Tue, 23 Apr 2024 14:59:00 -0400
Subject: [PATCH 2/5] fix: multiple modal renders

---
 .../blocks/widgets/ProjectAndUnitActions.tsx         | 12 +++++-------
 .../components/blocks/widgets/StagedItemActions.tsx  | 12 +++++-------
 src/renderer/pages/MyProjectsPage.tsx                |  5 +++--
 src/renderer/pages/MyUnitsPage.tsx                   |  3 +--
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx b/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
index 609350dc..092d3a6b 100644
--- a/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
+++ b/src/renderer/components/blocks/widgets/ProjectAndUnitActions.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { HiDotsVertical } from 'react-icons/hi';
-import { Button, Tooltip, UpsertProjectModal, UpsertUnitModal } from '@/components';
+import { Button, ConfirmDeleteCommittedItemModal, Tooltip } from '@/components';
 import { useWildCardUrlHash } from '@/hooks';
 import { FormattedMessage } from 'react-intl';
 
@@ -13,8 +13,8 @@ const ProjectAndUnitActions: React.FC<ProjectAndUnitActionsProps> = ({
   type,
   warehouseId,
 }: ProjectAndUnitActionsProps) => {
-  const [, editProjectModalActive, setEditProjectModalActive] = useWildCardUrlHash('edit-project');
-  const [, editUnitModalActive, setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
+  const [, , setEditProjectModalActive] = useWildCardUrlHash('edit-project');
+  const [, , setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
 
   const handleClickDelete = () => {
@@ -37,10 +37,10 @@ const ProjectAndUnitActions: React.FC<ProjectAndUnitActionsProps> = ({
         placement="right"
         content={
           <Button.Group>
-            <Button onClick={handleClickEdit}>
+            <Button onClick={handleClickEdit} outline>
               <FormattedMessage id="edit" />
             </Button>
-            <Button color="gray" onClick={handleClickDelete}>
+            <Button onClick={handleClickDelete} outline>
               <FormattedMessage id="delete" />
             </Button>
           </Button.Group>
@@ -48,8 +48,6 @@ const ProjectAndUnitActions: React.FC<ProjectAndUnitActionsProps> = ({
       >
         <HiDotsVertical size="25" />
       </Tooltip>
-      {editProjectModalActive && <UpsertProjectModal onClose={() => setEditProjectModalActive(false)} />}
-      {editUnitModalActive && <UpsertUnitModal onClose={() => setEditUnitModalActive(false)} />}
       {showDeleteModal && (
         <ConfirmDeleteCommittedItemModal
           type={type}
diff --git a/src/renderer/components/blocks/widgets/StagedItemActions.tsx b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
index 28d934c2..9a39e30d 100644
--- a/src/renderer/components/blocks/widgets/StagedItemActions.tsx
+++ b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { HiDotsVertical } from 'react-icons/hi';
-import { Button, ConfirmDeleteStagedItemModal, Tooltip, UpsertProjectModal, UpsertUnitModal } from '@/components';
+import { Button, ConfirmDeleteStagedItemModal, Tooltip } from '@/components';
 import { useWildCardUrlHash } from '@/hooks';
 import { FormattedMessage } from 'react-intl';
 
@@ -9,8 +9,8 @@ interface ActionsProps {
 }
 
 const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps) => {
-  const [, editProjectModalActive, setEditProjectModalActive] = useWildCardUrlHash('edit-project');
-  const [, editUnitModalActive, setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
+  const [, , setEditProjectModalActive] = useWildCardUrlHash('edit-project');
+  const [, , setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
 
   const handleClickDelete = () => {
@@ -19,9 +19,9 @@ const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps)
 
   const handleClickEdit = () => {
     if (stagedItem?.table === 'Projects') {
-      setEditProjectModalActive(true); //todo: need a way to get staged data into form without using warehouseId
+      setEditProjectModalActive(true, ''); //todo: need a way to get staged data into form without using warehouseId
     } else {
-      setEditUnitModalActive(true); //todo: need a way to get staged data into form without using warehouseId
+      setEditUnitModalActive(true, ''); //todo: need a way to get staged data into form without using warehouseId
     }
   };
 
@@ -52,8 +52,6 @@ const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps)
       >
         <HiDotsVertical size="25" />
       </Tooltip>
-      {editProjectModalActive && <UpsertProjectModal onClose={() => setEditProjectModalActive(false)} />}
-      {editUnitModalActive && <UpsertUnitModal onClose={() => setEditUnitModalActive(false)} />}
       {showDeleteModal && stagedItem?.uuid && (
         <ConfirmDeleteStagedItemModal uuid={stagedItem.uuid} onClose={() => setShowDeleteModal(false)} />
       )}
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index 5c6a8e99..f231497a 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -39,6 +39,7 @@ const MyProjectsPage: React.FC = () => {
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
   const [, createProjectModalActive, setCreateProjectModalActive] = useWildCardUrlHash('create-project');
+  const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
@@ -106,7 +107,7 @@ const MyProjectsPage: React.FC = () => {
       <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}>
+          <Button disabled={contentsLoading} onClick={() => setCreateProjectModalActive(true, '')}>
             <FormattedMessage id="create-project" />
           </Button>
           {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
@@ -151,7 +152,7 @@ const MyProjectsPage: React.FC = () => {
           <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
         </Tabs>
       </div>
-      {createProjectModalActive && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
+      {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
     </>
   );
 };
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index d9bb58ed..f2cfa5c0 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -38,7 +38,7 @@ const MyUnitsPage: React.FC = () => {
   const navigate = useNavigate();
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
-  const [, editUnitModalActive, setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
+  const [, editUnitModalActive] = useWildCardUrlHash('edit-unit');
   const [, createUnitModalActive, setCreateUnitModalActive] = useWildCardUrlHash('create-unit');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
@@ -95,7 +95,6 @@ const MyUnitsPage: React.FC = () => {
   );
 
   const handleCloseUpsertModal = () => {
-    setEditUnitModalActive(false);
     setCreateUnitModalActive(false);
   };
 

From 95f3e23fb9694a5af7bbea3e0f732535f693046c Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Tue, 23 Apr 2024 15:46:36 -0400
Subject: [PATCH 3/5] chore: hid edit staging item button pending solution for
 editing

---
 .../blocks/widgets/StagedItemActions.tsx      | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/blocks/widgets/StagedItemActions.tsx b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
index 9a39e30d..7d0e5aa7 100644
--- a/src/renderer/components/blocks/widgets/StagedItemActions.tsx
+++ b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
@@ -33,20 +33,27 @@ const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps)
         placement="right"
         content={
           <>
-            {stagedItem?.action === 'DELETE' ? (
-              <Button onClick={handleClickDelete} outline>
-                <FormattedMessage id="delete" />
-              </Button>
-            ) : (
-              <Button.Group>
-                <Button onClick={handleClickEdit} outline>
-                  <FormattedMessage id="edit" />
-                </Button>
+            <Button onClick={handleClickDelete} outline>
+              <FormattedMessage id="delete" />
+            </Button>
+            {/*todo: delete the above button and encasing fragment and make this div
+                 visible when a solution to editing a staged item is complete */}
+            <div className="hidden">
+              {stagedItem?.action === 'DELETE' ? (
                 <Button onClick={handleClickDelete} outline>
                   <FormattedMessage id="delete" />
                 </Button>
-              </Button.Group>
-            )}
+              ) : (
+                <Button.Group>
+                  <Button onClick={handleClickEdit} outline>
+                    <FormattedMessage id="edit" />
+                  </Button>
+                  <Button onClick={handleClickDelete} outline>
+                    <FormattedMessage id="delete" />
+                  </Button>
+                </Button.Group>
+              )}
+            </div>
           </>
         }
       >

From 094b48d31480e166c2ab1f5ab7a65683d7068b0a Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Wed, 24 Apr 2024 09:17:30 -0400
Subject: [PATCH 4/5] feat: available staged item actions depend on whether the
 item is staged, pending, or failed

---
 .../components/blocks/tables/StagingTable.tsx |  5 +-
 .../blocks/tabs/StagingTableTab.tsx           |  4 +-
 .../blocks/widgets/StagedItemActions.tsx      | 61 ++++++++++---------
 src/renderer/pages/MyProjectsPage.tsx         | 10 ++-
 src/renderer/pages/MyUnitsPage.tsx            | 10 ++-
 5 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/renderer/components/blocks/tables/StagingTable.tsx b/src/renderer/components/blocks/tables/StagingTable.tsx
index 0875c590..06e605db 100644
--- a/src/renderer/components/blocks/tables/StagingTable.tsx
+++ b/src/renderer/components/blocks/tables/StagingTable.tsx
@@ -6,20 +6,21 @@ import { StagedItemActions } from '@/components/blocks/widgets/StagedItemActions
 
 interface TableProps {
   data: any[];
+  type: 'staged' | 'pending' | 'failed';
   isLoading: boolean;
   setOrder: (sort: string) => void;
   onRowClick: (row: any) => void;
   order: string;
 }
 
-const StagingTable: React.FC<TableProps> = ({ data, isLoading, onRowClick, setOrder, order }) => {
+const StagingTable: React.FC<TableProps> = ({ data, type, isLoading, onRowClick, setOrder, order }: TableProps) => {
   const columns = useMemo(
     () => [
       {
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
-        render: (row: any) => <StagedItemActions stagedItem={row} />,
+        render: (row: any) => <StagedItemActions type={type} stagedItem={row} />,
       },
       {
         title: <FormattedMessage id={'table'} />,
diff --git a/src/renderer/components/blocks/tabs/StagingTableTab.tsx b/src/renderer/components/blocks/tabs/StagingTableTab.tsx
index 1c803eb4..fb97aa90 100644
--- a/src/renderer/components/blocks/tabs/StagingTableTab.tsx
+++ b/src/renderer/components/blocks/tabs/StagingTableTab.tsx
@@ -4,11 +4,12 @@ import React from 'react';
 import { useColumnOrderHandler, useQueryParamState, useWildCardUrlHash } from '@/hooks';
 
 interface PageTabProps {
+  type: 'staged' | 'pending' | 'failed';
   stagingData: any[];
   showLoading: boolean;
 }
 
-const StagingTableTab: React.FC<PageTabProps> = ({ stagingData, showLoading }: PageTabProps) => {
+const StagingTableTab: React.FC<PageTabProps> = ({ stagingData, showLoading, type }: PageTabProps) => {
   const [order, setOrder] = useQueryParamState('order', undefined);
   const handleSetOrder = useColumnOrderHandler(order, setOrder);
   const [stagingDiffFragment, stagingDiffModalActive, setStagingDiffModalActive] = useWildCardUrlHash('staging');
@@ -28,6 +29,7 @@ const StagingTableTab: React.FC<PageTabProps> = ({ stagingData, showLoading }: P
       ) : (
         <StagingTable
           data={stagingData}
+          type={type}
           isLoading={showLoading}
           setOrder={handleSetOrder}
           order={order}
diff --git a/src/renderer/components/blocks/widgets/StagedItemActions.tsx b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
index 7d0e5aa7..49405945 100644
--- a/src/renderer/components/blocks/widgets/StagedItemActions.tsx
+++ b/src/renderer/components/blocks/widgets/StagedItemActions.tsx
@@ -5,10 +5,11 @@ import { useWildCardUrlHash } from '@/hooks';
 import { FormattedMessage } from 'react-intl';
 
 interface ActionsProps {
+  type: 'staged' | 'pending' | 'failed';
   stagedItem: any;
 }
 
-const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps) => {
+const StagedItemActions: React.FC<ActionsProps> = ({ type, stagedItem }: ActionsProps) => {
   const [, , setEditProjectModalActive] = useWildCardUrlHash('edit-project');
   const [, , setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
@@ -27,38 +28,40 @@ const StagedItemActions: React.FC<ActionsProps> = ({ stagedItem }: ActionsProps)
 
   return (
     <>
-      <Tooltip
-        style="light"
-        trigger="click"
-        placement="right"
-        content={
-          <>
-            <Button onClick={handleClickDelete} outline>
-              <FormattedMessage id="delete" />
-            </Button>
-            {/*todo: delete the above button and encasing fragment and make this div
+      {type !== 'pending' && (
+        <Tooltip
+          style="light"
+          trigger="click"
+          placement="right"
+          content={
+            <>
+              <Button onClick={handleClickDelete} outline>
+                <FormattedMessage id="delete" />
+              </Button>
+              {/*todo: delete the above button and encasing fragment and make this div
                  visible when a solution to editing a staged item is complete */}
-            <div className="hidden">
-              {stagedItem?.action === 'DELETE' ? (
-                <Button onClick={handleClickDelete} outline>
-                  <FormattedMessage id="delete" />
-                </Button>
-              ) : (
-                <Button.Group>
-                  <Button onClick={handleClickEdit} outline>
-                    <FormattedMessage id="edit" />
-                  </Button>
+              <div className="hidden">
+                {stagedItem?.action === 'DELETE' || type === 'failed' ? (
                   <Button onClick={handleClickDelete} outline>
                     <FormattedMessage id="delete" />
                   </Button>
-                </Button.Group>
-              )}
-            </div>
-          </>
-        }
-      >
-        <HiDotsVertical size="25" />
-      </Tooltip>
+                ) : (
+                  <Button.Group>
+                    <Button onClick={handleClickEdit} outline>
+                      <FormattedMessage id="edit" />
+                    </Button>
+                    <Button onClick={handleClickDelete} outline>
+                      <FormattedMessage id="delete" />
+                    </Button>
+                  </Button.Group>
+                )}
+              </div>
+            </>
+          }
+        >
+          <HiDotsVertical size="25" />
+        </Tooltip>
+      )}
       {showDeleteModal && stagedItem?.uuid && (
         <ConfirmDeleteStagedItemModal uuid={stagedItem.uuid} onClose={() => setShowDeleteModal(false)} />
       )}
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index f231497a..9b43c376 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -127,7 +127,7 @@ const MyProjectsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
+            <StagingTableTab type="staged" stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
           </Tabs.Item>
           <Tabs.Item
             title={
@@ -137,7 +137,11 @@ const MyProjectsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.pending} showLoading={stagingDataLoading} />
+            <StagingTableTab
+              type="pending"
+              stagingData={processedStagingData.pending}
+              showLoading={stagingDataLoading}
+            />
           </Tabs.Item>
           <Tabs.Item
             title={
@@ -147,7 +151,7 @@ const MyProjectsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
+            <StagingTableTab type="failed" stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
           </Tabs.Item>
           <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
         </Tabs>
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index f2cfa5c0..5a203620 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -127,7 +127,7 @@ const MyUnitsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
+            <StagingTableTab type="staged" stagingData={processedStagingData.staged} showLoading={stagingDataLoading} />
           </Tabs.Item>
           <Tabs.Item
             title={
@@ -137,7 +137,11 @@ const MyUnitsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.pending} showLoading={stagingDataLoading} />
+            <StagingTableTab
+              type="pending"
+              stagingData={processedStagingData.pending}
+              showLoading={stagingDataLoading}
+            />
           </Tabs.Item>
           <Tabs.Item
             title={
@@ -147,7 +151,7 @@ const MyUnitsPage: React.FC = () => {
               </p>
             }
           >
-            <StagingTableTab stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
+            <StagingTableTab type="failed" stagingData={processedStagingData.failed} showLoading={stagingDataLoading} />
           </Tabs.Item>
           <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
         </Tabs>

From 875a264a0bfd6422ab9b68f3c61d44e213ae3f0b Mon Sep 17 00:00:00 2001
From: William Wills <wwills2@protonmail.com>
Date: Wed, 24 Apr 2024 10:15:33 -0400
Subject: [PATCH 5/5] fix: datatable invalid sort key

---
 .../components/blocks/tables/ProjectsListTable.tsx   |  7 ++++---
 .../components/blocks/tables/UnitsListTable.tsx      |  7 ++++---
 src/renderer/components/layout/DataTable.tsx         |  5 +++--
 src/renderer/pages/MyProjectsPage.tsx                | 12 ++++++------
 src/renderer/pages/MyUnitsPage.tsx                   |  4 ++--
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
index 160b76de..7100a876 100644
--- a/src/renderer/components/blocks/tables/ProjectsListTable.tsx
+++ b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip } from '@/components';
+import { Column, DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip } from '@/components';
 import { Project } from '@/schemas/Project.schema';
 import { Badge } from 'flowbite-react';
 
@@ -31,16 +31,17 @@ const ProjectsListTable: React.FC<TableProps> = ({
   totalCount,
 }) => {
   const columns = useMemo(() => {
-    const editColumn: any = [
+    const editColumn: Column[] = [
       {
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
+        ignoreOrderChange: true,
         render: (row: Project) => <ProjectAndUnitActions type="project" warehouseId={row?.warehouseProjectId || ''} />,
       },
     ];
 
-    const staticColumns: any = [
+    const staticColumns: Column[] = [
       {
         title: <FormattedMessage id={'current-registry'} />,
         key: 'currentRegistry',
diff --git a/src/renderer/components/blocks/tables/UnitsListTable.tsx b/src/renderer/components/blocks/tables/UnitsListTable.tsx
index 3f971af5..55fb2e4e 100644
--- a/src/renderer/components/blocks/tables/UnitsListTable.tsx
+++ b/src/renderer/components/blocks/tables/UnitsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
+import { Column, DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
 import { Unit } from '@/schemas/Unit.schema';
 
 interface TableProps {
@@ -30,16 +30,17 @@ const UnitsListTable: React.FC<TableProps> = ({
   totalCount,
 }) => {
   const columns = useMemo(() => {
-    const editColumn: any = [
+    const editColumn: Column[] = [
       {
         title: '',
         key: 'actionColumn',
         ignoreChildEvents: true,
+        ignoreOrderChange: true,
         render: (row: Unit) => <ProjectAndUnitActions type="unit" warehouseId={row.warehouseUnitId} />,
       },
     ];
 
-    const staticColumns: any = [
+    const staticColumns: Column[] = [
       {
         title: <FormattedMessage id={'unit-owner'} />,
         key: 'unitOwner',
diff --git a/src/renderer/components/layout/DataTable.tsx b/src/renderer/components/layout/DataTable.tsx
index 3658b580..2a76371a 100644
--- a/src/renderer/components/layout/DataTable.tsx
+++ b/src/renderer/components/layout/DataTable.tsx
@@ -6,10 +6,11 @@ import 'simplebar/dist/simplebar.min.css';
 import { AiOutlineSortAscending, AiOutlineSortDescending } from 'react-icons/ai';
 import React from 'react';
 
-interface Column {
+export interface Column {
   key: string;
   title: string | JSX.Element;
   ignoreChildEvents?: boolean;
+  ignoreOrderChange?: boolean;
   render?: (row: any) => JSX.Element;
   renderHeader?: (column: any) => JSX.Element;
   width?: string;
@@ -103,7 +104,7 @@ const DataTable: React.FC<DataTableProps> = ({
                           ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white'
                           : 'text-gray-500 dark:text-gray-400'
                       }`}
-                      onClick={() => onChangeOrder && onChangeOrder(column.key)}
+                      onClick={() => !column.ignoreOrderChange && onChangeOrder && onChangeOrder(column.key)}
                     >
                       <div className="flex items-center justify-between">
                         <span>{column.renderHeader ? column.renderHeader(column) : column.title}</span>
diff --git a/src/renderer/pages/MyProjectsPage.tsx b/src/renderer/pages/MyProjectsPage.tsx
index ec5bfab6..e9c00f22 100644
--- a/src/renderer/pages/MyProjectsPage.tsx
+++ b/src/renderer/pages/MyProjectsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useWildCardUrlHash } from '@/hooks';
+import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -9,11 +9,11 @@ import {
   IndeterminateProgressOverlay,
   OrgUidBadge,
   SearchBox,
+  StagedProjectSuccessModal,
   StagingTableTab,
   SyncIndicator,
   Tabs,
   UpsertProjectModal,
-  StagedProjectSuccessModal
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
@@ -42,8 +42,6 @@ const MyProjectsPage: React.FC = () => {
   const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [createProjectModalActive, setCreateProjectModalActive] = useUrlHash('create-project');
   const [projectStagedSuccess, setProjectStagedSuccess] = useUrlHash('success-stage-project');
-  const [, createProjectModalActive, setCreateProjectModalActive] = useWildCardUrlHash('create-project');
-  const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
@@ -111,7 +109,7 @@ const MyProjectsPage: React.FC = () => {
       <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} onClick={() => setCreateProjectModalActive(true, '')}>
+          <Button disabled={contentsLoading} onClick={() => setCreateProjectModalActive(true)}>
             <FormattedMessage id="create-project" />
           </Button>
           {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
@@ -161,7 +159,9 @@ const MyProjectsPage: React.FC = () => {
         </Tabs>
       </div>
       {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
-      {projectStagedSuccess && <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />}
+      {projectStagedSuccess && (
+        <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />
+      )}
     </>
   );
 };
diff --git a/src/renderer/pages/MyUnitsPage.tsx b/src/renderer/pages/MyUnitsPage.tsx
index 6381dc8b..0e2b324e 100644
--- a/src/renderer/pages/MyUnitsPage.tsx
+++ b/src/renderer/pages/MyUnitsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
-import { useQueryParamState, useWildCardUrlHash, useUrlHash } from '@/hooks';
+import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
@@ -39,7 +39,7 @@ const MyUnitsPage: React.FC = () => {
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
   const [, editUnitModalActive] = useWildCardUrlHash('edit-unit');
-  const [, createUnitModalActive, setCreateUnitModalActive] = useWildCardUrlHash('create-unit');
+  const [createUnitModalActive, setCreateUnitModalActive] = useUrlHash('create-unit');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {