Feature/form field additions

frontend/package.json

@@ -11,45 +11,45 @@
     "test": "jest --coverage"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.3.4",
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.2",
     "babel-minify-webpack-plugin": "^0.3.1",
     "clean-webpack-plugin": "^0.1.19",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "eslint": "^5.6.1",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-import-resolver-webpack": "^0.10.1",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.17.1",
     "eslint-plugin-jest": "^21.24.1",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
-    "jest": "^24.1.0",
+    "jest": "^24.7.1",
     "mini-css-extract-plugin": "^0.4.4",
-    "nodemon": "^1.18.4",
+    "nodemon": "^1.18.11",
     "redux-logger": "^3.0.6",
     "style-loader": "^0.23.0",
     "supertest": "3.4.2",
     "supertest-as-promised": "4.0.2",
     "terser-webpack-plugin": "^1.1.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "4.28.4",
-    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-middleware": "^3.3.0",
-    "webpack-dev-server": "^3.1.14",
+    "webpack-dev-middleware": "^3.6.2",
+    "webpack-dev-server": "^3.3.1",
     "webpack-hot-middleware": "^2.24.0",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-merge": "^4.1.4"
@@ -59,37 +59,38 @@
     "@atlaskit/button": "^9.0.8",
     "@atlaskit/checkbox": "^5.0.4",
     "@atlaskit/comment": "^6.0.14",
-    "@atlaskit/css-reset": "^3.0.1",
+    "@atlaskit/css-reset": "^3.0.7",
     "@atlaskit/date": "^0.1.2",
     "@atlaskit/dropdown-menu": "^6.1.20",
     "@atlaskit/dynamic-table": "^10.0.15",
-    "@atlaskit/editor-core": "^106.7.9",
+    "@atlaskit/editor-core": "^107.13.3",
     "@atlaskit/editor-wikimarkup-transformer": "^2.0.27",
-    "@atlaskit/emoji": "^58.2.0",
+    "@atlaskit/emoji": "^58.3.0",
     "@atlaskit/field-text": "^7.0.13",
     "@atlaskit/field-text-area": "^4.0.10",
     "@atlaskit/flag": "^9.1.2",
-    "@atlaskit/form": "^5.2.4",
+    "@atlaskit/form": "^5.2.6",
     "@atlaskit/icon": "^14.2.1",
     "@atlaskit/icon-file-type": "^1.0.4",
-    "@atlaskit/icon-object": "^3.0.3",
+    "@atlaskit/icon-object": "^3.0.7",
     "@atlaskit/inline-dialog": "^9.0.13",
-    "@atlaskit/inline-edit": "^8.0.1",
-    "@atlaskit/layer-manager": "^6.0.1",
+    "@atlaskit/inline-edit": "^8.0.2",
+    "@atlaskit/layer-manager": "^6.0.2",
     "@atlaskit/lozenge": "^7.0.1",
-    "@atlaskit/media-card": "^58.0.0",
-    "@atlaskit/media-core": "^29.0.2",
+    "@atlaskit/media-card": "^58.0.1",
+    "@atlaskit/media-core": "^29.1.4",
     "@atlaskit/modal-dialog": "^7.0.1",
     "@atlaskit/notification-indicator": "^4.0.5",
     "@atlaskit/page": "^8.0.5",
     "@atlaskit/renderer": "^22.1.0",
+    "@atlaskit/section-message": "^2.0.2",
     "@atlaskit/smart-card": "8.4.0",
     "@atlaskit/spinner": "^9.0.10",
     "@atlaskit/tabs": "^8.0.9",
-    "@atlaskit/textarea": "^0.4.0",
+    "@atlaskit/textarea": "^0.4.3",
     "@atlaskit/textfield": "^0.1.6",
     "@atlaskit/util-shared-styles": "^3.0.0",
-    "@babel/polyfill": "^7.0.0",
+    "@babel/polyfill": "^7.4.3",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
     "config": "^2.0.1",
@@ -99,7 +100,7 @@
     "core-js": "^2.6.5",
     "express": "~4.16.0",
     "express-manifest-helpers-upgraded": "^0.7.1",
-    "express-session": "^1.15.6",
+    "express-session": "^1.16.1",
     "faker": "^4.1.0",
     "filesize": "^3.6.1",
     "http-proxy-middleware": "^0.19.0",
@@ -128,9 +129,9 @@
     "redux": "^4.0.0",
     "redux-saga": "^0.16.2",
     "request": "^2.88.0",
-    "snyk": "^1.123.0",
+    "snyk": "^1.151.0",
     "styled-components": "^3.4.6",
