feat(database): open Grist api key modal

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 - ✨(backend) allow setting session cookie age via env var #977
 - ✨(backend) allow theme customnization using a configuration file #948
 - ✨(frontend) Add a custom callout block to the editor #892
+- ✨(frontend) Add a custom database block to the editor #892
 - 🚩(frontend) version MIT only #911
 - ✨(backend) integrate maleware_detection from django-lasuite #936
 - 🏗️(frontend) Footer configurable #959

src/frontend/apps/impress/.env

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_SW_DEACTIVATED=
-NEXT_PUBLIC_PUBLISH_AS_MIT=true
+NEXT_PUBLIC_PUBLISH_AS_MIT=true

src/frontend/apps/impress/.env.development

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
 NEXT_PUBLIC_PUBLISH_AS_MIT=false
-NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_SW_DEACTIVATED=true

src/frontend/apps/impress/package.json

@@ -32,7 +32,9 @@
     "@react-pdf/renderer": "4.3.0",
     "@sentry/nextjs": "9.22.0",
     "@tanstack/react-query": "5.77.1",
+    "ag-grid-react": "^33.3.1",
     "canvg": "4.0.3",
+    "chart.js": "^4.4.9",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "crisp-sdk-web": "1.0.25",
@@ -44,15 +46,22 @@
     "lodash": "4.17.21",
     "luxon": "3.6.1",
     "next": "15.3.2",
+    "plotly": "^1.0.6",
+    "plotly.js": "^3.0.1",
     "posthog-js": "1.246.0",
     "react": "*",
     "react-aria-components": "1.9.0",
+    "react-chart-editor": "^0.46.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "*",
     "react-i18next": "15.5.2",
     "react-intersection-observer": "9.16.0",
     "react-select": "5.10.1",
     "styled-components": "6.1.18",
     "use-debounce": "10.0.4",
+    "vega": "^6.1.2",
+    "vega-embed": "^7.0.2",
+    "vega-lite": "^6.1.0",
     "y-protocols": "1.0.6",
     "yjs": "*",
     "zustand": "5.0.5"

src/frontend/apps/impress/src/api/config.ts

@@ -20,3 +20,5 @@ export const backendUrl = () =>
  */
 export const baseApiUrl = (apiVersion: string = '1.0') =>
   `${backendUrl()}/api/v${apiVersion}/`;
+
+export const gristApiUrl = () => 'http://localhost:8484/api/';

src/frontend/apps/impress/src/api/gristApi.ts

@@ -0,0 +1,17 @@
+import { gristApiUrl } from './config';
+
+export const gristFetchApi = async (input: string, init?: RequestInit) => {
+  const apiUrl = `${gristApiUrl()}${input}`;
+  const apiKey = localStorage.getItem('grist_api_key');
+  const bearerToken = `Bearer ${apiKey}`;
+
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: bearerToken,
+  };
+
+  return await fetch(apiUrl, {
+    ...init,
+    headers,
+  });
+};

src/frontend/apps/impress/src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './APIError';
 export * from './config';
 export * from './fetchApi';
+export * from './gristApi';
 export * from './helpers';
 export * from './types';
 export * from './utils';

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

@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   PropsWithChildren,
   ReactNode,
   useEffect,
