Merge pull request #4210 from backstage/dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-4.14.0

chore(deps): bump @typescript-eslint/eslint-plugin from 3.10.1 to 4.14.0

packages/cli/config/eslint.backend.js

@@ -34,12 +34,12 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
+    lib: require('./tsconfig.json').compilerOptions.lib,
   },
   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

@@ -32,7 +32,11 @@ module.exports = {
   },
   parserOptions: {
     ecmaVersion: 2018,
+    ecmaFeatures: {
+      jsx: true,
+    },
     sourceType: 'module',
+    lib: require('./tsconfig.json').compilerOptions.lib,
   },
   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/cli/package.json

@@ -50,8 +50,8 @@
     "@types/start-server-webpack-plugin": "^2.2.0",
     "@types/webpack-env": "^1.15.2",
     "@types/webpack-node-externals": "^2.5.0",
-    "@typescript-eslint/eslint-plugin": "^v3.10.1",
-    "@typescript-eslint/parser": "^v3.10.1",
+    "@typescript-eslint/eslint-plugin": "^v4.14.0",
+    "@typescript-eslint/parser": "^v4.14.0",
     "@yarnpkg/lockfile": "^1.1.0",
     "bfj": "^7.0.2",
     "chalk": "^4.0.0",

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>
-  );
-};

packages/create-app/templates/default-app/packages/app/src/sidebar.tsx

@@ -20,25 +20,6 @@ import {
 } from '@backstage/core';
 import { SidebarSearch } from '@backstage/plugin-search';
 
-export const AppSidebar = () => (
-  <Sidebar>
-    <SidebarLogo />
-    <SidebarSearch />
-    <SidebarDivider />
-    {/* Global nav, not org-specific */}
-    <SidebarItem icon={HomeIcon} to="./" text="Home" />
-    <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-    <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
-    <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-    <SidebarDivider />
-    <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-    {/* End global nav */}
-    <SidebarDivider />
-    <SidebarSpace />
-    <SidebarDivider />
-    <SidebarSettings />
-  </Sidebar>
-);
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -72,3 +53,23 @@ const SidebarLogo = () => {
     </div>
   );
 };
+
+export const AppSidebar = () => (
+  <Sidebar>
+    <SidebarLogo />
+    <SidebarSearch />
+    <SidebarDivider />
+    {/* Global nav, not org-specific */}
+    <SidebarItem icon={HomeIcon} to="./" text="Home" />
+    <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
+    <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
+    <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+    <SidebarDivider />
+    <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+    {/* End global nav */}
+    <SidebarDivider />
+    <SidebarSpace />
+    <SidebarDivider />
+    <SidebarSettings />
+  </Sidebar>
+);