video tutorials modal (#2593)

* add tutorials button in the navbar

* remove duplicate theme buttons

* change naming convention

* update json schema

* add error log if parsing JSON fails

* update source file validation

* update video to page mapping

* update tests

* setup tutorials modal infrastructure

* show basic tutorials modal

* disable autoplay

* add video icons

* sections styling and fold

* update video list styling & behavior

* fix video section styling

* adjust video corners

* fix modal layout

* update readme

* adjust modal size to handle list scroll

* cleanup

* reorganize components

* restore widget naming

* move modal state

* use a better key

* improve parametrized route handling

* clear selection on modal close

* update ui submodule

* update genereal description in readme

* replace custom CSS with existing variables

* simplify version resolution

* minimize CSS changes

* shorten css class names

* adjust naming

* remove unnecessary comments

* formatting

Author: wojcik91

web/messages/en/components.json

@@ -176,9 +176,14 @@
   "acl_rule_error_permissions_required": "Configure at least one allowed user, group, or network device.",
   "acl_rule_error_manual_destination_required": "Manual destination settings are enabled. Provide a value or enable Any.",
   "cmp_video_support_launcher": "Video support",
-  "cmp_video_support_list_label": "Video tutorials",
-  "cmp_video_support_overlay_error": "Video unavailable",
-  "cmp_video_support_overlay_watch_on_youtube": "Watch on YouTube:",
+  "cmp_video_support_list_label": "Video support",
+  "cmp_video_tutorials_overlay_error": "Video unavailable",
+  "cmp_video_tutorials_overlay_watch_on_youtube": "Watch on YouTube:",
+  "cmp_nav_item_tutorials": "Tutorials",
+  "cmp_video_tutorials_modal_title": "Video tutorials",
+  "cmp_video_tutorials_modal_search_placeholder": "Search",
+  "cmp_video_tutorials_modal_go_to": "Go to {page}",
+  "cmp_video_tutorials_modal_learn_more": "Learn more in Documentation",
   "cmp_helper_overview_period_select": "",
   "cmp_helper_search": ""
 }

web/src/routes/_authorized/_default.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router';
 import { Navigation } from '../../shared/components/Navigation/Navigation';