@@ -38,6 +39,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 export interface DropButtonProps {
   button: ReactNode;
   buttonCss?: BoxProps['$css'];
+  buttonStyle?: CSSProperties;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -46,6 +48,7 @@ export interface DropButtonProps {
 export const DropButton = ({
   button,
   buttonCss,
+  buttonStyle,
   isOpen = false,
   onOpenChange,
   children,
@@ -77,6 +80,7 @@ export const DropButton = ({
           ${buttonCss};
         `}
         className="--docs--drop-button"
+        style={buttonStyle}
       >
         {button}
       </StyledButton>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -10,6 +10,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -27,14 +28,26 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+
+import {
+  CalloutBlock,
+  DatabaseBlock,
+  DividerBlock,
+  ReactEmbedBlock,
+  GristChartBlock,
+} from './custom-blocks';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
+      database: DatabaseBlock,
       divider: DividerBlock,
+      embed: ReactEmbedBlock,
+      grist_chart: GristChartBlock,
     },
   }),
 );

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -13,13 +13,17 @@ import { DocsBlockSchema } from '../types';
 
 import {
   getCalloutReactSlashMenuItems,
+  getDatabaseReactSlashMenuItems,
   getDividerReactSlashMenuItems,
+  getEmbedReactSlashMenuItems,
+  getGristChartReactSlashMenuItems,
 } from './custom-blocks';
 
 export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const advancedBlocksName = useDictionary().slash_menu.table.group;
 
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
@@ -29,12 +33,15 @@ export const BlockNoteSuggestionMenu = () => {
             getDefaultReactSlashMenuItems(editor),
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
+            getDatabaseReactSlashMenuItems(editor, t, advancedBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getEmbedReactSlashMenuItems(editor, t, advancedBlocksName),
+            getGristChartReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),
       );
-  }, [basicBlocksName, editor, t]);
+  }, [basicBlocksName, advancedBlocksName, editor, t]);
 
   return (
     <SuggestionMenuController

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSelector.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@openfun/cunningham-react';
+import React from 'react';
+
+import { Box, Text } from '@/components';
+import { DatabaseSourceSelector } from '@/docs/doc-editor/components/DatabaseSourceSelector';
+import { useGristCreateDocAndTable } from '@/features/grist/useGristCreateTable';
+import { useDocStore } from '../../doc-management';
+
+type DatabaseSelectorProps = {
+  onDatabaseSelected: (params: { documentId: string; tableId: string }) => void;
+};
+
+export const DatabaseSelector = ({
+  onDatabaseSelected,
+}: DatabaseSelectorProps) => {
+  const { createTable } = useGristCreateDocAndTable();
+  const { currentDoc } = useDocStore();
+
+  const handleCreateNewDatabase = () => {
+    if (!currentDoc) {
+      console.error('No current document found to create a new database.');
+      return;
+    }
+    createTable(currentDoc.title ?? currentDoc.id)
+      .then(({ documentId, tableId }) => {
+        onDatabaseSelected({ documentId, tableId });
+      })
+      .catch((error) => {
+        console.error('Error creating new database:', error);
+      });
+  };
+
+  return (
+    <Box
+      style={{
+        flexDirection: 'column',
+        gap: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <Button onClick={handleCreateNewDatabase}>
+        Créer une nouvelle base de données vide
+      </Button>
+      <Text>ou</Text>
+      <DatabaseSourceSelector onSourceSelected={onDatabaseSelected} />
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSourceSelector.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+import { Box, DropdownMenu, Text } from '@/components';
+import { useListGristTables } from '@/features/grist';
+import { Doc, useListGristDocs } from '@/features/grist/useListGristDocs';
+
+type DatabaseSourceSelectorProps = {
+  onSourceSelected: (args: { documentId: number; tableId: string }) => void;
+};
+
+const TableSelector = ({
+  documentId,
+  onSourceSelected,
+}: { documentId: number } & DatabaseSourceSelectorProps) => {
+  const { tables } = useListGristTables(documentId);
+  return tables ? (
+    <DropdownMenu
+      options={tables.map(({ id }) => ({
+        label: id,
+        value: id,
+        callback: () => onSourceSelected({ documentId, tableId: id }),
+      }))}
+      showArrow
+    >
+      <Text>Sélectionner une table Grist existante</Text>
+    </DropdownMenu>
+  ) : (
+    <Box>
+      <Text>No tables available</Text>
+    </Box>
+  );
+};
+
+export const DatabaseSourceSelector = ({
+  onSourceSelected,
+}: DatabaseSourceSelectorProps) => {
+  const [selectedDoc, setSelectedDoc] = useState<Doc>();
+  const { docs } = useListGristDocs();
+
+  return (
+    <Box>
+      <DropdownMenu
+        options={docs.map((doc) => ({
+          label: doc.name,
+          value: doc.id,
+          callback: () => setSelectedDoc(doc),
+        }))}
+        showArrow
+      >
+        <Text>{selectedDoc?.name ?? 'Sélectionner un document Grist'}</Text>
+      </DropdownMenu>
+      {selectedDoc && (
+        <TableSelector
+          documentId={selectedDoc.id}
+          onSourceSelected={onSourceSelected}
+        />
+      )}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseTableDisplay.tsx

@@ -0,0 +1,16 @@
+import { useGristTableData } from '@/features/grist/useGristTableData';
+
+export const DatabaseTableDisplay = ({
+  documentId,
+  tableId,
+}: {
+  documentId: string;
+  tableId: string;
+}) => {
+  const { tableData } = useGristTableData({
+    documentId,
+    tableId,
+  });
+
+  return JSON.stringify(tableData, null, 2);
+};