MMT-3418: As a metadata user, I want to CRUD draft UMM-V records

static/src/js/components/CustomSelectWidget/CustomSelectWidget.jsx

@@ -217,7 +217,8 @@ CustomSelectWidget.defaultProps = {
   selectOptions: null,
   uiSchema: {},
   value: undefined,
-  options: {}
+  options: {},
+  required: false
 }
 
 CustomSelectWidget.propTypes = {
@@ -236,7 +237,7 @@ CustomSelectWidget.propTypes = {
       retrieveSchema: PropTypes.func
     })
   }).isRequired,
-  required: PropTypes.bool.isRequired,
+  required: PropTypes.bool,
   schema: PropTypes.shape({
     items: PropTypes.shape({}),
     description: PropTypes.string,

static/src/js/components/CustomTextWidget/CustomTextWidget.jsx

@@ -50,9 +50,7 @@ const CustomTextWidget = ({
     setFocusField
   } = formContext
 
-  const { maxLength, description } = schema
-
-  const fieldType = uiSchema['ui:type']
+  const { maxLength, description, type } = schema
 
   let title = startCase(label.split(/-/)[0])
   if (uiSchema['ui:title']) {
@@ -105,7 +103,7 @@ const CustomTextWidget = ({
         placeholder={placeholder}
         ref={focusRef}
         tabIndex={0}
-        type={fieldType && fieldType === 'number' ? 'number' : 'text'}
+        type={type && type === 'number' ? 'number' : 'text'}
         value={value}
       />
     </CustomWidgetWrapper>
@@ -116,7 +114,8 @@ CustomTextWidget.defaultProps = {
   disabled: false,
   onBlur: null,
   placeholder: null,
-  value: ''
+  value: '',
+  required: false
 }
 
 CustomTextWidget.propTypes = {
@@ -132,14 +131,14 @@ CustomTextWidget.propTypes = {
       setFocusField: PropTypes.func
     }).isRequired
   }).isRequired,
-  required: PropTypes.bool.isRequired,
+  required: PropTypes.bool,
   schema: PropTypes.shape({
     description: PropTypes.string,
-    maxLength: PropTypes.number
+    maxLength: PropTypes.number,
+    type: PropTypes.string
   }).isRequired,
   uiSchema: PropTypes.shape({
-    'ui:title': PropTypes.string,
-    'ui:type': PropTypes.string
+    'ui:title': PropTypes.string
   }).isRequired,
   value: PropTypes.oneOfType([
     PropTypes.string,

static/src/js/components/CustomTextWidget/__tests__/CustomTextWidget.test.js

@@ -185,8 +185,8 @@ describe('CustomTextWidget', () => {
   describe('when the input is a number field', () => {
     test('renders a number field', () => {
       setup({
-        uiSchema: {
-          'ui:type': 'number'
+        schema: {
+          type: 'number'
         }
       })
 

static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.jsx

@@ -137,7 +137,8 @@ const CustomWidgetWrapper = ({
 CustomWidgetWrapper.defaultProps = {
   charactersUsed: null,
   description: null,
-  maxLength: null
+  maxLength: null,
+  required: null
 }
 
 CustomWidgetWrapper.propTypes = {
@@ -146,7 +147,7 @@ CustomWidgetWrapper.propTypes = {
   description: PropTypes.string,
   id: PropTypes.string.isRequired,
   maxLength: PropTypes.number,
-  required: PropTypes.bool.isRequired,
+  required: PropTypes.bool,
   scrollRef: PropTypes.shape({}).isRequired,
   title: PropTypes.string.isRequired
 }

static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx

@@ -1,13 +1,147 @@
-import React from 'react'
-import Col from 'react-bootstrap/Col'
-import Row from 'react-bootstrap/Row'
-
-const GridGroupedSinglePanel = () => (
-  <Row>
-    <Col>
-      This is where the Grouped Single Panel would go.
-    </Col>
-  </Row>
-)
+import React, { useState } from 'react'
+import { FaMinusCircle, FaPlusCircle } from 'react-icons/fa'
+import PropTypes from 'prop-types'
+import Button from '../Button/Button'
+
+// eslint-disable-next-line import/no-cycle
+import GridLayout from '../GridLayout/GridLayout'
+
+const GridGroupedSinglePanel = ({
+  uiSchema,
+  formData = {},
+  onChange,
+  registry,
+  schema,
+  layout,
+  idSchema,
+  errorSchema
+}) => {
+  // Use state hook for showSinglePanel flag
+  const [showSinglePanel, setShowSinglePanel] = useState()
+
+  // Check if a value is null or undefined
+  const isNullOrUndefined = (value) => value === undefined || value === null
+
+  // Check if the form arrays don't have anything other than null or undefined
+  const checkEmpty = (formDataParam) => {
+    const formArrays = Object.values(formDataParam)
+
+    // eslint-disable-next-line max-len
+    return formArrays.every((formArray) => formArray.filter(isNullOrUndefined).length === formArray.length)
+  }
+
+  // When Remove group button clicked
+  const removeGroup = () => {
+    setShowSinglePanel(false)
+    if (!checkEmpty(formData)) {
+      Object.getOwnPropertyNames(formData).map((field) => (
+        // eslint-disable-next-line no-param-reassign
+        delete formData[field]
+        // }
+      ))
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    formData = {}
+    onChange(formData)
+  }
+
+  // Create Remove button
+  const createGroupRemoveHeader = () => {
+    const title = uiSchema['ui:title']
+
+    return (
+      <Button
+        className="text-danger px-0"
+        Icon={FaMinusCircle}
+        naked
+        onClick={removeGroup}
+      >
+        {`Remove ${title}`}
+      </Button>
+    )
+  }
+
+  // When Add group button clicked
+  const addGroup = () => {
+    setShowSinglePanel(true)
+  }
+
+  // Create Add button
+  const createGroupAddHeader = () => {
+    const title = uiSchema['ui:title']
+
+    return (
+      <Button
+        className="text-primary"
+        Icon={FaPlusCircle}
+        naked
+        onClick={addGroup}
+      >
+        {`Add ${title}`}
+      </Button>
+    )
+  }
+
+  // Render fields
+  const renderChildren = (rows) => {
+    const { schemaUtils } = registry
+    const retrievedSchema = schemaUtils.retrieveSchema(schema)
+
+    return rows.map((layoutSchema) => (
+      <GridLayout
+        key={`gridGroupedSinglePanel--${JSON.stringify(layoutSchema)}`}
+        schema={retrievedSchema}
+        registry={registry}
+        layout={layoutSchema}
+        idSchema={idSchema}
+        uiSchema={uiSchema}
+        errorSchema={errorSchema}
+        formData={formData || {}}
+        onChange={(props) => { onChange(props) }}
+      />
+    ))
+  }
+
+  const rows = layout['ui:row']
+
+  return (
+    <div>
+      {
+        !showSinglePanel
+        && checkEmpty(formData)
+          ? (
+            createGroupAddHeader()
+          )
+          // If the user has clicked showSinglePanelField, this is will show the remove button.
+          : (
+            <div>
+              {createGroupRemoveHeader()}
+              {renderChildren(rows)}
+            </div>
+          )
+      }
+    </div>
+  )
+}
+
+GridGroupedSinglePanel.propTypes = {
+  layout: PropTypes.shape({
+    'ui:row': PropTypes.arrayOf(PropTypes.shape({}))
+  }).isRequired,
+  uiSchema: PropTypes.shape({
+    'ui:title': PropTypes.string
+  }).isRequired,
+  formData: PropTypes.shape({}).isRequired,
+  onChange: PropTypes.func.isRequired,
+  registry: PropTypes.shape({
+    schemaUtils: PropTypes.shape({
+      retrieveSchema: PropTypes.func
+    })
+  }).isRequired,
+  schema: PropTypes.shape({}).isRequired,
+  idSchema: PropTypes.shape({}).isRequired,
+  errorSchema: PropTypes.shape({}).isRequired
+}
 
 export default GridGroupedSinglePanel