Upgrade react-scripts to 4.0.0

ui/.eslintrc.js

@@ -18,8 +18,9 @@ module.exports = {
  rules: {
  'prettier/prettier': 'error',
 
- // will rely on TypeScript compile time checks instead
+ // rely on TypeScript compile time definitions & checks instead of propTypes and defaultProps
  'react/prop-types': 'off',
+ 'react/require-default-props': 'off',
 
  'import/no-extraneous-dependencies': [
  'error',

ui/.postcssrc.js

@@ -1,5 +1,6 @@
 /* eslint @typescript-eslint/no-var-requires: 0 */
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const tailwindcss = require('tailwindcss');
 
 module.exports = {

ui/package.json

@@ -50,15 +50,16 @@
  "@types/react-dom": "^17.0.0",
  "@types/react-modal": "^3.10.6",
  "@types/yup": "^0.29.10",
- "eslint-config-airbnb-typescript": "^7.2.1",
+ "eslint-config-airbnb-typescript": "^12.0.0",
  "eslint-config-prettier": "^6.15.0",
  "eslint-plugin-eslint-comments": "^3.2.0",
  "eslint-plugin-prettier": "^3.1.4",
  "http-proxy-middleware": "^1.0.6",
  "npm-run-all": "^4.1.5",
+ "postcss": "^8.1.14",
  "postcss-cli": "^8.3.0",
  "prettier": "^2.2.0",
- "react-scripts": "3.4.4",
+ "react-scripts": "4.0.0",
  "tailwindcss": "^1.9.6",
  "typescript": "~3.9.7",
  "wait-on": "^5.2.0"

ui/src/client/useApiOperation.ts

@@ -1,4 +1,5 @@
 import { useCallback, useState, useEffect, useRef } from 'react';
+import { AxiosError } from 'axios';
 
 import { ApiCaller, RequestState } from './useApiQuery';
 
@@ -35,7 +36,7 @@ export default function useApiOperation<T>(requester: ApiCaller<T>): [() => void
  setRequestState({ called: true, loading: false, error: undefined, data: response.data });
  }
  })
- .catch((error) => {
+ .catch((error: AxiosError<T>) => {
  if (isMounted.current) {
  setRequestState({ called: true, loading: false, error, data: undefined });
  }

ui/src/client/useApiQuery.ts

@@ -55,7 +55,7 @@ export default function useApiQuery<T>(
  setRequestState({ called: true, loading: false, error: undefined, data: response.data });
  }
  })
- .catch((error) => {
+ .catch((error: AxiosError<T>) => {
  if (!isCancelled) {
  setRequestState({ called: true, loading: false, error, data: undefined });
  }

ui/src/components/Countdown.tsx

@@ -13,18 +13,40 @@ type Props = {
  onModify?: (notation: string, incOrDec: string) => void;
 };
 
-export default function Countdown({ targetDate, className = '', onModify }: Props): ReactElement {
- const duration = calcDuration(targetDate);
+type ModifiableTimeUnitProps = {
+ notation: string;
+ value: number;
+ onChange?: (notation: string, incOrDec: string) => void;
+};
 
+function ModifiableTimeUnit({
+ notation,
+ value,
+ onChange = (): void => {},
+}: ModifiableTimeUnitProps): ReactElement {
  return (
- <Tooltip
- placement="left"
- content={<TooltipOverlay>{`Expiration: ${moment(targetDate).format('LLL')}`}</TooltipOverlay>}
- >
- <div className={className}>
- <FormatDuration duration={duration} onModify={onModify} />
- </div>
- </Tooltip>
+ <span className="inline-flex flex-col items-center">
+ <span>
+ {`${value}`.padStart(2, '0')}
+ {notation}
+ </span>
+ <span className="inline-flex text-sm normal-case select-none">
+ <PlusCircle
+ className="cursor-pointer mr-2"
+ size={12}
+ onClick={(): void => {
+ onChange(notation, 'inc');
+ }}
+ />
+ <MinusCircle
+ className="cursor-pointer"
+ size={12}
+ onClick={(): void => {
+ onChange(notation, 'dec');
+ }}
+ />
+ </span>
+ </span>
  );
 }
 
@@ -65,39 +87,17 @@ function FormatDuration({ duration, onModify }: FormatDurationProps): ReactEleme
  );
 }
 
-type ModifiableTimeUnitProps = {
- notation: string;
- value: number;
- onChange?: (notation: string, incOrDec: string) => void;
-};
+export default function Countdown({ targetDate, className = '', onModify }: Props): ReactElement {
+ const duration = calcDuration(targetDate);
 
-function ModifiableTimeUnit({
- notation,
- value,
- onChange = (): void => {},
-}: ModifiableTimeUnitProps): ReactElement {
  return (
- <span className="inline-flex flex-col items-center">
- <span>
- {`${value}`.padStart(2, '0')}
- {notation}
- </span>
- <span className="inline-flex text-sm normal-case select-none">
- <PlusCircle
- className="cursor-pointer mr-2"
- size={12}
- onClick={(): void => {
- onChange(notation, 'inc');
- }}
- />
- <MinusCircle
- className="cursor-pointer"
- size={12}
- onClick={(): void => {
- onChange(notation, 'dec');
- }}
- />
- </span>
- </span>
+ <Tooltip
+ placement="left"
+ content={<TooltipOverlay>{`Expiration: ${moment(targetDate).format('LLL')}`}</TooltipOverlay>}
+ >
+ <div className={className}>
+ <FormatDuration duration={duration} onModify={onModify} />
+ </div>
+ </Tooltip>
  );
 }

ui/src/components/ErrorBoundary.tsx

@@ -13,8 +13,7 @@ type PropsWithLocation = Props & {
 };
 
 type State = {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- error: any;
+ error: Error | null;
  errorLocation: Location | null;
 };
 
@@ -35,8 +34,7 @@ class ErrorBoundary extends Component<PropsWithLocation, State> {
  return null;
  }
 
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- componentDidCatch(error: any): void {
+ componentDidCatch(error: Error): void {
  const { location } = this.props;
  this.setState({ error, errorLocation: location });
  }

ui/src/components/StackRoxLogo.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-const StackRoxLogo = forwardRef<SVGSVGElement, {}>((_, ref) => (
+const StackRoxLogo = forwardRef<SVGSVGElement, never>((_, ref) => (
  <svg
  className="logo fill-current text-primary"
  xmlns="http://www.w3.org/2000/svg"

ui/src/containers/ClusterInfoPage/ClusterLogs.tsx

@@ -30,7 +30,7 @@ export default function ClusterLogs({ clusterId }: Props): ReactElement {
 
  const logEntryHeaderBorder = '-'.repeat(logEntry.Name.length);
  const logText = atob(logEntry.Body);
- return `${logEntry.Name}\n${logEntryHeaderBorder}\n${logEntry.Message}\n${logText}`;
+ return `${logEntry.Name}\n${logEntryHeaderBorder}\n${logEntry.Message || ''}\n${logText}`;
  }).join('\n\n');
 
  return (

ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx

@@ -7,6 +7,7 @@ import configuration from 'client/configuration';
 import useApiOperation from 'client/useApiOperation';
 import Modal from 'components/Modal';
 import InformationalModal from 'components/InformationalModal';
+import assertDefined from 'utils/assertDefined';
 
 const clusterService = new ClusterServiceApi(configuration);
 
@@ -18,10 +19,12 @@ type Props = {
 
 export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Props): ReactElement {
  const [deleteCluster, { called, loading, error }] = useApiOperation(() => {
-if (!cluster.ID) throw new Error('Invalid state'); // should never happen, swagger definitions are too allowing
+assertDefined(cluster.ID); // swagger definitions are too permitting
  return clusterService._delete(cluster.ID); // eslint-disable-line no-underscore-dangle
  });
 
+ assertDefined(cluster.ID); // swagger definitions are too permitting
+
  if (!called) {
  // waiting for user confirmation
  const buttons = (

ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx

@@ -5,30 +5,26 @@ import configuration from 'client/configuration';
 import Modal from 'components/Modal';
 import useApiQuery from 'client/useApiQuery';
 import { X } from 'react-feather';
+import assertDefined from 'utils/assertDefined';
 
 const clusterService = new ClusterServiceApi(configuration);
 
-type Props = {
- cluster: V1Cluster;
- onClose: () => void;
+type ArtifactsListProps = {
+ artifacts: V1Artifact[];
 };
 
-export default function DownloadArtifactsModal({ cluster, onClose }: Props): ReactElement {
- const closeButton = (
- <button type="button" className="btn btn-base" onClick={onClose}>
- <X size={16} className="mr-2" /> Close
- </button>
- );
-
+function ArtifactsList({ artifacts }: ArtifactsListProps): ReactElement {
  return (
- <Modal
- isOpen
- onRequestClose={onClose}
- header={`Artifacts for ${cluster.ID}`}
- buttons={closeButton}
- >
- <Artifacts cluster={cluster} />
- </Modal>
+ <ul className="list-disc ml-5">
+ {artifacts.map((artifact) => (
+ <li key={artifact.Name}>
+ <a href={artifact.URL} className="underline text-blue-500">
+ {artifact.Name}
+ </a>{' '}
+ - {artifact.Description}
+ </li>
+ ))}
+ </ul>
  );
 }
 
@@ -63,21 +59,28 @@ function Artifacts({ cluster }: ArtifactsProps): ReactElement {
  return <p>There are no artifacts for this cluster.</p>;
 }
 
-type ArtifactsListProps = {
- artifacts: V1Artifact[];
+type Props = {
+ cluster: V1Cluster;
+ onClose: () => void;
 };
 
-function ArtifactsList({ artifacts }: ArtifactsListProps): ReactElement {
+export default function DownloadArtifactsModal({ cluster, onClose }: Props): ReactElement {
+ assertDefined(cluster.ID);
+
+ const closeButton = (
+ <button type="button" className="btn btn-base" onClick={onClose}>
+ <X size={16} className="mr-2" /> Close
+ </button>
+ );
+
  return (
- <ul className="list-disc ml-5">
- {artifacts.map((artifact) => (
- <li key={artifact.Name}>
- <a href={artifact.URL} className="underline text-blue-500">
- {artifact.Name}
- </a>{' '}
- - {artifact.Description}
- </li>
- ))}
- </ul>
+ <Modal
+ isOpen
+ onRequestClose={onClose}
+ header={`Artifacts for ${cluster.ID}`}
+ buttons={closeButton}
+ >
+ <Artifacts cluster={cluster} />
+ </Modal>
  );
 }

ui/src/containers/HomePage/LaunchPageSection.tsx

@@ -8,6 +8,7 @@ import PageSection from 'components/PageSection';
 import LinkCard from 'components/LinkCard';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
+import assertDefined from 'utils/assertDefined';
 
 const flavorService = new FlavorServiceApi(configuration);
 
@@ -24,17 +25,20 @@ function FlavorCards(): ReactElement {
  return <FullPageError message={error?.message || 'Unexpected server response'} />;
  }
 
- const cards = data.Flavors.map((flavor) => (
- <LinkCard
- key={flavor.ID}
- to={`launch/${flavor.ID}`}
- header={flavor.Name || 'Unnamed'}
- footer={<span className="capitalize">{flavor.Availability || 'Alpha'}</span>}
- className="m-2"
- >
- <p className="text-lg">{flavor.Description}</p>
- </LinkCard>
- ));
+ const cards = data.Flavors.map((flavor) => {
+ assertDefined(flavor.ID); // swagger definitions are too permitting
+ return (
+ <LinkCard
+ key={flavor.ID}
+ to={`launch/${flavor.ID}`}
+ header={flavor.Name || 'Unnamed'}
+ footer={<span className="capitalize">{flavor.Availability || 'Alpha'}</span>}
+ className="m-2"
+ >
+ <p className="text-lg">{flavor.Description}</p>
+ </LinkCard>
+ );
+ });
  return <>{cards}</>;
 }
 

ui/src/containers/HomePage/MyClustersPageSection.tsx

@@ -11,6 +11,7 @@ import LinkCard from 'components/LinkCard';
 import Lifespan from 'components/Lifespan';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
+import assertDefined from 'utils/assertDefined';
 
 const clusterService = new ClusterServiceApi(configuration);
 
@@ -50,6 +51,7 @@ function ClusterCards(): ReactElement {
  }
 
  const cards = clusters.map((cluster) => {
+ assertDefined(cluster.ID);
  return (
  <LinkCard
  key={cluster.ID}