[VTAdmin] Update react-scripts, postcss

web/vtadmin/craco.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     style: {
-        postcss: {
+        postcssOptions: {
             plugins: [
                 require('tailwindcss'),
                 // Required for tailwindcss

web/vtadmin/package.json

@@ -25,17 +25,20 @@
     "highcharts-react-official": "^3.0.0",
     "history": "^5.0.0",
     "lodash-es": "^4.17.20",
-    "postcss": "^7.0.39",
+    "postcss": "^8.4.5",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-preset-env": "^7.2.0",
     "query-string": "^6.14.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-query": "^3.5.9",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
     "react-tiny-popover": "^6.0.5",
     "react-toastify": "^8.1.0",
     "sass": "^1.43.4",
     "source-map-explorer": "^2.5.2",
+    "svgo": "^2.8.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "typescript": "^4.5.4",
     "web-vitals": "^0.2.4"

web/vtadmin/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/vtadmin/src/api/http.test.ts

@@ -17,7 +17,13 @@ import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 
 import * as api from './http';
-import { HTTP_RESPONSE_NOT_OK_ERROR, MALFORMED_HTTP_RESPONSE_ERROR } from '../errors/errorTypes';
+import {
+    HttpFetchError,
+    HttpResponseNotOkError,
+    HTTP_RESPONSE_NOT_OK_ERROR,
+    MalformedHttpResponseError,
+    MALFORMED_HTTP_RESPONSE_ERROR,
+} from '../errors/errorTypes';
 import * as errorHandler from '../errors/errorHandler';
 
 jest.mock('../errors/errorHandler');
@@ -111,7 +117,8 @@ describe('api/http', () => {
 
             try {
                 await api.fetchTablets();
-            } catch (e) {
+            } catch (error) {
+                let e: HttpResponseNotOkError = error as HttpResponseNotOkError;
                 /* eslint-disable jest/no-conditional-expect */
                 expect(e.name).toEqual(HTTP_RESPONSE_NOT_OK_ERROR);
                 expect(e.message).toEqual('[status 500] /api/tablets: oh_no something went wrong');
@@ -135,7 +142,8 @@ describe('api/http', () => {
 
             try {
                 await api.vtfetch(endpoint);
-            } catch (e) {
+            } catch (error) {
+                let e: MalformedHttpResponseError = error as MalformedHttpResponseError;
                 /* eslint-disable jest/no-conditional-expect */
                 expect(e.name).toEqual(MALFORMED_HTTP_RESPONSE_ERROR);
                 expect(e.message).toEqual('[status 504] /api/tablets: Unexpected token < in JSON at position 0');
@@ -154,7 +162,8 @@ describe('api/http', () => {
 
             try {
                 await api.vtfetch(endpoint);
-            } catch (e) {
+            } catch (error) {
+                let e: MalformedHttpResponseError = error as MalformedHttpResponseError;
                 /* eslint-disable jest/no-conditional-expect */
                 expect(e.name).toEqual(MALFORMED_HTTP_RESPONSE_ERROR);
                 /* eslint-enable jest/no-conditional-expect */
@@ -207,7 +216,8 @@ describe('api/http', () => {
 
                 try {
                     await api.vtfetch(endpoint);
-                } catch (e) {
+                } catch (error) {
+                    let e: HttpFetchError = error as HttpFetchError;
                     /* eslint-disable jest/no-conditional-expect */
                     expect(e.message).toEqual(
                         'Invalid fetch credentials property: nope. Must be undefined or one of omit, same-origin, include'
@@ -237,7 +247,8 @@ describe('api/http', () => {
                     extract: (res) => res.result.foos,
                     transform: (e) => null, // doesn't matter
                 });
-            } catch (e) {
+            } catch (error) {
+                let e: HttpFetchError = error as HttpFetchError;
                 /* eslint-disable jest/no-conditional-expect */
                 expect(e.message).toMatch('expected entities to be an array, got null');
 

web/vtadmin/src/components/dataTable/PaginationNav.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

web/vtadmin/src/components/routes/Tablets.test.tsx

@@ -86,7 +86,7 @@ describe('Tablets', () => {
         test.each(tests.map(Object.values))(
             '%s',
             (name: string, filter: string, tablets: pb.Tablet[], expected: { [k: string]: unknown }[]) => {
-                const result = formatRows(tablets, filter);
+                const result = formatRows(tablets, [], filter);
                 expect(result).toMatchObject(expected);
             }
         );

web/vtadmin/src/hooks/api.test.tsx

@@ -173,6 +173,7 @@ describe('useWorkflow', () => {
         );
 
         // Execute a useWorkflows query to populate the query cache.
+        // eslint-disable-next-line testing-library/render-result-naming-convention
         const useWorkflowsCall = renderHook(() => api.useWorkflows(), { wrapper });
         await useWorkflowsCall.waitFor(() => useWorkflowsCall.result.current.isSuccess);
 

web/vtadmin/src/hooks/useURLPagination.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

web/vtadmin/src/util/tabletDebugVars.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

web/vtadmin/src/util/tokenize.test.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Token, tokenizeSearch, SearchToken } from './tokenize';
+import { Token, tokenizeSearch, SearchToken, SearchTokenTypes } from './tokenize';
 
 describe('tokenize', () => {
     describe('tokenizeSearch', () => {
@@ -25,34 +25,34 @@ describe('tokenize', () => {
             {
                 name: 'parses fuzzy strings',
                 input: 'hello',
-                expected: [{ type: 'fuzzy', value: 'hello' }],
+                expected: [{ type: SearchTokenTypes.FUZZY, value: 'hello' }],
             },
             {
                 name: 'parses exact strings',
                 input: '"hello"',
-                expected: [{ type: 'exact', value: 'hello' }],
+                expected: [{ type: SearchTokenTypes.EXACT, value: 'hello' }],
             },
             {
                 name: 'parses key/values',
                 input: 'hello:moon',
-                expected: [{ type: 'keyValue', key: 'hello', value: 'moon' }],
+                expected: [{ type: SearchTokenTypes.KEY_VALUE, key: 'hello', value: 'moon' }],
             },
             {
                 name: 'parses multiple tokens',
                 input: 'hello "moon" goodbye:world',
                 expected: [
-                    { type: 'fuzzy', value: 'hello' },
-                    { type: 'exact', value: 'moon' },
-                    { type: 'keyValue', key: 'goodbye', value: 'world' },
+                    { type: SearchTokenTypes.FUZZY, value: 'hello' },
+                    { type: SearchTokenTypes.EXACT, value: 'moon' },
+                    { type: SearchTokenTypes.KEY_VALUE, key: 'goodbye', value: 'world' },
                 ],
             },
             {
                 name: 'parses numbers and symbols',
                 input: 'hello-123 "moon-456" goodbye:world-789',
                 expected: [
-                    { type: 'fuzzy', value: 'hello-123' },
-                    { type: 'exact', value: 'moon-456' },
-                    { type: 'keyValue', key: 'goodbye', value: 'world-789' },
+                    { type: SearchTokenTypes.FUZZY, value: 'hello-123' },
+                    { type: SearchTokenTypes.EXACT, value: 'moon-456' },
+                    { type: SearchTokenTypes.KEY_VALUE, key: 'goodbye', value: 'world-789' },
                 ],
             },
         ];

web/vtadmin/src/util/tokenize.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-interface Token {
+export interface Token {
     matches: string[];
     token: string;
     type: string;