[DUOS-1755][risk=no] Step 2 DAR Form

src/components/forms/formComponents.js

@@ -4,7 +4,7 @@ import Creatable from 'react-select/creatable';
 import Select from 'react-select';
 import AsyncSelect from 'react-select/async/dist/react-select.esm';
 import AsyncCreatable from 'react-select/async-creatable';
-import { FormValidators } from './forms';
+import { FormField, FormValidators } from './forms';
 import { RadioButton } from '../RadioButton';
 import PublishIcon from '@material-ui/icons/Publish';
 
@@ -67,6 +67,7 @@ export const formInputGeneric = (config) => {
     id, title, disabled,
     placeholder, type,
     inputStyle, ariaDescribedby,
+    readOnly,
     formValue, error, setError
   } = config;
 
@@ -77,6 +78,7 @@ export const formInputGeneric = (config) => {
       className: `form-control ${error ? 'errored' : ''}`,
       placeholder: placeholder || title,
       value: formValue,
+      readOnly: readOnly,
       style: { ...styles.inputStyle, ...inputStyle },
       disabled: disabled,
       onChange: (event) => onFormInputChange(config, event.target.value),
@@ -393,6 +395,10 @@ export const formInputYesNoRadioGroup = (config) => {
               description: 'Yes',
               disabled,
             }),
