[Feature] Increases classification level options

api/app/Models/Classification.php

@@ -52,8 +52,7 @@ protected function displayName(): Attribute
     {
         /** @disregard P1003 Not using values */
         return Attribute::make(
-            get: fn (mixed $value, array $attributes) => $attributes['group'].'-'.sprintf('%02d', $attributes['level']),
-
+            get: fn (mixed $value, array $attributes) => $attributes['group'].'-'.($attributes['level'] < 10 ? '0' : '').$attributes['level'],
         );
     }
 

api/app/Models/User.php

@@ -352,7 +352,9 @@ public function getClassification()
 
         $classification = $this->currentClassification()->first();
 
-        return $classification->group.'-0'.$classification->level;
+        $leadingZero = $classification->level < 10 ? '0' : '';
+
+        return $classification->group.'-'.$leadingZero.$classification->level;
     }
 
     public function getDepartment()

apps/playwright/tests/search-workflows.spec.ts

@@ -134,7 +134,7 @@ test.describe("Talent search", () => {
     await expectNoCandidate(appPage.page);
 
     await classificationFilter.selectOption({
-      value: `${classification.group}-0${classification.level}`,
+      value: `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`,
     });
 
     const streamFilter = appPage.page.getByRole("combobox", {
@@ -221,7 +221,7 @@ test.describe("Talent search", () => {
     await expect(
       appPage.page.getByText(
         new RegExp(
-          `${classification.group}-0${classification.level}: search pool`,
+          `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}: search pool`,
           "i",
         ),
       ),

apps/web/src/components/ExperienceCard/WorkContent/GovContent.tsx

@@ -78,7 +78,7 @@ const GovContent = ({
             headingLevel={headingLevel}
           >
             {classification
-              ? `${classification.group}-0${classification.level}`
+              ? `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`
               : intl.formatMessage(commonMessages.notAvailable)}
           </ContentSection>
         </div>
@@ -122,7 +122,7 @@ const GovContent = ({
             headingLevel={headingLevel}
           >
             {classification
-              ? `${classification.group}-0${classification.level}`
+              ? `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`
               : intl.formatMessage(commonMessages.notAvailable)}
           </ContentSection>
         </div>

apps/web/src/components/ExperienceFormFields/WorkFields/GovFields.tsx

@@ -164,9 +164,10 @@ const GovFields = ({ labels }: SubExperienceFormProps) => {
     .map((iterator) => {
       return {
         value: iterator.id.toString(), // change the value to id for the query
-        label: iterator.level.toString(),
+        label: iterator.level,
       };
-    });
+    })
+    .sort((a, b) => a.label - b.label);
 
   /**
    * Reset classification level when group changes
@@ -356,6 +357,7 @@ const GovFields = ({ labels }: SubExperienceFormProps) => {
                     uiMessages.nullSelectionOptionLevel,
                   )}
                   options={levelOptions}
+                  doNotSort
                 />
               </div>
             </>

apps/web/src/components/PoolCandidatesTable/PoolCandidateFilterDialog.tsx

@@ -206,7 +206,7 @@ const PoolCandidateFilterDialog = ({
           label={intl.formatMessage(adminMessages.classifications)}
           options={classifications.map(({ group, level }) => ({
             value: `${group}-${level}`,
-            label: `${group}-0${level}`,
+            label: `${group}-${level < 10 ? "0" : ""}${level}`,
           }))}
         />
         <Combobox

apps/web/src/components/PoolCard/PoolCard.tsx

@@ -188,7 +188,7 @@ const PoolCard = ({ poolQuery, headingLevel = "h3" }: PoolCardProps) => {
 
   const classificationAbbr = pool.classification
     ? wrapAbbr(
-        `${pool.classification.group}-0${pool.classification.level}`,
+        `${pool.classification.group}-${pool.classification.level < 10 ? "0" : ""}${pool.classification.level}`,
         intl,
       )
     : "";

apps/web/src/components/Profile/components/GovernmentInformation/Display.tsx

@@ -133,7 +133,7 @@ const Display = ({
           >
             {!!currentClassification?.group && !!currentClassification?.level
               ? wrapAbbr(
-                  `${currentClassification?.group}-${currentClassification?.level}`,
+                  `${currentClassification?.group}-${currentClassification?.level < 10 ? "0" : ""}${currentClassification?.level}`,
                   intl,
                 )
               : notProvided}

apps/web/src/components/Profile/components/GovernmentInformation/FormFields.tsx

@@ -114,7 +114,10 @@ const FormFields = ({
     ]);
 
   const groupOptions = getGroupOptions([...classifications], intl);
-  const levelOptions = getLevelOptions([...classifications], groupSelection);
+  const levelOptions = getLevelOptions(
+    [...classifications],
+    groupSelection,
+  ).sort((a, b) => a.value - b.value);
   const hasPriorityEntitlement = priorityEntitlement === "yes";
   const isGovEmployee = govEmployee === "yes";
   const isPlaced =
@@ -272,6 +275,7 @@ const FormFields = ({
                     uiMessages.nullSelectionOptionLevel,
                   )}
                   options={levelOptions}
+                  doNotSort
                 />
               </div>
             )}

apps/web/src/components/Profile/components/GovernmentInformation/utils.ts

@@ -239,7 +239,7 @@ export const getLevelOptions = (
     .filter((x) => x.group === groupSelection)
     .map((iterator) => {
       return {
-        value: iterator.level.toString(),
+        value: iterator.level,
         label: iterator.level.toString(),
       };
     });

apps/web/src/components/SearchRequestFilters/SearchRequestFilters.tsx

@@ -44,14 +44,20 @@
   // else set values if filters prop is of ApplicantFilterInput type
   const classificationsFromBrowserHistory = selectedClassifications?.map(
     (classification) =>
-      wrapAbbr(`${classification?.group}-0${classification?.level}`, intl),
+      wrapAbbr(
+        `${classification?.group}-${classification && classification?.level < 10 ? "0" : ""}${classification?.level}`,
+        intl,
+      ),
   );
 
   const classifications = applicantFilter?.qualifiedClassifications ?? [];
   const classificationsFromApplicantFilter = classifications
     .filter(notEmpty)
     .map((classification) =>
-      wrapAbbr(`${classification?.group}-0${classification?.level}`, intl),
+      wrapAbbr(
+        `${classification?.group}-${classification?.level < 10 ? "0" : ""}${classification?.level}`,
+        intl,
+      ),
     );
 
   const skills: string[] | undefined = applicantFilter?.skills?.map((skill) => {
@@ -83,7 +89,7 @@
 
   // eslint-disable-next-line deprecation/deprecation
   const educationLevel: string | undefined = hasDiplomaToEducationLevel(
     applicantFilter?.hasDiploma,
     intl,
   );
 
@@ -270,7 +276,7 @@
   const classifications: string[] | undefined =
     poolCandidateFilter?.classifications?.map(
       (classification) =>
-        `${classification?.group.toLocaleUpperCase()}-0${classification?.level}`,
+        `${classification?.group.toLocaleUpperCase()}-${classification && classification?.level < 10 ? "0" : ""}${classification?.level}`,
     );
 
   const pools: Pool[] | undefined = poolCandidateFilter

apps/web/src/components/SearchRequestTable/components/SearchRequestFilterDialog.tsx

@@ -129,7 +129,7 @@ const SearchRequestFilterDialog = ({
           label={intl.formatMessage(adminMessages.classifications)}
           options={classifications.map((classification) => ({
             value: classification.id,
-            label: `${classification.group}-0${classification.level}`,
+            label: `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`,
           }))}
         />
         <Combobox

apps/web/src/components/SearchRequestTable/components/helpers.tsx

@@ -18,7 +18,7 @@ export function classificationAccessor(
 ) {
   return classifications
     ?.filter(notEmpty)
-    ?.map((c) => `${c.group}-0${c.level}`)
+    ?.map((c) => `${c.group}-${c.level < 10 ? "0" : ""}${c.level}`)
     ?.join(", ");
 }
 
@@ -34,10 +34,10 @@ export function classificationsCell(
   const chipsArray = filteredClassifications.map((classification) => {
     return (
       <Chip
-        key={`${classification.group}-0${classification.level}`}
+        key={`${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`}
         color="primary"
       >
-        {`${classification.group}-0${classification.level}`}
+        {`${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`}
       </Chip>
     );
   });

apps/web/src/components/UserProfile/ProfileSections/GovernmentInformationSection.tsx

@@ -110,7 +110,7 @@ const GovernmentInformationSection = ({
                 </span>
                 <span data-h2-font-weight="base(700)">
                   {wrapAbbr(
-                    `${currentClassification?.group}-${currentClassification?.level}`,
+                    `${currentClassification?.group}-${currentClassification?.level < 10 ? "0" : ""}${currentClassification?.level}`,
                     intl,
                   )}
                 </span>

apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx

@@ -136,10 +136,11 @@ export const EmployeeInformationFormFields = ({
     .filter((x) => x.group === groupSelection)
     .map((iterator) => {
       return {
-        value: iterator.level.toString(),
+        value: iterator.level,
         label: iterator.level.toString(),
       };
-    });
+    })
+    .sort((a, b) => a.value - b.value);
 
   const isGovEmployee = govEmployee === "yes";
 
@@ -345,6 +346,7 @@ export const EmployeeInformationFormFields = ({
                   uiMessages.nullSelectionOptionLevel,
                 )}
                 options={levelOptions}
+                doNotSort
               />
             </div>
           </>

apps/web/src/pages/Classifications/CreateClassificationPage.tsx

@@ -21,6 +21,7 @@ import pageTitles from "~/messages/pageTitles";
 import Hero from "~/components/Hero";
 
 import messages from "./messages";
+import { getClassificationLevels } from "./helpers";
 
 type FormValues = CreateClassificationInput;
 
@@ -168,17 +169,8 @@ export const CreateClassification = () => {
                     rules={{
                       required: intl.formatMessage(errorMessages.required),
                     }}
-                    options={[
-                      { value: 1, label: "1" },
-                      { value: 2, label: "2" },
-                      { value: 3, label: "3" },
-                      { value: 4, label: "4" },
-                      { value: 5, label: "5" },
-                      { value: 6, label: "6" },
-                      { value: 7, label: "7" },
-                      { value: 8, label: "8" },
-                      { value: 9, label: "9" },
-                    ]}
+                    options={getClassificationLevels()}
+                    doNotSort
                   />
                   <Input
                     id="minSalary"

apps/web/src/pages/Classifications/UpdateClassificationPage.tsx

@@ -41,6 +41,7 @@ import { getClassificationName } from "~/utils/poolUtils";
 import Hero from "~/components/Hero";
 
 import messages from "./messages";
+import { getClassificationLevels } from "./helpers";
 
 export const ClassificationForm_Fragment = graphql(/* GraphQL */ `
   fragment ClassificationForm on Classification {
@@ -231,17 +232,8 @@ export const UpdateClassificationForm = ({
                   rules={{
                     required: intl.formatMessage(errorMessages.required),
                   }}
-                  options={[
-                    { value: 1, label: "1" },
-                    { value: 2, label: "2" },
-                    { value: 3, label: "3" },
-                    { value: 4, label: "4" },
-                    { value: 5, label: "5" },
-                    { value: 6, label: "6" },
-                    { value: 7, label: "7" },
-                    { value: 8, label: "8" },
-                    { value: 9, label: "9" },
-                  ]}
+                  options={getClassificationLevels()}
+                  doNotSort
                   disabled
                 />
                 <Input

apps/web/src/pages/Classifications/helpers.tsx

@@ -0,0 +1,13 @@
+export function getClassificationLevels(): {
+  value: number;
+  label: number;
+}[] {
+  const levels: {
+    value: number;
+    label: number;
+  }[] = [];
+  for (let i = 1; i <= 19; i++) {
+    levels.push({ value: i, label: i });
+  }
+  return levels;
+}

apps/web/src/pages/JobPosterTemplates/JobPosterTemplatesPage/JobPosterTemplatesPage.tsx

@@ -132,7 +132,7 @@ function previewMetaData(
     metaData.push({
       key: classification.id,
       type: "chip",
-      children: `${classification.group}-0${classification.level}`,
+      children: `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`,
     } satisfies PreviewMetaData);
   }
 
@@ -356,7 +356,7 @@ const JobPosterTemplatesPage = () => {
                         .sort((a, b) => a.level - b.level)
                         .map((classification) => ({
                           value: classification.id,
-                          label: `${classification.group}-0${classification.level}`,
+                          label: `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`,
                         }))}
                     />
                     <Checklist

apps/web/src/pages/Pools/CreatePoolPage/CreatePoolPage.tsx

@@ -156,10 +156,12 @@ export const CreatePoolForm = ({
 
   // recycled from EditPool
   const classificationOptions: Option[] = classifications.map(
-    ({ id, group, level, name }) => ({
-      value: id,
-      label: `${group}-0${level} (${getLocalizedName(name, intl)})`,
-    }),
+    ({ id, group, level, name }) => {
+      return {
+        value: id,
+        label: `${group}-${level < 10 ? "0" : ""}${level} (${getLocalizedName(name, intl)})`,
+      };
+    },
   );
 
   const departmentOptions: Option[] = departments.map(({ id, name }) => ({

apps/web/src/pages/Pools/EditPoolPage/components/EducationRequirementsSection.tsx

@@ -87,7 +87,10 @@ const EducationRequirementsSection = ({
   });
   const classificationGroup = pool.classification?.group;
   const classificationAbbr = pool.classification
-    ? wrapAbbr(`${classificationGroup}-0${pool.classification.level}`, intl)
+    ? wrapAbbr(
+        `${classificationGroup}-${pool.classification.level < 10 ? "0" : ""}${pool.classification.level}`,
+        intl,
+      )
     : "";
 
   return (

apps/web/src/pages/Pools/EditPoolPage/components/PoolNameSection/utils.ts

@@ -91,7 +91,7 @@ export const getClassificationOptions = (
 ): Option[] => {
   return classifications.filter(notEmpty).map(({ id, group, level, name }) => ({
     value: id,
-    label: `${group}-0${level} (${getLocalizedName(name, intl)})`,
+    label: `${group}-${level < 10 ? "0" : ""}${level} (${getLocalizedName(name, intl)})`,
   }));
 };
 

apps/web/src/pages/Pools/IndexPoolPage/components/PoolFilterDialog.tsx

@@ -108,7 +108,7 @@ const PoolFilterDialog = ({
           options={unpackMaybes(data?.classifications).map(
             ({ group, level }) => ({
               value: `${group}-${level}`,
-              label: `${group}-0${level}`,
+              label: `${group}-${level < 10 ? "0" : ""}${level}`,
             }),
           )}
         />

apps/web/src/pages/Pools/IndexPoolPage/components/helpers.tsx

@@ -52,7 +52,7 @@
   );
 }
 
 export function viewTeamLinkCell(
   url: Maybe<string> | undefined,
   displayName: Maybe<LocalizedString> | undefined,
   intl: IntlShape,
@@ -88,7 +88,7 @@
   classification: Maybe<Pick<Classification, "group" | "level">> | undefined,
 ) {
   return classification
-    ? `${classification.group}-0${classification.level}`
+    ? `${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`
     : "";
 }
 
@@ -99,7 +99,7 @@
 
   return (
     <Chip color="primary">
-      {`${classification.group}-0${classification.level}`}
+      {`${classification.group}-${classification.level < 10 ? "0" : ""}${classification.level}`}
     </Chip>
   );
 }

apps/web/src/pages/SearchRequests/SearchPage/utils.ts

@@ -25,7 +25,7 @@
   labels: Record<string, MessageDescriptor>,
   intl: IntlShape,
 ) => {
-  const key = `${group}-0${level}`;
+  const key = `${group}-${level < 10 ? "0" : ""}${level}`;
   return !hasKey(labels, key) ? key : intl.formatMessage(labels[key]);
 };
 
@@ -115,7 +115,7 @@
       ...(data?.equity?.isVisibleMinority ? ["isVisibleMinority"] : []),
       ...(data?.equity?.isWoman ? ["isWoman"] : []),
     ],
     educationRequirement: data.hasDiploma ? "has_diploma" : "no_diploma",
     skills: data.skills?.filter(notEmpty).map((s) => s.id) ?? [],
     stream: stream?.id ?? "",
     locationPreferences: data.locationPreferences?.filter(notEmpty) ?? [],