MMT-3410: Use widget wrapper for country select, removes test ids

static/src/js/components/CustomCountrySelectWidget/CustomCountrySelectWidget.jsx

@@ -1,8 +1,15 @@
-import React, { useMemo, useState } from 'react'
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 import PropTypes from 'prop-types'
 import Select from 'react-select'
 import { startCase } from 'lodash-es'
 import countryList from 'react-select-country-list'
+import CustomWidgetWrapper from '../CustomWidgetWrapper/CustomWidgetWrapper'
+import shouldFocusField from '../../utils/shouldFocusField'
 
 /**
  * CustomCountrySelectWidget
@@ -21,11 +28,26 @@ import countryList from 'react-select-country-list'
 const CustomCountrySelectWidget = ({
   id,
   label,
+  onBlur,
   onChange,
+  registry,
   required,
+  schema,
   uiSchema,
   value
 }) => {
+  const selectScrollRef = useRef(null)
+  const focusRef = useRef(null)
+
+  const { description } = schema
+
+  const { formContext } = registry
+
+  const {
+    focusField,
+    setFocusField
+  } = formContext
+
   // Pull the data from countryList once
   const countryData = useMemo(() => countryList().getData(), [])
 
@@ -73,6 +95,11 @@ const CustomCountrySelectWidget = ({
     })
   }
 
+  const handleBlur = () => {
+    setFocusField(null)
+    onBlur(id)
+  }
+
   // Uses label for title
   let title = startCase(label.split(/-/)[0])
 
@@ -81,31 +108,37 @@ const CustomCountrySelectWidget = ({
     title = uiSchema['ui:title']
   }
 
+  const shouldFocus = shouldFocusField(focusField, id)
+
+  useEffect(() => {
+    // This useEffect for shouldFocus lets the refs be in place before trying to use them
+    if (shouldFocus) {
+      selectScrollRef.current?.scrollIntoView({ behavior: 'smooth' })
+      focusRef.current?.focus()
+    }
+  }, [shouldFocus])
+
   return (
-    <div>
-      <div>
-        <span>
-          {title}
-        </span>
-
-        <span>
-          {/* // TODO This should be an icon */}
-          {required ? '*' : ''}
-        </span>
-      </div>
-
-      <div>
-        <Select
-          id={id}
-          isClearable
-          name={`Select-${label}`}
-          onChange={handleChange}
-          options={listOfCountries}
-          placeholder={`Select ${label}`}
-          value={selectedCountry}
-        />
-      </div>
-    </div>
+    <CustomWidgetWrapper
+      description={description}
+      id={id}
+      label={label}
+      required={required}
+      scrollRef={selectScrollRef}
+      title={title}
+    >
+      <Select
+        id={id}
+        isClearable
+        name={`Select-${label}`}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        options={listOfCountries}
+        placeholder={`Select ${label}`}
+        ref={focusRef}
+        value={selectedCountry}
+      />
+    </CustomWidgetWrapper>
   )
 }
 
@@ -117,8 +150,18 @@ CustomCountrySelectWidget.defaultProps = {
 CustomCountrySelectWidget.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
+  onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
+  registry: PropTypes.shape({
+    formContext: PropTypes.shape({
+      focusField: PropTypes.string,
+      setFocusField: PropTypes.func
+    }).isRequired
+  }).isRequired,
   required: PropTypes.bool.isRequired,
+  schema: PropTypes.shape({
+    description: PropTypes.string
+  }).isRequired,
   uiSchema: PropTypes.shape({
     'ui:title': PropTypes.string
   }).isRequired,

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

@@ -6,12 +6,22 @@ import CustomCountrySelectWidget from '../CustomCountrySelectWidget'
 
 const setup = (overrideProps = {}) => {
   const props = {
-    id: 'the-widget',
+    id: 'mock-id',
     label: 'MyTestDataLabel',
-    required: false,
+    onBlur: jest.fn(),
     onChange: jest.fn(),
-    value: 'TZ',
+    registry: {
+      formContext: {
+        focusField: '',
+        setFocusField: jest.fn()
+      }
+    },
+    required: false,
+    schema: {
+      description: 'Test Description'
+    },
     uiSchema: {},
+    value: 'TZ',
     ...overrideProps
   }
 
@@ -78,4 +88,20 @@ describe('CustomCountrySelectWidget', () => {
       expect(props.onChange).toHaveBeenCalledWith('US')
     })
   })
