chore(lint): eslint react-table

package.json

@@ -98,7 +98,7 @@
     "clean:build": "shx rm -rf .cache",
     "commit": "git-cz",
     "generate": "yarn plop",
-    "lint:md": "yarn eslintpackages/patternfly-4 --ext md --config .eslintrc-md.json",
+    "lint:md": "yarn eslint packages/patternfly-4/react-core --ext md --config .eslintrc-md.json",
     "lint:style": "stylelint \"**/sass/**/*.scss\" \"!**/dist/**/*.scss\"",
     "lint:ts": "node --max-old-space-size=4096 node_modules/.bin/eslint packages/patternfly-4/react-core --ext js,jsx,ts,tsx",
     "lint:versions": "node ./packages/patternfly-4/verifyCoreVersions.js",

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/examples/DataToolbar.md

@@ -1018,6 +1018,7 @@ class DataToolbarStacked extends React.Component {
             onSelect={this.onSplitButtonSelect}
             toggle={(
               <DropdownToggle
+                id="stacked-example-toggle"
                 splitButtonItems={[
                   <DropdownToggleCheckbox
                     id="example-checkbox-1"

packages/patternfly-4/react-table/build/copyStyles.js

@@ -1,7 +1,8 @@
-/* eslint-disable no-case-declarations */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { copySync, readFileSync, writeFileSync } = require('fs-extra');
 const { resolve, dirname, join } = require('path');
 const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+/* eslint-enable @typescript-eslint/no-var-requires */
 
 const baseCSSFilename = 'patternfly-base.css';
 const stylesDir = resolve(__dirname, '../dist/styles');
@@ -26,6 +27,7 @@ ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
     case 'comment':
       return false;
     case 'font-face':
+      // eslint-disable-next-line no-case-declarations
       const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
       return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
     default:

packages/patternfly-4/react-table/build/snapshot-serializer.js

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('fs');
 const { createSerializer } = require('@patternfly/react-styles/snapshot-serializer');
+/* eslint-enable @typescript-eslint/no-var-requires */
 
 const pf4CSS = fs.readFileSync(require.resolve('@patternfly/react-styles/css/patternfly-base.css'), 'utf8');
 

packages/patternfly-4/react-table/scripts/copyTS.js

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const glob = require('glob');
 const fse = require('fs-extra');
+/* eslint-enable @typescript-eslint/no-var-requires */
 
 const srcDir = path.join('./src');
 const distDir = path.join('./dist/js');

packages/patternfly-4/react-table/src/components/Table/ActionsColumn.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants';
+import {
+  DropdownPosition,
+  DropdownDirection
+} from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants';
 import { KebabToggle } from '@patternfly/react-core/dist/js/components/Dropdown/KebabToggle';
 import { DropdownItem } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem';
 import { DropdownSeparator } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownSeparator';

packages/patternfly-4/react-table/src/components/Table/Body.tsx

@@ -4,6 +4,7 @@ import { RowType, RowKeyType } from './base/types';
 import { TableContext, IRow, IRowCell, IExtraRowData } from './Table';
 import { isRowExpanded } from './utils';
 
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IComputedData {
   isInput: boolean;
   isButton: boolean;
@@ -90,6 +91,7 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
   };
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { className, headerData, rows, rowKey, children, onRowClick, ...props } = this.props;
 
     let mappedRows;
@@ -125,11 +127,14 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
 }
 
 export const TableBody = ({
-  onRow = (...args: any) => Object,
   className = '' as string,
   children = null as React.ReactNode,
   rowKey = 'id' as string,
-  onRowClick = (event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => undefined as OnRowClick,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  onRow = (...args: any) => Object,
+  onRowClick = (event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) =>
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    undefined as OnRowClick,
   ...props
 }: TableBodyProps) => (
   <TableContext.Consumer>
@@ -139,12 +144,13 @@ export const TableBody = ({
         rows={rows as IRow[]}
         onRow={onRow}
         className={className}
-        children={children}
         rowKey={rowKey}
         onRowClick={onRowClick}
         {...props}
         {...rest}
-      />
+      >
+        {children}
+      </ContextBody>
     )}
   </TableContext.Consumer>
 );

packages/patternfly-4/react-table/src/components/Table/BodyCell.tsx

@@ -22,8 +22,10 @@ export const BodyCell: React.FunctionComponent<BodyCellProps> = ({
   isVisible,
   parentId,
   textCenter = false,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   isOpen,
-  ariaControls = '',
+  ariaControls,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: BodyCellProps) => {
   const Component = component as any;

packages/patternfly-4/react-table/src/components/Table/BodyWrapper.tsx

@@ -21,10 +21,12 @@ export interface BodyWrapperProps {
 
 export const BodyWrapper: React.FunctionComponent<BodyWrapperProps> = ({
   mappedRows,
+  tbodyRef,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   rows = [] as IRow[],
   onCollapse,
-  tbodyRef,
   headerRows,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: BodyWrapperProps) => {
   if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) {

packages/patternfly-4/react-table/src/components/Table/CollapseColumn.tsx

@@ -18,22 +18,20 @@ export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
   isOpen,
   onToggle,
   ...props
-}: CollapseColumnProps) => {
-  return (
-    <React.Fragment>
-      {isOpen !== undefined && (
-        <Button
-          className={css(className, isOpen && styles.modifiers.expanded)}
-          {...props}
-          variant="plain"
-          aria-label="Details"
-          onClick={onToggle}
-          aria-expanded={isOpen}
-        >
-          <AngleDownIcon />
-        </Button>
-      )}
-      {children}
-    </React.Fragment>
-  );
-};
+}: CollapseColumnProps) => (
+  <React.Fragment>
+    {isOpen !== undefined && (
+      <Button
+        className={css(className, isOpen && styles.modifiers.expanded)}
+        {...props}
+        variant="plain"
+        aria-label="Details"
+        onClick={onToggle}
+        aria-expanded={isOpen}
+      >
+        <AngleDownIcon />
+      </Button>
+    )}
+    {children}
+  </React.Fragment>
+);

packages/patternfly-4/react-table/src/components/Table/ExpandableRowContent.tsx

@@ -9,10 +9,8 @@ interface ExpandableRowContentProps {
 export const ExpandableRowContent: React.FunctionComponent<ExpandableRowContentProps> = ({
   children = null as React.ReactNode,
   ...props
-}: ExpandableRowContentProps) => {
-  return (
-    <div {...props} className={css(styles.tableExpandableRowContent)}>
-      {children}
-    </div>
-  );
-};
+}: ExpandableRowContentProps) => (
+  <div {...props} className={css(styles.tableExpandableRowContent)}>
+    {children}
+  </div>
+);

packages/patternfly-4/react-table/src/components/Table/HeaderCell.tsx

@@ -15,10 +15,12 @@ export interface HeaderCellProps {
 export const HeaderCell: React.FunctionComponent<HeaderCellProps> = ({
   className = '',
   component = 'th',
-  isVisible,
   scope = '',
   textCenter = false,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  isVisible,
   dataLabel = '',
+  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: HeaderCellProps) => {
   const Component = component as any;

packages/patternfly-4/react-table/src/components/Table/RowWrapper.tsx

@@ -82,12 +82,14 @@ class RowWrapper extends React.Component<RowWrapperProps & InjectedOuiaProps, {}
 
   render() {
     const {
-      trRef,
-      className,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
       onScroll,
       onResize,
-      row: { isExpanded, isHeightAuto },
       rowProps,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      trRef,
+      className,
+      row: { isExpanded, isHeightAuto },
       ouiaContext,
       ouiaId,
       ...props
@@ -104,10 +106,10 @@ class RowWrapper extends React.Component<RowWrapperProps & InjectedOuiaProps, {}
           isHeightAuto && styles.modifiers.heightAuto
         )}
         hidden={isExpanded !== undefined && !isExpanded}
-        {...ouiaContext.isOuia && {
+        {...(ouiaContext.isOuia && {
           'data-ouia-component-type': 'TableRow',
           'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
-        }}
+        })}
       />
     );
   }

packages/patternfly-4/react-table/src/components/Table/SelectColumn.tsx

@@ -9,14 +9,13 @@ export interface SelectColumnProps {
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   children = null as React.ReactNode,
-  className = '',
   onSelect = null as (event: React.ChangeEvent<HTMLInputElement>) => void,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className,
   ...props
-}: SelectColumnProps) => {
-  return (
-    <React.Fragment>
-      <input {...props} type="checkbox" onChange={onSelect} />
-      {children}
-    </React.Fragment>
-  );
-};
+}: SelectColumnProps) => (
+  <React.Fragment>
+    <input {...props} type="checkbox" onChange={onSelect} />
+    {children}
+  </React.Fragment>
+);

packages/patternfly-4/react-table/src/components/Table/Table.test.tsx

@@ -66,11 +66,7 @@ test('Sortable table', () => {
 test('Row click table', () => {
   const rowClickHandler = jest.fn();
   const view = mount(
-    <Table
-      aria-label="Row click table"
-      cells={columns}
-      rows={rows}
-    >
+    <Table aria-label="Row click table" cells={columns} rows={rows}>
       <TableHeader />
       <TableBody onRowClick={rowClickHandler} />
     </Table>
@@ -257,12 +253,12 @@ test('Empty state table', () => {
         heightAuto: true,
         cells: [
           {
-            title: (<div>Empty State Component</div>),
+            title: <div>Empty State Component</div>,
             props: { colSpan: '8' }
           }
-      ],
+        ]
       }
-    ],
+    ]
   };
 
   const view = mount(
@@ -272,6 +268,16 @@ test('Empty state table', () => {
     </Table>
   );
 
-  expect(view.find('tr').at(1).prop('className')).toEqual('pf-m-height-auto');
-  expect(view.find('tbody').find('td').prop('colSpan')).toEqual('8');
+  expect(
+    view
+      .find('tr')
+      .at(1)
+      .prop('className')
+  ).toEqual('pf-m-height-auto');
+  expect(
+    view
+      .find('tbody')
+      .find('td')
+      .prop('colSpan')
+  ).toEqual('8');
 });