Merge branch 'mvp-2' into amattu2-LocalDocs

.env.example

@@ -5,6 +5,7 @@ REACT_APP_NIH_REDIRECT_URL=""
 
 # API URLs
 REACT_APP_BACKEND_API=""
+REACT_APP_DEV_TIER=""
 
 # Optional - Specify default port
 # PORT=3010

conf/inject.template.js

@@ -1,4 +1,4 @@
-/* eslint-disable */ 
+/* eslint-disable */
 window.injectedEnv = {
     NIH_CLIENT_ID: '${NIH_CLIENT_ID}',
     NIH_AUTHORIZE_URL: '${NIH_AUTHORIZE_URL}',
@@ -22,6 +22,7 @@ window.injectedEnv = {
     REACT_APP_NIH_REDIRECT_URL: '${REACT_APP_NIH_REDIRECT_URL}',
     REACT_APP_BACKEND_PUBLIC_API: '${REACT_APP_BACKEND_PUBLIC_API}',
     REACT_APP_AUTH: '${REACT_APP_AUTH}',
+    REACT_APP_DEV_TIER: '${DEV_TIER}',
     PUBLIC_ACCESS: '${PUBLIC_ACCESS}',
     NODE_LEVEL_ACCESS:'${NODE_LEVEL_ACCESS}',
     NODE_LABEL: '${NODE_LABEL}'

package.json

@@ -19,9 +19,11 @@
     "@types/jest": "^27.5.2",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "data-model-navigator": "^1.1.2",
+    "data-model-navigator": "1.1.10",
     "dayjs": "^1.11.8",
+    "file-saver": "^2.0.5",
     "graphql": "^16.7.1",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",

public/injectEnv.js

@@ -3,4 +3,5 @@ window.injectedEnv = {
   NIH_AUTHORIZE_URL: '',
   NIH_CLIENT_ID: '',
   NIH_REDIRECT_URL: '',
+  REACT_APP_DEV_TIER: ''
 };

src/components/Contexts/FormContext.tsx

@@ -13,13 +13,15 @@ import {
   GET_APP,
   LAST_APP,
   REJECT_APP,
+  INQUIRE_APP,
   REOPEN_APP,
   REVIEW_APP,
   SAVE_APP,
   SUBMIT_APP,
   ApproveAppResp,
   GetAppResp,
   LastAppResp,
+  InquireAppResp,
   RejectAppResp,
   ReopenAppResp,
   ReviewAppResp,
@@ -41,6 +43,7 @@ export type ContextState = {
   reopenForm?: () => Promise<string | boolean>;
   reviewForm?: () => Promise<string | boolean>;
   approveForm?: (comment: string, wholeProgram: boolean) => Promise<string | boolean>;
+  inquireForm?: (comment: string) => Promise<string | boolean>;
   rejectForm?: (comment: string) => Promise<string | boolean>;
   setData?: (Application) => Promise<SetDataReturnType>;
   error?: string;
@@ -140,6 +143,12 @@ export const FormProvider: FC<ProviderProps> = ({ children, id } : ProviderProps
     fetchPolicy: 'no-cache'
   });
 
+  const [inquireApp] = useMutation<InquireAppResp>(INQUIRE_APP, {
+    variables: { id },
+    context: { clientName: 'backend' },
+    fetchPolicy: 'no-cache'
+  });
+
   const [rejectApp] = useMutation<RejectAppResp>(REJECT_APP, {
     variables: { id },
     context: { clientName: 'backend' },
@@ -282,6 +291,26 @@ export const FormProvider: FC<ProviderProps> = ({ children, id } : ProviderProps
     return res?.approveApplication?.["_id"] || false;
   };
 
+  // Here we set the form to inquired through the API with a comment
+  const inquireForm = async (comment: string) => {
+    setState((prevState) => ({ ...prevState, status: Status.SUBMITTING }));
+
+    const { data: res, errors } = await inquireApp({
+      variables: {
+        _id: state?.data["_id"],
+        comment
+      }
+    });
+
+    if (errors) {
+      setState((prevState) => ({ ...prevState, status: Status.ERROR }));
+      return false;
+    }
+
+    setState((prevState) => ({ ...prevState, status: Status.LOADED }));
+    return res?.inquireApplication?.["_id"] || false;
+  };
+
   // Here we reject the form to the API with a comment
   const rejectForm = async (comment: string) => {
     setState((prevState) => ({ ...prevState, status: Status.SUBMITTING }));
@@ -424,6 +453,7 @@ export const FormProvider: FC<ProviderProps> = ({ children, id } : ProviderProps
       setData,
       submitData,
       approveForm,
+      inquireForm,
       rejectForm,
       reviewForm,
       reopenForm,

src/components/DataSubmissions/DataSubmissionUpload.tsx

@@ -155,7 +155,7 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
   });
 
   const handleChooseFilesClick = () => {
-    if (!canUpload) {
+    if (!canUpload || readOnly) {
       return;
     }
     uploadMetatadataInputRef?.current?.click();
@@ -165,10 +165,22 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
     const { files } = event?.target || {};
 
     if (!files) {
+      setSelectedFiles(null);
+      return;
+    }
+
+    // Filter out any file that is not tsv
+    const filteredFiles = Array.from(files)?.filter((file: File) => file.type === "text/tab-separated-values");
+    if (!filteredFiles?.length) {
+      setSelectedFiles(null);
       return;
     }
 
-    setSelectedFiles(files);
+    // Add the files back to a FileList
+    const dataTransfer = new DataTransfer();
+    filteredFiles.forEach((file) => dataTransfer?.items?.add(file));
+
+    setSelectedFiles(dataTransfer?.files);
   };
 
   const createNewBatch = async (): Promise<NewBatch> => {
@@ -200,7 +212,7 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
   };
 
   const handleUploadFiles = async () => {
-    if (!selectedFiles?.length || !canUpload) {
+    if (!selectedFiles?.length || !canUpload || readOnly) {
       return;
     }
 

src/components/Header/components/NavbarDesktop.tsx

@@ -505,10 +505,10 @@ const NavBar = () => {
             )}
       </NavContainer>
       <Dropdown ref={dropdownSelection} className={(clickedTitle === '') ? "invisible" : ""}>
-        <DropdownContainer>
+        <NameDropdownContainer>
           <div className="dropdownList">
             {
-              (clickedTitle !== "" && !authData.isLoggedIn && clickedTitle !== displayName)
+              (clickedTitle !== "" && clickedTitle !== displayName)
                 ? navbarSublists[clickedTitle]?.map((dropItem, idx) => {
                   const dropkey = `drop_${idx}`;
                   return (
@@ -524,7 +524,7 @@ const NavBar = () => {
                 : null
               }
           </div>
-        </DropdownContainer>
+        </NameDropdownContainer>
       </Dropdown>
       <NameDropdown ref={nameDropdownSelection} className={clickedTitle !== displayName ? "invisible" : ""}>
         <NameDropdownContainer>

src/components/Questionnaire/ApproveFormDialog.tsx

@@ -50,7 +50,7 @@ const ApproveFormDialog: FC<Props> = ({
     <StyledDialog
       open={open}
       onClose={onClose}
-      title={title || "Approve Application"}
+      title={title || "Approve Submission Request"}
       actions={(
         <>
           <Button onClick={handleOnCancel} disabled={disableActions}>

src/components/Questionnaire/InquireFormDialog.tsx

@@ -0,0 +1,88 @@
+import { LoadingButton } from "@mui/lab";
+import { Button, DialogProps, styled } from "@mui/material";
+import { FC, useState } from "react";
+import Dialog from "../Shared/Dialog";
+import TextInput from "./TextInput";
+
+const StyledDialog = styled(Dialog)({
+  "& .MuiDialog-paper": {
+    maxWidth: "none",
+    borderRadius: "8px",
+    width: "567px !important",
+  },
+});
+
+type Props = {
+  title?: string;
+  message?: string;
+  disableActions?: boolean;
+  loading?: boolean;
+  onCancel?: () => void;
+  onSubmit?: (reviewComment: string) => void;
+} & DialogProps;
+
+const InquireFormDialog: FC<Props> = ({
+  title,
+  message,
+  disableActions,
+  loading,
+  onCancel,
+  onSubmit,
+  open,
+  onClose,
+  ...rest
+}) => {
+  const [reviewComment, setReviewComment] = useState("");
+
+  const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const val = event?.target?.value || "";
+    setReviewComment(val);
+  };
+
+  const handleOnCancel = () => {
+    if (typeof onCancel === "function") {
+      onCancel();
+    }
+    setReviewComment("");
+  };
+
+  return (
+    <StyledDialog
+      open={open}
+      onClose={onClose}
+      title={title || "Request Additional Changes"}
+      actions={(
+        <>
+          <Button onClick={handleOnCancel} disabled={disableActions}>
+            Cancel
+          </Button>
+          <LoadingButton
+            onClick={() => onSubmit(reviewComment)}
+            loading={loading}
+            disabled={!reviewComment || disableActions}
+            autoFocus
+          >
+            Confirm to move to Inquired
+          </LoadingButton>
+        </>
+      )}
+      {...rest}
+    >
+      <TextInput
+        id="review-comment"
+        name="reviewComment"
+        value={reviewComment}
+        onChange={handleCommentChange}
+        maxLength={500}
+        placeholder="500 characters allowed"
+        required
+        minRows={2}
+        maxRows={2}
+        multiline
+        sx={{ paddingY: "16px" }}
+      />
+    </StyledDialog>
+  );
+};
+
+export default InquireFormDialog;

src/components/Questionnaire/RejectFormDialog.tsx

@@ -50,7 +50,7 @@ const RejectFormDialog: FC<Props> = ({
     <StyledDialog
       open={open}
       onClose={onClose}
-      title={title || "Reject Application"}
+      title={title || "Reject Submission Request"}
       actions={(
         <>
           <Button onClick={handleOnCancel} disabled={disableActions}>

src/config/DataCommons.ts

@@ -0,0 +1,15 @@
+/**
+ * A collection of site-wide supported Data Commons.
+ */
+export const DataCommons: DataCommon[] = [
+  {
+    name: "CDS",
+    route: "icdc",
+    config: null,
+  },
+  {
+    name: "ICDC",
+    route: "icdc",
+    config: null,
+  },
+];

src/config/ModelNavigator.ts

@@ -1,6 +1,6 @@
-export const DATA_MODEL = "models/icdc-model.yml";
-export const DATA_MODEL_PROPS = "models/icdc-model-props.yml";
-export const DATA_MODEL_README = "models/icdc-model-readme.md";
+export const DATA_MODEL = "/models/icdc-model.yml";
+export const DATA_MODEL_PROPS = "/models/icdc-model-props.yml";
+export const DATA_MODEL_README = "/models/icdc-model-readme.md";
 
 const facetFilterSearchData = [
   {

src/config/globalHeaderData.tsx

@@ -1,6 +1,7 @@
 import Logo from '../assets/header/Portal_Logo.svg';
 import LogoSmall from '../assets/header/Portal_Logo_Small.svg';
 import usaFlagSmall from '../assets/header/us_flag_small.svg';
+import { DataCommons } from './DataCommons';
 
 // globalHeaderLogo image 468x100
 // globalHeaderImage: image 2200x100
@@ -33,10 +34,10 @@ export const navMobileList = [
     className: 'navMobileItem',
   },
   {
-    name: 'Data Submission Templates',
-    link: '/submission-templates',
-    id: 'navbar-dropdown-submission-templates',
-    className: 'navMobileItem',
+    name: 'Model Navigator',
+    link: '#',
+    id: 'navbar-dropdown-model-navigator',
+    className: 'navMobileItem clickable',
   }
 ];
 
@@ -50,4 +51,10 @@ export const navbarSublists = {
   //     className: 'navMobileSubTitle',
   //   },
   // ],
+  "Model Navigator": DataCommons.map((dc) => ({
+    name: `${dc.name} Model`,
+    link: `/model-navigator/${dc.route}`,
+    text: '',
+    className: 'navMobileSubTitle',
+  })),
 };