Upgrade Web UI to Create-React-App 4 and React 17 (#1105)

* Upgrade to CRA 4.0.3

* Try to fix tests. No lucky

* Fix new ESLint errors

* Fix JS tests and remove unwanted dependency. (#1106)

* Fix tests

* Fix lint

* Remove React v16 workaround (fixed in v17)

* Force eslint to break on warnings

* Lint now needs to be called explicitly in the pipeline

Co-authored-by: Yash Jipkate <34203227+YashJipkate@users.noreply.github.com>

ui/src/dialogs/AddToPlaylistDialog.test.js

@@ -7,11 +7,11 @@ import { AddToPlaylistDialog } from './AddToPlaylistDialog'
 describe('AddToPlaylistDialog', () => {
   afterEach(cleanup)
 
-  let mockData = [
+  const mockData = [
     { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
     { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
   ]
-  let mockIndexedData = {
+  const mockIndexedData = {
     'sample-id1': {
       id: 'sample-id1',
       name: 'sample playlist 1',
@@ -23,20 +23,19 @@ describe('AddToPlaylistDialog', () => {
       owner: 'admin',
     },
   }
-  let selectedIds = ['song-1', 'song-2']
+  const selectedIds = ['song-1', 'song-2']
 
   it('adds distinct songs to already existing playlists', async () => {
-    let mockDataProvider = {
-      getList: jest.fn(() =>
-        Promise.resolve({ data: mockData, total: mockData.length })
-      ),
-      getOne: jest.fn(() =>
-        Promise.resolve({ data: { id: 'song-3' }, total: 1 })
-      ),
-      create: jest.fn(() =>
-        Promise.resolve({ data: { id: 'created-id', name: 'created-name' } })
-      ),
+    const mockDataProvider = {
+      getList: jest
+        .fn()
+        .mockResolvedValue({ data: mockData, total: mockData.length }),
+      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: jest.fn().mockResolvedValue({
+        data: { id: 'created-id', name: 'created-name' },
+      }),
     }
+
     const testutils = render(
       <DataProviderContext.Provider value={mockDataProvider}>
         <TestContext
@@ -101,19 +100,16 @@ describe('AddToPlaylistDialog', () => {
     })
   })
 
-  let mockDataProvider = {
-    getList: jest.fn(() =>
-      Promise.resolve({ data: mockData, total: mockData.length })
-    ),
-    getOne: jest.fn(() =>
-      Promise.resolve({ data: { id: 'song-3' }, total: 1 })
-    ),
-    create: jest.fn(() =>
-      Promise.resolve({ data: { id: 'created-id1', name: 'created-name' } })
-    ),
-  }
-
   it('adds distinct songs to a new playlist', async () => {
+    const mockDataProvider = {
+      getList: jest
+        .fn()
+        .mockResolvedValue({ data: mockData, total: mockData.length }),
+      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: jest.fn().mockResolvedValue({
+        data: { id: 'created-id1', name: 'created-name' },
+      }),
+    }
     const testutils = render(
       <DataProviderContext.Provider value={mockDataProvider}>
         <TestContext
@@ -172,6 +168,15 @@ describe('AddToPlaylistDialog', () => {
   })
 
   it('adds distinct songs to multiple new playlists', async () => {
+    const mockDataProvider = {
+      getList: jest
+        .fn()
+        .mockResolvedValue({ data: mockData, total: mockData.length }),
+      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: jest.fn().mockResolvedValue({
+        data: { id: 'created-id1', name: 'created-name' },
+      }),
+    }
     const testutils = render(
       <DataProviderContext.Provider value={mockDataProvider}>
         <TestContext

ui/src/dialogs/SelectPlaylistInput.test.js

@@ -27,9 +27,9 @@ describe('SelectPlaylistInput', () => {
     }
 
     const mockDataProvider = {
-      getList: jest.fn(() =>
-        Promise.resolve({ data: mockData, total: mockData.length })
-      ),
+      getList: jest
+        .fn()
+        .mockResolvedValue({ data: mockData, total: mockData.length }),
     }
 
     render(