✨(frontend) add documentation link in help menu

We want to add a link to the documentation in
the help menu, to make it easier for users to find it.

src/backend/impress/configuration/theme/default.json

@@ -162,5 +162,8 @@
   "onboarding": {
     "enabled": true,
     "learn_more_url": ""
+  },
+  "help": {
+    "documentation_url": ""
   }
 }

src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts

@@ -8,6 +8,68 @@ import {
 } from './utils-common';
 
 test.describe('Help feature', () => {
+  test.describe('Documentation button', () => {
+    if (process.env.IS_INSTANCE !== 'true') {
+      test('is not displayed if documentation_url is not set', async ({
+        page,
+      }) => {
+        await overrideConfig(page, {
+          theme_customization: {
+            help: {
+              documentation_url: '',
+            },
+            onboarding: {
+              enabled: true,
+            },
+          },
+        });
+
+        await page.goto('/');
+
+        await page.getByRole('button', { name: 'Open help menu' }).click();
+        await expect(
+          page.getByRole('menuitem', { name: 'Documentation' }),
+        ).toBeHidden();
+      });
+    }
+
+    test('is displayed if documentation_url is set', async ({ page }) => {
+      let documentationUrl: string;
+
+      if (process.env.IS_INSTANCE !== 'true') {
+        documentationUrl = `${process.env.BASE_URL}/docs/`;
+        await overrideConfig(page, {
+          theme_customization: {
+            help: {
+              documentation_url: documentationUrl,
+            },
+          },
+        });
+      } else {
+        const currentConfig = await getCurrentConfig(page);
+        test.skip(
+          !currentConfig.theme_customization?.help?.documentation_url,
+          'Documentation URL is not set',
+        );
+        documentationUrl =
+          currentConfig.theme_customization.help.documentation_url;
+      }
+
+      await page.goto('/');
+
+      await page.getByRole('button', { name: 'Open help menu' }).click();
+      const docMenuItem = page.getByRole('menuitem', { name: 'Documentation' });
+      await expect(docMenuItem).toBeVisible();
+
+      const [newPage] = await Promise.all([
+        page.context().waitForEvent('page'),
+        docMenuItem.click(),
+      ]);
+
+      await expect(newPage).toHaveURL(documentationUrl);
+    });
+  });
+
   test.describe('Support button', () => {
     if (process.env.IS_INSTANCE !== 'true') {
       test('is not displayed if CRISP_WEBSITE_ID is not set', async ({

src/frontend/apps/impress/src/assets/icons/ui-kit/doc.svg

@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.33542 7.4814C8.15766 7.4814 8.01164 7.42109 7.89737 7.30046C7.78309 7.17984 7.72595 7.037 7.72595 6.87193C7.72595 6.70052 7.78309 6.55768 7.89737 6.4434C8.01164 6.32913 8.15766 6.27199 8.33542 6.27199H15.3062C15.4776 6.27199 15.6205 6.32913 15.7347 6.4434C15.849 6.55768 15.9061 6.70052 15.9061 6.87193C15.9061 7.037 15.849 7.17984 15.7347 7.30046C15.6205 7.42109 15.4776 7.4814 15.3062 7.4814H8.33542ZM8.33542 10.7287C8.15766 10.7287 8.01164 10.6716 7.89737 10.5573C7.78309 10.4367 7.72595 10.2907 7.72595 10.1192C7.72595 9.95418 7.78309 9.81451 7.89737 9.70024C8.01164 9.58596 8.15766 9.52883 8.33542 9.52883H15.3062C15.4776 9.52883 15.6205 9.58596 15.7347 9.70024C15.849 9.81451 15.9061 9.95418 15.9061 10.1192C15.9061 10.2907 15.849 10.4367 15.7347 10.5573C15.6205 10.6716 15.4776 10.7287 15.3062 10.7287H8.33542ZM8.33542 13.9855C8.15766 13.9855 8.01164 13.9284 7.89737 13.8141C7.78309 13.6999 7.72595 13.5602 7.72595 13.3951C7.72595 13.2237 7.78309 13.0809 7.89737 12.9666C8.01164 12.846 8.15766 12.7857 8.33542 12.7857H11.7065C11.8843 12.7857 12.0303 12.846 12.1446 12.9666C12.2589 13.0809 12.316 13.2237 12.316 13.3951C12.316 13.5602 12.2589 13.6999 12.1446 13.8141C12.0303 13.9284 11.8843 13.9855 11.7065 13.9855H8.33542ZM3.65015 19.1851V4.81498C3.65015 3.79286 3.91044 3.01833 4.43103 2.49139C4.95161 1.95811 5.72297 1.69147 6.74509 1.69147H16.887C17.9091 1.69147 18.6805 1.95811 19.2011 2.49139C19.7217 3.01833 19.9819 3.79286 19.9819 4.81498V19.1851C19.9819 20.2135 19.7217 20.9912 19.2011 21.5182C18.6805 22.0451 17.9091 22.3086 16.887 22.3086H6.74509C5.72297 22.3086 4.95161 22.0451 4.43103 21.5182C3.91044 20.9912 3.65015 20.2135 3.65015 19.1851ZM5.52616 19.0708C5.52616 19.5088 5.64044 19.8453 5.86899 20.0802C6.09754 20.3151 6.44353 20.4326 6.90698 20.4326H16.7346C17.1981 20.4326 17.5441 20.3151 17.7726 20.0802C18.0012 19.8453 18.1155 19.5088 18.1155 19.0708V4.93878C18.1155 4.49438 18.0012 4.15473 17.7726 3.91983C17.5441 3.67858 17.1981 3.55796 16.7346 3.55796H6.90698C6.44353 3.55796 6.09754 3.67858 5.86899 3.91983C5.64044 4.15473 5.52616 4.49438 5.52616 4.93878V19.0708Z" fill="#222631"/>
+  <path
+    d="M8.33542 7.4814C8.15766 7.4814 8.01164 7.42109 7.89737 7.30046C7.78309 7.17984 7.72595 7.037 7.72595 6.87193C7.72595 6.70052 7.78309 6.55768 7.89737 6.4434C8.01164 6.32913 8.15766 6.27199 8.33542 6.27199H15.3062C15.4776 6.27199 15.6205 6.32913 15.7347 6.4434C15.849 6.55768 15.9061 6.70052 15.9061 6.87193C15.9061 7.037 15.849 7.17984 15.7347 7.30046C15.6205 7.42109 15.4776 7.4814 15.3062 7.4814H8.33542ZM8.33542 10.7287C8.15766 10.7287 8.01164 10.6716 7.89737 10.5573C7.78309 10.4367 7.72595 10.2907 7.72595 10.1192C7.72595 9.95418 7.78309 9.81451 7.89737 9.70024C8.01164 9.58596 8.15766 9.52883 8.33542 9.52883H15.3062C15.4776 9.52883 15.6205 9.58596 15.7347 9.70024C15.849 9.81451 15.9061 9.95418 15.9061 10.1192C15.9061 10.2907 15.849 10.4367 15.7347 10.5573C15.6205 10.6716 15.4776 10.7287 15.3062 10.7287H8.33542ZM8.33542 13.9855C8.15766 13.9855 8.01164 13.9284 7.89737 13.8141C7.78309 13.6999 7.72595 13.5602 7.72595 13.3951C7.72595 13.2237 7.78309 13.0809 7.89737 12.9666C8.01164 12.846 8.15766 12.7857 8.33542 12.7857H11.7065C11.8843 12.7857 12.0303 12.846 12.1446 12.9666C12.2589 13.0809 12.316 13.2237 12.316 13.3951C12.316 13.5602 12.2589 13.6999 12.1446 13.8141C12.0303 13.9284 11.8843 13.9855 11.7065 13.9855H8.33542ZM3.65015 19.1851V4.81498C3.65015 3.79286 3.91044 3.01833 4.43103 2.49139C4.95161 1.95811 5.72297 1.69147 6.74509 1.69147H16.887C17.9091 1.69147 18.6805 1.95811 19.2011 2.49139C19.7217 3.01833 19.9819 3.79286 19.9819 4.81498V19.1851C19.9819 20.2135 19.7217 20.9912 19.2011 21.5182C18.6805 22.0451 17.9091 22.3086 16.887 22.3086H6.74509C5.72297 22.3086 4.95161 22.0451 4.43103 21.5182C3.91044 20.9912 3.65015 20.2135 3.65015 19.1851ZM5.52616 19.0708C5.52616 19.5088 5.64044 19.8453 5.86899 20.0802C6.09754 20.3151 6.44353 20.4326 6.90698 20.4326H16.7346C17.1981 20.4326 17.5441 20.3151 17.7726 20.0802C18.0012 19.8453 18.1155 19.5088 18.1155 19.0708V4.93878C18.1155 4.49438 18.0012 4.15473 17.7726 3.91983C17.5441 3.67858 17.1981 3.55796 16.7346 3.55796H6.90698C6.44353 3.55796 6.09754 3.67858 5.86899 3.91983C5.64044 4.15473 5.52616 4.49438 5.52616 4.93878V19.0708Z"
+    fill="currentColor"
+  />
 </svg>

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -16,17 +16,20 @@ interface ThemeCustomization {
     light: LinkHTMLAttributes<HTMLLinkElement>;
     dark: LinkHTMLAttributes<HTMLLinkElement>;
   };
-  onboarding?: {
-    enabled: true;
-    learn_more_url?: string;
-  };
   footer?: FooterType;
+  header?: HeaderType;
+  help: {
+    documentation_url?: string;
+  };
   home: {
     'with-proconnect'?: boolean;
     'icon-banner'?: Imagetype;
   };
+  onboarding?: {
+    enabled: true;
+    learn_more_url?: string;
+  };
   translations?: Resource;
-  header?: HeaderType;
   waffle?: WaffleType;
 }
 

src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx

@@ -3,15 +3,16 @@ import {
   ButtonProps,
   useModal,
 } from '@gouvfr-lasuite/cunningham-react';
-import { DropdownMenu } from '@gouvfr-lasuite/ui-kit';
+import { DropdownMenu, DropdownMenuOption } from '@gouvfr-lasuite/ui-kit';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import BubbleTextIcon from '@/assets/icons/ui-kit/bubble-text.svg';
+import DocIcon from '@/assets/icons/ui-kit/doc.svg';
 import HelpIcon from '@/assets/icons/ui-kit/question-mark.svg';
 import WandAndStarsIcon from '@/assets/icons/ui-kit/wand-and-stars.svg';
-import { Box, DropdownMenuOption } from '@/components';
+import { Box } from '@/components';
 import { useConfig } from '@/core';
 import { openCrispChat } from '@/services';
 
@@ -27,6 +28,7 @@ export const HelpMenu = ({
   const modalOnbording = useModal();
   const { data: config } = useConfig();
   const onboardingEnabled = config?.theme_customization?.onboarding?.enabled;
+  const documentationUrl = config?.theme_customization?.help?.documentation_url;
   const crispEnabled = !!config?.CRISP_WEBSITE_ID;
 
   const toggleMenu = useCallback(() => {
@@ -39,16 +41,26 @@ export const HelpMenu = ({
         label: t('Get Support'),
         icon: <BubbleTextIcon aria-hidden="true" width="24" height="24" />,
         callback: openCrispChat,
-        show: crispEnabled,
+        isHidden: !crispEnabled,
+      },
+      {
+        label: t('Documentation'),
+        icon: <DocIcon aria-hidden="true" width="24" height="24" />,
+        callback: () => {
+          if (documentationUrl) {
+            window.open(documentationUrl, '_blank', 'noopener,noreferrer');
+          }
+        },
+        isHidden: !documentationUrl,
       },
       {
         label: t('Onboarding'),
         icon: <WandAndStarsIcon aria-hidden="true" width="24" height="24" />,
         callback: modalOnbording.open,
-        show: onboardingEnabled,
+        isHidden: !onboardingEnabled,
       },
     ],
-    [modalOnbording.open, t, onboardingEnabled, crispEnabled],
+    [t, crispEnabled, documentationUrl, modalOnbording.open, onboardingEnabled],
   );
 
   return (

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -42,7 +42,8 @@ export const LeftPanelDesktop = () => {
    */
   const showHelpMenu =
     config?.theme_customization?.onboarding?.enabled ||
-    !!config?.CRISP_WEBSITE_ID;
+    !!config?.CRISP_WEBSITE_ID ||
+    !!config?.theme_customization?.help?.documentation_url;
 
   return (
     <Box