Playlists: Save button now correctly creates a new playlist (#50381) (#50390)

* Add type="submit" to PlaylistForm submit button

* fix linting errors

(cherry picked from commit a1cf709ad2)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/features/playlist/PlaylistForm.test.tsx

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/dom';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -133,8 +133,8 @@ describe('PlaylistForm', () => {
     it('then the correct item should be submitted', async () => {
       const { onSubmitMock } = getTestContext(playlist);
 
-      fireEvent.submit(screen.getByRole('button', { name: /save/i }));
-      await waitFor(() => expect(onSubmitMock).toHaveBeenCalledTimes(1));
+      await userEvent.click(screen.getByRole('button', { name: /save/i }));
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
       expect(onSubmitMock).toHaveBeenCalledWith(playlist);
     });
 
@@ -142,8 +142,8 @@ describe('PlaylistForm', () => {
       it('then an alert should appear and nothing should be submitted', async () => {
         const { onSubmitMock } = getTestContext({ ...playlist, name: undefined });
 
-        fireEvent.submit(screen.getByRole('button', { name: /save/i }));
-        expect(await screen.findAllByRole('alert')).toHaveLength(1);
+        await userEvent.click(screen.getByRole('button', { name: /save/i }));
+        expect(screen.getAllByRole('alert')).toHaveLength(1);
         expect(onSubmitMock).not.toHaveBeenCalled();
       });
     });
@@ -153,8 +153,8 @@ describe('PlaylistForm', () => {
         const { onSubmitMock } = getTestContext(playlist);
 
         await userEvent.clear(screen.getByRole('textbox', { name: /playlist interval/i }));
-        fireEvent.submit(screen.getByRole('button', { name: /save/i }));
-        expect(await screen.findAllByRole('alert')).toHaveLength(1);
+        await userEvent.click(screen.getByRole('button', { name: /save/i }));
+        expect(screen.getAllByRole('alert')).toHaveLength(1);
         expect(onSubmitMock).not.toHaveBeenCalled();
       });
     });

public/app/features/playlist/PlaylistForm.tsx

@@ -70,7 +70,7 @@ export const PlaylistForm: FC<PlaylistFormProps> = ({ onSubmit, playlist }) => {
               </div>
 
               <HorizontalGroup>
-                <Button variant="primary" disabled={isDisabled}>
+                <Button type="submit" variant="primary" disabled={isDisabled}>
                   Save
                 </Button>
                 <LinkButton variant="secondary" href={`${config.appSubUrl}/playlists`}>