+          ]),
+          div({
+            className: 'radio-button-container',
+          }, [
             h(RadioButton, {
               id: `${id}_no`,
               name: `${id}_no`,
@@ -490,12 +496,19 @@ export const formInputSlider = (config) => {
 export const formInputFile = (config) => {
   const {
     id,
+    formValue,
     uploadText = 'Upload a file',
     multiple = false,
     accept = '',
   } = config;
 
-  return div({}, [
+  return div({
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    }
+  }, [
     div({
       className: 'form-file-upload',
     }, [
@@ -526,6 +539,19 @@ export const formInputFile = (config) => {
         h(PublishIcon, {}),
         uploadText,
       ])
+    ]),
+    div({
+      style: {
+        marginLeft: '20px',
+        width: '450px',
+      }
+    }, [
+      h(FormField, {
+        id: `${id}_fileName`,
+        placeholder: 'Filename.txt',
+        defaultValue: formValue?.name,
+        readOnly: true,
+      })
     ])
   ]);
 };

src/components/forms/formUtils.js

@@ -5,12 +5,8 @@ import { isEmailAddress } from '../../libs/utils';
 export const validateFormProps = (props) => {
   const type = (!isNil(props.type) ? props.type : FormFieldTypes.TEXT);
 
-  const requiredProps = type.requiredProps || [];
-  const optionalProps = type.optionalProps || [];
-
-  requiredProps.push(...commonRequiredProps);
-  optionalProps.push(...commonOptionalProps);
-  optionalProps.push(...requiredProps);
+  const requiredProps = (type.requiredProps || []).concat(commonRequiredProps);
+  const optionalProps = (type.optionalProps || []).concat(commonOptionalProps).concat(requiredProps);
 
   const propKeys = Object.keys(props);
 
@@ -61,10 +57,6 @@ export const customSelectPropValidation = (props) => {
     if (isNil(props.loadOptions)) {
       throw 'must specify \'loadOptions\' if select is async';
     }
-
-    if (isNil(props.optionsAreString)) {
-      throw 'must specify \'optionsAreString\' if select is async';
-    }
   }
 
 };

src/components/forms/forms.js

@@ -27,7 +27,6 @@ import './forms.css';
 
 export const commonRequiredProps = [
   'id',
-  'onChange'
 ];
 export const commonOptionalProps = [
   'name',
@@ -43,6 +42,7 @@ export const commonOptionalProps = [
   'onChange',
   'type',
   'key',
+  'isRendered',
 ];
 
 // ----------------------------------------------------------------------------------------------------- //
@@ -82,7 +82,6 @@ export const FormFieldTypes = {
     ],
     customPropValidation: customRadioPropValidation,
   },
-
   YESNORADIOGROUP: {
     defaultValue: null,
     component: formInputYesNoRadioGroup,
@@ -106,15 +105,18 @@ export const FormFieldTypes = {
     requiredProps: [],
     optionalProps: [
       'placeholder',
-      'inputStyle'],
+      'inputStyle',
+      'readOnly',
+    ],
   },
   NUMBER: {
     defaultValue: '',
     component: formInputGeneric,
     requiredProps: [],
     optionalProps: [
       'placeholder',
-      'inputStyle'
+      'inputStyle',
+      'readOnly',
     ],
   },
   FILE: {
@@ -135,20 +137,6 @@ export const FormFieldTypes = {
   },
   SELECT: {
     defaultValue: (config) => (config?.isMulti ? [] : ''),
-    // updateDefaultValue: (config) => {
-    //   const {
-    //     selectOptions, defaultValue, isMulti
-    //   } = config;
-    //   const isStringArr = config.isStringArr || (!isNil(selectOptions) && isString(selectOptions[0]));
-
-    //   if (isMulti) {
-    //     return isStringArr ? defaultValue.map((v) => {return { key: v, displayValue: v };}) : defaultValue;
-    //   }
-
-    //   return isStringArr
-    //     ? { key: defaultValue, displayText: defaultValue }
-    //     : defaultValue;
-    // },
     component: formInputSelect,
     requiredNormalSelectProps: [
       'selectOptions'
@@ -204,6 +192,31 @@ export const FormValidators = {
 // ----------------------------------------------------------------------------------------------------- //
 // ======                                     MAIN COMPONENTS                                     ====== //
 // ----------------------------------------------------------------------------------------------------- //
+export const FormFieldTitle = (props) => {
+  const {
+    title,
+    hideTitle,
+    description,
+    formId,
+    ariaLevel,
+    required,
+    error,
+  } = props;
+
+  return div({}, [
+    title && !hideTitle && label({
+      id: `lbl_${formId}`,
+      className: `control-label ${error ? 'errored' : ''}`,
+      htmlFor: `${formId}`,
+      'aria-level': ariaLevel
+    }, [
+      title,
+      required && '*'
+    ]),
+    description && div({ style: { marginBottom: 15 } }, description),
+  ]);
+};
+
 export const FormField = (config) => {
   const {
     id, type = FormFieldTypes.TEXT, ariaLevel,
@@ -236,16 +249,11 @@ export const FormField = (config) => {
     style,
     className: `formField-container formField-${id}`
   }, [
-    title && !hideTitle && label({
-      id: `lbl_${id}`,
-      className: `control-label ${error ? 'errored' : ''}`,
-      htmlFor: `${id}`,
-      'aria-level': ariaLevel
-    }, [
-      title,
-      required && '*'
-    ]),
-    description && div({ style: { marginBottom: 15 } }, description),
+    h(FormFieldTitle, {
+      title, hideTitle, description,
+      required, formId: id, ariaLevel,
+      error
+    }),
     h(type.component, {
       ...config,
       error, setError,

src/libs/ajax.js

@@ -299,6 +299,18 @@ export const DataSet = {
     return await res.json();
   },
 
+  getDatasetsByIds: async (ids) => {
+    const url = `${await getApiUrl()}/api/dataset/batch?ids=${ids.join('&ids=')}`;
+    const res = await fetchOk(url, Config.authOpts());
+    return await res.json();
+  },
+
+  searchDatasets: async (query) => {
+    const url = `${await getApiUrl()}/api/dataset/search?query=${query}`;
+    const res = await fetchOk(url, Config.authOpts());
+    return await res.json();
+  },
+
   getDarDatasets: async (datasetIds) => {
     let datasets;
     const datasetsPromise = datasetIds.map((id) => {
@@ -314,6 +326,12 @@ export const DataSet = {
     return await res.json();
   },
 
+  getDatasetByIdV2: async id => {
+    const url = `${await getApiUrl()}/api/dataset/v2/${id}`;
+    const res = await fetchOk(url, Config.authOpts());
+    return await res.json();
+  },
+
   downloadDataSets: async (objectIdList, fileName) => {
     const url = `${await getApiUrl()}/api/dataset/download`;
     const res = await fetchOk(url, fp.mergeAll([Config.jsonBody(objectIdList), Config.fileOpts(), { method: 'POST' }]));