✨(frontend) add Notion import button and page

Author: emersion

src/backend/core/services/notion_import.py

@@ -66,9 +66,6 @@ def search_notion(session: Session, start_cursor: str) -> dict[str, Any]:
         json=req_data,
     )
 
-    if response.status_code != 200:
-        print(response.json())
-
     response.raise_for_status()
     return response.json()
 

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -14,6 +14,7 @@ export type DropdownMenuOption = {
   danger?: boolean;
   isSelected?: boolean;
   disabled?: boolean;
+  padding?: BoxProps['$padding'];
   show?: boolean;
   showSeparator?: boolean;
 };
@@ -134,7 +135,9 @@ export const DropdownMenu = ({
                 $justify="space-between"
                 $background={colorsTokens['greyscale-000']}
                 $color={colorsTokens['primary-600']}
-                $padding={{ vertical: 'xs', horizontal: 'base' }}
+                $padding={
+                  option.padding ?? { vertical: 'xs', horizontal: 'base' }
+                }
                 $width="100%"
                 $gap={spacingsTokens['base']}
                 $css={css`

src/frontend/apps/impress/src/features/docs/doc-management/api/useImportNotion.tsx

@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { KEY_LIST_DOC } from './useDocs';
+
+export const importNotion = async (): Promise<void> => {
+  const response = await fetchAPI('notion_import/run', {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to import the Notion',
+      await errorCauses(response),
+    );
+  }
+};
+
+export function useImportNotion() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, void>({
+    mutationFn: importNotion,
+    onSuccess: () => {
+      void queryClient.resetQueries({
+        queryKey: [KEY_LIST_DOC],
+      });
+      router.push('/');
+    },
+  });
+}

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

@@ -1,8 +1,9 @@
 import { Button } from '@openfun/cunningham-react';
+import { t } from 'i18next';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
 
-import { Icon } from '@/components';
+import { Box, DropdownMenu, Icon } from '@/components';
 import { useCreateDoc } from '@/features/docs/doc-management';
 
 import { useLeftPanelStore } from '../stores';
@@ -17,7 +18,14 @@ export const LeftPanelHeaderButton = () => {
       togglePanel();
     },
   });
-  return (
+
+  const handleImportNotion = () => {
+    const baseApiUrl = process.env.NEXT_PUBLIC_API_ORIGIN;
+    const notionAuthUrl = `${baseApiUrl}/api/v1.0/notion_import/redirect`;
+    window.location.href = notionAuthUrl;
+  };
+
+  return (<Box $direction="row" $align="center">
     <Button
       color="primary"
       onClick={() => createDoc()}
@@ -26,5 +34,17 @@ export const LeftPanelHeaderButton = () => {
     >
       {t('New doc')}
     </Button>
-  );
+    <DropdownMenu
+      showArrow
+      disabled={isDocCreating}
+      options={[
+        {
+          label: t('Import from Notion'),
+          callback: handleImportNotion,
+          padding: { vertical: 'xs', horizontal: 'md' },
+        },
+      ]}
+    >
+    </DropdownMenu>
+  </Box>);
 };

src/frontend/apps/impress/src/features/service-worker/service-worker.ts

@@ -110,6 +110,7 @@ const precacheResources = [
   '/index.html',
   '/401/',
   '/404/',
+  '/import-notion',
   FALLBACK.offline,
   FALLBACK.images,
   FALLBACK.docs,

src/frontend/apps/impress/src/i18n/translations.json

@@ -274,6 +274,7 @@
       "No documents found": "Keine Dokumente gefunden",
       "No text selected": "Kein Text ausgewählt",
       "No versions": "Keine Versionen",
+      "Notion import in progress...": "Notion-Import in Arbeit...",
       "OK": "OK",
       "Offline ?!": "Offline?!",
       "Only invited people can access": "Nur eingeladene Personen haben Zugriff",
@@ -291,6 +292,7 @@
       "Pin document icon": "Pinne das Dokumentenlogo an",
       "Pinned documents": "Angepinnte Dokumente",
       "Please download it only if it comes from a trusted source.": "Bitte laden Sie es nur herunter, wenn es von einer vertrauenswürdigen Quelle stammt.",
+      "Please stay on this page and be patient": "Bitte bleiben Sie auf dieser Seite und haben Sie Geduld",
       "Private": "Privat",
       "Proconnect Login": "Proconnect-Anmeldung",
       "Public": "Öffentlich",
@@ -474,6 +476,7 @@
       "No documents found": "No se han encontrado documentos",
       "No text selected": "No hay texto seleccionado",
       "No versions": "No hay versiones",
+      "Notion import in progress...": "Importación de Notion en curso...",
       "OK": "Ok",
       "Offline ?!": "¿¡Sin conexión!?",
       "Only invited people can access": "Solo las personas invitadas pueden acceder",
@@ -489,6 +492,7 @@
       "Pin document icon": "Icono para marcar el documento como favorito",
       "Pinned documents": "Documentos favoritos",
       "Please download it only if it comes from a trusted source.": "Por favor, descárguelo solo si viene de una fuente de confianza.",
+      "Please stay on this page and be patient": "Rimanete su questa pagina e siate pazienti",
       "Private": "Privado",
       "Proconnect Login": "Iniciar sesión ProConnect",
       "Public": "Público",
@@ -685,6 +689,7 @@
       "No documents found": "Aucun document trouvé",
       "No text selected": "Aucun texte sélectionné",
       "No versions": "Aucune version",
+      "Notion import in progress...": "Import Notion en cours...",
       "OK": "OK",
       "Offline ?!": "Hors-ligne ?!",
       "Only invited people can access": "Seules les personnes invitées peuvent accéder",
@@ -703,6 +708,7 @@
       "Pin document icon": "Icône épingler un document",
       "Pinned documents": "Documents épinglés",
       "Please download it only if it comes from a trusted source.": "Veuillez le télécharger uniquement s'il provient d'une source fiable.",
+      "Please stay on this page and be patient": "Merci de rester sur cette page et de patienter un peu",
       "Private": "Privé",
       "Proconnect Login": "Login Proconnect",
       "Public": "Public",
@@ -867,6 +873,7 @@
       "No documents found": "Nessun documento trovato",
       "No text selected": "Non è stato selezionato nessun testo",
       "No versions": "Nessuna versione",
+      "Notion import in progress...": "Importazione di nozioni in corso...",
       "OK": "OK",
       "Offline ?!": "Offline ?!",
       "Only invited people can access": "Solo le persone invitate possono accedere",
@@ -881,6 +888,7 @@
       "Pin document icon": "Icona \"fissa documento\"",
       "Pinned documents": "Documenti fissati",
       "Please download it only if it comes from a trusted source.": "Per favore scaricalo solo se proviene da una fonte attendibile",
+      "Please stay on this page and be patient": "Rimanete su questa pagina e siate pazienti",
       "Private": "Privato",
       "Public": "Pubblico",
       "Public document": "Documento pubblico",
@@ -1029,6 +1037,7 @@
       "No documents found": "Geen documenten gevonden",
       "No text selected": "Geen tekst geselecteerd",
       "No versions": "Geen versies",
+      "Notion import in progress...": "Notion import bezig...",
       "OK": "Ok",
       "Offline ?!": "Offline ?!",
       "Only invited people can access": "Alleen uitgenodigde gebruikers hebben toegang",
@@ -1043,6 +1052,7 @@
       "Pin document icon": "Document icoon vastzetten",
       "Pinned documents": "Vastgepinde documenten",
       "Please download it only if it comes from a trusted source.": "Alleen downloaden als het van een vertrouwde bron komt.",
+      "Please stay on this page and be patient": "Blijf op deze pagina en heb geduld",
       "Private": "Privé",
       "Proconnect Login": "Login",
       "Public": "Publiek",

src/frontend/apps/impress/src/pages/import-notion/index.tsx

@@ -0,0 +1,42 @@
+import { Loader } from '@openfun/cunningham-react';
+import { ReactElement, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { useImportNotion } from '@/features/docs/doc-management/api/useImportNotion';
+import { MainLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  const { mutate: importNotion } = useImportNotion();
+
+  useEffect(() => {
+    importNotion();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Box
+      $padding={{ top: 'large' }}
+      $width="100%"
+      $height="100%"
+      $align="center"
+    >
+      <Text as="p" $margin={{ bottom: '0px' }}>
+        {t('Notion import in progress...')}
+      </Text>
+      <Text as="p" $margin={{ top: '10px', bottom: '30px' }}>
+        {t('Please stay on this page and be patient')}
+      </Text>
+      <Loader />
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;