multi: migrate all consumer imports to usePlatform()

Move 35 component and hook files from importing platform-switched
hooks directly from barrel files to destructuring them from
usePlatform(), preparing for barrel file cleanup.

Author: kingsleyzissou

src/Components/Blueprints/BlueprintDiffModal.tsx

@@ -10,7 +10,7 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 
-import { useGetBlueprintQuery } from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
 import { selectSelectedBlueprintId } from '@/store/slices/blueprint';
 
 import { BuildImagesButton } from './BuildImagesButton';
@@ -31,13 +31,14 @@ const BlueprintDiffModal = ({
   isOpen,
   onClose,
 }: blueprintDiffProps) => {
+  const { queries } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
 
-  const { data: baseBlueprint } = useGetBlueprintQuery(
+  const { data: baseBlueprint } = queries.useGetBlueprintQuery(
     { id: selectedBlueprintId as string, version: baseVersion || -1 },
     { skip: !selectedBlueprintId || !baseVersion },
   );
-  const { data: blueprint } = useGetBlueprintQuery(
+  const { data: blueprint } = queries.useGetBlueprintQuery(
     { id: selectedBlueprintId as string },
     { skip: !selectedBlueprintId },
   );

src/Components/Blueprints/BlueprintsPagination.tsx

@@ -3,10 +3,8 @@ import React from 'react';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
 import { OnSetPage } from '@patternfly/react-core/dist/esm/components/Pagination/Pagination';
 
-import {
-  GetBlueprintsApiArg,
-  useGetBlueprintsQuery,
-} from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
+import { GetBlueprintsApiArg } from '@/store/api/backend';
 import {
   selectBlueprintSearchInput,
   selectLimit,
@@ -18,6 +16,7 @@ import {
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 
 const BlueprintsPagination = () => {
+  const { queries } = usePlatform();
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const blueprintsOffset = useAppSelector(selectOffset) || 0;
   const blueprintsLimit = useAppSelector(selectLimit) || 10;
@@ -32,7 +31,7 @@ const BlueprintsPagination = () => {
     searchParams.search = blueprintSearchInput;
   }
 
-  const { data: blueprintsData } = useGetBlueprintsQuery(searchParams);
+  const { data: blueprintsData } = queries.useGetBlueprintsQuery(searchParams);
   const dispatch = useAppDispatch();
 
   const blueprintsTotal = blueprintsData?.meta.count || 0;

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -18,12 +18,8 @@ import { PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
-import {
-  BlueprintItem,
-  GetBlueprintsApiArg,
-  imageBuilderApi,
-  useGetBlueprintsQuery,
-} from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
+import { BlueprintItem, GetBlueprintsApiArg } from '@/store/api/backend';
 import {
   selectBlueprintSearchInput,
   selectLimit,
@@ -57,6 +53,7 @@ type emptyBlueprintStateProps = {
 };
 
 const BlueprintsSidebar = () => {
+  const { queries } = usePlatform();
   const { analytics, auth } = useChrome();
   const { userData } = useGetUser(auth);
   const isOnPremise = useAppSelector(selectIsOnPremise);
@@ -79,7 +76,7 @@ const BlueprintsSidebar = () => {
     data: blueprintsData,
     isLoading,
     isFetching,
-  } = useGetBlueprintsQuery(searchParams);
+  } = queries.useGetBlueprintsQuery(searchParams);
   const dispatch = useAppDispatch();
   const blueprints = blueprintsData?.data;
 
@@ -181,6 +178,7 @@ const BlueprintsSidebar = () => {
 };
 
 const BlueprintSearch = ({ blueprintsTotal }: blueprintSearchProps) => {
+  const { api } = usePlatform();
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const dispatch = useAppDispatch();
   const [localSearchValue, setLocalSearchValue] = useState(
@@ -190,7 +188,7 @@ const BlueprintSearch = ({ blueprintsTotal }: blueprintSearchProps) => {
 
   useEffect(() => {
     dispatch(setBlueprintsOffset(0));
-    dispatch(imageBuilderApi.util.invalidateTags([{ type: 'Blueprints' }]));
+    dispatch(api.backendApi.util.invalidateTags([{ type: 'Blueprints' }]));
     dispatch(
       setBlueprintSearchInput(
         debouncedSearchValue.length > 0 ? debouncedSearchValue : undefined,

src/Components/Blueprints/BuildImagesButton.tsx

@@ -18,7 +18,8 @@ import { MenuToggleElement } from '@patternfly/react-core/dist/esm/components/Me
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { skipToken } from '@reduxjs/toolkit/query';
 
-import { ImageTypes, useGetBlueprintQuery } from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
+import { ImageTypes } from '@/store/api/backend';
 import { selectSelectedBlueprintId } from '@/store/slices/blueprint';
 import { selectIsOnPremise } from '@/store/slices/env';
 
@@ -35,6 +36,7 @@ type BuildImagesButtonPropTypes = {
 };
 
 export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
+  const { queries } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const [deselectedTargets, setDeselectedTargets] = useState<ImageTypes[]>([]);
   const { trigger: buildBlueprint, isLoading: imageBuildLoading } =
@@ -66,7 +68,7 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
-  const { data: blueprintDetails } = useGetBlueprintQuery(
+  const { data: blueprintDetails } = queries.useGetBlueprintQuery(
     selectedBlueprintId ? { id: selectedBlueprintId } : skipToken,
   );
   const blueprintImageType = blueprintDetails?.image_requests.map(

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -10,11 +10,8 @@ import {
 } from '@patternfly/react-core';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
-import {
-  backendApi,
-  GetBlueprintsApiArg,
-  useGetBlueprintsQuery,
-} from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
+import { GetBlueprintsApiArg } from '@/store/api/backend';
 import {
   selectBlueprintSearchInput,
   selectLimit,
@@ -43,6 +40,7 @@ interface DeleteBlueprintModalProps {
 export const DeleteBlueprintModal: React.FunctionComponent<
   DeleteBlueprintModalProps
 > = ({ setShowDeleteModal, isOpen }: DeleteBlueprintModalProps) => {
+  const { queries, api } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
@@ -61,7 +59,7 @@ export const DeleteBlueprintModal: React.FunctionComponent<
     searchParams.search = blueprintSearchInput;
   }
 
-  const { blueprintName } = useGetBlueprintsQuery(searchParams, {
+  const { blueprintName } = queries.useGetBlueprintsQuery(searchParams, {
     selectFromResult: ({ data }) => ({
       blueprintName: data?.data.find(
         (blueprint: { id: string | undefined }) =>
@@ -83,7 +81,7 @@ export const DeleteBlueprintModal: React.FunctionComponent<
       setShowDeleteModal(false);
       await deleteBlueprint({ id: selectedBlueprintId });
       dispatch(setBlueprintId(undefined));
-      dispatch(backendApi.util.invalidateTags([{ type: 'Blueprints' }]));
+      dispatch(api.backendApi.util.invalidateTags([{ type: 'Blueprints' }]));
     }
   };
   const onDeleteClose = () => {

src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect.tsx

@@ -19,10 +19,8 @@ import {
 import { SyncAltIcon } from '@patternfly/react-icons';
 
 import { RHEL_10_IMAGE_MODE_IMAGE } from '@/constants';
-import {
-  BootcDistributionItem,
-  useGetDistributionsQuery,
-} from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
+import { BootcDistributionItem } from '@/store/api/backend';
 import { Distributions } from '@/store/api/backend/hosted';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { selectIsOnPremise } from '@/store/slices/env';
@@ -63,6 +61,7 @@ const InfoMessageContent = ({ source }: { source: string }) => {
 };
 
 const ImageSourceSelect = () => {
+  const { queries } = usePlatform();
   const dispatch = useAppDispatch();
   const isOnPremise = useAppSelector(selectIsOnPremise);
   const arch = useAppSelector(selectArchitecture);
@@ -77,7 +76,7 @@ const ImageSourceSelect = () => {
     isLoading,
     isError,
     refetch,
-  } = useGetDistributionsQuery({ kind: 'bootc', arch });
+  } = queries.useGetDistributionsQuery({ kind: 'bootc', arch });
 
   const bootcDistributions = distributions as
     | BootcDistributionItem[]

src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx

@@ -11,14 +11,10 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 
+import { usePlatform } from '@/context/platform';
 import { useTargetEnvironmentCategories } from '@/Hooks';
 import { rhsmApi } from '@/store/api';
-import {
-  BootcDistributionItem,
-  ImageTypes,
-  useGetArchitecturesQuery,
-  useGetDistributionsQuery,
-} from '@/store/api/backend';
+import { BootcDistributionItem, ImageTypes } from '@/store/api/backend';
 import { useCustomizationRestrictions } from '@/store/api/distributions';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import {
@@ -67,6 +63,7 @@ const createLabelWithTooltip = (
 };
 
 const TargetEnvironment = () => {
+  const { queries } = usePlatform();
   const arch = useAppSelector(selectArchitecture);
   const environments = useAppSelector(selectImageTypes);
   const distribution = useAppSelector(selectDistribution);
@@ -80,7 +77,7 @@ const TargetEnvironment = () => {
     isError: isArchError,
     isFetching: isArchFetching,
     environments: archEnvironments,
-  } = useGetArchitecturesQuery(
+  } = queries.useGetArchitecturesQuery(
     {
       distribution,
     },
@@ -101,7 +98,7 @@ const TargetEnvironment = () => {
     data: bootcDistributionsRaw,
     isError: isBootcError,
     isFetching: isBootcFetching,
-  } = useGetDistributionsQuery(
+  } = queries.useGetDistributionsQuery(
     { kind: 'bootc', arch, distro: distribution },
     { skip: !isImageMode },
   );

src/Components/CreateImageWizard/steps/ImageOutput/tests/ImageSourceSelect.test.tsx

@@ -27,12 +27,22 @@ import ImageSourceSelect from '../components/ImageSourceSelect';
 const mockRefetch = vi.fn();
 const mockUseGetDistributionsQuery = vi.fn();
 
-vi.mock('@/store/api/backend', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/store/api/backend')>();
+vi.mock('@/context/platform', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@/context/platform')>();
+  const { mockPlatform } = await import(
+    '@/context/platform/tests/mocks'
+  );
   return {
     ...actual,
-    useGetDistributionsQuery: (...args: unknown[]) =>
-      mockUseGetDistributionsQuery(...args),
+    usePlatform: () => ({
+      ...mockPlatform,
+      queries: {
+        ...mockPlatform.queries,
+        useGetDistributionsQuery: (...args: unknown[]) =>
+          mockUseGetDistributionsQuery(...args),
+      },
+    }),
   };
 });
 

src/Components/CreateImageWizard/steps/Kernel/components/KernelArguments.tsx

@@ -5,7 +5,7 @@ import { FormGroup, HelperText, HelperTextItem } from '@patternfly/react-core';
 import LabelInput from '@/Components/CreateImageWizard/LabelInput';
 import { useKernelValidation } from '@/Components/CreateImageWizard/utilities/useValidation';
 import { isKernelArgumentValid } from '@/Components/CreateImageWizard/validators';
-import { useGetOscapCustomizationsQuery } from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
 import { useAppSelector } from '@/store/hooks';
 import {
   addKernelArg,
@@ -16,14 +16,15 @@ import {
 } from '@/store/slices/wizard';
 
 const KernelArguments = () => {
+  const { queries } = usePlatform();
   const kernelAppend = useAppSelector(selectKernel).append;
 
   const stepValidation = useKernelValidation();
 
   const release = useAppSelector(selectDistribution);
   const complianceProfileID = useAppSelector(selectComplianceProfileID);
 
-  const { data: oscapProfileInfo } = useGetOscapCustomizationsQuery(
+  const { data: oscapProfileInfo } = queries.useGetOscapCustomizationsQuery(
     {
       distribution: release,
       // @ts-ignore if complianceProfileID is undefined the query is going to get skipped, so it's safe here to ignore the linter here

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

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { Content, Spinner, Title } from '@patternfly/react-core';
 
 import { CustomizationLabels } from '@/Components/sharedComponents/CustomizationLabels';
-import { useGetArchitecturesQuery } from '@/store/api/backend';
+import { usePlatform } from '@/context/platform';
 import { useSearchLanguagePacks } from '@/store/api/contentSources';
 import { useAppSelector } from '@/store/hooks';
 import {
@@ -17,11 +17,12 @@ import KeyboardDropDown from './components/KeyboardDropDown';
 import LanguagesDropDown from './components/LanguagesDropDown';
 
 const LocaleStep = () => {
+  const { queries } = usePlatform();
   const distribution = useAppSelector(selectDistribution);
   const arch = useAppSelector(selectArchitecture);
   const candidateLangpacks = useAppSelector(selectLocaleLangpackCandidates);
   const { data: distroRepositories, isLoading: isArchitecturesLoading } =
-    useGetArchitecturesQuery({
+    queries.useGetArchitecturesQuery({
       distribution: distribution,
     });