chore(lint): Updating to latest eslint with typescript and enabling some rules that we can. Also fixing issues with the project after update

packages/cli/config/eslint.backend.js

@@ -34,12 +34,12 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
+    lib: ['DOM', 'DOM.Iterable', 'ScriptHost', 'ES2020', 'ESNext.Promise'],
   },
   ignorePatterns: ['.eslintrc.js', '**/dist/**', '**/dist-types/**'],
   rules: {
-    // TODO(Rugvip): We need to bump @typescript-eslint to v4 to enable these
-    '@typescript-eslint/no-shadow': 0,
-    '@typescript-eslint/no-redeclare': 0,
+    '@typescript-eslint/no-shadow': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
 
     'no-console': 0, // Permitted in console programs
     'new-cap': ['error', { capIsNew: false }], // Because Express constructs things e.g. like 'const r = express.Router()'
@@ -79,6 +79,13 @@ module.exports = {
     ],
   },
   overrides: [
+    {
+      files: ['**/*.ts?(x)'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-undef': 'off',
+      },
+    },
     {
       files: ['*.test.*', 'src/setupTests.*', 'dev/**'],
       rules: {

packages/cli/config/eslint.js

@@ -26,13 +26,17 @@ module.exports = {
     'plugin:monorepo/recommended',
   ],
   parser: '@typescript-eslint/parser',
-  plugins: ['import'],
+  plugins: ['import', 'react'],
   env: {
     jest: true,
   },
   parserOptions: {
     ecmaVersion: 2018,
+    ecmaFeatures: {
+      jsx: true,
+    },
     sourceType: 'module',
+    lib: ['DOM', 'DOM.Iterable', 'ScriptHost', 'ES2020', 'ESNext.Promise'],
   },
   settings: {
     react: {
@@ -41,10 +45,9 @@ module.exports = {
   },
   ignorePatterns: ['.eslintrc.js', '**/dist/**', '**/dist-types/**'],
   rules: {
-    // TODO(Rugvip): We need to bump @typescript-eslint to v4 to enable these
-    '@typescript-eslint/no-shadow': 0,
-    '@typescript-eslint/no-redeclare': 0,
-
+    '@typescript-eslint/no-shadow': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
+    'no-undef': 'off',
     'import/newline-after-import': 'error',
     'import/no-duplicates': 'warn',
     'import/no-extraneous-dependencies': [
@@ -90,6 +93,8 @@ module.exports = {
       rules: {
         // Default to not enforcing prop-types in typescript
         'react/prop-types': 0,
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-undef': 'off',
       },
     },
     {

packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx

@@ -40,6 +40,21 @@ const nestedListStyle = (theme: Theme) =>
     },
   });
 
+interface StyleProps extends WithStyles {
+  children?: React.ReactNode;
+}
+// Sub Components
+const StyledList = withStyles(
+  listStyle,
+)(({ classes, children }: StyleProps) => (
+  <MetadataList classes={classes}>{children}</MetadataList>
+));
+const StyledNestedList = withStyles(
+  nestedListStyle,
+)(({ classes, children }: StyleProps) => (
+  <MetadataList classes={classes}>{children}</MetadataList>
+));
+
 function renderList(list: Array<any>, nested?: boolean) {
   const values = list.map((item: any, index: number) => (
     <MetadataListItem key={index}>{toValue(item)}</MetadataListItem>
@@ -100,30 +115,10 @@ function toValue(
 
   return <Fragment>{value}</Fragment>;
 }
-
-function mapToItems(info: { [key: string]: string }, options: any) {
-  return Object.keys(info).map(key => (
-    <TableItem key={key} title={key} value={info[key]} options={options} />
-  ));
-}
-
-interface StyleProps extends WithStyles {
-  children?: React.ReactNode;
-}
-// Sub Components
-const StyledList = withStyles(
-  listStyle,
-)(({ classes, children }: StyleProps) => (
-  <MetadataList classes={classes}>{children}</MetadataList>
-));
-const StyledNestedList = withStyles(
-  nestedListStyle,
-)(({ classes, children }: StyleProps) => (
-  <MetadataList classes={classes}>{children}</MetadataList>
-));
 const ItemValue = ({ value, options }: { value: any; options: any }) => (
   <Fragment>{toValue(value, options)}</Fragment>
 );
+
 const TableItem = ({
   title,
   value,
@@ -146,6 +141,12 @@ const TableItem = ({
   );
 };
 
+function mapToItems(info: { [key: string]: string }, options: any) {
+  return Object.keys(info).map(key => (
+    <TableItem key={key} title={key} value={info[key]} options={options} />
+  ));
+}
+
 type Props = {
   metadata: { [key: string]: any };
   dense?: boolean;

packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -26,6 +26,21 @@ type State = {
   errorInfo?: ErrorInfo;
 };
 
+type EProps = {
+  error?: Error;
+  slackChannel?: string;
+  children?: React.ReactNode;
+};
+
+const Error = ({ slackChannel }: EProps) => {
+  return (
+    <div role="alert">
+      Something went wrong here.{' '}
+      {slackChannel && <>Please contact {slackChannel} for help.</>}
+    </div>
+  );
+};
+
 export const ErrorBoundary: ComponentClass<
   Props,
   State
@@ -56,18 +71,3 @@ export const ErrorBoundary: ComponentClass<
     return <Error error={error} slackChannel={slackChannel} />;
   }
 };
-
-type EProps = {
-  error?: Error;
-  slackChannel?: string;
-  children?: React.ReactNode;
-};
-
-const Error = ({ slackChannel }: EProps) => {
-  return (
-    <div role="alert">
-      Something went wrong here.{' '}
-      {slackChannel && <>Please contact {slackChannel} for help.</>}
-    </div>
-  );
-};