Roles tweaks bugs

src/constants/index.js

@@ -258,6 +258,12 @@ export const ACTION_TYPE = {
   ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
   ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
   DELETE_SEARCHED_ROLE: "DELETE_SEARCHED_ROLE",
+
+  /*
+   * matching role
+   */
+  ADD_MATCHING_ROLE: "ADD_MATCHING_ROLE",
+  DELETE_MATCHING_ROLE: "DELETE_MATCHING_ROLE",
 };
 
 /**

src/routes/CreateNewTeam/actions/index.js

@@ -27,6 +27,15 @@ const deleteRole = (id) => ({
   payload: id,
 });
 
+const addMatchingRole = (matchingRole) => ({
+  type: ACTION_TYPE.ADD_MATCHING_ROLE,
+  payload: matchingRole,
+});
+
+const deleteMatchingRole = (matchingRole) => ({
+  type: ACTION_TYPE.DELETE_MATCHING_ROLE,
+});
+
 export const clearSearchedRoles = () => (dispatch, getState) => {
   dispatch(clearRoles());
   updateLocalStorage(getState().searchedRoles);
@@ -46,3 +55,13 @@ export const deleteSearchedRole = (id) => (dispatch, getState) => {
   dispatch(deleteRole(id));
   updateLocalStorage(getState().searchedRoles);
 };
+
+export const saveMatchingRole = (matchingRole) => (dispatch, getState) => {
+  dispatch(addMatchingRole(matchingRole));
+  updateLocalStorage(getState().searchedRoles);
+};
+
+export const clearMatchingRole = (matchingRole) => (dispatch, getState) => {
+  dispatch(deleteMatchingRole());
+  updateLocalStorage(getState().searchedRoles);
+};

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

@@ -2,6 +2,7 @@
 
 .completeness {
   @include rounded-card;
+  overflow: hidden;
   padding: 12px;
   position: relative;
   width: 250px;
@@ -25,12 +26,19 @@
 
 .list {
   margin-bottom: 55px;
+  & + button[disabled] {
+    background-color: #E9E9E9;
+    color: #FFF;
+    opacity: 1;
+    filter: none;
+  }
 }
 
 .list-item {
   margin-bottom: 14px;
   font-size: 14px;
   line-height: 16px;
+  font-weight: 400;
 
   &:before {
     content: "";
@@ -45,14 +53,14 @@
   }
 
   &.active {
-    font-weight: 700;
+    font-weight: 500;
     &:before {
       background-color: #fff;
     }
   }
 
   &.done {
-    font-weight: 700;
+    font-weight: 400;
     color: rgba(255, 255, 255, 0.6);
     &:before {
       content: "✓";

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

@@ -0,0 +1,53 @@
+/**
+ * InputContainer
+ *
+ * A container component for the different
+ * input pages. Contains logic and supporting
+ * components for selecting for roles.
+ */
+import React, { useCallback } from "react";
+import PT from "prop-types";
+import AddedRolesAccordion from "../AddedRolesAccordion";
+import Completeness from "../Completeness";
+import SearchCard from "../SearchCard";
+import ResultCard from "../ResultCard";
+import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
+import { isCustomRole } from "utils/helpers";
+import "./styles.module.scss";
+
+function InputContainer({
+  stages,
+  isCompletenessDisabled,
+  toRender,
+  search,
+  completenessStyle,
+  addedRoles,
+}) {
+  return (
+    <div styleName="page">
+      {toRender(search)}
+      <div styleName="right-side">
+        <AddedRolesAccordion addedRoles={addedRoles} />
+        <Completeness
+          isDisabled={isCompletenessDisabled}
+          onClick={search}
+          extraStyleName={completenessStyle}
+          buttonLabel={"Search"}
+          stages={stages}
+          percentage="26"
+        />
+      </div>
+    </div>
+  );
+}
+
+InputContainer.propTypes = {
+  stages: PT.array,
+  isCompletenessDisabled: PT.bool,
+  search: PT.func,
+  toRender: PT.func,
+  completenessStyle: PT.string,
+  addedRoles: PT.array,
+};
+
+export default InputContainer;

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

