♻️(frontend) replace grommet Select with Cunnigham Select

- replace the Grommet Select component with the Cunningham Select component
openfun · Sep 8, 2023 · f98a6e7 · f98a6e7
1 parent 70aa507
commit f98a6e7
Show file tree

Hide file tree

Showing 41 changed files with 652 additions and 610 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Replace grommet Select by Cunningham Select (#2400)
+
 ## [4.4.0] - 2023-09-08
 
 ### Added

diff --git a/...ontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.spec.tsx b/...ontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.spec.tsx
@@ -214,7 +214,7 @@ describe('<DashboardInstructor />', () => {
       },
     );
 
-    const fileFilter = screen.getByRole('button', { name: /Filter files/i });
+    const fileFilter = screen.getByRole('combobox', { name: /Filter files/i });
     await userEvent.click(fileFilter);
     await userEvent.click(
       await screen.findByRole('option', { name: 'Unread' }),

diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Heading, Pagination, Paragraph, Select, Text } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
+import { Box, Heading, Pagination, Paragraph, Text } from 'grommet';
 import { Maybe } from 'lib-common';
 import { FileDepository, Loader } from 'lib-components';
 import React, { FocusEvent, useState } from 'react';
@@ -10,6 +11,8 @@ import {
   useUpdateFileDepository,
 } from 'apps/deposit/data/queries';
 
+type SelectProps = React.ComponentPropsWithoutRef<typeof Select>;
+
 const PAGE_SIZE = 10;
 
 const messages = defineMessages({
@@ -77,7 +80,7 @@ export const DashboardInstructor = ({
   const [indices, setIndices] = useState([0, PAGE_SIZE]);
   const [readFilter, setReadFilter] = useState<Maybe<string>>(undefined);
 
-  const { data, isError, isLoading, refetch } = useDepositedFiles(
+  const { data, isError, isLoading } = useDepositedFiles(
     fileDepository.id,
     {
       limit: `${PAGE_SIZE}`,
@@ -103,9 +106,8 @@ export const DashboardInstructor = ({
     },
   ];
 
-  const onReadFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setReadFilter(event.target.value);
-    refetch();
+  const onReadFilterChange: SelectProps['onChange'] = (event) => {
+    setReadFilter(event.target.value as Maybe<string>);
   };
 
   const { mutate } = useUpdateFileDepository(fileDepository.id);
@@ -190,17 +192,11 @@ export const DashboardInstructor = ({
                 pad="medium"
               >
                 <Select
-                  a11yTitle={intl.formatMessage(messages.readFilterTitle)}
-                  id="readFilterSelect"
-                  name="read"
-                  placeholder={intl.formatMessage(
-                    messages.readFilterPlaceholder,
-                  )}
-                  value={readFilter}
-                  options={readFilterOptions}
-                  labelKey="label"
-                  valueKey={{ key: 'value', reduce: true }}
+                  aria-label={intl.formatMessage(messages.readFilterTitle)}
+                  label={intl.formatMessage(messages.readFilterTitle)}
                   onChange={onReadFilterChange}
+                  options={readFilterOptions}
+                  value={readFilter}
                 />
                 <Text>
                   <FormattedMessage

diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx
@@ -111,7 +111,7 @@ describe('MarkdownWizard', () => {
       'Mon titre',
     );
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),

diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
@@ -100,12 +100,14 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
               maxLength={255}
               onChange={(event) => setLocalTitle(event.target.value)}
               value={localTitle}
+              fullWidth
             />
           </Box>
           <LanguageSelector
             currentLanguage={language}
             onLanguageChange={setLanguage}
             disabled={false}
+            fullWidth
           />
 
           <Button

diff --git a/...lone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx b/...lone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx
@@ -111,10 +111,13 @@ describe('<VideoCreateForm />', () => {
       screen.getByText('Add a video or drag & drop it'),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: /Add Video/i }),
     ).toBeInTheDocument();
@@ -147,10 +150,13 @@ describe('<VideoCreateForm />', () => {
       screen.getByText('Add a video or drag & drop it'),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: /Add Video/i }),
     ).toBeInTheDocument();
@@ -254,11 +260,15 @@ describe('<VideoCreateForm />', () => {
     ).toBeInTheDocument();
 
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
 
+    expect(
+      screen.getByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
+
     const hiddenInput = screen.getByTestId('input-video-test-id');
 
     await userEvent.upload(hiddenInput, file);
@@ -334,11 +344,15 @@ describe('<VideoCreateForm />', () => {
     ).toBeInTheDocument();
 
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
 
+    expect(
+      screen.getByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
+
     const hiddenInput = screen.getByTestId('input-video-test-id');
 
     await userEvent.upload(hiddenInput, file);

diff --git a/...rontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx b/...rontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx
@@ -91,21 +91,17 @@ describe('<CreatePlaylistForm />', () => {
 
     expect(await screen.findByText('Create a playlist')).toBeInTheDocument();
 
-    await userEvent.click(
-      await screen.findByRole('button', { name: 'Open Drop; Selected: id' }),
-    );
+    expect(screen.getByText('org')).toBeInTheDocument();
 
     await userEvent.click(
-      await screen.findByRole('option', { name: 'other-org' }),
+      screen.getByRole('combobox', {
+        name: 'Organization',
+      }),
     );
+    await userEvent.click(screen.getByRole('option', { name: 'other-org' }));
 
-    expect(
-      await screen.findByRole('button', {
-        name: 'Open Drop; Selected: other-id',
-      }),
-    ).toBeInTheDocument();
-    expect(screen.getByDisplayValue('other-org')).toBeInTheDocument();
-    expect(screen.queryByDisplayValue('org')).not.toBeInTheDocument();
+    expect(screen.getByText('other-org')).toBeInTheDocument();
+    expect(screen.queryByText('org')).not.toBeInTheDocument();
 
     await userEvent.type(
       screen.getByRole('textbox', { name: 'Name' }),