video tutorials modal by wojcik91 · Pull Request #2593 · DefGuard/defguard

wojcik91 · 2026-04-01T18:20:09Z

Add a dedicated modal for video tutorials.

Resolves #2384

Copilot

Pull request overview

Adds a new Video Tutorials experience in the web app by introducing a dedicated, two-panel tutorials modal and migrating the existing “video support” mapping/resolution to a richer, section-based “video tutorials” contract fetched from the update service.

Changes:

Introduce a new video-tutorials module (schema, resolver, hooks, UI components) plus a full modal for browsing all tutorial sections/videos.
Replace the old video-support data model/tests/resolver with the new tutorials mapping and update the floating widget to use it.
Wire tutorials fetching into shared query options and add global app state to control opening/closing the tutorials modal; add a navigation entry for tutorials.

Reviewed changes

Copilot reviewed 37 out of 40 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
web/tests/video-tutorials.test.ts	New Vitest coverage for route-key/version parsing, resolver behavior, and Zod parsing contract.
web/tests/video-support.test.ts	Removed tests for the deprecated `video-support` module.
web/src/shared/video-tutorials/VideoTutorialsModal.tsx	New modal shell: opens/closes based on global store state and route changes.
web/src/shared/video-tutorials/VideoTutorialsModal.scss	Styling for the new two-panel tutorials modal layout.
web/src/shared/video-tutorials/VideoSupportWidget.tsx	Floating widget updated to resolve videos from the new tutorials mapping (still uses widget UI pattern).
web/src/shared/video-tutorials/version.ts	New semver-ish parsing and comparison utilities (with prerelease/build stripping).
web/src/shared/video-tutorials/types.ts	New tutorials types: videos include title/description/appRoute/docsUrl and sectioned mapping per version.
web/src/shared/video-tutorials/style.scss	Styles for the floating widget launcher/panel.
web/src/shared/video-tutorials/route-label.ts	New helper mapping canonical routes to translated navigation labels.
web/src/shared/video-tutorials/route-key.ts	New route-key canonicalization utility.
web/src/shared/video-tutorials/resolver.ts	New resolution logic for per-route videos and “newest eligible version” section lists.
web/src/shared/video-tutorials/resolved.tsx	New hooks to derive the current route key and resolve tutorials via React Query + app version.
web/src/shared/video-tutorials/README.md	New module documentation including JSON contract and resolution rules.
web/src/shared/video-tutorials/data.ts	New Zod schema + parser for the tutorials mapping and env-driven fetch path.
web/src/shared/video-tutorials/components/widget/VideoOverlay/VideoOverlay.tsx	Overlay updated/reintroduced under `video-tutorials` using shared `VideoPlayer`.
web/src/shared/video-tutorials/components/widget/VideoOverlay/style.scss	Overlay styling migrated/renamed for the tutorials module.
web/src/shared/video-tutorials/components/widget/VideoCard/VideoCard.tsx	Widget card updated to use tutorials types and renamed CSS classes.
web/src/shared/video-tutorials/components/widget/VideoCard/style.scss	Widget card styles renamed from support → tutorials.
web/src/shared/video-tutorials/components/widget/Thumbnail/Thumbnail.tsx	Thumbnail component import paths and CSS classes updated.
web/src/shared/video-tutorials/components/widget/Thumbnail/style.scss	Thumbnail styles renamed from support → tutorials.
web/src/shared/video-tutorials/components/widget/NavTutorialsButton/NavTutorialsButton.tsx	New nav button to open the tutorials modal.
web/src/shared/video-tutorials/components/VideoPlayer/VideoPlayer.tsx	New shared YouTube iframe player with skeleton + timeout-based error UI variants.
web/src/shared/video-tutorials/components/VideoPlayer/style.scss	Styles for shared player skeleton and error states.
web/src/shared/video-tutorials/components/modal/VideoList/VideoList.tsx	New searchable/collapsible section list for the modal’s left panel.
web/src/shared/video-tutorials/components/modal/VideoList/style.scss	Styles for the modal’s left panel (search + accordion + rows).
web/src/shared/video-tutorials/components/modal/ModalContent/ModalContent.tsx	Modal header + two-panel body wiring, including internal/external links.
web/src/shared/video-support/types.ts	Removed deprecated `video-support` types.
web/src/shared/video-support/resolver.ts	Removed deprecated `video-support` resolver.
web/src/shared/video-support/resolved.tsx	Removed deprecated `video-support` hooks.
web/src/shared/video-support/README.md	Removed deprecated `video-support` module documentation.
web/src/shared/video-support/data.ts	Removed deprecated `video-support` schema/parser and env path.
web/src/shared/video-support/components/VideoOverlay/VideoOverlay.tsx	Removed deprecated overlay implementation (replaced by shared player approach).
web/src/shared/video-support/components/VideoOverlay/style.scss	Removed deprecated overlay styles.
web/src/shared/query.ts	Replace `videoSupportQueryOptions` with `videoTutorialsQueryOptions` and new parser/path.
web/src/shared/hooks/useApp.tsx	Add `tutorialsModalOpen` to global store state.
web/src/shared/components/Navigation/style.scss	Adjust bottom area layout/styling to accommodate a tutorials nav section.
web/src/shared/components/Navigation/Navigation.tsx	Add tutorials query + `NavTutorialsButton`; remove prior bottom controls component.
web/src/routes/_authorized/_default.tsx	Mount the updated floating widget and the new tutorials modal globally in the authorized shell.
web/messages/en/components.json	Add/rename i18n strings for tutorials modal/nav and player error messages.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-01T18:28:05Z

