Display a loading bar for the merging process

specifyweb/frontend/js_src/lib/components/DataModel/resource.ts

@@ -24,6 +24,10 @@ import type { Tables } from './types';
 
 // FEATURE: use this everywhere
 export const resourceEvents = eventListener<{
+  readonly merged: [
+    source: SpecifyResource<AnySchema>,
+    target: SpecifyResource<AnySchema>
+  ];
   readonly deleted: SpecifyResource<AnySchema>;
 }>();
 

specifyweb/frontend/js_src/lib/components/Header/NotificationRenderers.tsx

@@ -161,6 +161,24 @@ export const notificationRenderers: IR<
       </>
     );
   },
+  'record-merge-aborted'(notification) {
+    const tableName = notification.payload.table;
+    const collectionId = parseInt(notification.payload.collection_id);
+    const mergeName = notification.payload.name;
+    const collection = userInformation.availableCollections.find(
+      ({ id }) => id === collectionId
+    );
+
+    return (
+      <>
+        {mergingText.mergingHasBeenCanceled()}
+        <div className="flex items-center gap-2">
+          <TableIcon label name={tableName} />
+          <p>{`${collection?.collectionName} - ${mergeName}`}</p>
+        </div>
+      </>
+    );
+  },
   'record-merge-succeeded'(notification) {
     const id = parseInt(notification.payload.new_record_id);
     const tableName = notification.payload.table;

specifyweb/frontend/js_src/lib/components/Merging/Status.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { MergeStatus, StatusState, initialStatusState } from './types';
+import { ajax } from '../../utils/ajax';
+import { MILLISECONDS } from '../Atoms/timeUnits';
+import { softFail } from '../Errors/Crash';
+import { LoadingContext } from '../Core/Contexts';
+import { Dialog, dialogClassNames } from '../Molecules/Dialog';
+import { Button } from '../Atoms/Button';
+import { ping } from '../../utils/ajax/ping';
+import { mergingText } from '../../localization/merging';
+import { Label } from '../Atoms/Form';
+import { Progress } from '../Atoms';
+import { RemainingLoadingTime } from '../WorkBench/RemainingLoadingTime';
+import { commonText } from '../../localization/common';
+
+const statusLocalization = {
+  FAILED: mergingText.mergeFailed(),
+  SUCCESS: mergingText.mergeSucceeded(),
+  PENDING: mergingText.mergePending(),
+  MERGING: mergingText.merging(),
+};
+
+export function Status({
+  mergingId,
+  handleClose,
+}: {
+  readonly mergingId: string;
+  readonly handleClose: () => void;
+}): JSX.Element {
+  const [state, setState] = React.useState<StatusState>(initialStatusState);
+
+  React.useEffect(() => {
+    let destructorCalled = false;
+    const fetchStatus = () =>
+      void ajax<{
+        readonly taskstatus: MergeStatus;
+        readonly taskprogress: {
+          readonly total: number;
+          readonly current: number;
+        };
+        readonly taskid: string;
+      }>(`/api/specify/merge/status/${mergingId}/`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        headers: { Accept: 'application/json' },
+      })
+        .then(
+          ({
+            data: { taskstatus: taskStatus, taskprogress: taskProgress },
+          }) => {
+            setState({
+              status: taskStatus,
+              total: taskProgress.total,
+              current: taskProgress.current,
+            });
+            if (!destructorCalled)
+              globalThis.setTimeout(fetchStatus, 2 * MILLISECONDS);
+            return undefined;
+          }
+        )
+        .catch(softFail);
+    fetchStatus();
+    return (): void => {
+      destructorCalled = true;
+    };
+  }, [mergingId]);
+
+  const loading = React.useContext(LoadingContext);
+
+  return (
+    <Dialog
+      buttons={
+        state.status === 'SUCCESS' ? (
+          <Button.Danger onClick={handleClose}>
+            {commonText.close()}
+          </Button.Danger>
+        ) : (
+          <Button.Danger
+            onClick={(): void =>
+              loading(
+                ping(`/api/specify/merge/abort/${mergingId}/`, {
+                  method: 'POST',
+                })
+                  .then(handleClose)
+                  .catch(softFail)
+              )
+            }
+          >
+            {commonText.cancel()}
+          </Button.Danger>
+        )
+      }
+      className={{ container: dialogClassNames.narrowContainer }}
+      dimensionsKey="merging-progress"
+      header={statusLocalization[state.status]}
+      onClose={undefined}
+    >
+      <Label.Block aria-atomic aria-live="polite" className="gap-2">
+        <div className="flex flex-col gap-2">
+          {state.status === 'MERGING' && (
+            <>
+              <Progress max={state.total} value={state.current} />
+              <RemainingLoadingTime
+                current={state.current}
+                total={state.total}
+              />
+            </>
+          )}
+        </div>
+      </Label.Block>
+    </Dialog>
+  );
+}