EN-5157 Bring views over from pdd-web (#2507)

Sorry this PR is so large! It doesn't have any functional changes from the code that has already been reviewed and put into `pdd-web`.

- Add Documents, Document, Preview, and Documents Add views from `pdd-web`
- Hook into AcceleratorRouter behind feature flag
- Visible at `/accelerator/documents`, APIs currently don't work as backend isn't hooked up


![SCR-20240411-onpb.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/wJnPX9wLZAkiGXEBFJxL/e00cc8a2-7809-4a68-ba73-572a8c6dccde.png)

package.json

@@ -44,7 +44,7 @@
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/styles": "^5.15.3",
     "@reduxjs/toolkit": "^1.9.3",
-    "@terraware/web-components": "^2.12.8",
+    "@terraware/web-components": "^2.13.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -66,6 +66,7 @@
     "date-fns": "^2.29.3",
     "hex-rgb": "^5.0.0",
     "immer": "^9.0.19",
+    "is-hotkey": "^0.2.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
@@ -80,6 +81,8 @@
     "react-redux": "^8.0.5",
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^5.2.0",
+    "slate": "^0.102.0",
+    "slate-react": "^0.102.0",
     "styled-components": "^6.0.0",
     "utm": "^1.1.1",
     "web-vitals": "^3.1.1",

src/components/DocumentProducer/DocumentMetadataEdit/helpers.ts

@@ -0,0 +1,20 @@
+import { DropdownItem } from '@terraware/web-components/components/types';
+
+import { User } from 'src/types/User';
+import { Methodology } from 'src/types/documentProducer/Methodology';
+import { getUserDisplayName } from 'src/utils/user';
+
+export const getMethodologyOptions = (methodologies: Methodology[]): DropdownItem[] =>
+  methodologies.map((methodology) => ({
+    label: methodology.name,
+    value: methodology.id.toString(),
+  }));
+
+export const getDocumentOwnerOptions = (users: User[]): DropdownItem[] =>
+  users.map((user) => ({
+    label: getUserDisplayName(user) ?? '',
+    value: user.id.toString(),
+  }));
+
+export const getMethodologyName = (methodologies: Methodology[], id?: string | number): string =>
+  methodologies.find((methodology) => methodology.id.toString() === id?.toString())?.name ?? '';

src/components/DocumentProducer/DocumentMetadataEdit/index.tsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useMemo } from 'react';
+
+import { Box, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Dropdown, Textfield } from '@terraware/web-components';
+import isString from 'lodash/isString';
+
+import { selectMethodologies } from 'src/redux/features/documentProducer/methodologies/methodologiesSelector';
+import { requestListMethodologies } from 'src/redux/features/documentProducer/methodologies/methodologiesThunks';
+import { useAppDispatch, useAppSelector } from 'src/redux/store';
+import strings from 'src/strings';
+import { User } from 'src/types/User';
+import useSnackbar from 'src/utils/useSnackbar';
+
+import { getDocumentOwnerOptions, getMethodologyName, getMethodologyOptions } from './helpers';
+
+export type DocumentMetadataEditProps = {
+  associatedOrganization?: string;
+  setAssociatedOrganization: (organization: string) => void;
+  documentName?: string;
+  setDocumentName: (name: string) => void;
+  documentOwner?: string;
+  setDocumentOwner: (userId: string) => void;
+  methodologyId?: string;
+  setMethodologyId?: (methodlogyId: string) => void;
+  isEdit?: boolean;
+  formValid?: boolean;
+};
+
+const DocumentMetadataEdit = ({
+  associatedOrganization,
+  setAssociatedOrganization,
+  documentName,
+  setDocumentName,
+  documentOwner,
+  setDocumentOwner,
+  methodologyId,
+  setMethodologyId,
+  isEdit,
+  formValid,
+}: DocumentMetadataEditProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+  const snackbar = useSnackbar();
+  const { methodologies, error: getMethodologiesError } = useAppSelector(selectMethodologies);
+
+  // TODO we don't have redux for this, should it only be TF accelerator users? Or all admins?
+  // const { data: users, error: getUsersError } = useAppSelector(selectUsers);
+  const users: User[] = useMemo(() => [], []);
+  const getUsersError = null;
+
+  const methodologyOptions = useMemo(() => getMethodologyOptions(methodologies || []), [methodologies]);
+  const documentOwnerOptions = useMemo(() => getDocumentOwnerOptions(users || []), [users]);
+
+  useEffect(() => {
+    dispatch(requestListMethodologies());
+    // TODO we don't have redux for this, should it only be TF accelerator users? Or all admins?
+    // dispatch(requestListUsers());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (getMethodologiesError) {
+      snackbar.toastError(strings.GENERIC_ERROR);
+    }
+  }, [snackbar, getMethodologiesError]);
+
+  useEffect(() => {
+    if (getUsersError) {
+      snackbar.toastError(strings.GENERIC_ERROR);
+    }
+  }, [snackbar, getUsersError]);
+
+  // All fields are required in this form
+  const getErrorText = (value: unknown): string => (formValid === false && !value ? strings.REQUIRED_FIELD : '');
+
+  // This probably seems like overkill, I just didn't want to cast value to string in the Textfield onChange.
+  // Since it comes back as unknown, use typeguard
+  // TODO maybe Textfield should return back an explicit type?
+  function handleTextFieldChange(value: unknown, setter: (value: string) => void): void {
+    if (isString(value)) {
+      setter(value);
+    }
+  }
+
+  const FormField = useMemo(
+    () =>
+      styled(Box)({
+        marginBottom: theme.spacing(2),
+        textAlign: 'left',
+      }),
+    [theme]
+  );
+
+  return (
+    <>
+      <FormField>
+        <Textfield
+          id='associated-organization'
+          label={strings.DOCUMENTS_ADD_FORM_ASSOC_ORG}
+          type='text'
+          value={associatedOrganization}
+          errorText={getErrorText(associatedOrganization)}
+          onChange={(value: unknown) => handleTextFieldChange(value, setAssociatedOrganization)}
+          required
+        />
+      </FormField>
+
+      <FormField>
+        {isEdit ? (
+          <Textfield
+            id='methodology'
+            label={strings.DOCUMENTS_ADD_FORM_METHODOLOGY}
+            type='text'
+            value={getMethodologyName(methodologies ?? [], methodologyId)}
+            display={true}
+            required
+          />
+        ) : (
+          <Dropdown
+            id='methodology'
+            placeholder={strings.SELECT}
+            selectedValue={methodologyId}
+            options={methodologyOptions}
+            onChange={(value: string) => setMethodologyId && setMethodologyId(value)}
+            hideClearIcon={true}
+            label={strings.DOCUMENTS_ADD_FORM_METHODOLOGY}
+            errorText={getErrorText(methodologyId)}
+            autocomplete
+            required
+          />
+        )}
+      </FormField>
+
+      <FormField>
+        <Textfield
+          id='document-name'
+          label={strings.DOCUMENTS_ADD_FORM_DOC_NAME}
+          type='text'
+          value={documentName}
+          errorText={getErrorText(documentName)}
+          onChange={(value: unknown) => handleTextFieldChange(value, setDocumentName)}
+          required
+        />
+      </FormField>
+
+      <FormField>
+        <Dropdown
+          id='document-owner'
+          placeholder={strings.SELECT}
+          selectedValue={documentOwner}
+          options={documentOwnerOptions}
+          onChange={(value: string) => setDocumentOwner(value)}
+          hideClearIcon={true}
+          label={strings.DOCUMENTS_ADD_FORM_DOC_OWNER}
+          errorText={getErrorText(documentOwner)}
+          autocomplete
+          required
+        />
+      </FormField>
+    </>
+  );
+};
+
+export default DocumentMetadataEdit;