[APM] APM & Observability plugin lint improvements (#72702) (#73266)

* [APM] APM & Observability plugin lint improvements This is a large change, but most of it is automatic `eslint --fix` changes. * Apply the same ESLint ovderrides in APM and Observability plugins. * Remove the `no-unused-vars` rule. We can turn on the TypeScript check if needed. * Check both JS and TS files. * Add a rule for react function component definitions * Upgrade eslint-plugin-react to include that rule
elastic · Jul 27, 2020 · 74af87f · 74af87f
1 parent aab54c0
commit 74af87f
Show file tree

Hide file tree

Showing 140 changed files with 824 additions and 733 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -775,19 +775,22 @@ module.exports = {
     },
 
     /**
-     * APM overrides
+     * APM and Observability overrides
      */
     {
-      files: ['x-pack/plugins/apm/**/*.js'],
+      files: [
+        'x-pack/plugins/apm/**/*.{js,mjs,ts,tsx}',
+        'x-pack/plugins/observability/**/*.{js,mjs,ts,tsx}',
+      ],
       rules: {
-        'no-unused-vars': ['error', { ignoreRestSiblings: true }],
         'no-console': ['warn', { allow: ['error'] }],
-      },
-    },
-    {
-      plugins: ['react-hooks'],
-      files: ['x-pack/plugins/apm/**/*.{ts,tsx}'],
-      rules: {
+        'react/function-component-definition': [
+          'warn',
+          {
+            namedComponents: 'function-declaration',
+            unnamedComponents: 'arrow-function',
+          },
+        ],
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
         'react-hooks/exhaustive-deps': ['error', { additionalHooks: '^useFetcher$' }],
       },

diff --git a/package.json b/package.json
@@ -430,7 +430,7 @@
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-perf": "^3.2.3",
     "exit-hook": "^2.2.0",

diff --git a/src/plugins/inspector/public/views/data/components/data_view.test.tsx b/src/plugins/inspector/public/views/data/components/data_view.test.tsx
@@ -51,13 +51,13 @@ describe('Inspector Data View', () => {
     });
 
     it('should render loading state', () => {
-      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />);
+      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />); // eslint-disable-line react/jsx-pascal-case
 
       expect(component).toMatchSnapshot();
     });
 
     it('should render empty state', async () => {
-      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />);
+      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />); // eslint-disable-line react/jsx-pascal-case
       const tabularLoader = Promise.resolve(null);
       adapters.data.setTabularLoader(() => tabularLoader);
       await tabularLoader;

