♻️ extract add column button component

Author: anaisberg

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock.tsx

@@ -1,18 +1,20 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { insertOrUpdateBlock } from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
-import { Button, Input } from '@openfun/cunningham-react';
+import { Button } from '@openfun/cunningham-react';
 import { ColDef } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { TFunction } from 'i18next';
 import React, { useRef, useState } from 'react';
 
-import { Box, DropButton, Icon, Text } from '@/components';
+import { Box, Icon } from '@/components';
 
 import { DocsBlockNoteEditor } from '../../types';
 import { DatabaseSourceSelector } from '../DatabaseSourceSelector';
 import { DatabaseTableDisplay } from '../DatabaseTableDisplay';
 
+import { AddButtonComponent } from './DatabaseBlock/AddColumnButton';
+
 export const DatabaseBlock = createReactBlockSpec(
   {
     type: 'database',
@@ -40,52 +42,6 @@ export const DatabaseBlock = createReactBlockSpec(
         { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
       ];
 
-      const AddButtonComponent = ({
-        isOpen,
-        setIsOpen,
-      }: {
-        isOpen: boolean;
-        setIsOpen: (open: boolean) => void;
-      }) => {
-        const onOpenChange = (isOpen: boolean) => {
-          setIsOpen(isOpen);
-        };
-
-        return (
-          <DropButton
-            isOpen={isOpen}
-            onOpenChange={onOpenChange}
-            label="add column"
-            button={
-              <Box style={{ padding: '0.25rem', gap: '16px' }} color="tertiary">
-                <span className="material-icons">add</span>
-              </Box>
-            }
-          >
-            <Box style={{ padding: '10px', gap: '10px' }}>
-              <Text
-                $variation="600"
-                $size="s"
-                $weight="bold"
-                $theme="greyscale"
-              >
-                Ajouter une colonne
-              </Text>
-              <Input label="Column label"></Input>
-              <Button
-                size="small"
-                onClick={() => {
-                  setIsOpen(false);
-                }}
-                style={{ alignSelf: 'end', width: 'fit-content' }}
-              >
-                Valider
-              </Button>
-            </Box>
-          </DropButton>
-        );
-      };
-
       // Column Definitions: Defines the columns to be displayed.
       const colDefs: ColDef[] = [
         { field: 'make', sort: 'desc' },

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/AddColumnButton.tsx

@@ -0,0 +1,44 @@
+import { Button, Input } from '@openfun/cunningham-react';
+
+import { Box, DropButton, Text } from '@/components';
+
+export const AddButtonComponent = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}) => {
+  const onOpenChange = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  return (
+    <DropButton
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      label="add column"
+      button={
+        <Box style={{ padding: '0.25rem', gap: '16px' }} color="tertiary">
+          <span className="material-icons">add</span>
+        </Box>
+      }
+    >
+      <Box style={{ padding: '10px', gap: '10px' }}>
+        <Text $variation="600" $size="s" $weight="bold" $theme="greyscale">
+          Ajouter une colonne
+        </Text>
+        <Input label="Column label"></Input>
+        <Button
+          size="small"
+          onClick={() => {
+            setIsOpen(false);
+          }}
+          style={{ alignSelf: 'end', width: 'fit-content' }}
+        >
+          Valider
+        </Button>
+      </Box>
+    </DropButton>
+  );
+};