💄 revamp db source selector

Author: Clemsazert

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

@@ -1,7 +1,8 @@
 import { Button } from '@openfun/cunningham-react';
 import React from 'react';
+import styled from 'styled-components';
 
-import { Box, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 import { DatabaseSourceSelector } from '@/docs/doc-editor/components/DatabaseSourceSelector';
 import { useGristCreateDocAndTable } from '@/features/grist/useGristCreateTable';
 
@@ -32,20 +33,89 @@ export const DatabaseSelector = ({
   };
 
   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>
+    <Wrapper>
+      <Box
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 20,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgb(133, 184, 255)',
+        }}
+      >
+        <Icon iconName="storage" color="rgb(62, 152, 255)" />
+      </Box>
+      <Title>Source de données</Title>
+      <Description>Choisissez votre méthode de création</Description>
+      <OptionsWrapper>
+        <Option>
+          <Box
+            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+          >
+            <Box>
+              <OptionTitle>Créer une nouvelle base de données vide</OptionTitle>
+              <Description>
+                Partir d&apos;une base de données vierge
+              </Description>
+            </Box>
+            <Button
+              onClick={handleCreateNewDatabase}
+              icon={<Icon iconName="add" $color="white" />}
+            ></Button>
+          </Box>
+        </Option>
+        <Text style={{ fontWeight: 600, fontSize: 14 }}>ou</Text>
+        <Option>
+          <Box style={{ marginBottom: 10 }}>
+            <OptionTitle>
+              Sélectionner une base de données existante
+            </OptionTitle>
+            <Description>
+              Connecter une base de données Grist déjà créée
+            </Description>
+          </Box>
+          <DatabaseSourceSelector onSourceSelected={onDatabaseSelected} />
+        </Option>
+      </OptionsWrapper>
+    </Wrapper>
   );
 };
+
+const Wrapper = styled(Box)`
+  border: 2px solid rgb(160, 207, 255);
+  background-color: rgb(230, 243, 255);
+  border-radius: 4px;
+  width: 100%;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Title = styled(Text)`
+  font-weight: 800;
+  font-size: 18px;
+`;
+
+const Description = styled(Text)`
+  color: rgb(110, 110, 110);
+  font-size: 14px;
+`;
+
+const OptionTitle = styled(Text)`
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const Option = styled(Box)`
+  width: 100%;
+  border: 1px solid rgb(180, 180, 180);
+  border-radius: 4px;
+  padding: 8px 16px;
+`;
+
+const OptionsWrapper = styled(Box)`
+  width: 100%;
+  gap: 5px;
+  align-items: center;
+`;

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

@@ -1,6 +1,8 @@
+import { Spinner } from '@gouvfr-lasuite/ui-kit';
+import { Select } from '@openfun/cunningham-react';
 import { useState } from 'react';
 
-import { Box, DropdownMenu, Text } from '@/components';
+import { Box, Text } from '@/components';
 import { useListGristTables } from '@/features/grist';
 import { Doc, useListGristDocs } from '@/features/grist/useListGristDocs';
 
@@ -12,19 +14,32 @@ 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>
-  ) : (
+  const { tables, isLoading } = useListGristTables(documentId);
+  if (tables) {
+    return (
+      <Select
+        label="Sélectionner une table Grist existante"
+        options={tables.map(({ id }) => ({
+          label: id,
+          value: id,
+          render: () => <Text style={{ padding: 10 }}>{id}</Text>,
+        }))}
+        onChange={(e) => {
+          // TODO: handle better :)
+          // @ts-expect-error target value type not specified here
+          onSourceSelected({ documentId, tableId: e.target.value });
+        }}
+      />
+    );
+  }
+  if (isLoading) {
+    return (
+      <Box style={{ flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
+        <Spinner /> <Text>Chargement des tables...</Text>
+      </Box>
+    );
+  }
+  return (
     <Box>
       <Text>No tables available</Text>
     </Box>
@@ -38,17 +53,20 @@ export const DatabaseSourceSelector = ({
   const { docs } = useListGristDocs();
 
   return (
-    <Box>
-      <DropdownMenu
+    <Box style={{ flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
+      <Select
+        label={selectedDoc?.name ?? 'Sélectionner un document Grist'}
         options={docs.map((doc) => ({
           label: doc.name,
-          value: doc.id,
-          callback: () => setSelectedDoc(doc),
+          value: doc.id.toString(),
+          render: () => <Text style={{ padding: 10 }}>{doc.name}</Text>,
         }))}
-        showArrow
-      >
-        <Text>{selectedDoc?.name ?? 'Sélectionner un document Grist'}</Text>
-      </DropdownMenu>
+        onChange={(e) =>
+          setSelectedDoc(
+            docs.find((doc) => doc.id.toString() === e.target.value),
+          )
+        }
+      />
       {selectedDoc && (
         <TableSelector
           documentId={selectedDoc.id}