Update styling of RoleDetailsModal.

Client-side validation for InputJobDescription.
Ensure custom/niche role does not appear in SelectRole page.
Update ResultCard to read matching rate from search result.

Author: mbaghel

src/components/MarkdownEditor/index.jsx

@@ -53,6 +53,9 @@ const MarkdownEditor = (props) => {
         ]}
         plugins={[]}
       />
+      {props.errorMessage && (
+        <div styleName="message">{props.errorMessage}</div>
+      )}
     </div>
   );
 };

src/components/MarkdownEditor/styles.module.scss

@@ -12,21 +12,6 @@
       overflow-y: auto;
       background: #fafafb;
     }
-    .message {
-      @include font-roboto;
-
-      width: 100%;
-      text-align: center;
-      min-height: 40px;
-      line-height: 20px;
-      padding: 9px 10px;
-      margin: 10px 0 5px;
-      font-size: 14px;
-      color: #ff5b52;
-      border: 1px solid #ffd5d1;
-      cursor: auto;
-      outline: none;
-    }
 }
 .editor-container {
   :global {
@@ -72,3 +57,19 @@
     }
   }
 }
+
+.message {
+  @include font-roboto;
+
+  width: 100%;
+  text-align: center;
+  min-height: 40px;
+  line-height: 20px;
+  padding: 9px 10px;
+  margin: 10px 0 5px;
+  font-size: 14px;
+  color: #ff5b52;
+  border: 1px solid #ffd5d1;
+  cursor: auto;
+  outline: none;
+}

src/constants/index.js

@@ -360,3 +360,8 @@ export const MAX_ALLOWED_INTERVIEWS = 3;
  * Matching rate to show in CreateNewTeam ResultCard
  */
 export const MATCHING_RATE = "80";
+
+/**
+ * Custom role names to remove from RoleList component
+ */
+export const CUSTOM_ROLE_NAMES = ["custom", "niche"];

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

@@ -14,7 +14,7 @@ const CircularProgressBar = ({ size, progress, children, strokeWidth }) => {
   const radius = size / 2 - strokeWidth / 2;
   const circumference = 2 * Math.PI * radius;
   useEffect(() => {
-    const progressOffset = ((100 - progress) / 100) * circumference;
+    const progressOffset = (1 - progress) * circumference;
     setOffset(progressOffset);
     circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
   }, [setOffset, progress, circumference, offset]);

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

@@ -23,18 +23,23 @@ function formatRate(value) {
   return formatMoney(value);
 }
 
+function formatPercent(value) {
+  return `${Math.round(value * 100)}%`;
+}
+
 function ResultCard({ role }) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
+    matchingRate,
     rates: [rates],
   } = role;
   const [userHandle, setUserHandle] = useState(null);
   const [showRates, setShowRates] = useState(false);
 
   useEffect(() => {
     getAuthUserProfile().then((res) => {
-      setUserHandle(res.handle || null);
+      setUserHandle(res?.handle || null);
     });
   }, []);
 
@@ -44,8 +49,8 @@ function ResultCard({ role }) {
         <IconEarthCheck />
         <h3>We have matching profiles</h3>
         <p>
-          We have qualified candidates who match {MATCHING_RATE}% or more of
-          your job requirements.
+          We have qualified candidates who match {formatPercent(matchingRate)}
+          {matchingRate < 1 ? " or more " : " "} of your job requirements.
         </p>
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
@@ -217,11 +222,11 @@ function ResultCard({ role }) {
             <div>
               <CircularProgressBar
                 size="160"
-                progress={MATCHING_RATE}
+                progress={matchingRate}
                 strokeWidth="6"
                 children={
                   <div styleName="progressbar-child">
-                    <h4>{MATCHING_RATE}%</h4>
+                    <h4>{formatPercent(matchingRate)}</h4>
                     <p>Matching rate</p>
                   </div>
                 }

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

@@ -48,7 +48,7 @@ function RoleDetailsModal({ roleId, open, onClose }) {
     [role, imgError]
   );
 
-  const skills = role ? role.listOfSkills : [];
+  const skills = role && role.listOfSkills ? role.listOfSkills : [];
 
   const hideSkills = () => {
     onClose();

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

@@ -14,12 +14,23 @@
 }
 
 .markdown-container {
-  // not adds specificity to override style
-  p:not(table) {
-    @include font-roboto;
-    color: #2a2a2a;
-    font-size: 16px;
-    line-height: 26px;
+  :global {
+  // resets styles in markdown-viewer
+    .tui-editor-contents {
+      @include font-roboto;
+      color: #2a2a2a;
+      font-size: 16px;
+      line-height: 26px;
+      ul {
+        list-style: initial;
+        >li {
+          margin-bottom: 10px;
+          &::before {
+            background: none;
+          }
+        }
+      } 
+    }
   }
 }
 

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

@@ -17,6 +17,7 @@ import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 import { searchRoles } from "services/teams";
 import { setCurrentStage } from "utils/helpers";
 import { addRoleSearchId, addSearchedRole } from "../../actions";
+import { CUSTOM_ROLE_NAMES } from "constants";
 import "./styles.module.scss";
 
 function SearchContainer({
@@ -51,7 +52,7 @@ function SearchContainer({
       .then((res) => {
         const name = _.get(res, "data.name");
         const searchId = _.get(res, "data.roleSearchRequestId");
-        if (name && !name.toLowerCase().includes("niche")) {
+        if (name && !CUSTOM_ROLE_NAMES.includes(name.toLowerCase())) {
           setMatchingRole(res.data);
           dispatch(addSearchedRole({ searchId, name }));
         } else if (searchId) {

src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx

@@ -26,7 +26,7 @@ function InputJobDescription() {
     <SearchAndSubmit
       stages={stages}
       setStages={setStages}
-      isCompletenessDisabled={jdString.length < 10}
+      isCompletenessDisabled={jdString.length < 10 || jdString.length > 255}
       completenessStyle="input-job-description"
       searchObject={{ jobDescription: jdString }}
       toRender={
@@ -40,6 +40,11 @@ function InputJobDescription() {
               height="482px"
               placeholder="input job description"
               onChange={onEditChange}
+              errorMessage={
+                jdString.length > 255
+                  ? "Maximum of 255 characters. Please reduce job description length."
+                  : ""
+              }
             />
           </div>
         </>

src/routes/CreateNewTeam/pages/SelectRole/index.jsx

@@ -8,10 +8,15 @@ import React, { useCallback, useState } from "react";
 import { useData } from "hooks/useData";
 import RolesList from "./components/RolesList";
 import { getRoles } from "services/roles";
+import { CUSTOM_ROLE_NAMES } from "constants";
 import LoadingIndicator from "components/LoadingIndicator";
 import RoleDetailsModal from "../../components/RoleDetailsModal";
 import SearchAndSubmit from "../../components/SearchAndSubmit";
 
+// Remove custom roles from role list
+const removeCustomRoles = (roles) =>
+  roles.filter(({ name }) => !CUSTOM_ROLE_NAMES.includes(name.toLowerCase()));
+
 function SelectRole() {
   const [stages, setStages] = useState([
     { name: "Select a Role", isCurrent: true },
@@ -47,7 +52,7 @@ function SelectRole() {
       toRender={
         <>
           <RolesList
-            roles={roles}
+            roles={removeCustomRoles(roles)}
             selectedRoleId={selectedRoleId}
             toggleRole={toggleRole}
             onDescriptionClick={onDescriptionClick}