✨(website) add disabled button create ressource form

CHANGELOG.md

@@ -57,6 +57,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - Make video dashboard visible by default, and collapsed when using the
   Moodle atto plugin
 - Update live_session api to use mixin to prevent url crafting 
+- standalone website:
+    - put the creating ressource form submit button disabled when the 
+    form is invalid (#2175)
 
 ### Fixed
 

src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Create/ClassRoomCreateForm.spec.tsx

@@ -60,10 +60,14 @@ describe('<ClassRoomCreateForm />', () => {
 
     const button = screen.getByRole('button', { name: /Add Classroom/i });
 
+    expect(button).toBeDisabled();
+
     fireEvent.change(screen.getByRole('textbox', { name: /title/i }), {
       target: { value: 'my title' },
     });
 
+    expect(button).toBeDisabled();
+
     userEvent.click(
       await screen.findByRole('button', {
         name: 'Choose the playlist.; Selected: some-playlist-id',

src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Create/ClassRoomCreateForm.tsx

@@ -144,6 +144,7 @@ const ClassroomCreateForm = () => {
           label={intl.formatMessage(messages.submitLabel)}
           onClickCancel={() => history.push(classroomPath)}
           isSubmitting={isCreating}
+          isDisabled={!classroom.title || !classroom.playlist}
         />
       </Form>
     </Fragment>

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Create/LiveCreateForm.spec.tsx

@@ -61,10 +61,16 @@ describe('<LiveCreateForm />', () => {
 
     deferredPlaylists.resolve(playlistsResponse);
 
+    const button = screen.getByRole('button', { name: /Add Webinar/i });
+
+    expect(button).toBeDisabled();
+
     fireEvent.change(screen.getByRole('textbox', { name: /title/i }), {
       target: { value: 'my title' },
     });
 
+    expect(button).toBeDisabled();
+
     userEvent.click(
       await screen.findByRole('button', {
         name: 'Choose the playlist.; Selected: some-playlist-id',
@@ -81,11 +87,7 @@ describe('<LiveCreateForm />', () => {
       }),
     ).toBeInTheDocument();
 
-    await waitFor(() =>
-      expect(
-        screen.getByRole('button', { name: /Add Webinar/i }),
-      ).not.toBeDisabled(),
-    );
+    expect(button).not.toBeDisabled();
   });
 
   test('fields are posted correctly', async () => {

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Create/LiveCreateForm.tsx

@@ -150,6 +150,7 @@ const LiveCreateForm = () => {
             history.push(livePath);
           }}
           isSubmitting={isCreating || isUpdatingToLive}
+          isDisabled={!live.title || !live.playlist}
         />
       </Form>
     </Fragment>

src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.spec.tsx

@@ -60,11 +60,13 @@ describe('<PlaylistForm />', () => {
     expect(screen.getByLabelText('Organization*required')).toBeInTheDocument();
     expect(screen.getByLabelText('Name*required')).toBeInTheDocument();
 
-    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    const submitButton = screen.getByRole('button', { name: 'Save' });
+    expect(submitButton).toBeInTheDocument();
+    expect(submitButton).toBeDisabled();
     expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
   });
 
-  it('selects the first oranization if any', async () => {
+  it('selects the first organization if any', async () => {
     fetchMock.mock('/api/organizations/?limit=20&offset=0', {
       count: 2,
       results: [
@@ -144,6 +146,8 @@ describe('<PlaylistForm />', () => {
     expect(fetchMock.calls()[0][0]).toEqual(
       '/api/organizations/?limit=20&offset=0',
     );
+
+    expect(screen.queryByRole('button', { name: 'Save' })).not.toBeDisabled();
   });
 
   it('loads organizations until it find the initial one', async () => {

src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.tsx

@@ -299,6 +299,7 @@ export const PlaylistForm = ({
               : undefined
           }
           isSubmitting={isSubmitting}
+          isDisabled={!formValues.name || !formValues.organizationId}
         />
         {actions}
       </Form>