src: Fix useChrome import, update mock, solve some lint warnings

This fixes the way we're importing `useChrome` in some places. The mock was also updated to reflect the changes. This resolves several lint warnings.

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
 import '@patternfly/patternfly/patternfly-addons.css';
 

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -75,10 +75,13 @@ const BlueprintsSidebar = () => {
 
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (blueprintSearchInput) {
     searchParams.search = blueprintSearchInput;

src/Components/Blueprints/BuildImagesButton.tsx

@@ -42,10 +42,13 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
 
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const onBuildHandler = async () => {
     if (selectedBlueprintId) {

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -46,10 +46,13 @@ export const DeleteBlueprintModal: React.FunctionComponent<
 
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const searchParams: GetBlueprintsApiArg = {
     limit: blueprintsLimit,

src/Components/CreateImageWizard/steps/Registration/index.tsx

@@ -28,10 +28,13 @@ const RegistrationStep = () => {
 
   useEffect(() => {
     (async () => {
-      const userData = await auth?.getUser();
+      const userData = await auth.getUser();
       const id = userData?.identity?.internal?.org_id;
       setOrgId(id);
     })();
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const activationKey = useAppSelector(selectActivationKey);

src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx

@@ -47,12 +47,17 @@ export const CreateSaveAndBuildBtn = ({
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth, isBeta } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const packages = useAppSelector(selectPackages);
 
   const { trigger: buildBlueprint } = useComposeBlueprintMutation();
@@ -112,10 +117,14 @@ export const CreateSaveButton = ({
 
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const packages = useAppSelector(selectPackages);
 
   const { trigger: createBlueprint, isLoading } = useCreateBlueprintMutation({

src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx

@@ -40,12 +40,17 @@ export const EditSaveAndBuildBtn = ({
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth, isBeta } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const { trigger: buildBlueprint } = useComposeBlueprintMutation();
   const packages = useAppSelector(selectPackages);
 
@@ -103,12 +108,17 @@ export const EditSaveButton = ({
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth, isBeta } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const packages = useAppSelector(selectPackages);
 
   const { trigger: updateBlueprint, isLoading } = useUpdateBlueprintMutation({

src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx

@@ -9,7 +9,7 @@ import {
   WizardFooterWrapper,
 } from '@patternfly/react-core';
 import { MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggle';
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { useStore } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -52,7 +52,7 @@ const ReviewWizardFooter = () => {
 
   const getBlueprintPayload = async () => {
     if (!process.env.IS_ON_PREMISE) {
-      const userData = await auth?.getUser();
+      const userData = await auth.getUser();
       const orgId = userData?.identity?.internal?.org_id;
       const requestBody = orgId && mapRequestFromState(store, orgId);
       return requestBody;

src/Components/ImagesTable/ImageDetails.tsx

@@ -137,12 +137,17 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (!isAwsUploadRequestOptions(options)) {
     throw TypeError(
       `Error: options must be of type AwsUploadRequestOptions, not ${typeof options}.`

src/Components/ImagesTable/ImagesTable.tsx

@@ -104,12 +104,16 @@ const ImagesTable = () => {
   const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
 
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const searchParamsGetBlueprints: GetBlueprintsApiArg = {
     limit: blueprintsLimit,
@@ -465,18 +469,20 @@ const AwsRow = ({ compose, composeStatus, rowIndex }: AwsRowPropTypes) => {
   const navigate = useNavigate();
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const target = <AwsTarget compose={compose} />;
-
   const status = <CloudStatus compose={compose} />;
-
   const instance = <CloudInstance compose={compose} />;
-
   const details = <AwsDetails compose={compose} />;
 
   const actions = (
@@ -549,12 +555,17 @@ const Row = ({
 }: RowPropTypes) => {
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const [isExpanded, setIsExpanded] = useState(false);
   const handleToggle = () => setIsExpanded(!isExpanded);
   const dispatch = useDispatch();

src/Components/ImagesTable/Instance.tsx

@@ -19,7 +19,7 @@ import {
   OrderType,
 } from '@patternfly/react-core/dist/esm/components/List/List';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { ChromeUser } from '@redhat-cloud-services/types';
 import { useLoadModule, useScalprum } from '@scalprum/react-core';
 import cockpit from 'cockpit';
@@ -100,12 +100,17 @@ const ProvisioningLink = ({
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const [wizardOpen, setWizardOpen] = useState(false);
   const [exposedScalprumModule, error] = useLoadModule(
     {

src/Components/ImagesTable/Status.tsx

@@ -124,12 +124,17 @@ export const CloudStatus = ({ compose }: CloudStatusPropTypes) => {
   });
   const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
+
   useEffect(() => {
     (async () => {
-      const data = await auth?.getUser();
+      const data = await auth.getUser();
       setUserData(data);
     })();
-  }, [auth]);
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (!isSuccess) {
     return <Skeleton />;
   }

src/Components/LandingPage/NewAlert.tsx

@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 
 // Import for optional quickstarts functionality
-// import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+// import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 type NewAlertPropTypes = {
   setShowAlert: React.Dispatch<React.SetStateAction<boolean>>;

src/Components/LandingPage/Quickstarts.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { Button, ExpandableSection } from '@patternfly/react-core';
 import { ArrowRightIcon } from '@patternfly/react-icons';
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 export const Quickstarts = () => {
   const [showHint, setShowHint] = useState(true);

src/Utilities/useGetEnvironment.ts

@@ -1,4 +1,4 @@
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { useFlag as useUnleashFlag } from '@unleash/proxy-client-react';
 
 export const useGetEnvironment = process.env.IS_ON_PREMISE

src/test/setup.ts

@@ -7,6 +7,12 @@ import 'vitest-canvas-mock';
 // scrollTo is not defined in jsdom - needed for the navigation to the wizard
 window.HTMLElement.prototype.scrollTo = function () {};
 
+// provide a fallback *only* when window.getComputedStyle is missing
+// eslint-disable-next-line disable-autofix/@typescript-eslint/no-unnecessary-condition
+window.getComputedStyle = window.getComputedStyle || (() => ({
+  getPropertyValue: () => '',
+}));
+
 // ResizeObserver is not defined and needs to be mocked and stubbed
 const MockResizeObserver = vi.fn(() => ({
   observe: vi.fn(),
@@ -16,29 +22,24 @@ const MockResizeObserver = vi.fn(() => ({
 vi.stubGlobal('ResizeObserver', MockResizeObserver);
 
 vi.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
-  useChrome: () => ({
+  default: () => ({
     auth: {
-      getUser: () => {
-        return {
-          identity: {
-            internal: {
-              org_id: 5,
-            },
+      getUser: async () => ({
+        identity: {
+          internal: {
+            org_id: 5,
           },
-        };
-      },
+        },
+      }),
     },
     isBeta: () => true,
     isProd: () => true,
     getEnvironment: () => 'prod',
-  }),
-  default: () => ({
     analytics: {
       track: () => 'test',
       group: () => 'test',
       screen: () => 'test',
     },
-    isBeta: () => true,
   }),
 }));
 
@@ -67,7 +68,7 @@ vi.mock('@unleash/proxy-client-react', () => ({
   }),
 }));
 
-// Remove DOM dump from the testing-library output
+// remove DOM dump from the testing-library output
 configure({
   getElementError: (message: string) => {
     const error = new Error(message);