[Feature] Instructor led training page (#12083)

* Make id required on TrainingOpportunity type * Add metadata component * Add new instructor led training page * Add new InstructorLedTrainingPage component * Add CourseLanguageChip component * Add MetaData base component * Update links on ItTrainingFundPage * Remove toast error * Add most translations * merge main * Remove unused var and imports * Add rest of translations * Update translations * Remove duplicate routes * Update duplicate lang snapshot * Change link text on it training fun page * Change to MetaData to Metadata * Change cancel button styling * Increase pagination initial fetch total * Add bilingual opportunities to other filters * Improve button label accessibility * Use useQuery orderby * Use where.opportunityLanguage to filter list --------- Co-authored-by: Yoni K <[email protected]>
GCTC-NTGC · Nov 26, 2024 · adcd2bf · adcd2bf
1 parent d43840b
commit adcd2bf
Show file tree

Hide file tree

Showing 16 changed files with 749 additions and 30 deletions.
diff --git a/api/app/Models/TrainingOpportunity.php b/api/app/Models/TrainingOpportunity.php
@@ -68,7 +68,8 @@ public static function scopeOpportunityLanguage(Builder $query, ?string $languag
     {
         $courseLanguageArray = array_column(CourseLanguage::cases(), 'name');
         if (isset($language) && in_array($language, $courseLanguageArray)) {
-            $query->where('course_language', '=', $language);
+            $query->where('course_language', '=', $language)
+                ->orWhere('course_language', '=', CourseLanguage::BILINGUAL);
         }
 
         return $query;

diff --git a/api/graphql/schema.graphql b/api/graphql/schema.graphql
@@ -914,7 +914,7 @@ type SitewideAnnouncement {
 }
 
 type TrainingOpportunity {
-  id: UUID
+  id: UUID!
   title: LocalizedString
   courseLanguage: LocalizedCourseLanguage @rename(attribute: "course_language")
   registrationDeadline: Date @rename(attribute: "registration_deadline")
@@ -1032,9 +1032,8 @@ type Query {
           "pool:id,process_number"
           "skills:id,name"
         ]
-      )
-  ): # Limit fields for eager loading
-  [PoolCandidateWithSkillCount]!
+      ) # Limit fields for eager loading
+  ): [PoolCandidateWithSkillCount]!
     @guard
     @paginate(
       defaultCount: 10

diff --git a/api/storage/app/lighthouse-schema.graphql b/api/storage/app/lighthouse-schema.graphql
@@ -1213,7 +1213,7 @@ type SitewideAnnouncement {
 }
 
 type TrainingOpportunity {
-  id: UUID
+  id: UUID!
   title: LocalizedString
   courseLanguage: LocalizedCourseLanguage
   registrationDeadline: Date

diff --git a/api/tests/Feature/TrainingOpportunityTest.php b/api/tests/Feature/TrainingOpportunityTest.php
@@ -227,7 +227,7 @@ public function testQueryingPaginatedCourseLanguage(): void
         )
             ->assertJsonFragment(
                 [
-                    'total' => 1,
+                    'total' => 2,
                 ],
             );
 
@@ -258,7 +258,7 @@ public function testQueryingPaginatedCourseLanguage(): void
         )
             ->assertJsonFragment(
                 [
-                    'total' => 1,
+                    'total' => 2,
                 ],
             );
     }

