Update eslint and realted packages, adjust config, and fix new errors

frontend/.eslintrc

@@ -21,11 +21,16 @@
       "jsx": true
     },
     "ecmaVersion": 2017,
-    "sourceType": "module"
+    "extraFileExtensions": [".json"],
+    "sourceType": "module",
+    "tsconfigRootDir": "./"
   },
   "plugins": ["react", "react-hooks", "@typescript-eslint"],
   "rules": {
-    "camelcase": 2,
+    "camelcase": [
+      "error",
+      { "allow": ["UNSAFE_componentWillReceiveProps", "UNSAFE_componentWillMount"] }
+    ],
     "consistent-return": 0,
     "consistent-this": [1, "that"],
     "curly": [2, "all"],
@@ -45,6 +50,7 @@
     "no-else-return": ["error"],
     "no-global-strict": 0,
     "no-irregular-whitespace": ["error"],
+    "no-prototype-builtins": 0, // Disable with exlint v6 update.
     "no-shadow": ["error"],
     "no-underscore-dangle": 0,
     "@typescript-eslint/no-unused-vars": [
@@ -68,7 +74,8 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/display-name": 0,
-    "react/no-unescaped-entities": 0
+    "react/no-unescaped-entities": 0,
+    "require-atomic-updates": 0
   },
   "settings": {
     "import/extensions": [".js", ".jsx"],

frontend/.vscode/settings.json

@@ -16,17 +16,8 @@
     "editor.formatOnSave": true
   },
 
-  "eslint.validate": [
-    { "language": "javascript", "autoFix": true },
-    { "language": "javascriptreact", "autoFix": true },
-    { "language": "typescript", "autoFix": true },
-    { "language": "typescriptreact", "autoFix": true },
-    { "language": "json", "autoFix": true }
-  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "json"],
   "eslint.enable": true,
-  // legacy support
-  "eslint.autoFixOnSave": true,
-
   "javascript.validate.enable": false,
   "debug.node.autoAttach": "on",
   "typescript.tsdk": "node_modules/typescript/lib",

frontend/__tests__/components/graphs/utils.spec.ts

@@ -12,7 +12,10 @@ const RANGE_VECTOR_RESPONSE: PrometheusResponse = {
     result: [
       {
         metric: { testMetric: 'test-0' },
-        values: [[1, '123.4'], [2, '5678.9']],
+        values: [
+          [1, '123.4'],
+          [2, '5678.9'],
+        ],
       },
     ],
   },

frontend/__tests__/components/storage-class-form.spec.tsx

@@ -9,9 +9,7 @@ import {
 } from '../../public/components/storage-class-form';
 
 describe(ConnectedStorageClassForm.displayName, () => {
-  const Component: React.ComponentType<
-    StorageClassFormProps
-  > = ConnectedStorageClassForm.WrappedComponent as any;
+  const Component: React.ComponentType<StorageClassFormProps> = ConnectedStorageClassForm.WrappedComponent as any;
   let wrapper: ShallowWrapper<StorageClassFormProps, StorageClassFormState>;
   let onClose: Spy;
   let watchK8sList: Spy;

frontend/__tests__/components/utils/datetime.spec.ts

@@ -93,7 +93,7 @@ describe('fromNow', () => {
 
 describe('isValid', () => {
   it('rejects non-dates', () => {
-    expect(isValid('hello' as (any))).toEqual(false);
+    expect(isValid('hello' as any)).toEqual(false);
   });
 
   it('accepts 0 epoch date', () => {

frontend/__tests__/components/utils/page-heading.spec.tsx

@@ -16,7 +16,10 @@ describe(BreadCrumbs.displayName, () => {
   let breadcrumbs: BreadCrumbsProps['breadcrumbs'];
 
   beforeEach(() => {
-    breadcrumbs = [{ name: 'pods', path: '/pods' }, { name: 'containers', path: '/pods' }];
+    breadcrumbs = [
+      { name: 'pods', path: '/pods' },
+      { name: 'containers', path: '/pods' },
+    ];
     wrapper = shallow(<BreadCrumbs breadcrumbs={breadcrumbs} />);
   });
 

frontend/integration-tests/.eslintrc

@@ -1,13 +1,11 @@
 {
   "env": {
     "node": true,
-    "es6": true,
+    "es6": true
   },
-  "extends": [
-    "../.eslintrc"
-  ],
+  "extends": ["../.eslintrc"],
   "globals": {},
   "rules": {
-    "no-console": ["error", { allow: ["warn", "error", "log", "info"] }],
+    "no-console": ["error", { "allow": ["warn", "error", "log", "info"] }]
   }
 }

frontend/integration-tests/protractor.conf.ts

@@ -212,10 +212,12 @@ export const config = {
 };
 
 export const checkLogs = async () =>
-  (await browser
-    .manage()
-    .logs()
-    .get('browser')).map((log) => {
+  (
+    await browser
+      .manage()
+      .logs()
+      .get('browser')
+  ).map((log) => {
     browserLogs.push(log);
     return log;
   });

frontend/integration-tests/tests/crud.scenario.ts

@@ -47,7 +47,10 @@ describe('Kubernetes resource CRUD operations', () => {
     .set('user.openshift.io~v1~Group', { kind: 'user.openshift.io~v1~Group', namespaced: false });
   const serviceCatalogObjs = OrderedMap<string, { kind: string; namespaced?: boolean }>().set(
     'clusterservicebrokers',
-    { kind: 'servicecatalog.k8s.io~v1beta1~ClusterServiceBroker', namespaced: false },
+    {
+      kind: 'servicecatalog.k8s.io~v1beta1~ClusterServiceBroker',
+      namespaced: false,
+    },
   );
   let testObjs = browser.params.openshift === 'true' ? k8sObjs.merge(openshiftObjs) : k8sObjs;
   testObjs =

frontend/package.json

@@ -181,7 +181,7 @@
     "monaco-editor-core": "0.14.0",
     "monaco-editor-webpack-plugin": "^1.7.0",
     "node-sass": "4.12.x",
-    "prettier": "1.17.1",
+    "prettier": "1.19.1",
     "protractor": "5.4.x",
     "protractor-fail-fast": "3.x",
     "protractor-jasmine2-screenshot-reporter": "0.5.x",

frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/breakdown-card/breakdown-chart.tsx

@@ -27,7 +27,10 @@ const LinkableLegend: React.FC<LinkableLegendProps> = React.memo((props: Linkabl
       <ChartLabel
         {...props}
         lineHeight={1.2}
-        style={[{ ...datum.labels, fontSize: 9 }, { fill: 'black', fontSize: 8 }]}
+        style={[
+          { ...datum.labels, fontSize: 9 },
+          { fill: 'black', fontSize: 8 },
+        ]}
       />
     </Tooltip>
   );

frontend/packages/console-app/src/components/dashboards-page/status.ts

@@ -38,7 +38,8 @@ export const getControlPlaneComponentHealth = (
   if (
     error ||
     (response &&
-      (response.status === 'success' && _.isNil(_.get(response, 'data.result[0].value[1]'))))
+      response.status === 'success' &&
+      _.isNil(_.get(response, 'data.result[0].value[1]')))
   ) {
     return { state: HealthState.UNKNOWN, message: 'Not available' };
   }

frontend/packages/console-app/src/components/nodes/NodesPage.tsx

@@ -103,7 +103,10 @@ const filters = [
     type: 'node-status',
     selected: ['Ready', 'Not Ready'],
     reducer: nodeStatus,
-    items: [{ id: 'Ready', title: 'Ready' }, { id: 'Not Ready', title: 'Not Ready' }],
+    items: [
+      { id: 'Ready', title: 'Ready' },
+      { id: 'Not Ready', title: 'Not Ready' },
+    ],
   },
 ];
 

frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx

@@ -239,7 +239,7 @@ type StatusGroup = {
     filterType?: string;
     statusIDs: string[];
     count: number;
-  }
+  };
 };
 
 export type StatusGroupMapper = (

frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx

@@ -53,9 +53,9 @@ const getResourceToWatch = (model: K8sKind, namespace: string) => ({
   prop: 'k8sResources',
 });
 
-const PopoverBodyInternal: React.FC<
-  DashboardItemProps & PopoverBodyProps & PopoverReduxProps
-> = React.memo((props) => {
+const PopoverBodyInternal: React.FC<DashboardItemProps &
+  PopoverBodyProps &
+  PopoverReduxProps> = React.memo((props) => {
   const {
     humanize,
     consumers,

frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx

@@ -54,7 +54,7 @@ class ResourceDropdown extends React.Component<ResourceDropdownProps, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: ResourceDropdownProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: ResourceDropdownProps) {
     const { loaded, loadError, autoSelect, selectedKey, placeholder, onLoad } = nextProps;
 
     if (!loaded) {

frontend/packages/console-shared/src/components/form-utils/FormFooter.tsx

@@ -25,7 +25,7 @@ const FormFooter: React.FC<FormFooterProps> = ({
     <ActionGroup className="pf-c-form">
       <Button
         type={handleSubmit ? 'button' : 'submit'}
-        {...handleSubmit && { onClick: handleSubmit }}
+        {...(handleSubmit && { onClick: handleSubmit })}
         variant={ButtonVariant.primary}
         isDisabled={disableSubmit}
       >

frontend/packages/dev-console/src/components/pipelineruns/PipelineRunsResourceList.tsx

@@ -5,9 +5,10 @@ import { PipelineRunModel } from '../../models';
 import { runFilters } from '../pipelines/detail-page-tabs/PipelineRuns';
 import PipelineRunsList from './list-page/PipelineRunList';
 
-const PipelineRunsResourceList: React.FC<
-  Omit<React.ComponentProps<typeof ListPage>, 'canCreate' | 'kind' | 'ListComponent' | 'rowFilters'>
-> = (props) => {
+const PipelineRunsResourceList: React.FC<Omit<
+  React.ComponentProps<typeof ListPage>,
+  'canCreate' | 'kind' | 'ListComponent' | 'rowFilters'
+>> = (props) => {
   return (
     <ListPage
       {...props}

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx

@@ -33,7 +33,7 @@ class PipelineRunLogs extends React.Component<PipelineRunLogsProps, PipelineRunL
     this.setState({ activeItem });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.obj !== nextProps.obj) {
       const { obj, activeTask } = this.props;
       const taskRunFromYaml = _.get(obj, ['status', 'taskRuns'], {});

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineTaskLogs.tsx

@@ -84,7 +84,7 @@ class PipelineTaskLogs extends React.Component<PipelineTaskLogsProps, PipelineTa
     this.sizeContainer();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!_.isEqual(this.props, nextProps)) {
       const pod: Pod = _.get(nextProps, ['obj', 'data'], {});
       const { containers, stillFetching } = getRenderContainers(pod);

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx

@@ -16,32 +16,31 @@ const PipelineDetails: React.FC<PipelineDetailsProps> = ({ obj: pipeline }) => (
       <div className="col-sm-6">
         <ResourceSummary resource={pipeline} />
       </div>
-      {pipeline.spec &&
-        (pipeline.spec.tasks && (
-          <div className="col-sm-6">
-            <SectionHeading text="Tasks" />
-            <dl>
-              {pipeline.spec.tasks.map((task) => {
-                const resourceModel = getResourceModelFromTask(task);
-                return (
-                  <React.Fragment key={task.name}>
-                    <dt>Name: {task.name}</dt>
-                    <dd>
-                      Ref:{' '}
-                      <ResourceLink
-                        kind={referenceForModel(resourceModel)}
-                        name={task.taskRef.name}
-                        namespace={pipeline.metadata.namespace}
-                        title={task.taskRef.name}
-                        inline
-                      />
-                    </dd>
-                  </React.Fragment>
-                );
-              })}
-            </dl>
-          </div>
-        ))}
+      {pipeline.spec && pipeline.spec.tasks && (
+        <div className="col-sm-6">
+          <SectionHeading text="Tasks" />
+          <dl>
+            {pipeline.spec.tasks.map((task) => {
+              const resourceModel = getResourceModelFromTask(task);
+              return (
+                <React.Fragment key={task.name}>
+                  <dt>Name: {task.name}</dt>
+                  <dd>
+                    Ref:{' '}
+                    <ResourceLink
+                      kind={referenceForModel(resourceModel)}
+                      name={task.taskRef.name}
+                      namespace={pipeline.metadata.namespace}
+                      title={task.taskRef.name}
+                      inline
+                    />
+                  </dd>
+                </React.Fragment>
+              );
+            })}
+          </dl>
+        </div>
+      )}
     </div>
   </div>
 );

frontend/packages/dev-console/src/components/project-access/project-access-form-utils-types.ts

@@ -20,7 +20,7 @@ export interface UserRole {
   subjects: [
     {
       name: string;
-    }
+    },
   ];
 }
 

frontend/packages/dev-console/src/components/projects/details/AllProjectsDetailList.tsx

@@ -29,4 +29,6 @@ export const AllProjectsDetailList: React.FC<UseActiveNamespaceProps> = ({ activ
   );
 };
 
+// TODO Figure out why this breaks eslint rules-of-hooks even though it is not a hook
+// eslint-disable-next-line react-hooks/rules-of-hooks
 export default useActiveNamespace(AllProjectsDetailList);

frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx

@@ -47,4 +47,6 @@ export const ProjectDetailsPage: React.FC<UseActiveNamespaceProps> = ({
   );
 };
 
+// TODO Figure out why this breaks eslint rules-of-hooks even though it is not a hook
+// eslint-disable-next-line react-hooks/rules-of-hooks
 export default useActiveNamespace(ProjectDetailsPage);