@@ -0,0 +1,14 @@
+.page {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 42px 35px;
+  .right-side {
+    display: flex;
+    flex-direction: column;
+    & > div:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+}

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

@@ -36,7 +36,7 @@ function ItemList({
   return (
     <div styleName="item-list">
       <PageHeader
-        title={title}
+        title={<div styleName="title">{title}</div>}
         backTo="/taas/createnewteam"
         aside={
           <>

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

@@ -9,6 +9,9 @@
   height: 80vh;
   overflow-y: auto;
 
+  .title {
+    font-weight: 500;
+  }
   > header {
     padding: 16px 24px;
   }
@@ -67,4 +70,4 @@ input:not([type="checkbox"]).filter-input {
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-right: 24px;
-}
+}

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

@@ -1,29 +1,44 @@
-import { Router } from "@reach/router";
+import { Router, navigate } from "@reach/router";
 import _ from "lodash";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchRoles } from "services/teams";
 import { isCustomRole, setCurrentStage } from "utils/helpers";
-import { addRoleSearchId, addSearchedRole } from "../../actions";
+import { clearMatchingRole, saveMatchingRole, addRoleSearchId, addSearchedRole } from "../../actions";
+import InputContainer from "../InputContainer";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
 
 function SearchAndSubmit(props) {
-  const { stages, setStages, searchObject, onClick } = props;
+  const { stages, setStages, searchObject, onClick, page } = props;
 
   const [searchState, setSearchState] = useState(null);
-  const [matchingRole, setMatchingRole] = useState(null);
 
-  const { addedRoles, previousSearchId } = useSelector(
+  const { matchingRole } = useSelector(
     (state) => state.searchedRoles
   );
 
+  useEffect(()=> {
+    const isFromInputPage  = searchObject.role || searchObject.skills && searchObject.skills.length
+       || searchObject.jobDescription
+    // refresh in search page directly
+    if (matchingRole && !isFromInputPage) {
+      setCurrentStage(2, stages, setStages);
+      setSearchState("done");
+    }
+  }, [])
+
   const dispatch = useDispatch();
 
+  const { addedRoles, previousSearchId } = useSelector(
+    (state) => state.searchedRoles
+  );
+
   const search = useCallback(() => {
+    navigate(`${page}/search`);
     setCurrentStage(1, stages, setStages);
     setSearchState("searching");
-    setMatchingRole(null);
+    dispatch(clearMatchingRole());
     const searchObjectCopy = { ...searchObject };
     if (previousSearchId) {
       searchObjectCopy.previousRoleSearchRequestId = previousSearchId;
@@ -37,7 +52,9 @@ function SearchAndSubmit(props) {
         } else if (searchId) {
           dispatch(addRoleSearchId(searchId));
         }
-        setMatchingRole(res.data);
+        // setMatchingRole(res.data);
+
+        dispatch(saveMatchingRole(res.data));
       })
       .catch((err) => {
         console.error(err);
@@ -51,11 +68,18 @@ function SearchAndSubmit(props) {
 
   return (
     <Router>
-      <SearchContainer
+      <InputContainer
         path="/"
         addedRoles={addedRoles}
         previousSearchId={previousSearchId}
         search={search}
+        {...props}
+      />
+      <SearchContainer
+        path="search"
+        addedRoles={addedRoles}
+        previousSearchId={previousSearchId}
+        search={search}
         searchState={searchState}
         matchingRole={matchingRole}
         {...props}

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

@@ -28,18 +28,16 @@ function SearchContainer({
   matchingRole,
 }) {
   const onSubmit = useCallback(() => {
-    navigate("result");
+    navigate("../result");
   }, [navigate]);
 
   const renderLeftSide = () => {
-    if (!searchState) return toRender(search);
     if (searchState === "searching") return <SearchCard />;
     if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
     return <NoMatchingProfilesResultCard role={matchingRole} />;
   };
 
   const getPercentage = useCallback(() => {
-    if (!searchState) return "26";
     if (searchState === "searching") return "52";
     if (matchingRole) return "98";
     return "88";
@@ -52,7 +50,6 @@ function SearchContainer({
         <AddedRolesAccordion addedRoles={addedRoles} />
         <Completeness
           isDisabled={
-            isCompletenessDisabled ||
             searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }

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

@@ -95,8 +95,11 @@ function SubmitContainer({
     setRequestLoading(true);
     postTeamRequest(teamObject)
       .then(() => {
-        dispatch(clearSearchedRoles());
-        navigate("/taas/myteams");
+        setTimeout(() => {
+          dispatch(clearSearchedRoles());
+          // Backend api create project has sync issue, so delay 2 seconds
+          navigate("/taas/myteams");
+        }, 2000)
       })
       .catch((err) => {
         setRequestLoading(false);

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

@@ -100,6 +100,8 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
     return errors;
   };
 
+  const validateRequired = value => (value ? undefined : 'Please enter a positive integer')
+
   return (
     <Form
       onSubmit={submitForm}
@@ -108,7 +110,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
           changeValue(state, fieldName, () => undefined);
         },
       }}
-      initialValues={{ teamName: "My Great Team" }}
+      initialValues={{ teamName: "" }}
       validate={validator}
     >
       {({
@@ -181,7 +183,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                   <tr styleName="role-row" key={id}>
                     <td>{name}</td>
                     <td>
-                      <Field name={`${id}.numberOfResources`} initialValue="3">
+                      <Field validate={validateRequired} name={`${id}.numberOfResources`} initialValue="3">
                         {({ input, meta }) => (
                           <NumberInput
                             name={input.name}
@@ -197,7 +199,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                       <Error name={`${id}.numberOfResources`} />
                     </td>
                     <td>
-                      <Field name={`${id}.durationWeeks`} initialValue="20">
+                      <Field validate={validateRequired} name={`${id}.durationWeeks`} initialValue="20">
                         {({ input, meta }) => (
                           <NumberInput
                             name={input.name}

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

@@ -36,7 +36,7 @@
   .role-row {
     td {
       padding: 18px 18px 18px 0;
-      vertical-align: middle;
+      vertical-align: top;
       @include font-barlow;
       font-weight: 600;
       font-size: 16px;
@@ -66,6 +66,7 @@
   align-items: center;
   justify-content: flex-start;
   width: 118px;
+  margin-top: 13px;
 }
 
 .error {
@@ -79,6 +80,8 @@
   border: none;
   background: none;
 
+  margin-top: 13px;
+
   &:hover {
     g {
       stroke: red;