show contextual help on settings pages

web/messages/en/components.json

@@ -186,5 +186,8 @@
   "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": ""
+  "cmp_helper_search": "",
+  "cmp_contextual_help_faq": "FAQ",
+  "cmp_contextual_help_related_docs": "Related documentation",
+  "cmp_contextual_help_best_practices": "Best practices"
 }

web/messages/en/migration_wizard.json

@@ -98,5 +98,13 @@
   "migration_wizard_ca_info_label_common_name": "Common Name",
   "migration_wizard_ca_info_label_validity": "Validity",
   "migration_wizard_ca_validity_unknown": "—",
-  "migration_wizard_ca_validity_less_than_year": "Less than a year"
+  "migration_wizard_ca_validity_less_than_year": "Less than a year",
+  "migration_wizard_locations_title": "VPN Locations Migration",
+  "migration_wizard_locations_subtitle": "We will verify the connection, ensure the port is open, and confirm the gateway is running the correct version. Any errors will be displayed, allowing you to fix issues and retry during the process.",
+  "migration_wizard_locations_complete_snackbar": "Migration completed",
+  "migration_wizard_locations_firewall_info": "By clicking the button below, you confirm that the required firewall changes have been made and that the Core can connect to this gateway on TCP port 50066. In case you have any question please read our documentation following the link in the bottom section.",
+  "migration_wizard_locations_progress": "Migrate {current} of {total} location(s):",
+  "migration_wizard_locations_unknown": "Unknown",
+  "migration_wizard_locations_start_button": "Start migration",
+  "migration_wizard_locations_skip_button": "Skip location"
 }

web/src/pages/EnrollmentPage/tabs/GeneralTab.tsx

@@ -4,6 +4,10 @@ import z from 'zod';
 import { m } from '../../../paraglide/messages';
 import api from '../../../shared/api/api';
 import type { Settings } from '../../../shared/api/types';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { Controls } from '../../../shared/components/Controls/Controls';
 import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard';
 import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader';
@@ -47,7 +51,9 @@ export const GeneralTab = () => {
   const { data: settings } = useQuery(getSettingsQueryOptions);
 
   return (
-    <SettingsLayout>
+    <SettingsLayout
+      suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.EnrollmentGeneral} />}
+    >
       <SettingsHeader
         icon="key"
         title={m.settings_enrollment_general_title()}

web/src/pages/LocationsMigrationWizardPage/LocationsMigrationWizardPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from '@tanstack/react-router';
 import { cloneDeep } from 'radashi';
 import { useCallback } from 'react';
 import Skeleton from 'react-loading-skeleton';
+import { m } from '../../paraglide/messages';
 import api from '../../shared/api/api';
 import { Controls } from '../../shared/components/Controls/Controls';
 import { WizardWelcomePage } from '../../shared/components/wizard/WizardWelcomePage/WizardWelcomePage';
@@ -19,17 +20,15 @@ import { useGatewayWizardStore } from '../GatewaySetupPage/useGatewayWizardStore
 import { useMigrationWizardStore } from '../MigrationWizardPage/store/useMigrationWizardStore';
 import { MigrationWizardStep } from '../MigrationWizardPage/types';
 
