Allow user to remove searched role from added roles accordion.

Ensure team details popup form is updated when searched role removed.
Move pure functions for validation of team details popup to their own file.
Disable focus trap for team details popup.

Author: mbaghel

src/routes/CreateNewTeam/components/AddedRolesAccordion/index.jsx

@@ -8,11 +8,16 @@
 import React, { useState } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import { useDispatch } from "react-redux";
+import { deleteSearchedRole } from "../../actions";
 import "./styles.module.scss";
+import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 
 function AddedRolesAccordion({ addedRoles }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const dispatch = useDispatch();
+
   return addedRoles.length ? (
     <div styleName="accordion">
       <button onClick={() => setIsOpen(!isOpen)} styleName="button">
@@ -27,8 +32,13 @@ function AddedRolesAccordion({ addedRoles }) {
       </button>
       {isOpen && (
         <div styleName="panel">
-          {addedRoles.map(({ name }) => (
-            <div styleName="role-name">{name}</div>
+          {addedRoles.map(({ name, searchId: id }) => (
+            <div key={id} styleName="role-name">
+              {name}
+              <button onClick={() => dispatch(deleteSearchedRole(id))}>
+                <IconCrossLight height="14px" width="14px" />
+              </button>
+            </div>
           ))}
         </div>
       )}

src/routes/CreateNewTeam/components/AddedRolesAccordion/styles.module.scss

@@ -55,11 +55,12 @@
 .panel {
   padding: 12px 18px 14px 10px;
   .role-name {
-    height: 40px;
+    position: relative;
     width: 100%;
     background-color: #F4F4F4;
     border-radius: 6px;
     padding: 10px;
+    padding-right: 30px;
     @include font-barlow;
     font-size: 16px;
     line-height: 20px;
@@ -68,5 +69,19 @@
     &:not(:first-child) {
       margin-top: 5px;
     }
+
+    >button {
+      outline: none;
+      border: none;
+      background: none;
+      position: absolute;
+      top: 12px;
+      right: 4px;
+      &:hover {
+        g {
+          stroke: red;
+        }
+      }
+    }
   }
 }

src/routes/CreateNewTeam/components/BaseCreateModal/index.jsx

@@ -35,6 +35,7 @@ function BaseCreateModal({
   loadingMessage,
   maxWidth = "680px",
   darkHeader,
+  disableFocusTrap,
   children,
 }) {
   return (
@@ -51,8 +52,9 @@ function BaseCreateModal({
         modalContainer: containerStyle,
         closeButton: closeButtonStyle,
       }}
+      focusTrapped={!disableFocusTrap}
     >
-      <div styleName="modal-body">
+      <div styleName="modal-body" tabIndex="-1">
         {isLoading ? (
           <div styleName={cn("modal-header", { "dark-header": darkHeader })}>
             <CenteredSpinner />
@@ -86,6 +88,7 @@ BaseCreateModal.propTypes = {
   loadingMessage: PT.string,
   maxWidth: PT.string,
   darkHeader: PT.bool,
+  disableFocusTrap: PT.bool,
   children: PT.node,
 };
 

src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx

@@ -3,7 +3,7 @@
  * Popup form to enter details about the
  * team request before submitting.
  */
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PT from "prop-types";
 import { Form, Field, useField } from "react-final-form";
 import { useDispatch } from "react-redux";
@@ -18,6 +18,7 @@ import { deleteSearchedRole } from "../../actions";
 import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 import "./styles.module.scss";
 import NumberInput from "components/NumberInput";
+import validator from "./utils/validator";
 
 const Error = ({ name }) => {
   const {
@@ -28,80 +29,30 @@ const Error = ({ name }) => {
 
 function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
   const [showDescription, setShowDescription] = useState(false);
-  const [startMonthVisible, setStartMonthVisible] = useState(() => {
-    const roles = {};
-    addedRoles.forEach(({ searchId }) => {
-      roles[searchId] = false;
-    });
-    return roles;
-  });
+  const [startMonthVisible, setStartMonthVisible] = useState({});
+
+  // Ensure role is removed from form state when it is removed from redux store
+  let getFormState;
+  let clearFormField;
+  useEffect(() => {
+    const values = getFormState().values;
+    for (let fieldName of Object.keys(values)) {
+      if (fieldName === "teamName" || fieldName === "teamDescription") {
+        continue;
+      }
+      if (addedRoles.findIndex((role) => role.searchId === fieldName)) {
+        clearFormField(fieldName);
+        setStartMonthVisible((state) => ({ ...state, [fieldName]: false }));
+      }
+    }
+  }, [getFormState, addedRoles, clearFormField]);
 
   const dispatch = useDispatch();
 
   const toggleDescription = () => {
     setShowDescription((prevState) => !prevState);
   };
 
-  const validateName = (name) => {
-    if (!name || name.trim().length === 0) {
-      return "Please enter a team name.";
-    }
-    return undefined;
-  };
-
-  const validateNumber = (number) => {
-    const converted = Number(number);
-
-    if (
-      Number.isNaN(converted) ||
-      converted !== Math.floor(converted) ||
-      converted < 1
-    ) {
-      return "Please enter a positive integer";
-    }
-    return undefined;
-  };
-
-  const validateMonth = (monthString) => {
-    const then = new Date(monthString);
-    const now = new Date();
-    const thenYear = then.getFullYear();
-    const nowYear = now.getFullYear();
-    const thenMonth = then.getMonth();
-    const nowMonth = now.getMonth();
-
-    if (thenYear < nowYear || (thenYear === nowYear && thenMonth < nowMonth)) {
-      return "Start month may not be before current month";
-    }
-    return undefined;
-  };
-
-  const validateRole = (role) => {
-    const roleErrors = {};
-    roleErrors.numberOfResources = validateNumber(role.numberOfResources);
-    roleErrors.durationWeeks = validateNumber(role.durationWeeks);
-    if (role.startMonth) {
-      roleErrors.startMonth = validateMonth(role.startMonth);
-    }
-
-    return roleErrors;
-  };
-
-  const validator = (values) => {
-    const errors = {};
-
-    errors.teamName = validateName(values.teamName);
-
-    for (const key of Object.keys(values)) {
-      if (key === "teamDescription" || key === "teamName") continue;
-      errors[key] = validateRole(values[key]);
-    }
-
-    return errors;
-  };
-
-  const validateRequired = value => (value ? undefined : 'Please enter a positive integer')
-
   return (
     <Form
       onSubmit={submitForm}
@@ -110,16 +61,18 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
           changeValue(state, fieldName, () => undefined);
         },
       }}
-      initialValues={{ teamName: "" }}
       validate={validator}
     >
       {({
         handleSubmit,
         hasValidationErrors,
         form: {
           mutators: { clearField },
+          getState,
         },
       }) => {
+        getFormState = getState;
+        clearFormField = clearField;
         return (
           <BaseCreateModal
             open={open}
@@ -136,6 +89,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                 Submit
               </Button>
             }
+            disableFocusTrap
           >
             <div styleName="modal-body">
               <FormField
@@ -183,7 +137,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                   <tr styleName="role-row" key={id}>
                     <td>{name}</td>
                     <td>
-                      <Field validate={validateRequired} name={`${id}.numberOfResources`} initialValue="3">
+                      <Field name={`${id}.numberOfResources`} initialValue="3">
                         {({ input, meta }) => (
                           <NumberInput
                             name={input.name}
@@ -199,7 +153,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                       <Error name={`${id}.numberOfResources`} />
                     </td>
                     <td>
-                      <Field validate={validateRequired} name={`${id}.durationWeeks`} initialValue="20">
+                      <Field name={`${id}.durationWeeks`} initialValue="20">
                         {({ input, meta }) => (
                           <NumberInput
                             name={input.name}
@@ -257,7 +211,6 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                       <button
                         styleName="delete-role"
                         onClick={() => {
-                          clearField(id);
                           dispatch(deleteSearchedRole(id));
                         }}
                       >

src/routes/CreateNewTeam/components/TeamDetailsModal/utils/validator.js

@@ -0,0 +1,60 @@
+const validateName = (name) => {
+  if (!name || name.trim().length === 0) {
+    return "Please enter a team name.";
+  }
+  return undefined;
+};
+
+const validateNumber = (number) => {
+  const converted = Number(number);
+
+  if (
+    !number ||
+    Number.isNaN(converted) ||
+    converted !== Math.floor(converted) ||
+    converted < 1
+  ) {
+    return "Please enter a positive integer";
+  }
+  return undefined;
+};
+
+const validateMonth = (monthString) => {
+  const then = new Date(monthString);
+  const now = new Date();
+  const thenYear = then.getFullYear();
+  const nowYear = now.getFullYear();
+  const thenMonth = then.getMonth();
+  const nowMonth = now.getMonth();
+
+  if (thenYear < nowYear || (thenYear === nowYear && thenMonth < nowMonth)) {
+    return "Start month may not be before current month";
+  }
+  return undefined;
+};
+
+const validateRole = (role) => {
+  const roleErrors = {};
+  roleErrors.numberOfResources = validateNumber(role.numberOfResources);
+  roleErrors.durationWeeks = validateNumber(role.durationWeeks);
+  if (role.startMonth) {
+    roleErrors.startMonth = validateMonth(role.startMonth);
+  }
+
+  return roleErrors;
+};
+
+const validator = (values) => {
+  const errors = {};
+
+  errors.teamName = validateName(values.teamName);
+
+  for (const key of Object.keys(values)) {
+    if (key === "teamDescription" || key === "teamName") continue;
+    errors[key] = validateRole(values[key]);
+  }
+
+  return errors;
+};
+
+export default validator;