Build section-level help tours across Home, learning workflows, and Admin

app/javascript/components/Admin.tsx

@@ -1,8 +1,9 @@
 import React, { Suspense, useEffect } from "react";
-import { Route, Routes, Navigate, Outlet } from "react-router";
+import { Route, Routes, Navigate, Outlet, useMatch } from "react-router";
 import WorkingIndicator from "./infrastructure/WorkingIndicator";
 import { Skeleton } from "primereact/skeleton";
 import { useTypedSelector } from "./infrastructure/AppReducers";
+import { useTour } from "./infrastructure/TourContext";
 
 import CourseAdmin from "./course_admin/CourseAdmin";
 import SchoolList from "./course_admin/SchoolList";
@@ -13,11 +14,42 @@ import RubricDataAdmin from "./assignments/RubricDataAdmin";
 import ConsentFormList from "./Consent/ConsentFormList";
 import ConsentFormDataAdmin from "./Consent/ConsentFormDataAdmin";
 import ConceptsTable from "./ConceptsTable";
+import { useTranslation } from "react-i18next";
 
 //interface AdminProps {}
+const SECTION_HELP_KEYS: Record<string, string> = {
+  courses: "home.admin_help_courses",
+  rubrics: "home.admin_help_rubrics",
+  concepts: "home.admin_help_concepts",
+  users: "home.admin_help_users",
+  schools: "home.admin_help_schools",
+  consent_forms: "home.admin_help_consent_forms"
+};
 
 export default function Admin( /*props: AdminProps */) {
   const user = useTypedSelector(state => state.profile.user);
+  const { setTourSteps } = useTour();
+  const adminMatch = useMatch("/admin/*");
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    const adminSection = (adminMatch?.params?.["*"] || "").split("/")[0];
+    const description = t(SECTION_HELP_KEYS[adminSection] || "home.admin_help");
+
+    setTourSteps([
+      {
+        element: "body",
+        popover: {
+          title: t("home.admin_help_title"),
+          description,
+          align: "center",
+          side: "left"
+        }
+      }
+    ]);
+
+    return () => setTourSteps([]);
+  }, [adminMatch?.params?.["*"], setTourSteps, t]);
 
   return (
     <Routes>

app/javascript/components/BingoBoards/BingoShell.tsx

@@ -23,8 +23,8 @@ export default function BingoShell(props: Props) {
       {
         element: "body",
         popover: {
-          title: "No Help Available",
-          description: "There is no help available for this topic",
+          title: "Bingo!",
+          description: "Complete your Bingo! activity here by entering terms, playing assigned games, and reviewing results when available.",
           align: "center",
           side: "left"
         }

app/javascript/components/HomeShell.tsx

@@ -55,8 +55,8 @@ export default function HomeShell(props: Props) {
       {
         element: "body",
         popover: {
-          title: "Welcome to the Application!",
-          description: "This stuff is awesome. More information soon!",
+          title: "Home",
+          description: "Use this page to review your current tasks, switch between task and calendar views, and open each activity.",
           align: "center",
           side: "left"
         }

app/javascript/components/assignments/AssignmentShell.tsx

@@ -1,8 +1,9 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useState, useEffect } from "react";
 import { Route, Routes } from "react-router";
 import WorkingIndicator from "../infrastructure/WorkingIndicator";
 import RequireInstructor from "../infrastructure/RequireInstructor";
 import { Skeleton } from "primereact/skeleton";
+import { useTour } from "../infrastructure/TourContext";
 
 import AssignmentViewer from "./AssignmentViewer";
 import CritiqueShell from "./CritiqueShell";
@@ -13,6 +14,22 @@ type Props = {
 
 export default function AssignmentShell( props: Props) {
   const [working] = useState(true);
+  const { setTourSteps } = useTour();
+
+  useEffect(() => {
+    setTourSteps([
+      {
+        element: "body",
+        popover: {
+          title: "Assignments",
+          description: "Review assignment details, submit your responses, and check progress feedback in this section.",
+          align: "center",
+          side: "left"
+        }
+      }
+    ]);
+    return () => setTourSteps([]);
+  }, [setTourSteps]);
 
   return (
     <React.Fragment>

app/javascript/components/checkin/InstallmentReport.tsx

@@ -25,6 +25,7 @@ import distributeChange from "./distributeChange";
 import { FloatLabel } from "primereact/floatlabel";
 import GuardRedirect, { RedirectState } from "../infrastructure/GuardRedirect";
 import { DATETIME_SHORT, formatZonedDateTime, parseISO, TemporalSettings } from "../infrastructure/TemporalSettings";
+import { useTour } from "../infrastructure/TourContext";
 
 interface IContribution {
   userId: number;
@@ -84,6 +85,22 @@ export default function InstallmentReport(props: Props) {
   const [redirectUrl, setRedirectUrl] = useState<string | undefined>(undefined);
   const [redirectMessage, setRedirectMessage] = useState("");
   const [redirectMessageHeading, setRedirectMessageHeading] = useState("");
+  const { setTourSteps } = useTour();
+
+  useEffect(() => {
+    setTourSteps([
+      {
+        element: "body",
+        popover: {
+          title: "Check-ins",
+          description: "Submit your weekly check-in by rating team contributions and adding comments before you save.",
+          align: "center",
+          side: "left"
+        }
+      }
+    ]);
+    return () => setTourSteps([]);
+  }, [setTourSteps]);
 
   const updateSlice = (id, update) => {
     const lContributions = { ...contributions};

config/locales/home.en.yml

@@ -189,6 +189,14 @@ en:
     demonstration: Demonstration
   home:
     title: Home
+    admin_help_title: Admin Functions
+    admin_help: Use the admin area to manage courses, users, schools, rubrics, concepts, and consent forms.
+    admin_help_courses: Manage course settings, enrollments, and course activities in this section.
+    admin_help_rubrics: Create, publish, and maintain grading rubrics here.
+    admin_help_concepts: Review and maintain shared concept vocabulary used by Bingo! activities.
+    admin_help_users: Find users, review account details, and manage account roles in this section.
+    admin_help_schools: Create and edit school records, including labels and time zones.
+    admin_help_consent_forms: Create and update research consent forms, text, dates, and attached PDFs.
     your_tasks: Your Tasks
     invited: You've been invited!
     greeting: Hello #{name}