(frontend) replace grommet text input with cunningham text input

CHANGELOG.md

@@ -13,6 +13,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - Add playlist is_claimable attribute
 - Add the Accept-Language header to most of the http request (#2394)
 
+### Changed
+
+- Replace grommet TextInput by Cunningham Input (#2374)
+
 ## [4.3.1] - 2023-08-31
 
 ### Fixed

src/backend/marsha/e2e/test_lti.py

@@ -683,7 +683,7 @@ def test_lti_video_upload(page: Page, live_server: LiveServer):
     page, _ = _preview_video(live_server, page)
 
     page.click("text=Create a video")
-    page.fill("input[placeholder='Enter title of your video here']", "My video")
+    page.get_by_label("Enter title of your video here").fill("My video")
 
     page.set_input_files(
         "input[type='file']", f"{settings.MEDIA_ROOT}/e2e/big_buck_bunny_480p.mp4"

src/backend/marsha/e2e/test_lti_markdown.py

@@ -105,7 +105,7 @@ def test_render(page: Page, live_server: LiveServer, settings) -> None:
     settings.MARKDOWN_ENABLED = True
     page, _ = _preview_markdown(page, live_server)
 
-    page.get_by_placeholder("Enter title of your course here").fill("my title")
+    page.get_by_label("Enter title of your course here").fill("my title")
     page.get_by_role("button", name="Create your course").click()
 
     editor_container = page.get_by_test_id("editor_container")

src/backend/marsha/e2e/test_site.py

@@ -48,8 +48,8 @@ def user_logged_in(context: BrowserContext, live_server: LiveServer):
 
     page = context.new_page()
     page.goto(live_server.url)
-    page.fill("input[name=username]", "jane")
-    page.fill("input[name=password]", "password")
+    page.fill("input[name=username]", "jane", force=True)
+    page.fill("input[name=password]", "password", force=True)
     page.click("text=OK")
     page.wait_for_timeout(500)
     page.wait_for_load_state("networkidle")
@@ -62,8 +62,8 @@ def test_site_login(page: Page, live_server: LiveServer):
     user.set_password("password")
 
     page.goto(live_server.url)
-    page.fill("input[name=username]", "john")
-    page.fill("input[name=password]", "password")
+    page.fill("input[name=username]", "john", force=True)
+    page.fill("input[name=password]", "password", force=True)
     page.click("text=OK")
 
     expect(page.get_by_role("menuitem", name="Dashboard")).to_be_visible()
@@ -299,8 +299,8 @@ def test_playlist_update(context: BrowserContext, live_server: LiveServer):
     page = context.pages[0]
     page.get_by_role("menuitem", name="My Playlists").click()
     page.get_by_role("button", name="Update playlist Playlist test").click()
-    page.get_by_label("Name*required").click()
-    page.get_by_label("Name*required").fill("Playlist test updated")
+    page.get_by_label("Name").click()
+    page.get_by_label("Name").fill("Playlist test updated")
     page.get_by_role("button", name="Save").click()
 
     expect(

src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Text, TextInput } from 'grommet';
+import { Input } from '@openfun/cunningham-react';
+import { Box, Button, Text } from 'grommet';
 import { Breakpoints } from 'lib-common';
 import { WhiteCard, WizardLayout, useResponsive } from 'lib-components';
 import {
@@ -93,13 +94,12 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
           </Text>
 
           <Box direction="row" width="100%" pad={{ bottom: 'xsmall' }}>
-            <TextInput
-              a11yTitle={intl.formatMessage(messages.placeholderTitleInput)}
-              placeholder={intl.formatMessage(messages.placeholderTitleInput)}
-              value={localTitle}
-              onChange={(event) => setLocalTitle(event.target.value)}
-              // This is enforced by backend, but simpler to not allow user for too long title
+            <Input
+              aria-label={intl.formatMessage(messages.placeholderTitleInput)}
+              label={intl.formatMessage(messages.placeholderTitleInput)}
               maxLength={255}
+              onChange={(event) => setLocalTitle(event.target.value)}
+              value={localTitle}
             />
           </Box>
           <LanguageSelector

src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx

@@ -1,3 +1,4 @@
+import { CunninghamProvider } from '@openfun/cunningham-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Grommet } from 'grommet';
@@ -176,34 +177,36 @@ const AppContentLoader = () => {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools />
         <RawIntlProvider value={intl}>
-          <Grommet theme={theme} style={{ height: '100%' }}>
-            <ErrorBoundary
-              fallbackRender={({ error }: { error: Error }) => (
-                <BoundaryScreenError code={500} message={error.message} />
-              )}
-            >
-              <Toaster
-                toastOptions={{
-                  duration: 5000,
-                  success: {
-                    style: {
-                      background: colors['status-ok'],
+          <CunninghamProvider>
+            <Grommet theme={theme} style={{ height: '100%' }}>
+              <ErrorBoundary
+                fallbackRender={({ error }: { error: Error }) => (
+                  <BoundaryScreenError code={500} message={error.message} />
+                )}
+              >
+                <Toaster
+                  toastOptions={{
+                    duration: 5000,
+                    success: {
+                      style: {
+                        background: colors['status-ok'],
+                      },
                     },
-                  },
-                  error: {
-                    style: {
-                      color: colors.white,
-                      background: colors['accent-2'],
+                    error: {
+                      style: {
+                        color: colors.white,
+                        background: colors['accent-2'],
+                      },
                     },
-                  },
-                }}
-              />
-              <Suspense fallback={<Loader />}>
-                <AppContent />
-              </Suspense>
-              <GlobalStyles />
-            </ErrorBoundary>
-          </Grommet>
+                  }}
+                />
+                <Suspense fallback={<Loader />}>
+                  <AppContent />
+                </Suspense>
+                <GlobalStyles />
+              </ErrorBoundary>
+            </Grommet>
+          </CunninghamProvider>
         </RawIntlProvider>
       </QueryClientProvider>
     </CurrentResourceContextProvider>

src/frontend/apps/lti_site/components/DashboardDocument/DashboardDocumentTitleForm/index.tsx

@@ -1,12 +1,13 @@
-import { Button, Form, FormField, Text, TextInput } from 'grommet';
+import { Input } from '@openfun/cunningham-react';
+import { Button, Form, Text } from 'grommet';
 import { Maybe } from 'lib-common';
 import {
   Document,
   modelName,
   updateResource,
   useDocument,
 } from 'lib-components';
-import React, { Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -69,23 +70,24 @@ export const DashboardDocumentTitleForm = ({
           updateTitle();
         }}
       >
-        <FormField
+        <Input
+          aria-label="Title"
           label={intl.formatMessage(messages.updateTitle)}
-          htmlFor="title"
-          error={error}
-          component={TextInput}
-        >
-          <TextInput
-            id="title"
-            maxLength={255}
-            onChange={(event) => setTitle(event.target.value)}
-            placeholder="Title"
-            required={true}
-            size="medium"
-            value={title}
-          />
-        </FormField>
-        <Button type="submit" primary label="Submit" />
+          id="title"
+          maxLength={255}
+          fullWidth
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+          required={true}
+          state={error ? 'error' : undefined}
+          text={error}
+        />
+        <Button
+          type="submit"
+          primary
+          label="Submit"
+          margin={{ top: 'small' }}
+        />
         {udpated && (
           <Text margin="small" color="status-ok">
             {intl.formatMessage(messages.updateSuccessful)}

src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx

@@ -77,7 +77,7 @@ describe('<PlaylistPortability />', () => {
     );
 
     const input = await screen.findByRole('textbox', {
-      name: /share with another playlist/i,
+      name: /Paste playlist id/i,
     });
     fireEvent.change(input, { target: { value: otherPlaylist.id } });
     fireEvent.click(screen.getByRole('button', { name: 'add share' }));

src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx

@@ -1,12 +1,5 @@
-import {
-  Box,
-  Button,
-  Form,
-  FormField,
-  Spinner,
-  Text,
-  TextInput,
-} from 'grommet';
+import { Input } from '@openfun/cunningham-react';
+import { Box, Button, Spinner, Text } from 'grommet';
 import { AddCircle, Trash } from 'grommet-icons';
 import {
   CopyClipboard,
@@ -231,31 +224,25 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
             removePlaylistPortability={removePlaylistPortability}
           />
           <Box>
-            <Form onSubmit={addPlaylistPortability}>
-              <FormField
-                label={<FormattedMessage {...messages.shareWithPlaylist} />}
-                htmlFor="port-to-playlist-uuid"
-              >
-                <Box direction="row">
-                  <TextInput
-                    placeholder={intl.formatMessage(
-                      messages.shareWithPlaylistPlaceholder,
-                    )}
-                    id="port-to-playlist-uuid"
-                    onChange={(event) =>
-                      setNewPortabilityID(event.target.value)
-                    }
-                    value={newPortabilityID}
-                    plain
-                  />
-                  <Button
-                    type="submit"
-                    aria-label={intl.formatMessage(messages.addPortability)}
-                    icon={<AddCircle />}
-                  />
-                </Box>
-              </FormField>
-            </Form>
+            <Input
+              aria-label={intl.formatMessage(
+                messages.shareWithPlaylistPlaceholder,
+              )}
+              label={intl.formatMessage(messages.shareWithPlaylist)}
+              id="port-to-playlist-uuid"
+              fullWidth
+              onChange={(event) => setNewPortabilityID(event.target.value)}
+              value={newPortabilityID}
+              rightIcon={
+                <AddCircle
+                  aria-label={intl.formatMessage(messages.addPortability)}
+                  onClick={addPlaylistPortability}
+                  color="blue-active"
+                  style={{ cursor: 'pointer' }}
+                  role="button"
+                />
+              }
+            />
           </Box>
 
           <Box