Migrate Workbench to React

specifyweb/frontend/js_src/css/workbench.css

@@ -77,6 +77,16 @@
   --accent-color: var(--search-result);
 }
 
+/* 
+ * Override default font properties: required for handsontable 10 and above
+ * See: https://github.com/handsontable/handsontable/pull/8681
+ */
+.handsontable {
+  @apply text-black dark:text-white;
+  font-family: inherit;
+  font-size: inherit;
+}
+
 /* Handsontable dark mode */
 .handsontable td,
 .htContextMenu table tbody tr td {

specifyweb/frontend/js_src/lib/components/Router/Routes.tsx

@@ -200,7 +200,7 @@ export const routes: RA<EnhancedRoute> = [
       {
         path: ':id',
         element: () =>
-          import('../WorkBench/Template').then(({ WorkBench }) => WorkBench),
+          import('../WorkBench/index').then(({ WorkBench }) => WorkBench),
       },
       {
         path: 'import',

specifyweb/frontend/js_src/lib/components/WbActions/WbNoUploadPlan.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { commonText } from '../../localization/common';
+import { wbPlanText } from '../../localization/wbPlan';
+import { Button } from '../Atoms/Button';
+import { Link } from '../Atoms/Link';
+import { Dialog } from '../Molecules/Dialog';
+import { hasPermission } from '../Permissions/helpers';
+import type { WbMapping } from '../WorkBench/mapping';
+
+export function WbNoUploadPlan({
+  isUploaded,
+  mappings,
+  datasetId,
+  noUploadPlan,
+  onOpenNoUploadPlan: handleOpenNoUploadPlan,
+  onCloseNoUploadPlan: handleCloseNoUploadPlan,
+}: {
+  readonly isUploaded: boolean;
+  readonly mappings: WbMapping | undefined;
+  readonly datasetId: number;
+  readonly noUploadPlan: boolean;
+  readonly onOpenNoUploadPlan: () => void;
+  readonly onCloseNoUploadPlan: () => void;
+}): JSX.Element {
+  React.useEffect(() => {
+    if (
+      !isUploaded &&
+      (mappings?.lines ?? []).length === 0 &&
+      hasPermission('/workbench/dataset', 'upload')
+    ) {
+      handleOpenNoUploadPlan();
+    }
+  }, []);
+
+  return (
+    <>
+      {noUploadPlan ? (
+        <Dialog
+          buttons={
+            <>
+              <Button.DialogClose>{commonText.close()}</Button.DialogClose>
+              <Link.Info href={`/specify/workbench/plan/${datasetId}/`}>
+                {commonText.create()}
+              </Link.Info>
+            </>
+          }
+          header={wbPlanText.noUploadPlan()}
+          onClose={handleCloseNoUploadPlan}
+        >
+          {wbPlanText.noUploadPlanDescription()}
+        </Dialog>
+      ) : undefined}
+    </>
+  );
+}

specifyweb/frontend/js_src/lib/components/WbActions/WbRevert.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { commonText } from '../../localization/common';
+import { wbText } from '../../localization/workbench';
+import { Button } from '../Atoms/Button';
+import { Dialog } from '../Molecules/Dialog';
+
+export function WbRevert({
+  hasUnsavedChanges,
+  onRefresh: handleRefresh,
+  onSpreadsheetUpToDate: handleSpreadsheetUpToDate,
+}: {
+  readonly hasUnsavedChanges: boolean;
+  readonly onRefresh: () => void;
+  readonly onSpreadsheetUpToDate: () => void;
+}): JSX.Element {
+  const [showRevert, openRevert, closeRevert] = useBooleanState();
+
+  const handleRevert = () => {
+    handleRefresh();
+    closeRevert();
+    handleSpreadsheetUpToDate();
+  };
+
+  return (
+    <>
+      <Button.Small
+        aria-haspopup="dialog"
+        disabled={!hasUnsavedChanges}
+        onClick={openRevert}
+      >
+        {wbText.revert()}
+      </Button.Small>
+      {showRevert && (
+        <Dialog
+          buttons={
+            <>
+              <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
+              <Button.Danger onClick={handleRevert}>
+                {wbText.revert()}
+              </Button.Danger>
+            </>
+          }
+          header={wbText.revertChanges()}
+          onClose={closeRevert}
+        >
+          {wbText.revertChangesDescription()}
+        </Dialog>
+      )}
+    </>
+  );
+}

specifyweb/frontend/js_src/lib/components/WorkBench/Components.tsx → specifyweb/frontend/js_src/lib/components/WbActions/WbRollback.tsx

@@ -1,18 +1,51 @@
 import React from 'react';
 
+import { useBooleanState } from '../../hooks/useBooleanState';
 import { commonText } from '../../localization/common';
 import { wbText } from '../../localization/workbench';
 import { ping } from '../../utils/ajax/ping';
 import { Button } from '../Atoms/Button';
 import { LoadingContext } from '../Core/Contexts';
 import { Dialog, dialogClassNames } from '../Molecules/Dialog';
+import type { WbStatus } from '../WorkBench/WbView';
 
-export function RollbackConfirmation({
-  dataSetId,
+export function WbRollback({
+  datasetId,
+  triggerStatusComponent,
+}: {
+  readonly datasetId: number;
+  readonly triggerStatusComponent: (mode: WbStatus) => void;
+}): JSX.Element {
+  const [rollback, handleOpen, handleClose] = useBooleanState();
+
+  const handleRollback = () => triggerStatusComponent('unupload');
+
+  return (
+    <>
+      <Button.Small
+        aria-haspopup="dialog"
+        aria-pressed={rollback}
+        onClick={handleOpen}
+      >
+        {wbText.rollback()}
+      </Button.Small>
+      {rollback ? (
+        <RollbackConfirmation
+          datasetId={datasetId}
+          onClose={handleClose}
+          onRollback={handleRollback}
+        />
+      ) : undefined}
+    </>
+  );
+}
+
+function RollbackConfirmation({
+  datasetId,
   onClose: handleClose,
   onRollback: handleRollback,
 }: {
-  readonly dataSetId: number;
+  readonly datasetId: number;
   readonly onClose: () => void;
   readonly onRollback: () => void;
 }): JSX.Element {
@@ -25,7 +58,7 @@ export function RollbackConfirmation({
           <Button.Danger
             onClick={() =>
               loading(
-                ping(`/api/workbench/unupload/${dataSetId}/`, {
+                ping(`/api/workbench/unupload/${datasetId}/`, {
                   method: 'POST',
                 })
                   .then(handleRollback)

specifyweb/frontend/js_src/lib/components/WbActions/WbSave.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { commonText } from '../../localization/common';
+import { wbText } from '../../localization/workbench';
+import { Http } from '../../utils/ajax/definitions';
+import { ping } from '../../utils/ajax/ping';
+import { overwriteReadOnly } from '../../utils/types';
+import { Button } from '../Atoms/Button';
+import { className } from '../Atoms/className';
+import { LoadingContext } from '../Core/Contexts';
+import { loadingBar } from '../Molecules';
+import { Dialog } from '../Molecules/Dialog';
+import type { Workbench } from '../WorkBench/WbView';
+
+export function WbSave({
+  workbench,
+  hasUnsavedChanges,
+  checkDeletedFail,
+  onSpreadsheetUpToDate: handleSpreadsheetUpToDate,
+}: {
+  readonly workbench: Workbench;
+  readonly hasUnsavedChanges: boolean;
+  readonly checkDeletedFail: (statusCode: number) => void;
+  readonly onSpreadsheetUpToDate: () => void;
+}): JSX.Element {
+  const [showProgressBar, openProgressBar, closeProgressBar] =
+    useBooleanState();
+  const loading = React.useContext(LoadingContext);
+
+  const handleSave = () => {
+    // Clear validation
+    overwriteReadOnly(workbench.dataset, 'rowresults', null);
+    workbench.validation.stopLiveValidation();
+
+    // Show saving progress bar
+    openProgressBar();
+
+    // Send data
+    loading(
+      ping(`/api/workbench/rows/${workbench.dataset.id}/`, {
+        method: 'PUT',
+        body: workbench.data,
+        expectedErrors: [Http.NO_CONTENT, Http.NOT_FOUND],
+      })
+        .then((status) => checkDeletedFail(status))
+        .then(() => {
+          handleSpreadsheetUpToDate();
+          workbench.cells.cellMeta = [];
+          /*
+           * TODO: Figure out how to rework searchCells for SettingsChange as input
+           * workbench.utils?.searchCells({ key: 'SettingsChange' });
+           */
+          workbench.hot?.render();
+          closeProgressBar();
+        })
+    );
+  };
+
+  return (
+    <>
+      <Button.Small
+        aria-haspopup="dialog"
+        disabled={!hasUnsavedChanges}
+        variant={className.saveButton}
+        onClick={handleSave}
+      >
+        {commonText.save()}
+      </Button.Small>
+      {showProgressBar ? (
+        <Dialog
+          buttons={undefined}
+          header={wbText.saving()}
+          onClose={closeProgressBar}
+        >
+          {loadingBar}
+        </Dialog>
+      ) : undefined}
+    </>
+  );
+}

specifyweb/frontend/js_src/lib/components/WbActions/WbUpload.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { commonText } from '../../localization/common';
+import { wbText } from '../../localization/workbench';
+import { Button } from '../Atoms/Button';
+import { Dialog } from '../Molecules/Dialog';
+import type { WbCellCounts } from '../WorkBench/CellMeta';
+import type { WbMapping } from '../WorkBench/mapping';
+import type { WbStatus } from '../WorkBench/WbView';
+
+export function WbUpload({
+  hasUnsavedChanges,
+  mappings,
+  openNoUploadPlan,
+  startUpload,
+  cellCounts,
+}: {
+  readonly hasUnsavedChanges: boolean;
+  readonly mappings: WbMapping | undefined;
+  readonly openNoUploadPlan: () => void;
+  readonly startUpload: (mode: WbStatus) => void;
+  readonly cellCounts: WbCellCounts;
+}): JSX.Element {
+  const [showUpload, openUpload, closeUpload] = useBooleanState();
+
+  const handleUpload = (): void => {
+    if ((mappings?.lines ?? []).length > 0) {
+      openUpload();
+    } else {
+      openNoUploadPlan();
+    }
+  };
+
+  const handleConfirmUpload = (): void => {
+    startUpload('upload');
+    closeUpload();
+  };
+
+  return (
+    <>
+      <Button.Small
+        aria-haspopup="dialog"
+        disabled={hasUnsavedChanges || cellCounts.invalidCells > 0}
+        title={
+          hasUnsavedChanges
+            ? wbText.unavailableWhileEditing()
+            : cellCounts.invalidCells > 0
+            ? wbText.uploadUnavailableWhileHasErrors()
+            : ''
+        }
+        onClick={handleUpload}
+      >
+        {wbText.upload()}
+      </Button.Small>
+      {showUpload ? (
+        <Dialog
+          buttons={
+            <>
+              <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
+              <Button.Info onClick={handleConfirmUpload}>
+                {wbText.upload()}
+              </Button.Info>
+            </>
+          }
+          header={wbText.startUpload()}
+          onClose={closeUpload}
+        >
+          {wbText.startUploadDescription()}
+        </Dialog>
+      ) : undefined}
+    </>
+  );
+}