packages,plugins: fix lint issues

packages/backend/src/plugins/auth.ts

@@ -17,6 +17,6 @@
 import { createRouter } from '@backstage/plugin-auth-backend';
 import { PluginEnvironment } from '../types';
 
-export default async function ({ logger }: PluginEnvironment) {
+export default async function createPlugin({ logger }: PluginEnvironment) {
   return await createRouter({ logger });
 }

packages/backend/src/plugins/catalog.ts

@@ -27,7 +27,10 @@ import {
 import { PluginEnvironment } from '../types';
 import { EntityPolicies } from '@backstage/catalog-model';
 
-export default async function ({ logger, database }: PluginEnvironment) {
+export default async function createPlugin({
+  logger,
+  database,
+}: PluginEnvironment) {
   const policy = new EntityPolicies();
   const ingestion = new IngestionModels(
     new LocationReaders(),

packages/backend/src/plugins/identity.ts

@@ -17,6 +17,6 @@
 import { createRouter } from '@backstage/plugin-identity-backend';
 import { PluginEnvironment } from '../types';
 
-export default async function ({ logger }: PluginEnvironment) {
+export default async function createPlugin({ logger }: PluginEnvironment) {
   return await createRouter({ logger });
 }

packages/backend/src/plugins/scaffolder.ts

@@ -21,7 +21,7 @@ import {
 } from '@backstage/plugin-scaffolder-backend';
 import type { PluginEnvironment } from '../types';
 
-export default async function ({ logger }: PluginEnvironment) {
+export default async function createPlugin({ logger }: PluginEnvironment) {
   const storage = new DiskStorage({ logger });
   const templater = new CookieCutter();
 

packages/backend/src/plugins/sentry.ts

@@ -17,6 +17,6 @@
 import { createRouter } from '@backstage/plugin-sentry-backend';
 import { Logger } from 'winston';
 
-export default async function (logger: Logger) {
+export default async function createPlugin(logger: Logger) {
   return await createRouter(logger);
 }

packages/core-api/src/app/AppThemeProvider.tsx

@@ -49,10 +49,6 @@ function resolveTheme(
 }
 
 const useShouldPreferDarkTheme = () => {
-  if (!window.matchMedia) {
-    return false;
-  }
-
   const mediaQuery = useMemo(
     () => window.matchMedia('(prefers-color-scheme: dark)'),
     [],
@@ -74,12 +70,16 @@ const useShouldPreferDarkTheme = () => {
 
 export const AppThemeProvider: FC<{}> = ({ children }) => {
   const appThemeApi = useApi(appThemeApiRef);
-  const shouldPreferDark = useShouldPreferDarkTheme();
   const themeId = useObservable(
     appThemeApi.activeThemeId$(),
     appThemeApi.getActiveThemeId(),
   );
 
+  // Browser feature detection won't change over time, so ignore lint rule
+  const shouldPreferDark = Boolean(window.matchMedia)
+    ? useShouldPreferDarkTheme() // eslint-disable-line react-hooks/rules-of-hooks
+    : false;
+
   const appTheme = resolveTheme(
     themeId,
     shouldPreferDark,

packages/core/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx

@@ -141,9 +141,9 @@ export const FeatureCalloutCircular: FC<Props> = ({
       window.removeEventListener('resize', update);
       window.removeEventListener('scroll', update);
     };
-  }, []);
+  }, [update]);
 
-  useLayoutEffect(update, [wrapperRef.current]);
+  useLayoutEffect(update, [wrapperRef.current, update]);
 
   if (!show) {
     return <>{children}</>;

packages/core/src/components/FeatureDiscovery/lib/usePortal.ts

@@ -51,27 +51,30 @@ function addRootElement(rootElem: Element): void {
 export function usePortal(id: string): HTMLElement {
   const rootElemRef = useRef<HTMLElement | null>(null);
 
-  useEffect(function setupElement() {
-    // Look for existing target dom element to append to
-    const existingParent = document.querySelector(`#${id}`);
-    // Parent is either a new root or the existing dom element
-    const parentElem = existingParent || createRootElement(id);
+  useEffect(
+    function setupElement() {
+      // Look for existing target dom element to append to
+      const existingParent = document.querySelector(`#${id}`);
+      // Parent is either a new root or the existing dom element
+      const parentElem = existingParent || createRootElement(id);
 
-    // If there is no existing DOM element, add a new one.
-    if (!existingParent) {
-      addRootElement(parentElem);
-    }
-
-    // Add the detached element to the parent
-    parentElem.appendChild(rootElemRef.current!);
-
-    return function removeElement() {
-      rootElemRef.current!.remove();
-      if (parentElem.childNodes.length === -1) {
-        parentElem.remove();
+      // If there is no existing DOM element, add a new one.
+      if (!existingParent) {
+        addRootElement(parentElem);
       }
-    };
-  }, []);
+
+      // Add the detached element to the parent
+      parentElem.appendChild(rootElemRef.current!);
+
+      return function removeElement() {
+        rootElemRef.current!.remove();
+        if (parentElem.childNodes.length === -1) {
+          parentElem.remove();
+        }
+      };
+    },
+    [id],
+  );
 
   /**
    * It's important we evaluate this lazily:

packages/core/src/components/FeatureDiscovery/lib/useShowCallout.ts

@@ -45,7 +45,7 @@ function useCalloutHasBeenSeen(
 
   const markSeen = useCallback(() => {
     setState(featureId, true);
-  }, [featureId]);
+  }, [setState, featureId]);
 
   return { seen: states[featureId] === true, markSeen };
 }

packages/core/src/components/ProgressBars/HorizontalProgress.tsx

@@ -29,6 +29,7 @@ type Props = {
 };
 
 const HorizontalProgress: FC<Props> = ({ value }) => {
+  const theme = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;
   }
@@ -36,7 +37,6 @@ const HorizontalProgress: FC<Props> = ({ value }) => {
   if (percent > 100) {
     percent = 100;
   }
-  const theme = useTheme<BackstageTheme>();
   const strokeColor = getProgressColor(theme.palette, percent, false, 100);
   return (
     <Tooltip title={`${percent}%`}>

plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx

@@ -18,6 +18,7 @@ import { render } from '@testing-library/react';
 import * as React from 'react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { catalogApiRef, CatalogApi } from '../../api/types';
 
 const getTestProps = (componentName: string) => {
   return {
@@ -39,7 +40,17 @@ describe('ComponentPage', () => {
     const props = getTestProps('');
     await render(
       wrapInTestApp(
-        <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
+        <ApiProvider
+          apis={ApiRegistry.from([
+            [errorApiRef, errorApi],
+            [
+              catalogApiRef,
+              ({
+                async getEntityByName() {},
+              } as unknown) as CatalogApi,
+            ],
+          ])}
+        >
           <ComponentPage {...props} />
         </ApiProvider>,
       ),

plugins/catalog/src/components/ComponentPage/ComponentPage.tsx

@@ -53,11 +53,6 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
   const componentName = match.params.name;
   const errorApi = useApi<ErrorApi>(errorApiRef);
 
-  if (componentName === '') {
-    history.push('/catalog');
-    return null;
-  }
-
   const catalogApi = useApi(catalogApiRef);
   const catalogRequest = useAsync(() =>
     catalogApi.getEntityByName(match.params.name),
@@ -70,7 +65,12 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
         history.push('/catalog');
       }, REDIRECT_DELAY);
     }
-  }, [catalogRequest.error]);
+  }, [catalogRequest.error, errorApi, history]);
+
+  if (componentName === '') {
+    history.push('/catalog');
+    return null;
+  }
 
   const removeComponent = async () => {
     setConfirmationDialogOpen(false);

plugins/circleci/src/components/Settings/Settings.tsx

@@ -52,7 +52,7 @@ const Settings = () => {
     if (repoFromStore !== repo) {
       setRepo(repoFromStore);
     }
-  }, [ownerFromStore, repoFromStore, tokenFromStore]);
+  }, [ownerFromStore, repoFromStore, tokenFromStore, token, owner, repo]);
 
   const [saved, setSaved] = useState(false);
 

plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -111,7 +111,7 @@ const BuildWithStepsView: FC<{}> = () => {
   useEffect(() => {
     startPolling();
     return () => stopPolling();
-  }, [buildId, settings]);
+  }, [buildId, settings, startPolling, stopPolling]);
 
   return (
     <>

plugins/circleci/src/state/useBuildWithSteps.ts

@@ -46,7 +46,7 @@ export function useBuildWithSteps(buildId: number) {
       errorApi.post(e);
       return Promise.reject(e);
     }
-  }, [token, owner, repo, buildId]);
+  }, [token, owner, repo, buildId, api, errorApi]);
 
   const restartBuild = async () => {
     try {

plugins/circleci/src/state/useBuilds.ts

@@ -101,7 +101,7 @@ export function useBuilds() {
         return Promise.reject(e);
       }
     },
-    [repo, token, owner],
+    [repo, token, owner, api, errorApi],
   );
 
   const restartBuild = async (buildId: number) => {
@@ -121,7 +121,7 @@ export function useBuilds() {
 
   useEffect(() => {
     getBuilds({ limit: 1, offset: 0 }).then(b => setTotal(b?.[0].build_num!));
-  }, [repo]);
+  }, [repo, getBuilds]);
 
   const { loading, value, retry } = useAsyncRetry(
     () =>

plugins/circleci/src/state/useSettings.ts

@@ -23,27 +23,29 @@ export function useSettings() {
 
   const errorApi = useApi(errorApiRef);
 
-  const rehydrate = () => {
-    try {
-      const stateFromStorage = JSON.parse(sessionStorage.getItem(STORAGE_KEY)!);
-      if (
-        stateFromStorage &&
-        Object.keys(stateFromStorage).some(
-          k => (settings as any)[k] !== stateFromStorage[k],
-        )
-      )
-        dispatch({
-          type: 'setCredentials',
-          payload: stateFromStorage,
-        });
-    } catch (error) {
-      errorApi.post(error);
-    }
-  };
-
   useEffect(() => {
+    const rehydrate = () => {
+      try {
+        const stateFromStorage = JSON.parse(
+          sessionStorage.getItem(STORAGE_KEY)!,
+        );
+        if (
+          stateFromStorage &&
+          Object.keys(stateFromStorage).some(
+            k => (settings as any)[k] !== stateFromStorage[k],
+          )
+        )
+          dispatch({
+            type: 'setCredentials',
+            payload: stateFromStorage,
+          });
+      } catch (error) {
+        errorApi.post(error);
+      }
+    };
+
     rehydrate();
-  }, []);
+  }, [dispatch, errorApi, settings]);
 
   const persist = (state: Settings) => {
     sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -63,7 +63,7 @@ const AuditList: FC<{}> = () => {
     if (value?.total && value?.limit)
       return Math.ceil(value?.total / value?.limit);
     return 0;
-  }, [value]);
+  }, [value?.total, value?.limit]);
 
   const history = useHistory();
 

plugins/sentry/src/components/SentryPluginWidget/SentryPluginWidget.tsx

@@ -43,7 +43,7 @@ export const SentryPluginWidget: FC<{
     if (error) {
       errorApi.post(error);
     }
-  }, [error]);
+  }, [error, errorApi]);
 
   if (loading) {
     return (

plugins/tech-radar/src/components/RadarComponent.tsx

@@ -21,6 +21,7 @@ import { TechRadarComponentProps, TechRadarLoaderResponse } from '../api';
 import getSampleData from '../sampleData';
 
 const useTechRadarLoader = (props: TechRadarComponentProps) => {
+  const errorApi = useApi<ErrorApi>(errorApiRef);
   const [state, setState] = useState<{
     loading: boolean;
     error?: Error;
@@ -31,38 +32,33 @@ const useTechRadarLoader = (props: TechRadarComponentProps) => {
     data: undefined,
   });
 
+  const { getData } = props;
+
   useEffect(() => {
-    if (!props.getData) {
+    if (!getData) {
       return;
     }
 
-    props
-      .getData()
+    getData()
       .then((payload: TechRadarLoaderResponse) => {
         setState({ loading: false, error: undefined, data: payload });
       })
       .catch((err: Error) => {
+        errorApi.post(err);
         setState({
           loading: false,
           error: err,
           data: undefined,
         });
       });
-  }, []);
+  }, [getData, errorApi]);
 
   return state;
 };
 
-const RadarComponent: FC<TechRadarComponentProps> = (props) => {
-  const errorApi = useApi<ErrorApi>(errorApiRef);
+const RadarComponent: FC<TechRadarComponentProps> = props => {
   const { loading, error, data } = useTechRadarLoader(props);
 
-  useEffect(() => {
-    if (error) {
-      errorApi.post(error);
-    }
-  }, [error && error.message]);
-
   return (
     <>
       {loading && <Progress />}