diff --git a/app/javascript/components/Admin.tsx b/app/javascript/components/Admin.tsx index 1f99562a..885c078b 100644 --- a/app/javascript/components/Admin.tsx +++ b/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 = { + 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 ( diff --git a/app/javascript/components/BingoBoards/BingoShell.tsx b/app/javascript/components/BingoBoards/BingoShell.tsx index 5e2ee4e6..d19a88dd 100644 --- a/app/javascript/components/BingoBoards/BingoShell.tsx +++ b/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" } diff --git a/app/javascript/components/HomeShell.tsx b/app/javascript/components/HomeShell.tsx index b44f5f68..0e7fff1d 100644 --- a/app/javascript/components/HomeShell.tsx +++ b/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" } diff --git a/app/javascript/components/assignments/AssignmentShell.tsx b/app/javascript/components/assignments/AssignmentShell.tsx index c519ec7a..0f436587 100644 --- a/app/javascript/components/assignments/AssignmentShell.tsx +++ b/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 ( diff --git a/app/javascript/components/checkin/InstallmentReport.tsx b/app/javascript/components/checkin/InstallmentReport.tsx index 709cafdc..891af129 100644 --- a/app/javascript/components/checkin/InstallmentReport.tsx +++ b/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(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}; diff --git a/config/locales/home.en.yml b/config/locales/home.en.yml index d4e00e80..def36408 100644 --- a/config/locales/home.en.yml +++ b/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}