Add logic for creating new annotations

packages/core/components/AnnotationFilterForm/test/AnnotationFilterForm.test.tsx

@@ -7,6 +7,7 @@ import { createSandbox } from "sinon";
 
 import AnnotationFilterForm from "..";
 import Annotation from "../../../entity/Annotation";
+import { AnnotationType } from "../../../entity/AnnotationFormatter";
 import FileFilter from "../../../entity/FileFilter";
 import { initialState, reducer, reduxLogics, interaction, selection } from "../../../state";
 import HttpAnnotationService from "../../../services/AnnotationService/HttpAnnotationService";
@@ -20,7 +21,7 @@ describe("<AnnotationFilterForm />", () => {
             annotationDisplayName: "Foo",
             annotationName: "foo",
             description: "",
-            type: "Text",
+            type: AnnotationType.STRING,
         });
 
         const sandbox = createSandbox();
@@ -169,7 +170,7 @@ describe("<AnnotationFilterForm />", () => {
             annotationDisplayName: "Foo",
             annotationName: "foo",
             description: "",
-            type: "YesNo",
+            type: AnnotationType.BOOLEAN,
         });
 
         const responseStub = {
@@ -268,7 +269,7 @@ describe("<AnnotationFilterForm />", () => {
             annotationDisplayName: "Foo",
             annotationName: "foo",
             description: "",
-            type: "Number",
+            type: AnnotationType.NUMBER,
         });
 
         const sandbox = createSandbox();
@@ -323,7 +324,7 @@ describe("<AnnotationFilterForm />", () => {
             annotationDisplayName: "Foo",
             annotationName: "foo",
             description: "",
-            type: "Duration",
+            type: AnnotationType.DURATION,
         });
 
         const sandbox = createSandbox();

packages/core/components/DirectoryTree/test/DirectoryTree.test.tsx

@@ -22,6 +22,7 @@ import { createSandbox } from "sinon";
 import { FESBaseUrl, TOP_LEVEL_FILE_ANNOTATIONS } from "../../../constants";
 import Annotation from "../../../entity/Annotation";
 import AnnotationName from "../../../entity/Annotation/AnnotationName";
+import { AnnotationType } from "../../../entity/AnnotationFormatter";
 import { FmsFileAnnotation } from "../../../services/FileService";
 import FileFilter from "../../../entity/FileFilter";
 import FileDownloadServiceNoop from "../../../services/FileDownloadService/FileDownloadServiceNoop";
@@ -44,13 +45,13 @@ describe("<DirectoryTree />", () => {
         annotationDisplayName: "Foo",
         annotationName: "foo",
         description: "",
-        type: "Text",
+        type: AnnotationType.STRING,
     });
     const barAnnotation = new Annotation({
         annotationDisplayName: "Bar",
         annotationName: "bar",
         description: "",
-        type: "Text",
+        type: AnnotationType.STRING,
     });
 
     const baseDisplayAnnotations = TOP_LEVEL_FILE_ANNOTATIONS.filter(

packages/core/components/EditMetadata/EditMetadata.module.css

@@ -11,6 +11,24 @@
   padding-left: 5px;
 }
 
+.error-message {
+  color: var(--error-status-text-color);
+  line-height: 1.15;
+}
+
+.status-message {
+  color: var(--info-status-text-color);
+  display: flex;
+}
+
+.spinner {
+  margin: 0 0.5em;
+}
+
+.spinner > div {
+  border-color: var(--info-status-background-color) var(--info-status-text-color) var(--info-status-text-color);
+}
+
 .footer {
   margin-top: 20px;
   width: 100%;
@@ -89,7 +107,7 @@
   font-size: var(--l-paragraph-size);
 }
 
-.text-field :is(input) {
+.text-field :is(input), .text-field :is(textarea) {
   background-color: var(--secondary-background-color) !important;
   color: var(--secondary-text-color) !important;
   border-radius: 4px;

packages/core/components/EditMetadata/NewAnnotationPathway.tsx

@@ -1,12 +1,25 @@
-import { IComboBoxOption, IconButton, Stack, StackItem, TextField } from "@fluentui/react";
+import {
+    IComboBoxOption,
+    IconButton,
+    Spinner,
+    SpinnerSize,
+    Stack,
+    StackItem,
+    TextField,
+} from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
+import { useDispatch, useSelector } from "react-redux";
 
 import MetadataDetails, { ValueCountItem } from "./MetadataDetails";
 import { PrimaryButton, SecondaryButton } from "../Buttons";
 import ComboBox from "../ComboBox";
 import Tooltip from "../Tooltip";
+import Annotation from "../../entity/Annotation";
 import { AnnotationType } from "../../entity/AnnotationFormatter";
+import { AnnotationValue } from "../../services/AnnotationService";
+import { interaction, metadata } from "../../state";
+import { ProcessStatus } from "../../state/interaction/actions";
 
 import styles from "./EditMetadata.module.css";
 
@@ -18,21 +31,96 @@ enum EditStep {
 
 interface NewAnnotationProps {
     onDismiss: () => void;
-    onUnsavedChanges: () => void;
+    setHasUnsavedChanges: (arg: boolean) => void;
     selectedFileCount: number;
 }
 
+// Simplified version of status message
+interface AnnotationStatus {
+    status: ProcessStatus;
+    message: string | undefined;
+}
+
 /**
  * Component for submitting a new annotation
  * and then entering values for the selected files
  */
 export default function NewAnnotationPathway(props: NewAnnotationProps) {
+    const dispatch = useDispatch();
+    // Destructure to prevent unnecessary useEffect triggers
+    const { onDismiss, setHasUnsavedChanges } = props;
+
     const [step, setStep] = React.useState<EditStep>(EditStep.CREATE_FIELD);
-    const [newValues, setNewValues] = React.useState<string | undefined>();
+    const [newValues, setNewValues] = React.useState<AnnotationValue | undefined>();
     const [newFieldName, setNewFieldName] = React.useState<string>("");
-    const [newFieldDataType, setNewFieldDataType] = React.useState<AnnotationType | undefined>();
+    const [newFieldDescription, setNewFieldDescription] = React.useState<string>("");
+    const [newFieldDataType, setNewFieldDataType] = React.useState<AnnotationType>(
+        AnnotationType.STRING
+    );
     const [newDropdownOption, setNewDropdownOption] = React.useState<string>("");
     const [dropdownOptions, setDropdownOptions] = React.useState<IComboBoxOption[]>([]);
+    const [submissionStatus, setSubmissionStatus] = React.useState<AnnotationStatus | undefined>();
+
+    const statuses = useSelector(interaction.selectors.getProcessStatuses);
+    const annotationCreationStatus = React.useMemo(
+        () => statuses.find((status) => status.processId === newFieldName),
+        [newFieldName, statuses]
+    );
+    // Check for updates to the annotation submission status
+    React.useEffect(() => {
+        const checkForStatusUpdates = async () => {
+            const currentStatus = annotationCreationStatus?.data?.status;
+            switch (currentStatus) {
+                case ProcessStatus.ERROR:
+                case ProcessStatus.STARTED:
+                case ProcessStatus.PROGRESS:
+                    setSubmissionStatus({
+                        status: currentStatus,
+                        message: annotationCreationStatus?.data?.msg,
+                    });
+                    return;
+                case ProcessStatus.SUCCEEDED:
+                    if (newFieldName && newValues) {
+                        try {
+                            dispatch(
+                                interaction.actions.editFiles({ [newFieldName]: [newValues] })
+                            );
+                        } catch (e) {
+                            setSubmissionStatus({
+                                status: ProcessStatus.ERROR,
+                                message: `Failed to create annotation: ${e}`,
+                            });
+                        } finally {
+                            setHasUnsavedChanges(false);
+                            onDismiss();
+                        }
+                    }
+                default:
+                    return;
+            }
+        };
+        checkForStatusUpdates();
+    }, [
+        annotationCreationStatus,
+        dispatch,
+        setHasUnsavedChanges,
+        newFieldName,
+        newValues,
+        onDismiss,
+    ]);
+
+    const onChangeAlphanumericField = (
+        e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+        newValue: string | undefined
+    ) => {
+        const regex = /^[\w\-\s]+$/g;
+        // Restricts character entry to alphanumeric
+        if (newValue && !regex.test(newValue)) {
+            e.preventDefault();
+        } else {
+            setNewFieldName(newValue || "");
+        }
+    };
 
     const addDropdownChip = (evt: React.FormEvent) => {
         evt.preventDefault();
@@ -53,30 +141,56 @@ export default function NewAnnotationPathway(props: NewAnnotationProps) {
         setDropdownOptions(dropdownOptions.filter((opt) => opt !== optionToRemove));
     };
 
-    function onSubmit() {
-        // TO DO: endpoint logic is in progress on a different branch
-        props.onDismiss();
-    }
-
-    // TO DO: determine when to submit the new annotation post req
     function onCreateNewAnnotation() {
-        props?.onUnsavedChanges();
+        setHasUnsavedChanges(true);
         setStep(EditStep.EDIT_FILES);
     }
 
+    function onSubmit() {
+        if (!newFieldName || !newValues) {
+            setSubmissionStatus({
+                status: ProcessStatus.ERROR,
+                message: `Missing ${!newFieldName ? "field name" : "values for file"}`,
+            });
+            return;
+        }
+        const annotation = new Annotation({
+            annotationDisplayName: newFieldName,
+            annotationName: newFieldName,
+            description: newFieldDescription,
+            type: newFieldDataType,
+        });
+        // File editing step occurs after dispatch is processed and status is updated
+        dispatch(
+            metadata.actions.createAnnotation(
+                annotation,
+                dropdownOptions.map((opt) => opt.text)
+            )
+        );
+    }
+
     return (
         <>
             {/* TO DO: Prevent user from entering a name that collides with existing annotation */}
             <TextField
                 required
                 label="New metadata field name"
                 className={styles.textField}
-                onChange={(_, newValue) => setNewFieldName(newValue || "")}
+                onChange={(ev, newValue) => onChangeAlphanumericField(ev, newValue)}
                 placeholder="Add a new field name..."
                 value={newFieldName}
             />
             {step === EditStep.CREATE_FIELD && (
                 <>
+                    <TextField
+                        multiline
+                        rows={2}
+                        label="Description"
+                        className={styles.textField}
+                        onChange={(_, newValue) => setNewFieldDescription(newValue || "")}
+                        placeholder="Add a short description of the new field..."
+                        value={newFieldDescription}
+                    />
                     <ComboBox
                         className={styles.comboBox}
                         selectedKey={newFieldDataType || undefined}
@@ -91,7 +205,9 @@ export default function NewAnnotationPathway(props: NewAnnotationProps) {
                             };
                         })}
                         onChange={(option) =>
-                            setNewFieldDataType((option?.key as AnnotationType) || "")
+                            setNewFieldDataType(
+                                (option?.key as AnnotationType) || AnnotationType.STRING
+                            )
                         }
                     />
                     {newFieldDataType === AnnotationType.DROPDOWN && (
@@ -132,17 +248,38 @@ export default function NewAnnotationPathway(props: NewAnnotationProps) {
                 </>
             )}
             {step === EditStep.EDIT_FILES && (
-                <MetadataDetails
-                    fieldType={newFieldDataType}
-                    items={[
-                        {
-                            value: undefined,
-                            fileCount: props.selectedFileCount,
-                        } as ValueCountItem,
-                    ]}
-                    dropdownOptions={dropdownOptions}
-                    onChange={(value) => setNewValues(value)}
-                />
+                <>
+                    {newFieldDescription.trim() && (
+                        <>
+                            <b>Description: </b> {newFieldDescription}
+                        </>
+                    )}
+                    <MetadataDetails
+                        fieldType={newFieldDataType}
+                        items={[
+                            {
+                                value: undefined,
+                                fileCount: props.selectedFileCount,
+                            } as ValueCountItem,
+                        ]}
+                        dropdownOptions={dropdownOptions}
+                        onChange={(value) => setNewValues(value)}
+                    />
+                    {submissionStatus && (
+                        <div
+                            className={classNames(
+                                submissionStatus.status === ProcessStatus.ERROR
+                                    ? styles.errorMessage
+                                    : styles.statusMessage
+                            )}
+                        >
+                            {submissionStatus.status === ProcessStatus.STARTED && (
+                                <Spinner className={styles.spinner} size={SpinnerSize.small} />
+                            )}
+                            {submissionStatus?.message}
+                        </div>
+                    )}
+                </>
             )}
             <div className={styles.footer}>
                 <Stack horizontal>

packages/core/components/EditMetadata/index.tsx

@@ -17,7 +17,7 @@ enum EditMetadataPathway {
 interface EditMetadataProps {
     className?: string;
     onDismiss: () => void;
-    onUnsavedChanges: (hasUnsavedChanges: boolean) => void;
+    setHasUnsavedChanges: (hasUnsavedChanges: boolean) => void;
 }
 
 /**
@@ -101,7 +101,7 @@ export default function EditMetadataForm(props: EditMetadataProps) {
                 ) : (
                     <NewAnnotationPathway
                         onDismiss={props.onDismiss}
-                        onUnsavedChanges={() => props.onUnsavedChanges(true)}
+                        setHasUnsavedChanges={(arg) => props.setHasUnsavedChanges(arg)}
                         selectedFileCount={fileCount}
                     />
                 )}

packages/core/components/FileList/test/LazilyRenderedRow.test.tsx

@@ -6,6 +6,7 @@ import { Provider } from "react-redux";
 import * as sinon from "sinon";
 
 import Annotation from "../../../entity/Annotation";
+import { AnnotationType } from "../../../entity/AnnotationFormatter";
 import FileDetail from "../../../entity/FileDetail";
 import FileSet from "../../../entity/FileSet";
 import { initialState } from "../../../state";
@@ -18,7 +19,7 @@ describe("<LazilyRenderedRow />", () => {
         annotationDisplayName: "Name",
         annotationName: "file_name",
         description: "name of file",
-        type: "Text",
+        type: AnnotationType.STRING,
     });
 
     function makeItemData() {

packages/core/components/Modal/EditMetadata/index.tsx

@@ -39,7 +39,7 @@ export default function EditMetadata({ onDismiss }: ModalProps) {
                     <EditMetadataForm
                         className={classNames({ [styles.hidden]: showWarning })}
                         onDismiss={onDismissWithWarning}
-                        onUnsavedChanges={setHasUnsavedChanges}
+                        setHasUnsavedChanges={setHasUnsavedChanges}
                     />
                     <div className={classNames({ [styles.hidden]: !showWarning })}>
                         <p className={styles.warning}>