Remove some lint exceptions

watargolla · Mar 12, 2020 · e156528 · e156528
1 parent 3814ba0
commit e156528
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 73 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -14,8 +14,6 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.3",
     "@types/zen-observable": "^0.8.0",
     "cross-env": "^7.0.0",

diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js
@@ -1,17 +1,6 @@
 module.exports = {
   rules: {
     'react/prop-types': 0,
-    '@typescript-eslint/no-unused-vars': 0,
-    'no-case-declarations': 0,
-    'no-param-reassign': 0,
     'jest/expect-expect': 0,
-    'react/jsx-boolean-value': 0,
-    'jest/no-commented-out-tests': 0,
-    'consistent-return': 0,
-    'no-nested-ternary': 0,
-    'react/sort-comp': 0,
-    'no-shadow': 0,
-    'no-else-return': 0,
-    'new-cap': 0,
   },
 };
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -17,9 +17,6 @@
     "@types/google-protobuf": "^3.7.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.3",
     "classnames": "^2.2.6",
     "rc-progress": "^2.5.2",
     "react": "^16.12.0",

diff --git a/packages/core/src/api/app/types.ts b/packages/core/src/api/app/types.ts
@@ -22,6 +22,7 @@ export type App = {
 };
 
 export class AppComponentBuilder<T = any> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   build(_app: App): ComponentType<T> {
     throw new Error('Must override build() in AppComponentBuilder');
   }

diff --git a/packages/core/src/api/widgetView/WidgetViewBuilder.tsx b/packages/core/src/api/widgetView/WidgetViewBuilder.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { App, AppComponentBuilder } from '../app/types';
+import { AppComponentBuilder } from '../app/types';
 import { Widget } from './types';
 import BackstagePlugin from '../plugin/Plugin';
 import DefaultWidgetView from '../../components/DefaultWidgetView';
@@ -44,7 +44,7 @@ export default class WidgetViewBuilder extends AppComponentBuilder {
     return this;
   }
 
