feat: added commit action to staging table

src/renderer/api/cadt/v1/staging/staging.api.ts

@@ -28,6 +28,38 @@ const stagingApi = cadtApi.injectEndpoints({
       providesTags: [stagedUnitsTag],
     }),
 
+    commitProjects: builder.mutation<any, void | null | undefined>({
+      query: () => {
+        return {
+          url: `/v1/staging/commit`,
+          method: 'POST',
+          params: { table: 'Projects' },
+        };
+      },
+      invalidatesTags: [stagedProjectsTag],
+    }),
+
+    commitUnits: builder.mutation<any, void | null | undefined>({
+      query: () => {
+        return {
+          url: `/v1/staging/commit`,
+          method: 'POST',
+          params: { table: 'Units' },
+        };
+      },
+      invalidatesTags: [stagedUnitsTag],
+    }),
+
+    commitAll: builder.mutation<any, void | null | undefined>({
+      query: () => {
+        return {
+          url: `/v1/staging/commit`,
+          method: 'POST',
+        };
+      },
+      invalidatesTags: [stagedUnitsTag, stagedProjectsTag],
+    }),
+
     deleteStagedItem: builder.mutation<any, { uuid: string }>({
       query: ({ uuid }) => {
         return {
@@ -45,4 +77,11 @@ const stagingApi = cadtApi.injectEndpoints({
 const invalidateStagingApiTag = stagingApi.util.invalidateTags;
 export { invalidateStagingApiTag };
 
-export const { useGetStagedProjectsQuery, useGetStagedUnitsQuery, useDeleteStagedItemMutation } = stagingApi;
+export const {
+  useGetStagedProjectsQuery,
+  useGetStagedUnitsQuery,
+  useCommitProjectsMutation,
+  useCommitUnitsMutation,
+  useCommitAllMutation,
+  useDeleteStagedItemMutation
+} = stagingApi;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Button, Modal } from '@/components';
+import { FormattedMessage } from 'react-intl';
+import { useCommitAllMutation, useCommitProjectsMutation, useCommitUnitsMutation } from '@/api/cadt/v1/staging';
+
+interface ModalProps {
+  type: 'project' | 'unit';
+  onClose: () => void;
+}
+
+const CommitStagedItemsModal: React.FC<ModalProps> = ({ onClose, type }) => {
+  const [triggerCommitAll, { isLoading: commitAllLoading }] = useCommitAllMutation();
+  const [triggerCommitProjects, { isLoading: commitProjectsLoading }] = useCommitProjectsMutation();
+  const [triggerCommitUnits, { isLoading: commitUnitsLoading }] = useCommitUnitsMutation();
+  const handleClickClose = async () => {
+    onClose();
+  };
+
+  return (
+    <Modal show={true} onClose={onClose}>
+      <Modal.Header>
+        <FormattedMessage id="commit-staged-changes" />
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          <FormattedMessage id="what-would-you-like-to-commit" />?
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          onClick={async () => {
+            await triggerCommitAll();
+            onClose();
+          }}
+          isProcessing={commitAllLoading}
+          disabled={commitAllLoading || commitProjectsLoading || commitUnitsLoading}
+        >
+          <FormattedMessage id="commit-all" />
+        </Button>
+        {type === 'project' && (
+          <Button
+            outline
+            onClick={async () => {
+              await triggerCommitProjects();
+              onClose();
+            }}
+            isProcessing={commitProjectsLoading}
+            disabled={commitAllLoading || commitProjectsLoading || commitUnitsLoading}
+          >
+            <FormattedMessage id="commit-projects-only" />
+          </Button>
+        )}
+        {type === 'unit' && (
+          <Button
+            outline
+            onClick={async () => {
+              await triggerCommitUnits();
+              onClose();
+            }}
+            isProcessing={commitUnitsLoading}
+            disabled={commitAllLoading || commitProjectsLoading || commitUnitsLoading}
+          >
+            <FormattedMessage id="commit-units-only" />
+          </Button>
+        )}
+        <Button
+          color="gray"
+          onClick={handleClickClose}
+          disabled={commitAllLoading || commitProjectsLoading || commitUnitsLoading}
+        >
+          <FormattedMessage id="cancel" />
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export { CommitStagedItemsModal };

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

@@ -51,16 +51,16 @@ const ConfirmDeleteCommittedItemModal: React.FC<ConfirmDeleteModalProps> = ({
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <Button color="gray" onClick={handleClickClose} disabled={projectDeletionLoading || unitDeletionLoading}>
-          <FormattedMessage id="cancel" />
-        </Button>
         <Button
           onClick={handleConfirm}
           isProcessing={projectDeletionLoading || unitDeletionLoading}
           disabled={projectDeletionLoading || unitDeletionLoading}
         >
           <FormattedMessage id="delete" />
         </Button>
+        <Button color="gray" onClick={handleClickClose} disabled={projectDeletionLoading || unitDeletionLoading}>
+          <FormattedMessage id="cancel" />
+        </Button>
       </Modal.Footer>
     </Modal>
   );

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

@@ -8,4 +8,5 @@ export * from './UpsertUnitModal';
 export * from './ConfirmDeleteCommittedItemModal';
 export * from './ConfirmDeleteStagedItemModal';
 export * from './StagedProjectSuccessModal';
+export * from './CommitStagedItemsModal';
 export * from './StagedUnitSuccessModal';

src/renderer/pages/MyProjectsPage.tsx

@@ -4,6 +4,7 @@ import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
 import {
   Button,
+  CommitStagedItemsModal,
   CommittedProjectsTab,
   ComponentCenteredSpinner,
   IndeterminateProgressOverlay,
@@ -44,6 +45,7 @@ const MyProjectsPage: React.FC = () => {
   const [, editProjectModalActive] = useWildCardUrlHash('edit-project');
   const [createProjectModalActive, setCreateProjectModalActive] = useUrlHash('create-project');
   const [projectStagedSuccess, setProjectStagedSuccess] = useUrlHash('success-stage-project');
+  const [commitModalActive, setCommitModalActive] = useUrlHash('commit-staged-items');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
@@ -111,10 +113,25 @@ 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)}>
-            <FormattedMessage id="create-project" />
-          </Button>
-          {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
+          {activeTab === TabTypes.COMMITTED && (
+            <>
+              <Button disabled={contentsLoading} onClick={() => setCreateProjectModalActive(true)}>
+                <FormattedMessage id="create-project" />
+              </Button>
+              <SearchBox defaultValue={search} onChange={handleSearchChange} />
+            </>
+          )}
+          {activeTab === TabTypes.STAGING && (
+            <>
+              <Button
+                disabled={contentsLoading || !processedStagingData.staged.length}
+                onClick={() => setCommitModalActive(true)}
+              >
+                <FormattedMessage id="commit" />
+              </Button>
+            </>
+          )}
+          <SyncIndicator detailed={true} orgUid={orgUid} />
           {orgUid && <OrgUidBadge orgUid={orgUid} registryId={organizationsMap?.[orgUid].registryId} />}
           <SyncIndicator detailed={true} orgUid={orgUid} />
         </div>
@@ -161,15 +178,18 @@ const MyProjectsPage: React.FC = () => {
         </Tabs>
       </div>
       {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
-      {projectStagedSuccess && (
-        <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />
-      )}
       {stagingDiffModalActive && (
         <StagingDiffModal
           onClose={() => setStagingDiffModalActive(false)}
           stagingUuid={stagingDiffFragment.replace('staging-', '')}
         />
       )}
+      {commitModalActive && processedStagingData.staged.length && (
+        <CommitStagedItemsModal type="project" onClose={() => setCommitModalActive(false)} />
+      )}
+      {projectStagedSuccess && (
+        <StagedProjectSuccessModal showModal={true} onClose={() => setProjectStagedSuccess(false)} />
+      )}
     </>
   );
 };

src/renderer/pages/MyUnitsPage.tsx

@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetOrganizationsListQuery } from '@/api';
 import { useQueryParamState, useUrlHash, useWildCardUrlHash } from '@/hooks';
 import { debounce } from 'lodash';
-
 import {
   Button,
+  CommitStagedItemsModal,
   CommittedUnitsTab,
   ComponentCenteredSpinner,
   IndeterminateProgressOverlay,
@@ -17,7 +17,6 @@ import {
   StagedUnitSuccessModal,
   StagingDiffModal
 } from '@/components';
-
 import { FormattedMessage } from 'react-intl';
 import { useGetOrganizationsMapQuery } from '@/api/cadt/v1/organizations';
 import { Organization } from '@/schemas/Organization.schema';
@@ -43,8 +42,9 @@ const MyUnitsPage: React.FC = () => {
   const [stagingDiffFragment, stagingDiffModalActive, setStagingDiffModalActive] = useWildCardUrlHash('staging');
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
-  const [, editUnitModalActive] = useWildCardUrlHash('edit-unit');
+  const [, editUnitModalActive, setEditUnitModalActive] = useWildCardUrlHash('edit-unit');
   const [createUnitModalActive, setCreateUnitModalActive] = useUrlHash('create-unit');
+  const [commitModalActive, setCommitModalActive] = useUrlHash('commit-staged-items');
   const [activeTab, setActiveTab] = useState<TabTypes>(TabTypes.COMMITTED);
   const [committedDataLoading, setCommittedDataLoading] = useState<boolean>(false);
   const [unitStagedSuccess, setUnitStagedSuccess] = useUrlHash('success-stage-unit');
@@ -101,24 +101,37 @@ const MyUnitsPage: React.FC = () => {
   );
 
   const handleCloseUpsertModal = () => {
+    setEditUnitModalActive(false);
     setCreateUnitModalActive(false);
   };
 
   if (!myOrganization || organizationsListLoading) {
     return <ComponentCenteredSpinner />;
   }
 
-  console.log('@@')
-
   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-unit" />
-          </Button>
-          {activeTab === TabTypes.COMMITTED && <SearchBox defaultValue={search} onChange={handleSearchChange} />}
+          {activeTab === TabTypes.COMMITTED && (
+            <>
+              <Button disabled={contentsLoading} onClick={() => setCreateUnitModalActive(true)}>
+                <FormattedMessage id="create-unit" />
+              </Button>
+              <SearchBox defaultValue={search} onChange={handleSearchChange} />
+            </>
+          )}
+          {activeTab === TabTypes.STAGING && (
+            <>
+              <Button
+                disabled={contentsLoading || !processedStagingData.staged.length}
+                onClick={() => setCommitModalActive(true)}
+              >
+                <FormattedMessage id="commit" />
+              </Button>
+            </>
+          )}
           {orgUid && <OrgUidBadge orgUid={orgUid} registryId={organizationsMap?.[orgUid].registryId} />}
           <SyncIndicator detailed={true} orgUid={orgUid} />
         </div>
@@ -164,6 +177,9 @@ const MyUnitsPage: React.FC = () => {
           <Tabs.Item title={<FormattedMessage id="transfers" />}>todo transfers</Tabs.Item>
         </Tabs>
       </div>
+      {commitModalActive && processedStagingData.staged.length && (
+        <CommitStagedItemsModal type="unit" onClose={() => setCommitModalActive(false)} />
+      )}
       {(createUnitModalActive || editUnitModalActive) && <UpsertUnitModal onClose={handleCloseUpsertModal} />}
       {unitStagedSuccess && <StagedUnitSuccessModal showModal={true} onClose={() => setUnitStagedSuccess(false)} />}
       {stagingDiffModalActive && (

src/renderer/translations/tokens/en-US.json

@@ -105,14 +105,20 @@
   "issuances": "Issuances",
   "project_locations": "Project Locations",
   "labels": "Labels",
-  "ratings": "Ratings",
   "co-benefits": "Co-Benefits",
   "related-projects": "Related Projects",
   "delete": "Delete",
   "edit": "Edit",
   "confirm-delete": "Confirm Delete",
   "this-action-cannot-be-undone": "This action cannot be undone",
   "ratings": "Ratings",
+  "commit": "Commit",
+  "commit-staged-changes": "Commit Staged Changes",
+  "what-would-you-like-to-commit": "What would you like to commit",
+  "commit-all": "Commit All",
+  "commit-projects-only": "Commit Projects Only",
+  "commit-units-only": "Commit Units Only",
+  "nothing-to-commit": "Nothing to commit",
   "edit-unit": "Edit Unit",
   "unit-successfully-staged": "Unit successfully staged",
   "project-successfully-staged": "Project successfully staged",