web/src/shared/components/Navigation/Navigation.tsx

      <div className="bottom">
-        <NavControls />
+        {videoTutorialsData && (
+          <div className="nav-tutorials">
+            <NavTutorialsButton />
+          </div>


Navigation no longer renders the bottom controls (theme toggle + docs/help link) that used to be in NavControls; the .bottom section now only conditionally shows tutorials. This is a functional regression (users lose theme switching and the docs link). Reintroduce NavControls (or an equivalent component) in the bottom section alongside the tutorials button.

Copilot · 2026-04-01T18:28:06Z

web/src/shared/video-tutorials/components/modal/ModalContent/ModalContent.tsx

+              <Link
+                to={selectedVideo.appRoute}
+                className="tutorials-modal-link tutorials-modal-link--internal"
+                onClick={() => useApp.setState({ tutorialsModalOpen: false })}
+              >


The modal’s internal "Go to" link navigates to selectedVideo.appRoute directly. Because appRoute is documented/used as a TanStack route template (e.g. /vpn-overview/$locationId), clicking this can navigate to a URL with a literal $locationId param value and trigger loaders that parse params (e.g. parseInt('$locationId', 10)), causing runtime errors. Consider suppressing the link for templated routes (containing /$), or add a separate navigable route/params field so navigation always uses a concrete path.

Copilot · 2026-04-01T18:28:06Z

web/src/shared/video-tutorials/components/modal/VideoList/VideoList.tsx

+        {filtered.map((section, index) => {
+          const isOpen = isSearching || openSectionIndex === index;
+          return (
+            <div key={section.name} className="tutorials-modal-section">


filtered.map(...) uses key={section.name} for section rows. Section names are user/content-defined and may collide (or change with translation), which can cause React key collisions and incorrect state reuse. Use a stable unique key (e.g. ${index}-${section.name} or ideally an explicit section id from the data).

Suggested change

<div key={section.name} className="tutorials-modal-section">

<div key={`${index}-${section.name}`} className="tutorials-modal-section">

Copilot · 2026-04-01T18:28:06Z

web/src/shared/video-tutorials/VideoTutorialsModal.tsx

+  // Auto-select first video when modal opens or sections change.
+  useEffect(() => {
+    if (isOpen && sections.length > 0 && sections[0].videos.length > 0) {
+      setSelectedVideo(sections[0].videos[0]);


The auto-select effect only sets selectedVideo when sections/videos exist, but it never clears selectedVideo when the modal is open and sections becomes empty (e.g. due to version ceiling change, query error/reload). This can leave stale content displayed even though the list is empty. Consider adding an else branch to reset selectedVideo to null when !isOpen or when there are no videos.

Suggested change

setSelectedVideo(sections[0].videos[0]);

setSelectedVideo(sections[0].videos[0]);

} else {

// Clear selection when modal is closed or when there are no videos to show,

// to avoid displaying stale content.

setSelectedVideo(null);

Copilot · 2026-04-01T18:28:07Z

web/src/shared/video-tutorials/README.md

+navigation when at least one video is available for the current route. Clicking
+it also opens the modal.
+
+---


README says the navigation launcher (NavTutorialsButton) is only shown when at least one video is available for the current route, but the current Navigation implementation renders it whenever videoTutorialsData is present (regardless of route match). Either update the logic to use route-resolved videos, or adjust the README to reflect the actual behavior so UI expectations stay accurate.

Suggested change

navigation when at least one video is available for the current route. Clicking

it also opens the modal.

---

navigation whenever video tutorials data has been loaded (i.e. when

`videoTutorialsData` is available), regardless of whether the current route has

any associated videos. Clicking it also opens the modal.

wojcik91 added 23 commits March 31, 2026 16:42

add tutorials button in the navbar

4a43f8c

remove duplicate theme buttons

4248e95

change naming convention

73a6b77

update json schema

ac93f14

add error log if parsing JSON fails

187a6fe

Merge branch 'dev' into video_tutorials_menu

deaa775

update source file validation

8fe2dc7

update video to page mapping

c64a773

update tests

8832b39

setup tutorials modal infrastructure

1b44229

show basic tutorials modal

522c1cf

disable autoplay

25a0313

add video icons

50bfe32

sections styling and fold

b97f3bd

update video list styling & behavior

45978ac

fix video section styling

755a455

adjust video corners

357b813

fix modal layout

57d27f1

update readme

71b8b7b

adjust modal size to handle list scroll

86a6cbc

cleanup

35e32c6

reorganize components

3b60a09

restore widget naming

9a413ee

wojcik91 self-assigned this Apr 1, 2026

wojcik91 requested a review from Copilot April 1, 2026 18:23

Copilot started reviewing on behalf of wojcik91 April 1, 2026 18:23 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

video tutorials modal#2593

video tutorials modal#2593
wojcik91 wants to merge 23 commits intodevfrom
video_tutorials_menu

wojcik91 commented Apr 1, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div key={section.name} className="tutorials-modal-section">
	<div key={`${index}-${section.name}`} className="tutorials-modal-section">

-      setSelectedVideo(sections[0].videos[0]);
+      setSelectedVideo(sections[0].videos[0]);
+    } else {
+      // Clear selection when modal is closed or when there are no videos to show,
+      // to avoid displaying stale content.
+      setSelectedVideo(null);

-navigation when at least one video is available for the current route. Clicking
-it also opens the modal.
----
+navigation whenever video tutorials data has been loaded (i.e. when
+`videoTutorialsData` is available), regardless of whether the current route has
+any associated videos. Clicking it also opens the modal.

Uh oh!

Conversation

wojcik91 commented Apr 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants