Merge pull request #9493 from vitessio/frances/update-react-scripts

[VTAdmin] Update react-scripts, postcss
vitessio · Jan 11, 2022 · c2ba091 · c2ba091
2 parents de0e3ce + 1a5380c
commit c2ba091
Show file tree

Hide file tree

Showing 12 changed files with 19,562 additions and 26,080 deletions.
diff --git a/web/vtadmin/craco.config.js b/web/vtadmin/craco.config.js
@@ -1,6 +1,6 @@
 module.exports = {
  style: {
- postcss: {
+ postcssOptions: {
  plugins: [
  require('tailwindcss'),
  // Required for tailwindcss

diff --git a/web/vtadmin/package-lock.json b/web/vtadmin/package-lock.json
diff --git a/web/vtadmin/package.json b/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"

diff --git a/web/vtadmin/postcss.config.js b/web/vtadmin/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/web/vtadmin/src/api/http.test.ts b/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');
 

diff --git a/web/vtadmin/src/components/dataTable/PaginationNav.test.tsx b/web/vtadmin/src/components/dataTable/PaginationNav.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

diff --git a/web/vtadmin/src/components/routes/Tablets.test.tsx b/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);
  }
  );

diff --git a/web/vtadmin/src/hooks/api.test.tsx b/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);
 

diff --git a/web/vtadmin/src/hooks/useURLPagination.test.tsx b/web/vtadmin/src/hooks/useURLPagination.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

diff --git a/web/vtadmin/src/util/tabletDebugVars.test.ts b/web/vtadmin/src/util/tabletDebugVars.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 /**
  * Copyright 2021 The Vitess Authors.
  *

diff --git a/web/vtadmin/src/util/tokenize.test.ts b/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' },
  ],
  },
  ];

diff --git a/web/vtadmin/src/util/tokenize.ts b/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;