-import { VideoSupportWidget } from '../../shared/video-support/VideoSupportWidget';
+import { VideoSupportWidget } from '../../shared/video-tutorials/VideoSupportWidget';
+import { VideoTutorialsModal } from '../../shared/video-tutorials/VideoTutorialsModal';
 
 export const Route = createFileRoute('/_authorized/_default')({
   component: RouteComponent,
@@ -12,6 +13,7 @@ function RouteComponent() {
       <Outlet />
       <Navigation />
       <VideoSupportWidget />
+      <VideoTutorialsModal />
     </>
   );
 }

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

@@ -10,22 +10,21 @@ import { NavLogo } from './assets/NavLogo';
 import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import { Link, type LinkProps } from '@tanstack/react-router';
-import clsx from 'clsx';
 import { type LicenseInfo, LicenseTier, type LicenseTierValue } from '../../api/types';
-import { externalLink } from '../../constants';
 import { Fold } from '../../defguard-ui/components/Fold/Fold';
 import { TooltipContent } from '../../defguard-ui/providers/tooltip/TooltipContent';
 import { TooltipProvider } from '../../defguard-ui/providers/tooltip/TooltipContext';
 import { TooltipTrigger } from '../../defguard-ui/providers/tooltip/TooltipTrigger';
 import { isPresent } from '../../defguard-ui/utils/isPresent';
-import { useTheme } from '../../hooks/theme/useTheme';
 import {
   getAliasesCountQueryOptions,
   getDestinationsCountQueryOptions,
   getLicenseInfoQueryOptions,
   getRulesCountQueryOptions,
+  videoTutorialsQueryOptions,
 } from '../../query';
 import { canUseBusinessFeature } from '../../utils/license';
+import { NavTutorialsButton } from '../../video-tutorials/components/widget/NavTutorialsButton/NavTutorialsButton';
 
 interface NavGroupProps {
   id: string;
@@ -196,6 +195,8 @@ export const Navigation = () => {
     enabled: isAdmin,
   });
 
+  const { data: videoTutorialsData } = useQuery(videoTutorialsQueryOptions);
+
   const navigationGroups = useMemo(() => {
     const pendingCounts = {
       rules: rulesCount?.pending,
@@ -234,7 +235,11 @@ export const Navigation = () => {
         ))}
       </div>
       <div className="bottom">
-        <NavControls />
+        {videoTutorialsData && (
+          <div className="nav-group">
+            <NavTutorialsButton />
+          </div>
+        )}
       </div>
     </div>
   );
@@ -314,35 +319,3 @@ const NavItem = ({
     </Link>
   );
 };
-
-const NavControls = () => {
-  const { changeTheme, theme } = useTheme();
-
-  return (
-    <div className="nav-controls">
-      <IconButton
-        className={clsx({
-          active: theme === 'light',
-        })}
-        icon="light-theme"
-        onClick={() => {
-          changeTheme('light');
-        }}
-      />
-      <IconButton
-        className={clsx({
-          active: theme === 'dark',
-        })}
-        icon="dark-theme"
-        onClick={() => {
-          changeTheme('dark');
-        }}
-      />
-      <div className="right">
-        <a rel="noopener noreferrer" target="_blank" href={externalLink.defguard.docs}>
-          <IconButton icon="help" />
-        </a>
-      </div>
-    </div>
-  );
-};

web/src/shared/components/Navigation/style.scss

@@ -45,7 +45,7 @@
     width: 100%;
     margin-top: auto;
     box-sizing: border-box;
-    padding: var(--spacing-md);
+    padding: var(--spacing-sm) var(--spacing-lg);
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
@@ -58,6 +58,7 @@
 
 .navigation .nav-group {
   user-select: none;
+  width: 100%;
 
   & > .track {
     display: flex;
@@ -103,6 +104,8 @@
   width: 100%;
   user-select: none;
   border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
 
   @include animate(color, background-color);
 
@@ -135,17 +138,3 @@
     row-gap: var(--spacing-xxs);
   }
 }
-
-.navigation .nav-controls {
-  display: flex;
-  flex-flow: row nowrap;
-  column-gap: var(--spacing-md);
-  flex-basis: 100%;
-
-  .right {
-    display: flex;
-    flex-flow: row nowrap;
-    column-gap: var(--spacing-md);
-    margin-left: auto;
-  }
-}

web/src/shared/defguard-ui

@@ -3,7 +3,7 @@ import api from './api/api';
 import { AclDeploymentState, type UserProfile } from './api/types';
 import { updateServiceApi, updateServiceClient } from './api/update-service';
 import { resourceDisplayMap } from './utils/resourceById';
-import { parseVideoSupport, videoSupportPath } from './video-support/data';
+import { parseVideoTutorials, videoTutorialsPath } from './video-tutorials/data';
 
 export const getExternalProviderQueryOptions = queryOptions({
   queryFn: api.openIdProvider.getOpenIdProvider,
@@ -117,10 +117,20 @@ export const clientArtifactsQueryOptions = queryOptions({
   refetchOnReconnect: true,
 });
 
-export const videoSupportQueryOptions = queryOptions({
-  queryKey: ['update-service', 'video-support'],
-  queryFn: () => updateServiceClient.get<unknown>(videoSupportPath),
-  select: (resp) => parseVideoSupport(resp.data),
+export const videoTutorialsQueryOptions = queryOptions({
+  queryKey: ['update-service', 'video-tutorials'],
+  queryFn: () => updateServiceClient.get<unknown>(videoTutorialsPath),
+  select: (resp) => {
+    try {
+      return parseVideoTutorials(resp.data);
+    } catch (err) {
+      console.error(
+        '[video-tutorials] Fetched successfully but failed to parse response:',
+        err,
+      );
+      throw err;
+    }
+  },
   // Mappings are version-tied and won't meaningfully change within a session.
   staleTime: Infinity,
   // Silent failure: if the fetch or parse fails, the widget simply won't appear.