-  build(_app: App): ComponentType<any> {
+  build(): ComponentType<any> {
     if (this.output) {
       return this.output;
     }
@@ -57,17 +57,19 @@ export default class WidgetViewBuilder extends AppComponentBuilder {
           widgets.push(reg.widget);
           break;
         case 'plugin':
-          let added = false;
-          for (const output of reg.plugin.output()) {
-            if (output.type === 'widget') {
-              widgets.push(output.widget);
-              added = true;
+          {
+            let added = false;
+            for (const output of reg.plugin.output()) {
+              if (output.type === 'widget') {
+                widgets.push(output.widget);
+                added = true;
+              }
+            }
+            if (!added) {
+              throw new Error(
+                `Plugin ${reg.plugin} was registered as widget provider, but did not provide any widgets`,
+              );
             }
-          }
-          if (!added) {
-            throw new Error(
-              `Plugin ${reg.plugin} was registered as widget provider, but did not provide any widgets`,
-            );
           }
           break;
         default:

diff --git a/packages/core/src/components/CircleProgress.js b/packages/core/src/components/CircleProgress.js
@@ -62,12 +62,12 @@ class CircleProgress extends Component {
       return 'grey';
     }
 
-    max = max ? max : CircleProgress.defaultProps.max;
-    value = inverse ? max - value : value;
+    const actualMax = max ? max : CircleProgress.defaultProps.max;
+    const actualValue = inverse ? actualMax - value : value;
 
-    if (value < max / 3) {
+    if (actualValue < actualMax / 3) {
       return COLORS.STATUS.ERROR;
-    } else if (value < max * (2 / 3)) {
+    } else if (actualValue < actualMax * (2 / 3)) {
       return COLORS.STATUS.WARNING;
     }
     return COLORS.STATUS.OK;

diff --git a/packages/core/src/components/CircleProgress.test.js b/packages/core/src/components/CircleProgress.test.js
@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInThemedTestApp } from '../testUtils';
 import CircleProgress from './CircleProgress';
-// import { COLORS, V1 } from 'core/app/Themes';
+import { COLORS, V1 } from '../theme/BackstageTheme';
 
 describe('<CircleProgress />', () => {
   it('renders without exploding', () => {
@@ -50,7 +50,6 @@ describe('<CircleProgress />', () => {
     getByText('10m');
   });
 
-  /*
   it('colors the progress correct', () => {
     expect(CircleProgress.getProgressColor()).toBe(V1.palette.textVerySubtle);
     expect(CircleProgress.getProgressColor(10)).toBe(COLORS.STATUS.ERROR);
@@ -65,5 +64,4 @@ describe('<CircleProgress />', () => {
     );
     expect(CircleProgress.getProgressColor(90, true)).toBe(COLORS.STATUS.ERROR);
   });
-  */
 });
diff --git a/packages/core/src/components/HorizontalScrollGrid.tsx b/packages/core/src/components/HorizontalScrollGrid.tsx
@@ -117,6 +117,9 @@ function useScrollDistance(
 
     el.addEventListener('scroll', handleUpdate);
     window.addEventListener('resize', handleUpdate);
+    // TODO(freben): Remove this eslint exception later
+    // It's here because @types/react-router-dom v5 pulls in @types/react that have the wrong signature
+    // eslint-disable-next-line consistent-return
     return () => {
       el.removeEventListener('scroll', handleUpdate);
       window.removeEventListener('resize', handleUpdate);
@@ -160,6 +163,9 @@ function useSmoothScroll(
       }
     });
 
+    // TODO(freben): Remove this eslint exception later
+    // It's here because @types/react-router-dom v5 pulls in @types/react that have the wrong signature
+    // eslint-disable-next-line consistent-return
     return () => cancelAnimationFrame(id);
   }, [ref, scrollTarget, speed, minDistance]);
 

diff --git a/packages/core/src/components/Lifecycle/Lifecycle.js b/packages/core/src/components/Lifecycle/Lifecycle.js
@@ -52,7 +52,7 @@ export class AlphaLabel extends Lifecycle {
 
 export class BetaLabel extends Lifecycle {
   render() {
-    const fontSize = this.props.fontSize ? this.props.fontSize : this.props.isShorthand ? '120%' : '100%';
+    const fontSize = this.props.fontSize || (this.props.isShorthand ? '120%' : '100%');
     const style = { ...styles.beta, fontSize, ...this.props.style };
 
     return this.props.isShorthand ? <span style={style}>&beta;</span> : <span style={style}>Beta</span>;

diff --git a/packages/core/src/components/SortableTable.js b/packages/core/src/components/SortableTable.js
@@ -47,7 +47,11 @@ const EnhancedTableHead = ({ columns, onRequestSort, order, orderBy }) => {
             sortDirection={orderBy === column.id ? order : false}
             style={column.style}
           >
-            <Tooltip title="Sort" placement={column.numeric ? 'bottom-end' : 'bottom-start'} enterDelay={300}>
+            <Tooltip
+              title="Sort"
+              placement={column.numeric ? 'bottom-end' : 'bottom-start'}
+              enterDelay={300}
+            >
               <TableSortLabel
                 active={orderBy === column.id}
                 direction={order}
@@ -100,7 +104,11 @@ CellContent.propTypes = {
 
 const DataTableCell = ({ column, row }) => {
   return (
-    <TableCell align={column.numeric ? 'right' : 'left'} key={column.id} style={{ verticalAlign: 'top' }}>
+    <TableCell
+      align={column.numeric ? 'right' : 'left'}
+      key={column.id}
+      style={{ verticalAlign: 'top' }}
+    >
       <CellContent data={row[column.id] || ''} />
     </TableCell>
   );
@@ -183,17 +191,6 @@ const DataTableRow = pure(({ row, columns, handleRowClick, style }) => {
  * @deprecated use shared/components/DataGrid
  */
 class SortableTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleRowClick = this.handleRowClick.bind(this);
-
-    this.state = {
-      orderBy: props.orderBy,
-      order: 'asc',
-      data: props.data,
-    };
-  }
-
   static propTypes = {
     // TODO: figure out how to make id of the object requried while others are dynamic
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -203,10 +200,15 @@ class SortableTable extends React.Component {
     dataVersion: PropTypes.string,
   };
 
-  UNSAFE_componentWillReceiveProps(props) {
-    if (props.dataVersion !== this.props.dataVersion) {
-      this.updateData(props.data, this.state.orderBy, this.state.order);
-    }
+  constructor(props) {
+    super(props);
+    this.handleRowClick = this.handleRowClick.bind(this);
+
+    this.state = {
+      orderBy: props.orderBy,
+      order: 'asc',
+      data: props.data,
+    };
   }
 
   handleRequestSort = (event, property) => {
@@ -219,8 +221,16 @@ class SortableTable extends React.Component {
     this.updateData(this.state.data, orderBy, order);
   };
 
+  handleRowClick = (event, id) => {
+    if (this.props.onRowClicked) {
+      this.props.onRowClicked(id, event);
+    }
+  };
+
   updateData = (data, orderBy, order) => {
-    const sortValueFn = (this.props.columns.filter(col => col.id === orderBy)[0] || {}).sortValue;
+    const sortValueFn = (
+      this.props.columns.filter(col => col.id === orderBy)[0] || {}
+    ).sortValue;
 
     const sortedData = data.slice().sort((a, b) => {
       const valueA = sortValueFn ? sortValueFn(a) : a[orderBy];
@@ -234,11 +244,11 @@ class SortableTable extends React.Component {
     this.setState({ data: sortedData, order, orderBy });
   };
 
-  handleRowClick = (event, id) => {
-    if (this.props.onRowClicked) {
-      this.props.onRowClicked(id, event);
+  UNSAFE_componentWillReceiveProps(props) {
+    if (props.dataVersion !== this.props.dataVersion) {
+      this.updateData(props.data, this.state.orderBy, this.state.order);
     }
-  };
+  }
 
   render() {
     const { data, order, orderBy } = this.state;
@@ -249,17 +259,32 @@ class SortableTable extends React.Component {
       tableFoot = (
         <TableFooter>
           {footerData.map(row => (
-            <DataTableRow key={row.id} columns={columns} row={row} style={{ height: 'auto' }} />
+            <DataTableRow
+              key={row.id}
+              columns={columns}
+              row={row}
+              style={{ height: 'auto' }}
+            />
           ))}
         </TableFooter>
       );
     }
     return (
       <Table>
-        <EnhancedTableHead columns={columns} onRequestSort={this.handleRequestSort} order={order} orderBy={orderBy} />
+        <EnhancedTableHead
+          columns={columns}
+          onRequestSort={this.handleRequestSort}
+          order={order}
+          orderBy={orderBy}
+        />
         <TableBody key={dataVersion}>
           {data.map(row => (
-            <DataTableRow key={row.id} columns={columns} row={row} handleRowClick={this.handleRowClick} />
+            <DataTableRow
+              key={row.id}
+              columns={columns}
+              row={row}
+              handleRowClick={this.handleRowClick}
+            />
           ))}
         </TableBody>
         {tableFoot}

diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -133,9 +133,9 @@ const SupportButton: FC<Props> = ({
                 <GroupIcon />
               </ListItemIcon>
               <ListItemText primary="Contact" />
-              {contactEmails.map((email, index) => (
+              {contactEmails.map((em, index) => (
                 <Typography key={index}>
-                  <Link>{email}</Link>
+                  <Link>{em}</Link>
                 </Typography>
               ))}
             </ListItem>

diff --git a/packages/core/src/testUtils/Keyboard.js b/packages/core/src/testUtils/Keyboard.js
@@ -66,7 +66,9 @@ export default class Keyboard {
     } else if (target.baseElement) {
       this.document = target.baseElement.ownerDocument;
     } else {
-      throw TypeError('Keyboard(target): target must be DOM node or react-testing-library render() output');
+      throw new TypeError(
+        'Keyboard(target): target must be DOM node or react-testing-library render() output',
+      );
     }
   }
 
@@ -82,7 +84,9 @@ export default class Keyboard {
   }
 
   _pretty(element) {
-    const attrs = [...element.attributes].map(attr => `${attr.name}="${attr.value}"`).join(' ');
+    const attrs = [...element.attributes]
+      .map(attr => `${attr.name}="${attr.value}"`)
+      .join(' ');
     return `<${element.nodeName.toLowerCase()} ${attrs}>`;
   }
 
@@ -91,7 +95,11 @@ export default class Keyboard {
   }
 
   async type(input) {
-    this._log(`sending sequence '${input}' with initial focus ${this._pretty(this.focused)}`);
+    this._log(
+      `sending sequence '${input}' with initial focus ${this._pretty(
+        this.focused,
+      )}`,
+    );
     await this.send(Keyboard.fromReadableInput(input));
   }
 
@@ -106,13 +114,19 @@ export default class Keyboard {
 
       const focused = this.focused;
       if (!focused || focused === this.document.body) {
-        throw Error(`No element focused in document while trying to type '${Keyboard.toReadableInput(chars)}'`);
+        throw Error(
+          `No element focused in document while trying to type '${Keyboard.toReadableInput(
+            chars,
+          )}'`,
+        );
       }
       const nextValue = (focused.value || '') + key;
 
       if (charCode >= 32) {
         await this._sendKey(key, charCode, () => {
-          this._log(`sending +${key} = '${nextValue}' to ${this._pretty(focused)}`);
+          this._log(
+            `sending +${key} = '${nextValue}' to ${this._pretty(focused)}`,
+          );
           fireEvent.change(focused, {
             target: { value: nextValue },
             bubbles: true,
@@ -162,7 +176,9 @@ export default class Keyboard {
       const focusedIndex = tabbable.indexOf(focused);
       const nextFocus = tabbable[focusedIndex + (1 % tabbable.length)];
 
-      this._log(`tabbing to ${this._pretty(nextFocus)} ${this.focused.textContent}`);
+      this._log(
+        `tabbing to ${this._pretty(nextFocus)} ${this.focused.textContent}`,
+      );
       nextFocus.focus();
     });
   }

diff --git a/plugins/home-page/package.json b/plugins/home-page/package.json
@@ -11,8 +11,6 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "@material-ui/core": "^4.9.1",