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}%`}>