diff --git a/x-pack/plugins/apm/e2e/cypress/plugins/index.js b/x-pack/plugins/apm/e2e/cypress/plugins/index.js
@@ -29,6 +29,8 @@ module.exports = (on) => {
 
   // readFileMaybe
   on('task', {
+    // ESLint thinks this is a react component for some reason.
+    // eslint-disable-next-line react/function-component-definition
     readFileMaybe(filename) {
       if (fs.existsSync(filename)) {
         return fs.readFileSync(filename, 'utf8');

diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -37,7 +37,7 @@ const MainContainer = styled.div`
   height: 100%;
 `;
 
-const App = () => {
+function App() {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
@@ -59,9 +59,9 @@ const App = () => {
       </MainContainer>
     </ThemeProvider>
   );
-};
+}
 
-const ApmAppRoot = ({
+function ApmAppRoot({
   core,
   deps,
   routerHistory,
@@ -71,7 +71,7 @@ const ApmAppRoot = ({
   deps: ApmPluginSetupDeps;
   routerHistory: typeof history;
   config: ConfigSchema;
-}) => {
+}) {
   const i18nCore = core.i18n;
   const plugins = deps;
   const apmPluginContextValue = {
@@ -111,7 +111,7 @@ const ApmAppRoot = ({
       </AlertsContextProvider>
     </ApmPluginContext.Provider>
   );
-};
+}
 
 /**
  * This module is rendered asynchronously in the Kibana platform.

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
@@ -53,7 +53,7 @@ interface Props {
   items: ErrorGroupListAPIResponse;
 }
 
-const ErrorGroupList: React.FC<Props> = (props) => {
+function ErrorGroupList(props: Props) {
   const { items } = props;
   const { urlParams } = useUrlParams();
   const { serviceName } = urlParams;
@@ -213,6 +213,6 @@ const ErrorGroupList: React.FC<Props> = (props) => {
       sortItems={false}
     />
   );
-};
+}
 
 export { ErrorGroupList };
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -22,7 +22,7 @@ import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
 
-const ErrorGroupOverview: React.FC = () => {
+function ErrorGroupOverview() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { serviceName, start, end, sortField, sortDirection } = urlParams;
@@ -123,6 +123,6 @@ const ErrorGroupOverview: React.FC = () => {
       </EuiFlexGroup>
     </>
   );
-};
+}
 
 export { ErrorGroupOverview };
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx
@@ -20,11 +20,11 @@ interface Props {
   onBreakdownChange: (values: BreakdownItem[]) => void;
 }
 
-export const BreakdownFilter = ({
+export function BreakdownFilter({
   id,
   selectedBreakdowns,
   onBreakdownChange,
-}: Props) => {
+}: Props) {
   const categories: BreakdownItem[] = [
     {
       name: 'Browser',
@@ -65,4 +65,4 @@ export const BreakdownFilter = ({
       }}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx
@@ -22,12 +22,12 @@ export interface BreakdownGroupProps {
   onChange: (values: BreakdownItem[]) => void;
 }
 
-export const BreakdownGroup = ({
+export function BreakdownGroup({
   id,
   disabled,
   onChange,
   items,
-}: BreakdownGroupProps) => {
+}: BreakdownGroupProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const [activeItems, setActiveItems] = useState<BreakdownItem[]>(items);
@@ -97,4 +97,4 @@ export const BreakdownGroup = ({
       </EuiPopover>
     </EuiFilterGroup>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import {
   EuiErrorBoundary,
   EuiFlexGroup,
@@ -13,6 +13,7 @@ import {
 } from '@elastic/eui';
 
 interface Props {
+  children?: ReactNode;
   /**
    * Height for the chart
    */
@@ -27,12 +28,12 @@ interface Props {
   'aria-label'?: string;
 }
 
-export const ChartWrapper: FC<Props> = ({
+export function ChartWrapper({
   loading = false,
   height = '100%',
   children,
   ...rest
-}) => {
+}: Props) {
   const opacity = loading === true ? 0.3 : 1;
 
   return (
@@ -60,4 +61,4 @@ export const ChartWrapper: FC<Props> = ({
       )}
     </EuiErrorBoundary>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
@@ -70,6 +70,7 @@ export function PageLoadDistChart({
     onPercentileChange(minX, maxX);
   };
 
+  // eslint-disable-next-line react/function-component-definition
   const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
     return (
       <div>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -29,7 +29,7 @@ interface Props {
   }>;
 }
 
-export const VisitorBreakdownChart = ({ options }: Props) => {
+export function VisitorBreakdownChart({ options }: Props) {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
@@ -93,4 +93,4 @@ export const VisitorBreakdownChart = ({ options }: Props) => {
       </Chart>
     </ChartWrapper>
   );
-};
+}
diff --git a/...k/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx b/...k/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useEffect } from 'react';
 import { CurveType, LineSeries, ScaleType } from '@elastic/charts';
+import React, { useEffect } from 'react';
 import { PercentileRange } from './index';
 import { useBreakdowns } from './use_breakdowns';
 
@@ -16,12 +16,12 @@ interface Props {
   onLoadingChange: (loading: boolean) => void;
 }
 
-export const BreakdownSeries: FC<Props> = ({
+export function BreakdownSeries({
   field,
   value,
   percentileRange,
   onLoadingChange,
-}) => {
+}: Props) {
   const { data, status } = useBreakdowns({
     field,
     value,
@@ -47,4 +47,4 @@ export const BreakdownSeries: FC<Props> = ({
       ))}
     </>
   );
-};
+}
diff --git a/...ins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/...ins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -33,7 +33,7 @@ const PercentileMarker = styled.span`
   bottom: 205px;
 `;
 
-export const PercentileAnnotations = ({ percentiles }: Props) => {
+export function PercentileAnnotations({ percentiles }: Props) {
   const dataValues = generateAnnotationData(percentiles) ?? [];
 
   const style: Partial<LineAnnotationStyle> = {
@@ -44,17 +44,17 @@ export const PercentileAnnotations = ({ percentiles }: Props) => {
     },
   };
 
-  const PercentileTooltip = ({
+  function PercentileTooltip({
     annotation,
   }: {
     annotation: LineAnnotationDatum;
-  }) => {
+  }) {
     return (
       <span data-cy="percentileTooltipTitle">
         {annotation.details}th Percentile
       </span>
     );
-  };
+  }
 
   return (
     <>
@@ -82,4 +82,4 @@ export const PercentileAnnotations = ({ percentiles }: Props) => {
       ))}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -24,7 +24,7 @@ export interface PercentileRange {
   max?: number | null;
 }
 
-export const PageLoadDistribution = () => {
+export function PageLoadDistribution() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -115,4 +115,4 @@ export const PageLoadDistribution = () => {
       />
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -13,7 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 
-export const PageViewsTrend = () => {
+export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -68,4 +68,4 @@ export const PageViewsTrend = () => {
       <PageViewsChart data={data} loading={status !== 'success'} />
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -18,7 +18,7 @@ import { PageLoadDistribution } from './PageLoadDistribution';
 import { I18LABELS } from './translations';
 import { VisitorBreakdown } from './VisitorBreakdown';
 
-export const RumDashboard = () => {
+export function RumDashboard() {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
@@ -54,4 +54,4 @@ export const RumDashboard = () => {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx
@@ -5,16 +5,18 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DatePicker } from '../../../shared/DatePicker';
 
-export const RumHeader: React.FC = ({ children }) => (
-  <>
-    <EuiFlexGroup alignItems="center" gutterSize="s">
-      <EuiFlexItem>{children}</EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <DatePicker />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </>
-);
+export function RumHeader({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <DatePicker />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
@@ -11,7 +11,7 @@ import { VisitorBreakdownLabel } from '../translations';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 
-export const VisitorBreakdown = () => {
+export function VisitorBreakdown() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -62,4 +62,4 @@ export const VisitorBreakdown = () => {
       </EuiFlexGroup>
     </>
   );
-};
+}