diff --git a/apps/web/src/components/Router.tsx b/apps/web/src/components/Router.tsx
@@ -525,8 +525,20 @@ const createRoute = (locale: Locales) =>
               },
               {
                 path: "it-training-fund",
-                lazy: () =>
-                  import("../pages/ItTrainingFundPage/ItTrainingFundPage"),
+                children: [
+                  {
+                    index: true,
+                    lazy: () =>
+                      import("../pages/ItTrainingFundPage/ItTrainingFundPage"),
+                  },
+                  {
+                    path: "instructor-led-training",
+                    lazy: () =>
+                      import(
+                        "../pages/InstructorLedTrainingPage/InstructorLedTrainingPage"
+                      ),
+                  },
+                ],
               },
               {
                 path: "*",

diff --git a/apps/web/src/hooks/useRoutes.ts b/apps/web/src/hooks/useRoutes.ts
@@ -322,6 +322,8 @@ const getRoutes = (lang: Locales) => {
 
     // IT Training Fund
     itTrainingFund: () => [baseUrl, "it-training-fund"].join("/"),
+    instructorLedTraining: () =>
+      [baseUrl, "it-training-fund", "instructor-led-training"].join("/"),
 
     // Training Opportunities (Admin)
     trainingOpportunitiesIndex: () =>

diff --git a/apps/web/src/lang/__snapshots__/lang.test.ts.snap b/apps/web/src/lang/__snapshots__/lang.test.ts.snap
@@ -58,6 +58,13 @@ exports[`message files should have no changes to duplicate strings 1`] = `
       "Retirer du processus"
     ]
   },
+  {
+    "en": "Apply now",
+    "fr": [
+      "Postulez dès-maintenant",
+      "Présentez votre demande"
+    ]
+  },
   {
     "en": "Remove membership<hidden> in {team}</hidden>",
     "fr": [

diff --git a/apps/web/src/lang/fr.json b/apps/web/src/lang/fr.json
@@ -1103,6 +1103,10 @@
     "defaultMessage": "Veuillez utiliser uniquement des lettres minuscules et des traits de soulignement.",
     "description": "Description for rule pattern on key field"
   },
+  "3qkzyD": {
+    "defaultMessage": "Ne manquez pas de profiter des formations dirigées par un instructeur ou une instructrice réservées aux membres du personnel des TI du gouvernement du Canada. Nous ajoutons régulièrement de nouveaux cours axés sur les compétences et les domaines des TI les plus demandés au gouvernement.",
+    "description": "First paragraph of it training opportunities section"
+  },
   "3rbRfI": {
     "defaultMessage": "Vous recevrez un suivi sur votre demande dans 5 à 10 jours ouvrables.",
     "description": "Description of when the user should expect a response to their request"
@@ -1347,6 +1351,10 @@
     "defaultMessage": "D’autres exigences s’appliquent pour l’approvisionnement en services professionnels. Consultez les Procédures obligatoires pour les propriétaires fonctionnels lors de l’approvisionnement en services professionnels menées par le Bureau du contrôleur général du Canada.",
     "description": "Description for the related policies card"
   },
+  "4t9lEL": {
+    "defaultMessage": "Pour en savoir plus et présenter une demande <hidden>pour {trainingOpportunityTitle}</hidden>",
+    "description": "Button label to open a training opportunities dialog"
+  },
   "4tIdsX": {
     "defaultMessage": "Talents numériques du GC - Toutes compétences.csv",
     "description": "Filename for skills CSV file download"
@@ -4163,6 +4171,10 @@
     "defaultMessage": "Date de modification : {modifiedDate}",
     "description": "Header for the date of the last modification of the site"
   },
+  "JlQIBx": {
+    "defaultMessage": "Découvrez les cours dirigés par un instructeur ou une instructrice proposés pour améliorer votre expertise en technologie de l’information.",
+    "description": "Page subtitle for the instructor led training page"
+  },
   "Jp/oeD": {
     "defaultMessage": "2. Créez un nom d’utilisateur et un mot de passe. N’oubliez pas d’ <strong>enregistrer votre nom d’utilisateur</strong> à part de votre <strong>adresse de courriel</strong>.",
     "description": "Text for second sign up -> create step."
@@ -4291,6 +4303,10 @@
     "defaultMessage": "Bâtissez votre carrière numérique",
     "description": "Heading for the recruitment opportunities"
   },
+  "KUuhwO": {
+    "defaultMessage": "Les formations que vous trouverez dans cette page sont soutenues par le <link>Fonds de formation et de perfectionnement de la collectivité de la TI</link> et conçues pour le personnel du groupe TI représenté par l’Institut professionnel de la fonction publique du Canada.",
+    "description": "Second paragraph of it training opportunities section"
+  },
   "KWXIKL": {
     "defaultMessage": "Membre retiré avec succès",
     "description": "Alert displayed to user when a community member is removed"
@@ -5267,6 +5283,10 @@
     "defaultMessage": "Nous publions constamment de nouvelles offres. En créant votre profil dès maintenant, vous pourrez soumettre des demandes à la vitesse de l’éclair le moment venu.",
     "description": "Text describing upcoming opportunities instructing users to create a profile when anonymous"
   },
+  "PH68o/": {
+    "defaultMessage": "Présentez votre demande",
+    "description": "Label for apply now button in instructor led training"
+  },
   "PN3PMn": {
     "defaultMessage": "La Directive sur les talents numériques introduit des mesures visant à améliorer la coordination interministérielle sur le développement des talents et le perfectionnement, ainsi que des mesures visant à améliorer la promotion de l’équité. L’intention de la Directive est d’aborder la main-d’œuvre numérique du GC comme une communauté homogène et évolutive.",
     "description": "The directives digital talent and development component"
@@ -6382,6 +6402,10 @@
     "defaultMessage": "Afficher les résultats",
     "description": "Submit button within the search filter dialog"
   },
+  "V4W5oL": {
+    "defaultMessage": "Possibilités de formation dirigée par un instructeur ou une instructrice",
+    "description": "Title for the instructor led training page"
+  },
   "V6Y2Np": {
     "defaultMessage": "Réduire toutes les sections d'informations complémentaires",
     "description": "Accessible link text to collapse all accordions for more information"
@@ -6650,6 +6674,10 @@
     "defaultMessage": "Il y a deux façons de soumettre ce questionnaire. La première façon est de remplir ce questionnaire en ligne ici. Veuillez prendre note que le questionnaire doit être rempli et soumis en une seule fois. Vous ne pouvez pas enregistrer vos réponses en tant que brouillon. La deuxième façon de remplir ce questionnaire est de le télécharger en tant que fichier, de le compléter en dehors de la plateforme et de l’envoyer par courriel à la boîte aux lettres <link>Talents numériques du GC</link>.",
     "description": "Paragraph three of the _instructions_ section of the _digital services contracting questionnaire_"
   },
+  "WPS1Ic": {
+    "defaultMessage": "Présentez une demande et partagez votre profil",
+    "description": "Title for apply and share your profile section"
+  },
   "WSMupE": {
     "defaultMessage": "Processus",
     "description": "Title for process sections"
@@ -7090,6 +7118,10 @@
     "defaultMessage": "Ayant eu le privilège de travailler en étroite collaboration avec les apprenti·es autochtones et de constater l’immense talent et le potentiel qu’ils possèdent, notre équipe à IRCC est convaincue que cet investissement apportera une valeur considérable à la fois à notre ministère et à nos apprenti·es eux·elles-mêmes.",
     "description": "Quote from Darcy Pierlot about working with apprentices"
   },
+  "YTN8A8": {
+    "defaultMessage": "Anglais seulement",
+    "description": "Filter by option on instructor training page."
+  },
   "YV3EoS": {
     "defaultMessage": "Modifier les compétences comportementales pour les améliorer",
     "description": "Link text for editing a users behavioural skills to be improved"
@@ -7534,6 +7566,10 @@
     "defaultMessage": "Cet utilisateur a été supprimé.",
     "description": "Message displayed when admin views a deleted user."
   },
+  "alKxbI": {
+    "defaultMessage": "Parcourir les possibilités de formation",
+    "description": "A link to sign up for updates"
+  },
   "amxWPg": {
     "defaultMessage": "Votre numéro de suivi pour cette demande est : <strong>{requestId}</strong>",
     "description": "Message to the user about the ID of their request for referencing the request"
@@ -7678,6 +7714,10 @@
     "defaultMessage": "S’inscrire aux mises à jour<hidden> sur les bons pour examens de certification</hidden>",
     "description": "A link to sign up for updates"
   },
+  "bjwTpe": {
+    "defaultMessage": "Si vous souhaitez suivre une formation, rendez-vous d'abord sur la plateforme Talents numériques du GC pour créer ou mettre à jour votre profil, lequel nous permet de confirmer votre situation d'emploi, votre classification, votre appartenance à un groupe visé par l'équité en matière d'emploi et l'expérience requise. Ensuite, remplissez le formulaire de demande et acceptez de partager votre profil.",
+    "description": "First paragraph of apply and share section"
+  },
   "bkAzZm": {
     "defaultMessage": "Titre du poste (FR)",
     "description": "Label for a pool advertisements specific French title"
@@ -8894,6 +8934,10 @@
     "defaultMessage": "Les processus de recrutement apparaîtront ici automatiquement au fur et à mesure que vous y serez admis. Vous pouvez commencer par postuler aux offres d'emploi disponibles sur la <link>page de recherche d'emploi</link>.",
     "description": "Additional message displayed in recruitment availability when the user is not in any valid pools"
   },
+  "hAy7cB": {
+    "defaultMessage": "Possibilités de formation en TI",
+    "description": "Title for available it training opportunities section"
+  },
   "hBDz/h": {
     "defaultMessage": "Commencez<hidden> à remplir votre profil linguistique</hidden>",
     "description": "Call to action to begin editing language profile"
@@ -9690,6 +9734,10 @@
     "defaultMessage": "Mes renseignements sur l'équité en matière d'emploi",
     "description": "Label preceding what groups the user identifies as part of, followed by a colon"
   },
+  "l4d7/6": {
+    "defaultMessage": "Aucun possibilité de formation n'est actuellement affiché. Revenez plus tard.",
+    "description": "Null message for instructor led training list"
+  },
   "l5R6Nc": {
     "defaultMessage": "Veuillez remplir une demande d’habilitation",
     "description": "Link text for government of canada security clearance forms"
@@ -10618,6 +10666,10 @@
     "defaultMessage": "Chercher les rôles",
     "description": "Label for the roles table search input"
   },
+  "pcAgJh": {
+    "defaultMessage": "Nous choisirons les personnes participantes en fonction de leur admissibilité, de leurs compétences ou de leur expérience, et de la représentation des groupes visés par l’équité en matière d’emploi au sein de l’effectif de la TI du gouvernement du Canada. Nous communiquerons avec vous dans les huit jours ouvrables suivant la date limite de présentation des demandes. Si vous faites partie des personnes choisies, vous aurez trois jours ouvrables pour confirmer votre participation.",
+    "description": "Second paragraph of apply and share section"
+  },
   "pe5WkF": {
     "defaultMessage": "Courriel du propriétaire",
     "description": "Title displayed for the Pool table Owner Email column"
@@ -11482,10 +11534,6 @@
     "defaultMessage": "À quoi devrais-je m’attendre si je réussis ce processus?",
     "description": "Button text to toggle the accordion for what to expect after admission"
   },
-  "uuE/zT": {
-    "defaultMessage": "S’inscrire aux mises à jour<hidden> sur les cours et camps d’entrainement dirigés par un instructeur ou une instructrice</hidden>",
-    "description": "A link to sign up for updates"
-  },
   "uup5F2": {
     "defaultMessage": "Sélectionnez une langue",
     "description": "Placeholder displayed on the user form preferred communication language field."
@@ -11530,6 +11578,10 @@
     "defaultMessage": "Merci d’avoir postulé dans le cadre du Programme d’apprentissage en TI pour les peuples autochtones!",
     "description": "Title for notification that a an IAP application was submitted"
   },
+  "vB6jX+": {
+    "defaultMessage": "Date limite de présentation des demandes",
+    "description": "Label for application deadline meta data"
+  },
   "vC9NsS": {
     "defaultMessage": "Nos normes",
     "description": "Title for the accessibility standards"
@@ -11582,6 +11634,10 @@
     "defaultMessage": " Cette page offre un aperçu complet de l’historique de vos notifications. À partir de cette page, vous pouvez consulter, épingler et supprimer des notifications de votre compte. Si vous souhaitez gérer les notifications que vous recevez et leur format, vous pouvez le faire à partir de la page des paramètres de votre compte.",
     "description": "Description of the list of a users notifications"
   },
+  "vXcg28": {
+    "defaultMessage": "Voir tout",
+    "description": "Filter by option on instructor training page."
+  },
   "vYi5/y": {
     "defaultMessage": "Ce guide de mise en œuvre est conçu pour aider les gestionnaires et les responsables de l’initiative numérique à assumer leurs responsabilités au titre de la <cite>Directive sur les talents numériques</cite>. Il explique pourquoi la Directive est nécessaire et ce qu’elle exige.",
     "description": "Body message for digital initiative managers section."
@@ -11694,6 +11750,10 @@
     "defaultMessage": "Ajouter un membre",
     "description": "Label for the add member to community form"
   },
+  "wBU9X4": {
+    "defaultMessage": "Français seulement",
+    "description": "Filter by option on instructor training page."
+  },
   "wCf/XC": {
     "defaultMessage": "À propos de ce rôle",
     "description": "Title for basic information"
@@ -11730,10 +11790,6 @@
     "defaultMessage": "Cette section demande des renseignements sur le recrutement standard, tels que la classification, le titre du poste et la date de clôture",
     "description": "Sub title for basic information"
   },
-  "wOITol": {
-    "defaultMessage": "Fonds de formation et de perfectionnement de la collectivité de la TI",
-    "description": "page title for the IT training fund page"
-  },
   "wORNl0": {
     "defaultMessage": "Sélectionnez une famille ou plus",
     "description": "Placeholder displayed on the skill form families field."
@@ -12078,6 +12134,10 @@
     "defaultMessage": "Choisissez le critère auquel vous répondez.",
     "description": "Heading for radio group section in application education page."
   },
+  "yK0vlP": {
+    "defaultMessage": "Dates de la formation",
+    "description": "Label for training dates meta data"
+  },
   "yKQGy8": {
     "defaultMessage": "Niveaux de compétence comportementale",
     "description": "Heading for the skills level definitions of behavioural skills"
@@ -12138,6 +12198,14 @@
     "defaultMessage": "Membre des FAC",
     "description": "Veteran/member label"
   },
+  "yd+VEB": {
+    "defaultMessage": "Date de la formation",
+    "description": "Label for training date meta data"
+  },
+  "ye4m17": {
+    "defaultMessage": "Fonds de formation et de perfectionnement de la collectivité de la TI",
+    "description": "Title for the IT training fund page"
+  },
   "yfzR+U": {
     "defaultMessage": "Il semble que vous n’ayez pas encore ajouté d’expériences à votre parcours professionnel.",
     "description": "Null state message for career timeline section of the application review page."

diff --git a/apps/web/src/messages/pageTitles.ts b/apps/web/src/messages/pageTitles.ts
@@ -66,6 +66,16 @@ export default defineMessages({
     id: "bVQ/rm",
     description: "Title for the index user page",
   },
+  itTrainingFund: {
+    defaultMessage: "IT Community Training and Development Fund",
+    id: "ye4m17",
+    description: "Title for the IT training fund page",
+  },
+  instructorLedTraining: {
+    defaultMessage: "Instructor-led training opportunities",
+    id: "V4W5oL",
+    description: "Title for the instructor led training page",
+  },
   trainingOpportunities: {
     defaultMessage: "Training opportunities",
     id: "V95g4E",

diff --git a/apps/web/src/pages/InstructorLedTrainingPage/CourseLanguageChip.tsx b/apps/web/src/pages/InstructorLedTrainingPage/CourseLanguageChip.tsx
@@ -0,0 +1,37 @@
+import { useIntl } from "react-intl";
+
+import { CourseLanguage } from "@gc-digital-talent/graphql";
+import { commonMessages } from "@gc-digital-talent/i18n";
+import { Chip } from "@gc-digital-talent/ui";
+
+const CourseLanguageChip = ({
+  courseLanguage,
+}: {
+  courseLanguage?: CourseLanguage;
+}) => {
+  const intl = useIntl();
+  switch (courseLanguage) {
+    case CourseLanguage.Bilingual:
+      return (
+        <Chip color="tertiary">
+          {intl.formatMessage(commonMessages.bilingual)}
+        </Chip>
+      );
+    case CourseLanguage.English:
+      return (
+        <Chip color="primary">
+          {intl.formatMessage(commonMessages.english)}
+        </Chip>
+      );
+    case CourseLanguage.French:
+      return (
+        <Chip color="secondary">
+          {intl.formatMessage(commonMessages.french)}
+        </Chip>
+      );
+    default:
+      return null;
+  }
+};
+
+export default CourseLanguageChip;