[Bug] handle null state for SkillLevel on screening decision dialog

apps/web/src/components/ScreeningDecisions/ScreeningDecisionDialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IntlShape, useIntl } from "react-intl";
 import { SubmitHandler } from "react-hook-form";
 import { useMutation } from "urql";
+import isEmpty from "lodash/isEmpty";
 
 import {
   AssessmentDecision,
@@ -73,11 +74,42 @@ const getSkillLevelMessage = (
       poolSkill.skill.category === SkillCategory.Technical
         ? intl.formatMessage(getTechnicalSkillLevel(poolSkill.requiredLevel))
         : intl.formatMessage(getBehaviouralSkillLevel(poolSkill.requiredLevel));
-  } else skillLevel = intl.formatMessage(commonMessages.notFound);
-
+  }
   return skillLevel;
 };
 
+const getTitle = (poolSkill: PoolSkill | undefined, intl: IntlShape) => {
+  let title = "";
+  const skillLevel = getSkillLevelMessage(poolSkill, intl);
+  if (!isEmpty(skillLevel)) {
+    title = intl.formatMessage(
+      {
+        defaultMessage: `See definitions for "{skillName}" and "{skillLevel}"`,
+        id: "o5zW6Y",
+        description:
+          "Accordion title for skill and skill level header on screening decision dialog.",
+      },
+      {
+        skillName: getLocalizedName(poolSkill?.skill?.name, intl),
+        skillLevel,
+      },
+    );
+  } else {
+    title = intl.formatMessage(
+      {
+        defaultMessage: `See definitions for "{skillName}"`,
+        id: "ZZpC8s",
+        description:
+          "Accordion title for skill header on screening decision dialog.",
+      },
+      {
+        skillName: getLocalizedName(poolSkill?.skill?.name, intl),
+      },
+    );
+  }
+  return title;
+};
+
 const AssessmentStepTypeSection = ({
   educationRequirementOption,
   poolSkill,
@@ -120,18 +152,7 @@ const AssessmentStepTypeSection = ({
             <Accordion.Root type="single" collapsible>
               <Accordion.Item value="skill">
                 <Accordion.Trigger>
-                  {intl.formatMessage(
-                    {
-                      defaultMessage: `See definitions for "{skillName}" and "{skillLevel}"`,
-                      id: "o5zW6Y",
-                      description:
-                        "Accordion title for skill and skill level header on screening decision dialog.",
-                    },
-                    {
-                      skillName: getLocalizedName(poolSkill?.skill?.name, intl),
-                      skillLevel,
-                    },
-                  )}
+                  {getTitle(poolSkill, intl)}
                 </Accordion.Trigger>
                 <Accordion.Content data-h2-text-align="base(left)">
                   <div data-h2-margin="base(x1, 0)">
@@ -167,9 +188,7 @@ const AssessmentStepTypeSection = ({
                         </p>
                       </>
                     ) : (
-                      <p data-h2-font-weight="base(bold)">
-                        {intl.formatMessage(commonMessages.notFound)}
-                      </p>
+                      ""
                     )}
                   </div>
                 </Accordion.Content>

apps/web/src/components/ScreeningDecisions/useHeaders.ts

@@ -1,4 +1,5 @@
 import { IntlShape, useIntl } from "react-intl";
+import isEmpty from "lodash/isEmpty";
 
 import { FieldLabels } from "@gc-digital-talent/forms";
 import { Maybe } from "@gc-digital-talent/graphql";
@@ -17,16 +18,28 @@ type Args = {
 const getHeaders = (intl: IntlShape, args: Args) => {
   const { type, title, candidateName, skillName, skillLevel, customTitle } =
     args;
-  const reviewAndRecord = intl.formatMessage(
-    {
-      defaultMessage: `Review and record {candidateName}'s results on "{skillName}" at the "{skillLevel}" level.`,
-      id: "e1mxkv",
-      description:
-        "Subtitle for education requirement screening decision dialog.",
-    },
-    { candidateName, skillName, skillLevel },
-  );
-
+  let reviewAndRecord: string;
+  if (!isEmpty(skillLevel)) {
+    reviewAndRecord = intl.formatMessage(
+      {
+        defaultMessage: `Review and record {candidateName}'s results on "{skillName}" at the "{skillLevel}" level.`,
+        id: "e1mxkv",
+        description:
+          "Subtitle for education requirement screening decision dialog.",
+      },
+      { candidateName, skillName, skillLevel },
+    );
+  } else {
+    reviewAndRecord = intl.formatMessage(
+      {
+        defaultMessage: `Review and record {candidateName}'s results on "{skillName}"`,
+        id: "cnoxKB",
+        description:
+          "Subtitle for education requirement screening decision dialog.",
+      },
+      { candidateName, skillName },
+    );
+  }
   const genericTitle = customTitle
     ? intl.formatMessage(
         {

apps/web/src/lang/fr.json

@@ -6606,6 +6606,10 @@
     "defaultMessage": "Ajouter une nouvelle compétence",
     "description": "Button text to open the skill dialog and add a skill"
   },
+  "ZZpC8s": {
+    "defaultMessage": "Voir les définitions pour \"{skillName}\"",
+    "description": "Accordion title for skill header on screening decision dialog."
+  },
   "ZaCyXP": {
     "defaultMessage": "À qui s’adresse le recrutement pour les cadres?",
     "description": "Heading for EXposition services"
@@ -7166,6 +7170,10 @@
     "defaultMessage": "Le gouvernement du Canada se réserve le droit de supprimer des commentaires et des contributions, et de bloquer des utilisateurs en fonction des critères ci-dessous:",
     "description": "Paragraph for comments and interaction section"
   },
+  "cnoxKB": {
+    "defaultMessage": "Examiner et consigner les résultats de {candidateName} concernant \"{skillName}\".",
+    "description": "Subtitle for education requirement screening decision dialog."
+  },
   "cqJw3g": {
     "defaultMessage": "Vous êtes sur le point de supprimer cette compétence de la démonstration de vos compétences.",
     "description": "First paragraph for remove skill dialog"