🐛(frontend) close panel when unmount

When the panel is unmounted, the summary and
version panel should be closed.

Author: AntoLC

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

@@ -45,6 +45,13 @@ test.describe('Doc Version', () => {
     await expect(page.getByText('Hello World')).toBeHidden();
     await expect(page.getByText('It will create a version')).toBeVisible();
 
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
     await expect(panel.getByText('Current version')).toBeVisible();
     expect(await panel.locator('li').count()).toBe(2);
 

src/frontend/apps/impress/src/features/docs/doc-summary/components/Summary.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, BoxButton, Text } from '@/components';
 
 import { useDocStore } from '../../doc-editor';
 import { Doc } from '../../doc-management';
+import { useDocSummaryStore } from '../stores';
 
 interface SummaryProps {
   doc: Doc;
@@ -14,13 +15,20 @@ export const Summary = ({ doc }: SummaryProps) => {
   const { docsStore } = useDocStore();
   const { t } = useTranslation();
 
-  const editor = docsStore?.[doc.id].editor;
+  const editor = docsStore?.[doc.id]?.editor;
   const headingFiltering = useCallback(
     () => editor?.document.filter((block) => block.type === 'heading'),
     [editor?.document],
   );
 
   const [headings, setHeadings] = useState(headingFiltering());
+  const { setIsPanelSummaryOpen } = useDocSummaryStore();
+
+  useEffect(() => {
+    return () => {
+      setIsPanelSummaryOpen(false);
+    };
+  }, [setIsPanelSummaryOpen]);
 
   if (!editor) {
     return null;
@@ -64,7 +72,7 @@ export const Summary = ({ doc }: SummaryProps) => {
       <BoxButton
         onClick={() => {
           editor.focus();
-          document.querySelector(`[data-id="initialBlockId"]`)?.scrollIntoView({
+          document.querySelector(`.bn-editor`)?.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
           });

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -1,6 +1,6 @@
 import { Loader } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
@@ -9,6 +9,7 @@ import { Doc } from '@/features/docs/doc-management';
 import { useDate } from '@/hook';
 
 import { useDocVersionsInfiniteQuery } from '../api/useDocVersions';
+import { useDocVersionStore } from '../stores';
 import { Versions } from '../types';
 
 import { VersionItem } from './VersionItem';
@@ -104,6 +105,13 @@ export const VersionList = ({ doc }: VersionListProps) => {
       return acc.concat(page.results);
     }, [] as Versions[]);
   }, [data?.pages]);
+  const { setIsPanelVersionOpen } = useDocVersionStore();
+
+  useEffect(() => {
+    return () => {
+      setIsPanelVersionOpen(false);
+    };
+  }, [setIsPanelVersionOpen]);
 
   return (
     <Box $css="overflow-y: auto; overflow-x: hidden;" ref={containerRef}>