Add more I18n translations in curriculum components (pupilfirst#567)

Co-authored-by: stomp <[email protected]>

app/javascript/courses/curricula/components/CoursesCurriculum.res

@@ -58,7 +58,7 @@ let renderTargetGroup = (targetGroup, targets, statusOfTargets) => {
       {targetGroup |> TargetGroup.milestone
         ? <div
             className="inline-block px-3 py-2 bg-orange-400 font-bold text-xs rounded-b-lg leading-tight text-white uppercase">
-            {"Milestone targets" |> str}
+            {t("milestone_targets") |> str}
           </div>
         : React.null}
       <div className="p-6 pt-5">
@@ -97,13 +97,13 @@ let addSubmission = (setState, latestSubmission, levelUpEligibility) => setState
 
 let handleLockedLevel = level =>
   <div className="max-w-xl mx-auto text-center mt-4">
-    <div className="text-2xl font-bold px-3"> {"Level Locked" |> str} </div>
+    <div className="text-2xl font-bold px-3"> {t("level_locked") |> str} </div>
     <img className="max-w-sm mx-auto" src=levelLockedImage />
     {switch level |> Level.unlockAt {
     | Some(date) =>
       let dateString = date->DateFns.format("MMMM d, yyyy")
       <div className="font-semibold text-md px-3">
-        <p> {"The level is currently locked!" |> str} </p>
+        <p> {t("level_locked_notice") |> str} </p>
         <p> {"You can access the content on " ++ (dateString ++ ".") |> str} </p>
       </div>
     | None => React.null
@@ -216,8 +216,8 @@ let computeNotice = (
 
 let navigationLink = (direction, level, setState) => {
   let (leftIcon, longText, shortText, rightIcon) = switch direction {
-  | #Previous => (Some("fa-arrow-left"), "Previous Level", "Previous", None)
-  | #Next => (None, "Next Level", "Next", Some("fa-arrow-right"))
+  | #Previous => (Some("fa-arrow-left"), t("nav_previous_level"), "Previous", None)
+  | #Next => (None, t("nav_next_level"), "Next", Some("fa-arrow-right"))
   }
 
   let arrow = icon =>
@@ -467,7 +467,7 @@ let make = (
               <div className="mx-auto py-10">
                 <img className="max-w-sm mx-auto" src=levelEmptyImage />
                 <p className="text-center font-semibold text-lg mt-4">
-                  {"There's no published content on this level." |> str}
+                  {t("empty_level_content_notice") |> str}
                 </p>
               </div>
             | false =>

app/javascript/courses/curricula/types/CoursesCurriculum__TargetStatus.res

@@ -33,6 +33,8 @@ type t = {
   status: status,
 }
 
+let tc = I18n.t(~scope="components.CoursesCurriculum__TargetStatus")
+
 type submissionStatus =
   | SubmissionMissing
   | SubmissionPendingReview
@@ -156,10 +158,10 @@ let isPending = t => t.status == Pending
 
 let lockReasonToString = lr =>
   switch lr {
-  | CourseLocked => "The course has ended and submissions are disabled for all targets!"
-  | AccessLocked => "Your access to this course has ended."
-  | LevelLocked => "You must level up to complete this target."
-  | PrerequisitesIncomplete => "This target has pre-requisites that are incomplete."
+  | CourseLocked => tc("course_locked")
+  | AccessLocked => tc("access_locked")
+  | LevelLocked => tc("level_locked")
+  | PrerequisitesIncomplete => tc("prerequisites_incomplete")
   }
 
 let statusToString = t =>

app/javascript/courses/report/types/CoursesReport__Level.res

@@ -5,6 +5,8 @@ type t = {
   unlocked: bool,
 }
 
+let t = I18n.t(~scope="components.CoursesReport__Level")
+
 let id = t => t.id
 let name = t => t.name
 
@@ -25,7 +27,7 @@ let decode = json => {
 let shortName = t => "L" ++ (t.number |> string_of_int)
 
 let levelLabel = (levels, id) =>
-  "Level " ++
+  t("level") ++ " " ++
   (levels
   |> ArrayUtils.unsafeFind(
     level => level.id == id,

app/javascript/schools/courses/components/CurriculumEditor.res

@@ -1,4 +1,5 @@
 let str = ReasonReact.string
+let t = I18n.t(~scope="components.CurriculumEditor")
 
 open CurriculumEditor__Types
 
@@ -147,7 +148,7 @@ let make = (
     let targetGroup =
       state.targetGroups |> ListUtils.unsafeFind(
         tg => TargetGroup.id(tg) == Target.targetGroupId(target),
-        "Unabltge to find target group with ID: " ++ Target.targetGroupId(target),
+        "Unable to find target group with ID:" ++ Target.targetGroupId(target),
       )
 
     let updatedTargetGroup = switch target |> Target.visibility {
@@ -224,7 +225,8 @@ let make = (
                 |> Level.sort
                 |> Array.map(level =>
                   <option key={Level.id(level)} value={level |> Level.name}>
-                    {"Level " ++
+                    {t("level") ++
+                    " " ++
                     ((level |> Level.number |> string_of_int) ++
                     (": " ++ (level |> Level.name))) |> str}
                   </option>
@@ -237,7 +239,7 @@ let make = (
               </div>
             </div>
             <button
-              title="Edit selected level"
+              title={t("edit_selected_level")}
               className="flex items-center text-gray-600 hover:text-gray-900 text-sm font-bold border border-gray-400 border-l-0 py-1 px-2 rounded-r focus:outline-none"
               onClick={_ => send(UpdateEditorAction(ShowLevelEditor(Some(state.selectedLevel))))}>
               <i className="fas fa-pencil-alt" />
@@ -246,7 +248,7 @@ let make = (
               className="btn btn-primary ml-4"
               onClick={_ => send(UpdateEditorAction(ShowLevelEditor(None)))}>
               <i className="fas fa-plus-square mr-2 text-lg" />
-              <span> {"Create Level" |> str} </span>
+              <span> {t("create_level") |> str} </span>
             </button>
           </div>
           {showArchivedButton(targetGroupsInLevel, state.targets)
@@ -281,7 +283,7 @@ let make = (
           <span className="flex bg-gray-200 p-2 rounded-full">
             <i className="fas fa-plus-circle text-2xl" />
           </span>
-          <h4 className="font-semibold ml-2"> {"Create a target group" |> str} </h4>
+          <h4 className="font-semibold ml-2"> {t("create_target_group") |> str} </h4>
         </div>
       </div>
     </div>

app/javascript/schools/courses/components/curriculum_editor/CurriculumEditor__TargetDetailsEditor.res

@@ -9,6 +9,8 @@ external quizIcon: string = "./images/target-complete-quiz-icon.svg"
 
 let str = React.string
 
+let t = I18n.t(~scope="components.CurriculumEditor__TargetDetailsEditor")
+
 type methodOfCompletion =
   | Evaluated
   | VisitLink
@@ -312,13 +314,13 @@ let prerequisiteTargetEditor = (send, eligiblePrerequisiteTargets, state) => {
         <label
           className="block tracking-wide text-sm font-semibold mb-2" htmlFor="prerequisite_targets">
           <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-          {"Are there any prerequisite targets?" |> str}
+          {t("prerequisite_targets_label") |> str}
         </label>
         <div id="prerequisite_targets" className="mb-6 ml-6">
           <MultiSelectForPrerequisiteTargets
-            placeholder="Search targets"
-            emptySelectionMessage="No targets selected"
-            allItemsSelectedMessage="You have selected all targets!"
+            placeholder={t("search_targets")}
+            emptySelectionMessage={t("no_targets_selected")}
+            allItemsSelectedMessage={t("selected_all_targets")}
             selected
             unselected
             onChange={setPrerequisiteSearch(send)}
@@ -392,13 +394,13 @@ let evaluationCriteriaEditor = (state, evaluationCriteria, send) => {
     <label
       className="block tracking-wide text-sm font-semibold mr-6 mb-2" htmlFor="evaluation_criteria">
       <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-      {"Choose evaluation criteria from your list" |> str}
+      {t("select_criterion_label") |> str}
     </label>
     <div className="ml-6">
       {validNumberOfEvaluationCriteria(state)
         ? React.null
         : <div className="drawer-right-form__error-msg mb-2">
-            {"Atleast one has to be selected" |> str}
+            {t("select_criterion_warning") |> str}
           </div>}
       <MultiSelectForEvaluationCriteria
         placeholder="Search evaluation criteria"
@@ -467,8 +469,11 @@ module SelectableTargetGroup = {
 
   let label = _t => None
 
+  let tc = t
+
   let value = t =>
-    "Level " ++
+    tc("level") ++
+    " " ++
     ((t.level |> Level.number |> string_of_int) ++
     (": " ++ (t.targetGroup |> TargetGroup.name)))
 
@@ -533,7 +538,7 @@ let targetGroupEditor = (state, targetGroups, levels, send) =>
   <div id="target_group_id" className="mb-6">
     <label className="block tracking-wide text-sm font-semibold mr-6 mb-2" htmlFor="target_group">
       <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-      {"Target Group" |> str}
+      {t("target_group") |> str}
     </label>
     <div className="ml-6">
       <TargetGroupSelector
@@ -547,7 +552,7 @@ let targetGroupEditor = (state, targetGroups, levels, send) =>
       />
       {switch state.targetGroupId {
       | Some(_) => React.null
-      | None => <School__InputGroupError message="Choose a target group" active=true />
+      | None => <School__InputGroupError message={t("choose_target_group")} active=true />
       }}
     </div>
   </div>
@@ -568,9 +573,9 @@ let methodOfCompletionSelection = polyMethodOfCompletion =>
 
 let methodOfCompletionButton = (methodOfCompletion, state, send, index) => {
   let buttonString = switch methodOfCompletion {
-  | #TakeQuiz => "Take a quiz to complete the target."
-  | #VisitLink => "Visit a link to complete the target."
-  | #MarkAsComplete => "Simply mark the target as completed."
+  | #TakeQuiz => t("take_quiz")
+  | #VisitLink => t("visit_link")
+  | #MarkAsComplete => t("mark_as_complete")
   }
 
   let selected = switch (state.methodOfCompletion, methodOfCompletion) {
@@ -602,7 +607,7 @@ let methodOfCompletionSelector = (state, send) =>
         className="block tracking-wide text-sm font-semibold mr-6 mb-3"
         htmlFor="method_of_completion">
         <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-        {"How do you want the student to complete the target?" |> str}
+        {t("target_method_of_completion_label") |> str}
       </label>
       <div id="method_of_completion" className="flex -mx-2 pl-6">
         {[#MarkAsComplete, #VisitLink, #TakeQuiz]
@@ -728,7 +733,7 @@ let updateTargetButton = (
     ?onClick
     disabled
     className="btn btn-primary w-full text-white font-bold py-3 px-6 shadow rounded focus:outline-none">
-    {"Update Target" |> str}
+    {t("update_target") |> str}
   </button>
 }
 
@@ -855,7 +860,7 @@ let make = (
                     className="appearance-none block text-sm w-full bg-white border border-gray-400 rounded px-4 py-2 my-2 leading-relaxed focus:outline-none focus:bg-white focus:border-gray-500"
                     id="title"
                     type_="text"
-                    placeholder="Type target title here"
+                    placeholder={t("target_title_placeholder")}
                     onChange={updateTitle(send)}
                     value=state.title
                   />
@@ -872,7 +877,7 @@ let make = (
                 <label
                   className="block tracking-wide text-sm font-semibold mr-6" htmlFor="evaluated">
                   <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-                  {"Will a coach review submissions on this target?" |> str}
+                  {t("target_reviewed_by_coach") |> str}
                 </label>
                 <div
                   id="evaluated"
@@ -894,12 +899,12 @@ let make = (
                 <div className="mb-6">
                   <label className="tracking-wide text-sm font-semibold" htmlFor="target_checklist">
                     <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-                    {"What steps should the student take to complete this target?" |> str}
+                    {t("target_checklist_label") |> str}
                   </label>
                   <HelpIcon
                     className="ml-1"
                     link="https://docs.pupilfirst.com/#/curriculum_editor?id=defining-steps-to-complete-a-target">
-                    {"These are the steps that a student must complete to submit work on a target. This information will be shown to the coach for review." |> str}
+                    {t("target_checklist_help_text") |> str}
                   </HelpIcon>
                   <div className="ml-6 mb-6">
                     {
@@ -935,14 +940,14 @@ let make = (
                       ? <div
                           className="border border-orange-500 bg-orange-100 text-orange-800 px-2 py-1 rounded my-2 text-sm text-center">
                           <i className="fas fa-info-circle mr-2" />
-                          {"This target has no steps. Students will be able to submit target without any action!" |> str}
+                          {t("empty_checklist_warning") |> str}
                         </div>
                       : React.null}
                     {state.checklist |> Array.length >= 15
                       ? <div
                           className="border border-orange-500 bg-orange-100 text-orange-800 px-2 py-1 rounded my-2 text-sm text-center">
                           <i className="fas fa-info-circle mr-2" />
-                          {"Maximum allowed checklist items is 15!" |> str}
+                          {t("target_checklist_limit_warning") |> str}
                         </div>
                       : React.null}
                     <button
@@ -971,12 +976,12 @@ let make = (
               <div className="mb-6">
                 <label className="inline-block tracking-wide text-sm font-semibold" htmlFor="role">
                   <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-                  {"How should teams tackle this target?" |> str}
+                  {t("target_role_label") |> str}
                 </label>
                 <HelpIcon
                   className="ml-1"
                   link="https://docs.pupilfirst.com/#/curriculum_editor?id=setting-the-method-of-completion">
-                  {"Should students in a team submit work on a target individually, or together?" |> str}
+                  {t("target_role_help") |> str}
                 </HelpIcon>
                 <div id="role" className="flex mt-4 ml-6">
                   <button
@@ -1016,13 +1021,13 @@ let make = (
                 <label
                   className="tracking-wide text-sm font-semibold" htmlFor="completion-instructions">
                   <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-                  {"Do you have any completion instructions for the student?" |> str}
+                  {t("completion_instructions_label") |> str}
                   <span className="ml-1 text-xs font-normal"> {"(optional)" |> str} </span>
                 </label>
                 <HelpIcon
                   link="https://docs.pupilfirst.com/#/curriculum_editor?id=setting-the-method-of-completion"
                   className="ml-1">
-                  {"Use this to remind the student about something important. These instructions will be displayed close to where students complete the target." |> str}
+                  {t("completion_instructions_help") |> str}
                 </HelpIcon>
                 <div className="ml-6">
                   <input
@@ -1042,7 +1047,7 @@ let make = (
                   <label
                     className="block tracking-wide text-sm font-semibold mr-3" htmlFor="archived">
                     <span className="mr-2"> <i className="fas fa-list text-base" /> </span>
-                    {"Target Visibility" |> str}
+                    {t("target_visibility") |> str}
                   </label>
                   <div
                     id="visibility"

app/javascript/schools/courses/components/curriculum_editor/CurriculumEditor__TargetGroupShow.res

@@ -2,6 +2,8 @@ open CurriculumEditor__Types
 
 let str = ReasonReact.string
 
+let t = I18n.t(~scope="components.CurriculumEditor__TargetGroupShow")
+
 type state = {
   targetTitle: string,
   savingNewTarget: bool,
@@ -115,7 +117,7 @@ let make = (
         {milestone
           ? <div
               className="inline-block px-3 py-2 bg-orange-400 font-bold text-xs rounded-b-lg leading-tight text-white uppercase">
-              {"Milestone Targets" |> str}
+              {t("milestone_targets") |> str}
             </div>
           : ReasonReact.null}
         <div className="target-group__title pt-6">
@@ -182,7 +184,7 @@ let make = (
             title="Create target"
             value=state.targetTitle
             onChange={event => send(UpdateTargetTitle(ReactEvent.Form.target(event)["value"]))}
-            placeholder="Create a target"
+            placeholder=t("create_target")
             className="target-create__input text-left bg-gray-100 pr-5 pl-12 py-6 rounded-b appearance-none block w-full text-sm text-gray-900 font-semibold leading-tight hover:bg-gray-100 focus:outline-none focus:bg-white focus:border-gray-500"
           />
           {state.validTargetTitle