-    "tus-js-client": "^1.5.1"
+    "tus-js-client": "^1.7.1"
   },
   "resolutions": {
     "**/event-stream": "^4.0.1"

frontend/src/modules/files/reducer/entities.js

@@ -33,6 +33,7 @@ function entities(state = initialState, action = {}) {
     case 'file/upload/progress':
       return mapKeys(state, uploadIdMapper.bind(null, action));
 
+    case 'request/reset':
     case 'request/put/success':
       return {};
 

frontend/src/modules/files/reducer/file-types.js

@@ -12,22 +12,27 @@ function fileTypes(state = initialState, action = {}) {
   const filesKey = get(action, 'meta.filesKey');
   const values = get(state, filesKey, []);
 
-  if (action.type === 'file/upload/success') {
-    // fileType can only be one of the keys in the initialState
-    return {
-      ...state,
-      [filesKey]: union(values, [action.meta.file.id]),
-    };
-  }
+  switch (action.type) {
+    case 'request/reset':
+    case 'request/put/success':
+      return initialState;
 
-  if (action.type === 'request/remove-file') {
-    return {
-      ...state,
-      [filesKey]: values.filter(id => id !== action.payload),
-    };
-  }
+    case 'file/upload/success':
+      // fileType can only be one of the keys in the initialState
+      return {
+        ...state,
+        [filesKey]: union(values, [action.meta.file.id]),
+      };
 
-  return state;
+    case 'request/remove-file':
+      return {
+        ...state,
+        [filesKey]: values.filter(id => id !== action.payload),
+      };
+
+    default:
+      return state;
+  }
 }
 
 export default fileTypes;

frontend/src/modules/requests/components/request-form/field.jsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@atlaskit/textfield';
+import TextArea from '@atlaskit/textarea';
+
+import { phoneNumberRegex } from '../../utils';
+
+function Field({ type, fieldProps }) {
+  switch (type) {
+    case 'textarea':
+      // TODO: Add other possible types like checkboxes, etc if needed
+      return <TextArea {...fieldProps} />;
+
+    case 'tel':
+      return (
+        <TextField {...fieldProps} type="tel" pattern={phoneNumberRegex} />
+      );
+
+    case 'text':
+    default:
+      return <TextField {...fieldProps} />;
+  }
+}
+
+Field.propTypes = {
+  type: PropTypes.oneOf(['text', 'tel', 'textarea']).isRequired,
+  fieldProps: PropTypes.object.isRequired,
+};
+
+export default Field;

frontend/src/modules/requests/components/request-form/form.jsx

@@ -4,7 +4,6 @@ import ArrowRightCircleIcon from '@atlaskit/icon/glyph/arrow-right-circle';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import { colors } from '@atlaskit/theme';
 import TextField from '@atlaskit/textfield';
-import TextArea from '@atlaskit/textarea';
 import Form, {
   ErrorMessage,
   Field,
@@ -13,9 +12,11 @@ import Form, {
   FormSection,
   HelperMessage,
 } from '@atlaskit/form';
+import SectionMessage from '@atlaskit/section-message';
 import { uid } from 'react-uid';
 import { withRouter } from 'react-router-dom';
 
+import FormField from './field';
 import { requestFields } from '../../utils';
 
 function NewRequestForm({ history, isCreating, onSubmit }) {
@@ -26,7 +27,7 @@ function NewRequestForm({ history, isCreating, onSubmit }) {
           <form {...formProps}>
             <FormHeader
               title="Initiate a New Request"
-              description="Output Files can be added once the request has been created."
+              description="Please ensure that you also have the following elements, as appropriate, with your output submission: descriptive labeling (ideally alongside each component), information for specific output types, and, log files or annotated steps of analysis."
             />
             <Field
               isRequired
@@ -51,24 +52,41 @@ function NewRequestForm({ history, isCreating, onSubmit }) {
                 </React.Fragment>
               )}
             </Field>
-            <FormSection title="Additional Fields">
+            <FormSection
+              title="Output Package and/or Output Groups Description "
+              description="Describe the context for this output package. If appropriate, you may choose to create Output Groups, which are a collection of output components that are batched for the purposes of description."
+            >
               {requestFields.map(d => (
                 <Field
                   key={uid(d)}
                   name={d.value}
                   defaultValue=""
                   label={d.name}
                   isDisabled={isCreating}
+                  isRequired={d.isRequired}
                 >
                   {({ fieldProps }) => (
                     <React.Fragment>
-                      <TextArea {...fieldProps} />
+                      <FormField type={d.type} fieldProps={fieldProps} />
                       <HelperMessage>{d.helperText}</HelperMessage>
                     </React.Fragment>
                   )}
                 </Field>
               ))}
             </FormSection>
+            <FormSection>
+              <SectionMessage
+                appearance="warning"
+                title="Affirmation of Confidentiality"
+              >
+                <p>
+                  By completing this form and submitting the output package for
+                  review, I affirm that the requested outputs are safe for
+                  release and protect the confidentiality of data, to the best
+                  of my knowledge.
+                </p>
+              </SectionMessage>
+            </FormSection>
             <FormFooter>
               <ButtonGroup>
                 <Button

frontend/src/modules/requests/components/request/details.jsx

@@ -17,8 +17,10 @@ function RequestDetails({ data, isEditing, onSave }) {
   const supportingFiles = get(data, 'supportingFiles', []);
   const requestDetails = requestFields.map(d => ({
     name: d.name,
-    value: get(data, d.value),
+    type: d.type,
+    value: get(data, d.value, ''),
     key: d.value,
+    isRequired: d.isRequired,
   }));
 
   if (isEmpty(data)) {