feat: replace old Menu with new Select

app/components/component-formbuilder/src/components/config/Elements.js

@@ -28,7 +28,7 @@ const textarea = {
 }
 
 const validate = {
-  component: 'Menu',
+  component: 'Select',
   props: {
     isMulti: true,
     isClearable: true,
@@ -151,7 +151,7 @@ const elements = {
     shortDescription: textfield,
     validate,
   },
-  Menu: {
+  Select: {
     id: textfield,
     title: textfield,
     name: textfield,

app/components/component-review/src/components/assignEditors/AssignEditor.js

@@ -2,10 +2,10 @@ import React from 'react'
 import config from 'config'
 import { compose, withProps } from 'recompose'
 import { cloneDeep, get } from 'lodash'
-import { Menu } from '@pubsweet/ui'
 import { graphql } from '@apollo/client/react/hoc'
 import gql from 'graphql-tag'
 import { withLoader } from 'pubsweet-client'
+import { Select } from '../../../../shared'
 
 const editorOption = user => ({
   label: user.defaultIdentity.name,
@@ -68,14 +68,16 @@ const AssignEditor = ({
   value,
   options,
 }) => (
-  <Menu
+  <Select
+    aria-label={`Assign ${teamRole}`}
     data-testid={`assign${teamRole}`}
     label={teamName}
-    onChange={user => {
+    onChange={selected => {
+      // selected is { label, value } object
       if (value) {
-        updateTeam(user, teamRole)
+        updateTeam(selected.value, teamRole)
       } else {
-        createTeam(user, teamRole)
+        createTeam(selected.value, teamRole)
       }
     }}
     options={options}

app/components/component-submit/src/components/FormTemplate.js

@@ -2,10 +2,17 @@ import React from 'react'
 import styled from 'styled-components'
 import { unescape, groupBy, isArray, get, set, cloneDeep } from 'lodash'
 import { FieldArray } from 'formik'
-import * as uiComponents from '@pubsweet/ui'
+import {
+  TextField,
+  RadioGroup,
+  CheckboxGroup,
+  Button,
+  Attachment,
+  ValidatedFieldFormik,
+} from '@pubsweet/ui'
 import * as validators from 'xpub-validators'
 import { AbstractEditor } from 'xpub-edit'
-import { Section as Container } from '../../../shared'
+import { Section as Container, Select } from '../../../shared'
 import { Heading1, Section, Legend, SubNote } from '../style'
 import AuthorsInput from './AuthorsInput'
 import Supplementary from './Supplementary'
@@ -72,10 +79,8 @@ const filterFileManuscript = files =>
         'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
   )
 
-const { ValidatedFieldFormik, Button, Attachment } = uiComponents
-
 // Add the AbstractEditor and AuthorsInput to the list of available form elements
-const elements = uiComponents
+const elements = { TextField, RadioGroup, CheckboxGroup }
 elements.AbstractEditor = ({
   validationStatus,
   setTouched,
@@ -95,6 +100,7 @@ elements.AbstractEditor = ({
 )
 
 elements.AuthorsInput = AuthorsInput
+elements.Select = Select
 
 const rejectProps = (obj, keys) =>
   Object.keys(obj)
@@ -187,6 +193,7 @@ const renderArray = (elementsComponentArray, onChange) => ({
             'order',
             'value',
           ])}
+          aria-label={element.shortDescription}
           component={elements[element.component]}
           data-testid={element.name}
           key={`notes-validate-${element.id}`}
@@ -271,12 +278,21 @@ export default ({
             {element.component !== 'AuthorsInput' &&
               element.component !== 'SupplementaryFiles' && (
                 <ValidatedFieldFormik
+                  aria-label={element.placeholder || element.title}
                   component={elements[element.component]}
-                  data-testid={element.name}
+                  data-testid={element.name} // TODO: Improve this
                   key={`validate-${element.id}`}
                   name={element.name}
                   onChange={value => {
-                    const val = value.target ? value.target.value : value
+                    // TODO: Perhaps split components remove conditions here
+                    let val
+                    if (value.target) {
+                      val = value.target.value
+                    } else if (value.value) {
+                      val = value.value
+                    } else {
+                      val = value
+                    }
                     setFieldValue(element.name, val, true)
                     onChange(val, element.name)
                   }}

app/components/shared/Select.js

@@ -38,5 +38,11 @@ const styles = th => ({
 
 export const Select = props => {
   const theme = useContext(ThemeContext)
-  return <ReactSelect {...props} styles={styles(theme)} />
+  let selectedOption = props.value
+  if (!props.isMulti) {
+    selectedOption = props.options.find(option => option.value === props.value)
+  }
+  return (
+    <ReactSelect {...props} styles={styles(theme)} value={selectedOption} />
+  )
 }

app/storage/forms/submit.json

@@ -62,24 +62,24 @@
     {
       "title": "Type of Research Object",
       "id": "1531303833528",
-      "component": "Menu",
+      "component": "Select",
       "name": "submission.objectType",
       "options": [
         {
-          "value": "original-research",
-          "label": "Original Research Report"
+          "value": "dataset",
+          "label": "Dataset"
         },
         {
-          "label": "Review",
-          "value": "review"
+          "value": "software",
+          "label": "Software"
         },
         {
-          "value": "opinion",
-          "label": "Opinion/Commentary"
+          "value": "figure",
+          "label": "Figure"
         },
         {
-          "value": "registered-report",
-          "label": "Registered Report"
+          "value": "notebook",
+          "label": "Notebook"
         }
       ],
       "order": "7"
@@ -146,7 +146,7 @@
     {
       "title": "Did your study involve healthy subjects only or patients (note that patient studies may also involve healthy subjects)",
       "id": "1591193412418",
-      "component": "Menu",
+      "component": "Select",
       "name": "submission.subjects",
       "options": [
         {
@@ -165,7 +165,7 @@
     {
       "title": "If your research involved human subjects, was the research approved by the relevant Institutional Review Board or ethics panel?",
       "id": "1591193588182",
-      "component": "Menu",
+      "component": "Select",
       "name": "submission.irb",
       "options": [
         {
@@ -188,7 +188,7 @@
     {
       "title": "Was any animal research approved by the relevant IACUC or other animal research panel?",
       "id": "1591343661290",
-      "component": "Menu",
+      "component": "Select",
       "name": "submission.animal_research_approval",
       "description": "<p><i>NOTE: Any animal studies without IACUC approval will be automatically rejected.</i></p>",
       "options": [
@@ -282,7 +282,7 @@
     {
       "title": "For human MRI, what field strength scanner do you use?",
       "id": "1591344209443",
-      "component": "Menu",
+      "component": "Select",
       "name": "submission.humanMRI",
       "order": "17",
       "options": [
@@ -393,4 +393,4 @@
   "haspopup": "true",
   "popuptitle": "By submitting the manuscript, you agree to the following statements.",
   "popupdescription": "<p>The corresponding author confirms that all co-authors are included, and that everyone listed as a co-author agrees to that role and all the following requirements and acknowledgements.</p><p></p><p>The submission represents original work and that sources are given proper attribution. The journal employs CrossCheck to compare submissions against a large and growing database of published scholarly content. If in the judgment of a senior editor a submission is genuinely suspected of plagiarism, it will be returned to the author(s) with a request for explanation.</p><p></p><p>The research was conducted in accordance with ethical principles.</p><p></p><p>There is a Data Accessibility Statement, containing information about the location of open data and materials, in the manuscript.</p><p></p><p>A conflict of interest statement is present in the manuscript, even if to state no conflicts of interest.</p>"
-}
\ No newline at end of file
+}