+
+  describe('when the field should be focused', () => {
+    test('focuses the field', async () => {
+      setup({
+        registry: {
+          formContext: {
+            focusField: 'mock-id'
+          }
+        }
+      })
+
+      const field = screen.getByRole('combobox')
+
+      expect(field).toHaveFocus()
+    })
+  })
 })

static/src/js/components/CustomFieldTemplate/CustomFieldTemplate.jsx

@@ -20,10 +20,7 @@ const CustomFieldTemplate = ({
   errors,
   children
 }) => (
-  <div
-    data-testid="custom-field-template"
-    className={`custom-field-template ${classNames}`}
-  >
+  <div className={`custom-field-template ${classNames}`}>
     {children}
     {errors}
     {help}

static/src/js/components/CustomMultiSelectWidget/CustomMultiSelectWidget.jsx

@@ -7,7 +7,7 @@ import CustomWidgetWrapper from '../CustomWidgetWrapper/CustomWidgetWrapper'
 
 /**
  * CustomMultiSelectWidget
- * @typedef {Object} CustomArrayFieldTemplate
+ * @typedef {Object} CustomMultiSelectWidget
  * @property {String} id The id of the widget.
  * @property {String} label The label of the widget.
  * @property {Boolean} onBlur Should blur a field.

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

@@ -15,7 +15,7 @@ import useControlledKeywords from '../../hooks/useControlledKeywords'
 
 /**
  * CustomSelectWidget
- * @typedef {Object} CustomArrayFieldTemplate
+ * @typedef {Object} CustomSelectWidget
  * @property {Boolean} disable A boolean value to disable the select field.
  * @property {String} label The label of the widget.
  * @property {String} id The id of the widget.
@@ -32,7 +32,7 @@ import useControlledKeywords from '../../hooks/useControlledKeywords'
 
 /**
  * Renders Custom Select Widget
- * @param {CustomArrayFieldTemplate} props
+ * @param {CustomSelectWidget} props
  */
 const CustomSelectWidget = ({
   disabled,

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

@@ -233,24 +233,6 @@ describe('CustomSelectWidget', () => {
     })
   })
 
-  describe('when the field is focused', () => {
-    test('shows the field description', async () => {
-      setup()
-
-      const field = screen.getByRole('combobox')
-
-      await waitFor(async () => {
-        field.focus()
-      })
-
-      expect(field).toHaveFocus()
-
-      expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
-        description: 'Test Description'
-      }), {})
-    })
-  })
-
   describe('when the field is changed', () => {
     test('calls onChange', async () => {
       const { props, user } = setup()

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

@@ -112,24 +112,6 @@ describe('CustomTextWidget', () => {
     })
   })
 
-  describe('when the field is focused', () => {
-    test('shows the field description', async () => {
-      setup()
-
-      const field = screen.getByRole('textbox')
-
-      await waitFor(async () => {
-        field.focus()
-      })
-
-      expect(field).toHaveFocus()
-
-      expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
-        description: 'Test Description'
-      }), {})
-    })
-  })
-
   describe('when the field is blurred', () => {
     test('clears the focusField and calls onBlur', async () => {
       const { props } = setup()

static/src/js/components/DraftPreview/DraftPreview.jsx

@@ -267,7 +267,6 @@ const DraftPreview = () => {
           <Col md={12}>
             <Button
               className="eui-btn--blue display-modal"
-              data-testid="detailed-progress-view-publish-draft-btn"
               onClick={
                 () => {
                   // TODO MMT-3411

static/src/js/components/GridField/GridField.jsx

@@ -1,4 +1,3 @@
-import { kebabCase } from 'lodash-es'
 import React from 'react'
 import PropTypes from 'prop-types'
 
@@ -136,7 +135,7 @@ class GridField extends ObjectField {
       const UIComponent = render
 
       return (
-        <span data-testid={`layout-grid-field__schema-field--${kebabCase(layoutName)}`}>
+        <span>
           <UIComponent
             {...props}
             errorSchema={errorSchema}

static/src/js/components/NavigationItemError/NavigationItemError.scss

@@ -1,15 +1,6 @@
 .navigation-item-error {
   &__item {
-    // width: 330px;
-    // padding: 0;
-    // border: none;
-    // margin: 0;
-    // // background-color: #ebf2f6;
-    // background-color: var(--bs-secondary);
-    // font-size: 17px;
-
     &--isFocused {
-      // background-color: #f5f5f5;
       background-color: var(--bs-light);
     }
   }