-const subtitle = `We will verify the connection, ensure the port is open, and confirm the gateway is running the correct version. Any errors will be displayed, allowing you to fix issues and retry during the process.`;
-
 export const LocationsMigrationWizardPage = () => {
   return (
     <WizardWelcomePage
       containerProps={{
         id: 'locations-migration-page',
       }}
-      title={`VPN Locations Migration`}
+      title={m.migration_wizard_locations_title()}
       displayDocs={false}
-      subtitle={subtitle}
+      subtitle={m.migration_wizard_locations_subtitle()}
       content={<Content />}
     />
   );
@@ -52,7 +51,7 @@ const Content = () => {
   const { mutate: finish, isPending: finishPending } = useMutation({
     mutationFn: migrationWizardFinishPromise,
     onSuccess: () => {
-      Snackbar.default(`Migration completed`);
+      Snackbar.default(m.migration_wizard_locations_complete_snackbar());
       navigate({ to: '/vpn-overview', replace: true });
       setTimeout(() => {
         useMigrationWizardStore.getState().resetState();
@@ -106,31 +105,35 @@ const Content = () => {
       <Divider />
       <SizedBox height={ThemeSpacing.Lg} />
       <AppText font={TextStyle.TBodySm400} color={ThemeVariable.FgFaded}>
-        {`By clicking the button below, you confirm that the required firewall changes have been made and that the Core can connect to this gateway on TCP port 5055. In case you have any question please read our documentation following the link in the bottom section.`}
+        {m.migration_wizard_locations_firewall_info()}
       </AppText>
       <SizedBox height={ThemeSpacing.Lg} />
       <Divider />
       <SizedBox height={ThemeSpacing.Lg} />
       <AppText font={TextStyle.TBodySm400} color={ThemeVariable.FgFaded}>
-        {`Migrate ${currentLocationIndex + 1} of ${locationsState.locations.length} location(s):`}
+        {m.migration_wizard_locations_progress({
+          current: currentLocationIndex + 1,
+          total: locationsState.locations.length,
+        })}
       </AppText>
       {isLoading && <Skeleton width={160} height={28} />}
       {!isLoading && isPresent(locationsDisplay) && (
         <AppText font={TextStyle.TTitleH4} color={ThemeVariable.FgFaded}>
-          {locationsDisplay[locationsState.current_location] ?? `Unknown`}
+          {locationsDisplay[locationsState.current_location] ??
+            m.migration_wizard_locations_unknown()}
         </AppText>
       )}
       <SizedBox height={ThemeSpacing.Xl2} />
       <Divider />
       <SizedBox height={ThemeSpacing.Xl2} />
       <Controls>
         <Button
-          text={`Start migration`}
+          text={m.migration_wizard_locations_start_button()}
           disabled={finishPending || isLoading}
           onClick={handleStart}
         />
         <Button
-          text={`Skip location`}
+          text={m.migration_wizard_locations_skip_button()}
           variant={'outlined'}
           loading={finishPending}
           disabled={isLoading}

web/src/pages/SupportPage/SupportPage.tsx

@@ -1,6 +1,10 @@
 import './styles.scss';
 import { m } from '../../paraglide/messages';
 import api from '../../shared/api/api';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../shared/components/ContextualHelp';
 import { Page } from '../../shared/components/Page/Page';
 import { SettingsCard } from '../../shared/components/SettingsCard/SettingsCard';
 import { SettingsHeader } from '../../shared/components/SettingsHeader/SettingsHeader';
@@ -21,7 +25,10 @@ import { downloadFile } from '../../shared/utils/download';
 export const SupportPage = () => {
   return (
     <Page title={m.support_page_title()}>
-      <SettingsLayout id="support-page-content">
+      <SettingsLayout
+        id="support-page-content"
+        suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.Support} />}
+      >
         <SettingsHeader
           icon="support"
           title={m.support_page_title()}

web/src/pages/settings/SettingsActivityLogStreamingPage/SettingsActivityStreamingTab.tsx

@@ -4,6 +4,10 @@ import { useMemo } from 'react';
 import { m } from '../../../paraglide/messages';
 import type { LicenseInfo } from '../../../shared/api/types';
 import { businessBadgeProps } from '../../../shared/components/badges/BusinessBadge';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader';
 import { SettingsLayout } from '../../../shared/components/SettingsLayout/SettingsLayout';
 import { Button } from '../../../shared/defguard-ui/components/Button/Button';
@@ -51,7 +55,10 @@ export const SettingsActivityLogStreamingPage = () => {
   );
 
   return (
-    <SettingsLayout id="settings-activity-log-streaming-tab">
+    <SettingsLayout
+      id="settings-activity-log-streaming-tab"
+      suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsActivity} />}
+    >
       <SettingsHeader
         badgeProps={
           !isPresent(licenseInfo) && licenseInfoFetched ? businessBadgeProps : undefined

web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx

@@ -5,6 +5,10 @@ import { useCallback } from 'react';
 import { m } from '../../../paraglide/messages';
 import api from '../../../shared/api/api';
 import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { DescriptionBlock } from '../../../shared/components/DescriptionBlock/DescriptionBlock';
 import { Page } from '../../../shared/components/Page/Page';
 import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard';
@@ -40,7 +44,9 @@ export const SettingsCaPage = () => {
   return (
     <Page title={m.settings_page_title()}>
       <Breadcrumbs links={breadcrumbs} />
-      <SettingsLayout>
+      <SettingsLayout
+        suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsCa} />}
+      >
         <SettingsHeader
           icon="aliases"
           title={m.settings_certs_ca_title()}

web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx

@@ -5,6 +5,10 @@ import { useCallback } from 'react';
 import { m } from '../../../paraglide/messages';
 import api from '../../../shared/api/api';
 import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { Controls } from '../../../shared/components/Controls/Controls';
 import { DescriptionBlock } from '../../../shared/components/DescriptionBlock/DescriptionBlock';
 import { Page } from '../../../shared/components/Page/Page';
@@ -45,7 +49,9 @@ export const SettingsCertificatesPage = () => {
   return (
     <Page title={m.settings_page_title()}>
       <Breadcrumbs links={breadcrumbs} />
-      <SettingsLayout>
+      <SettingsLayout
+        suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsCerts} />}
+      >
         <SettingsHeader
           icon="aliases"
           title={m.settings_certs_certs_title()}

web/src/pages/settings/SettingsClientPage/SettingsClientPage.tsx

@@ -2,6 +2,10 @@ import { useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { ClientTrafficPolicy } from '../../../shared/api/types';
 import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { DescriptionBlock } from '../../../shared/components/DescriptionBlock/DescriptionBlock';
 import { Page } from '../../../shared/components/Page/Page';
 import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard';
@@ -45,7 +49,9 @@ export const SettingsClientPage = () => {
   return (
     <Page title={m.settings_page_title()}>
       <Breadcrumbs links={breadcrumbs} />
-      <SettingsLayout>
+      <SettingsLayout
+        suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsClient} />}
+      >
         <SettingsHeader
           icon="user"
           title={m.settings_client_title()}

web/src/pages/settings/SettingsExternalOpenIdPage/SettingsExternalOpenIdPage.tsx

@@ -1,4 +1,8 @@
 import { Link, useNavigate } from '@tanstack/react-router';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader';
 import { SettingsLayout } from '../../../shared/components/SettingsLayout/SettingsLayout';
 import { ExternalProviderCard } from './components/ExternalProviderCard/ExternalProviderCard';
@@ -85,7 +89,10 @@ export const SettingsExternalOpenIdPage = () => {
   return (
     <Page title={m.settings_page_title()}>
       <Breadcrumbs links={breadcrumbsLinks} />
-      <SettingsLayout id="settings-openid-page">
+      <SettingsLayout
+        id="settings-openid-page"
+        suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsOpenId} />}
+      >
         <SettingsHeader
           icon="openid"
           title={m.settings_openid_providers_title()}

web/src/pages/settings/SettingsGatewayNotificationsPage/SettingsGatewayNotificationsPage.tsx

@@ -6,6 +6,10 @@ import { m } from '../../../paraglide/messages';
 import api from '../../../shared/api/api';
 import type { SettingsGatewayNotifications } from '../../../shared/api/types';
 import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../shared/components/ContextualHelp';
 import { Controls } from '../../../shared/components/Controls/Controls';
 import { Page } from '../../../shared/components/Page/Page';
 import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard';
@@ -38,7 +42,13 @@ export const SettingsGatewayNotificationsPage = () => {
   return (
     <Page title={m.settings_page_title()}>
       <Breadcrumbs links={breadcrumbsLinks} />
-      <SettingsLayout>
+      <SettingsLayout
+        suggestion={
+          <ContextualHelpSidebar
+            pageKey={ContextualHelpKey.SettingsGatewayNotifications}
+          />
+        }
+      >
         <SettingsHeader
           icon="notification"
           title={m.settings_gateway_notifications_title()}

web/src/pages/settings/SettingsIndexPage/tabs/SettingsCertificatesTab/SettingsCertificatesTab.tsx

@@ -1,5 +1,9 @@
 import { Link } from '@tanstack/react-router';
 import { m } from '../../../../../paraglide/messages';
+import {
+  ContextualHelpKey,
+  ContextualHelpSidebar,
+} from '../../../../../shared/components/ContextualHelp';
 import { SettingsLayout } from '../../../../../shared/components/SettingsLayout/SettingsLayout';
 import { SectionSelect } from '../../../../../shared/defguard-ui/components/SectionSelect/SectionSelect';
 import { SizedBox } from '../../../../../shared/defguard-ui/components/SizedBox/SizedBox';
@@ -10,7 +14,10 @@ export const SettingsCertificatesTab = () => {
   const certificateWarningState = useCertificatesWarningState();
 
   return (
-    <SettingsLayout id="certificates-settings">
+    <SettingsLayout
+      id="certificates-settings"
+      suggestion={<ContextualHelpSidebar pageKey={ContextualHelpKey.SettingsCerts} />}
+    >
       <Link to="/settings/ca">
         <SectionSelect
           image="certificate-authority"