feat: Update Team Details Labels & add additional options under "Advanced"

Resolves: #365

Author: mbaghel

package-lock.json

@@ -87,7 +87,8 @@
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
-    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4"
+    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
+    "uuid": "^8.3.2"
   },
   "browserslist": [
     "last 1 version",

package.json

@@ -23,7 +23,7 @@ import TeamDetailsModal from "../TeamDetailsModal";
 import ConfirmationModal from "../ConfirmationModal";
 import withAuthentication from "../../../../hoc/withAuthentication";
 import "./styles.module.scss";
-import { isCustomRole, setCurrentStage } from "utils/helpers";
+import { isCustomRole, isUuid, setCurrentStage } from "utils/helpers";
 import { clearSearchedRoles } from "../../actions";
 import { postTeamRequest } from "services/teams";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
@@ -65,11 +65,15 @@ function SubmitContainer({
   };
 
   const assembleTeam = (formData) => {
-    const teamObject = _.pick(formData, ["teamName", "teamDescription"]);
+    const teamObject = _.pick(formData, [
+      "teamName",
+      "teamDescription",
+      "refCode",
+    ]);
 
     const positions = [];
     for (let key of Object.keys(formData)) {
-      if (key === "teamName" || key === "teamDescription") {
+      if (!isUuid(key)) {
         continue;
       }
       const position = _.mapValues(formData[key], (val, key) =>

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

@@ -11,6 +11,7 @@ import FormField from "components/FormField";
 import BaseCreateModal from "../BaseCreateModal";
 import { FORM_FIELD_TYPE } from "constants/";
 import { formatPlural } from "utils/format";
+import { isUuid } from "utils/helpers";
 import Button from "components/Button";
 import MonthPicker from "components/MonthPicker";
 import InformationTooltip from "components/InformationTooltip";
@@ -28,7 +29,7 @@ const Error = ({ name }) => {
 };
 
 function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
-  const [showDescription, setShowDescription] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [startMonthVisible, setStartMonthVisible] = useState({});
 
   // Ensure role is removed from form state when it is removed from redux store
@@ -37,7 +38,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
   useEffect(() => {
     const values = getFormState().values;
     for (let fieldName of Object.keys(values)) {
-      if (fieldName === "teamName" || fieldName === "teamDescription") {
+      if (!isUuid(fieldName)) {
         continue;
       }
       if (addedRoles.findIndex((role) => role.searchId === fieldName) === -1) {
@@ -49,8 +50,8 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
 
   const dispatch = useDispatch();
 
-  const toggleDescription = () => {
-    setShowDescription((prevState) => !prevState);
+  const toggleAdvanced = () => {
+    setShowAdvanced((prevState) => !prevState);
   };
 
   return (
@@ -78,7 +79,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
             open={open}
             onClose={onClose}
             title="Team Details"
-            subtitle="Please provide your team details before submitting a request."
+            subtitle="Please provide a name for your Team. This could be the name of the project they will work on, the name of the team they are joining, or whatever else will make this talent request meaningful for you."
             buttons={
               <Button
                 type="primary"
@@ -102,26 +103,38 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                   customValidator: true,
                 }}
               />
-              {showDescription && (
-                <FormField
-                  field={{
-                    type: FORM_FIELD_TYPE.TEXTAREA,
-                    name: "teamDescription",
-                    label: "Short description about the team/ project",
-                    placeholder: "Short description about the team/ project",
-                    maxLength: 600,
-                  }}
-                />
+              {showAdvanced && (
+                <>
+                  <FormField
+                    field={{
+                      type: FORM_FIELD_TYPE.TEXTAREA,
+                      name: "teamDescription",
+                      label: "Short description about the team/ project",
+                      placeholder: "Short description about the team/ project",
+                      maxLength: 600,
+                    }}
+                  />
+                  <FormField
+                    field={{
+                      type: FORM_FIELD_TYPE.TEXT,
+                      name: "refCode",
+                      label: "Ref Code",
+                      placeholder: "Ref Code",
+                      maxLength: 255,
+                    }}
+                  />
+                </>
               )}
               <button
-                styleName="toggle-button toggle-description"
+                styleName="toggle-button toggle-advanced"
                 onClick={() => {
                   clearField("teamDescription");
-                  toggleDescription();
+                  clearField("refCode");
+                  toggleAdvanced();
                 }}
               >
-                <span>{showDescription ? "–" : "+"}</span>
-                {showDescription ? " Remove Description" : " Add Description"}
+                <span>{showAdvanced ? "– " : "+ "}</span>
+                Advanced Options
               </button>
               <table styleName="table">
                 <tr>
@@ -147,7 +160,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         <Field
                           validate={validateExists}
                           name={`${id}.numberOfResources`}
-                          initialValue={numberOfResources}
+                          initialValue={numberOfResources || 1}
                         >
                           {({ input, meta }) => (
                             <NumberInput
@@ -167,7 +180,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         <Field
                           validate={validateExists}
                           name={`${id}.durationWeeks`}
-                          initialValue={durationWeeks}
+                          initialValue={durationWeeks || 4}
                         >
                           {({ input, meta }) => (
                             <NumberInput

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

@@ -10,7 +10,7 @@
   color: #137D60;
   padding: 1px 6px 0 6px;
 
-  &.toggle-description {
+  &.toggle-advanced {
     margin-top: 12px;
     > span {
       font-size: 18px;

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

@@ -1,3 +1,5 @@
+import { isUuid } from "utils/helpers";
+
 const validateName = (name) => {
   if (!name || name.trim().length === 0) {
     return "Please enter a team name.";
@@ -58,7 +60,7 @@ const validator = (values) => {
   errors.teamName = validateName(values.teamName);
 
   for (const key of Object.keys(values)) {
-    if (key === "teamDescription" || key === "teamName") continue;
+    if (!isUuid(key)) continue;
     errors[key] = validateRole(values[key]);
   }
 

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

@@ -5,8 +5,17 @@
  * If there are multiple methods which could be grouped into a separate file by their meaning they should be extracted from here to not make this file too big.
  */
 import _ from "lodash";
+import { validate } from "uuid";
+
 import { CUSTOM_ROLE_NAMES } from "constants/";
 
+/**
+ * @param {String} string a possible uuid
+ *
+ * @returns {Boolean} true if uuid, false if not
+ */
+export const isUuid = validate;
+
 /**
  * Delay code for some milliseconds using promise.
  *