Add PlatformContext to replace build-time hook switching

src/AppCockpit.tsx

@@ -12,6 +12,8 @@ import { HashRouter } from 'react-router-dom';
 
 import './AppCockpit.scss';
 import { NotReady, RequireAdmin } from './Components/Cockpit';
+import { PlatformProvider } from './context/platform';
+import { onPremPlatform } from './context/platform/onprem';
 import { Router } from './Router';
 import { onPremStore as store } from './store';
 import { useGetComposerSocketStatus } from './Utilities/useComposerStatus';
@@ -41,11 +43,13 @@ const Application = () => {
 };
 const ImageBuilder = () => (
   <Provider store={store}>
-    <Page className='no-masthead-sidebar' isContentFilled>
-      <PageSection>
-        <Application />
-      </PageSection>
-    </Page>
+    <PlatformProvider value={onPremPlatform}>
+      <Page className='no-masthead-sidebar' isContentFilled>
+        <PageSection>
+          <Application />
+        </PageSection>
+      </Page>
+    </PlatformProvider>
   </Provider>
 );
 

src/AppEntry.tsx

@@ -3,11 +3,15 @@ import React from 'react';
 import { Provider } from 'react-redux';
 
 import App from './App';
+import { PlatformProvider } from './context/platform';
+import { hostedPlatform } from './context/platform/hosted';
 import { serviceStore as store } from './store';
 
 const ImageBuilder = () => (
   <Provider store={store}>
-    <App />
+    <PlatformProvider value={hostedPlatform}>
+      <App />
+    </PlatformProvider>
   </Provider>
 );
 

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,6 +31,9 @@ const BlueprintDiffModal = ({
   isOpen,
   onClose,
 }: blueprintDiffProps) => {
+  const {
+    queries: { useGetBlueprintQuery },
+  } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
 
   const { data: baseBlueprint } = useGetBlueprintQuery(

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,9 @@ import {
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 
 const BlueprintsPagination = () => {
+  const {
+    queries: { useGetBlueprintsQuery },
+  } = usePlatform();
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const blueprintsOffset = useAppSelector(selectOffset) || 0;
   const blueprintsLimit = useAppSelector(selectLimit) || 10;

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -18,12 +18,8 @@
 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,9 @@
 };
 
 const BlueprintsSidebar = () => {
+  const {
+    queries: { useGetBlueprintsQuery },
+  } = usePlatform();
   const { analytics, auth } = useChrome();
   const { userData } = useGetUser(auth);
   const isOnPremise = useAppSelector(selectIsOnPremise);
@@ -181,6 +180,9 @@
 };
 
 const BlueprintSearch = ({ blueprintsTotal }: blueprintSearchProps) => {
+  const {
+    api: { backendApi },
+  } = usePlatform();
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const dispatch = useAppDispatch();
   const [localSearchValue, setLocalSearchValue] = useState(
@@ -190,13 +192,13 @@
 
   useEffect(() => {
     dispatch(setBlueprintsOffset(0));
-    dispatch(imageBuilderApi.util.invalidateTags([{ type: 'Blueprints' }]));
+    dispatch(backendApi.util.invalidateTags([{ type: 'Blueprints' }]));
     dispatch(
       setBlueprintSearchInput(
         debouncedSearchValue.length > 0 ? debouncedSearchValue : undefined,
       ),
     );
   }, [debouncedSearchValue, dispatch]);
 
   const onChange = (value: string) => {
     setLocalSearchValue(value);

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,9 @@ type BuildImagesButtonPropTypes = {
 };
 
 export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
+  const {
+    queries: { useGetBlueprintQuery },
+  } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const [deselectedTargets, setDeselectedTargets] = useState<ImageTypes[]>([]);
   const { trigger: buildBlueprint, isLoading: imageBuildLoading } =

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,10 @@ interface DeleteBlueprintModalProps {
 export const DeleteBlueprintModal: React.FunctionComponent<
   DeleteBlueprintModalProps
 > = ({ setShowDeleteModal, isOpen }: DeleteBlueprintModalProps) => {
+  const {
+    queries: { useGetBlueprintsQuery },
+    api: { backendApi },
+  } = usePlatform();
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
   const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;

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,9 @@ const InfoMessageContent = ({ source }: { source: string }) => {
 };
 
 const ImageSourceSelect = () => {
+  const {
+    queries: { useGetDistributionsQuery },
+  } = usePlatform();
   const dispatch = useAppDispatch();
   const isOnPremise = useAppSelector(selectIsOnPremise);
   const arch = useAppSelector(selectArchitecture);

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,9 @@ const createLabelWithTooltip = (
 };
 
 const TargetEnvironment = () => {
+  const {
+    queries: { useGetArchitecturesQuery, useGetDistributionsQuery },
+  } = usePlatform();
   const arch = useAppSelector(selectArchitecture);
   const environments = useAppSelector(selectImageTypes);
   const distribution = useAppSelector(selectDistribution);

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

@@ -27,12 +27,19 @@ 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,6 +16,9 @@ import {
 } from '@/store/slices/wizard';
 
 const KernelArguments = () => {
+  const {
+    queries: { useGetOscapCustomizationsQuery },
+  } = usePlatform();
   const kernelAppend = useAppSelector(selectKernel).append;
 
   const stepValidation = useKernelValidation();

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,6 +17,9 @@ import KeyboardDropDown from './components/KeyboardDropDown';
 import LanguagesDropDown from './components/LanguagesDropDown';
 
 const LocaleStep = () => {
+  const {
+    queries: { useGetArchitecturesQuery },
+  } = usePlatform();
   const distribution = useAppSelector(selectDistribution);
   const arch = useAppSelector(selectArchitecture);
   const candidateLangpacks = useAppSelector(selectLocaleLangpackCandidates);

src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.tsx

@@ -15,14 +15,12 @@ import {
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
+import { usePlatform } from '@/context/platform';
 import {
   DistributionProfileItem,
   DistributionProfileResponse,
   OpenScap,
   OpenScapProfile,
-  useBackendPrefetch,
-  useGetOscapCustomizationsQuery,
-  useLazyGetOscapCustomizationsQuery,
 } from '@/store/api/backend';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { selectIsOnPremise } from '@/store/slices/env';
@@ -60,6 +58,13 @@ const ProfileSelector = ({
   isSuccess,
   refetch,
 }: ProfileSelectorProps) => {
+  const {
+    queries: {
+      useGetOscapCustomizationsQuery,
+      useLazyGetOscapCustomizationsQuery,
+    },
+    api: { useBackendPrefetch },
+  } = usePlatform();
   const isOnPremise = useAppSelector(selectIsOnPremise);
   const profileID = useAppSelector(selectComplianceProfileID);
   const release = removeBetaFromRelease(useAppSelector(selectDistribution));

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

@@ -26,12 +26,8 @@ import {
   FIRST_BOOT_SERVICE,
   OSCAP_URL,
 } from '@/constants';
+import { usePlatform } from '@/context/platform';
 import { useGetUser } from '@/Hooks';
-import {
-  useBackendPrefetch,
-  useGetOscapCustomizationsQuery,
-  useGetOscapProfilesQuery,
-} from '@/store/api/backend';
 import { useSecuritySummary } from '@/store/api/backend/hooks';
 import { usePoliciesQuery } from '@/store/api/compliance';
 import { useCustomizationRestrictions } from '@/store/api/distributions';
@@ -71,6 +67,10 @@ import { removeBetaFromRelease } from './removeBetaFromRelease';
 import ExternalLinkButton from '../../utilities/ExternalLinkButton';
 
 const OscapContent = () => {
+  const {
+    queries: { useGetOscapProfilesQuery, useGetOscapCustomizationsQuery },
+    api: { useBackendPrefetch },
+  } = usePlatform();
   const dispatch = useAppDispatch();
   const registrationType = useAppSelector(selectRegistrationType);
   const complianceType = useAppSelector(selectComplianceType);

src/Components/CreateImageWizard/steps/Packages/components/PackageSearch.tsx

@@ -30,6 +30,7 @@
   ContentOrigin,
   EPEL_10_REPO_DEFINITION,
 } from '@/constants';
+import { usePlatform } from '@/context/platform';
 import {
   Module,
   useGetArchitecturesQuery,
@@ -42,7 +43,6 @@
   useListRepositoriesQuery,
   useSearchPackageGroupMutation,
   useSearchRepositoryModuleStreamsMutation,
-  useSearchRpmMutation,
 } from '@/store/api/contentSources';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { selectIsOnPremise } from '@/store/slices/env';
@@ -100,6 +100,9 @@
   activeStream,
   setActiveStream,
 }: PackageSearchProps) => {
+  const {
+    mutations: { useSearchRpmMutation },
+  } = usePlatform();
   const dispatch = useAppDispatch();
   const { analytics, isBeta } = useChrome();
 
@@ -185,7 +188,7 @@
       ?.repositories.filter((repo) => !!repo.baseurl)
       .map((repo) => repo.baseurl!);
     return urls ?? EMPTY_ARRAY;
   }, [distroRepositories, arch]);
 
   const [
     searchCustomRpms,
@@ -254,13 +257,16 @@
     }
     if (debouncedSearchTerm.length > 1 && isSuccessDistroRepositories) {
       if (isOnPremise) {
+        // On-prem uses a different request shape with packages/architecture/distribution
+        // fields that don't exist in the hosted ApiContentUnitSearchRequest type.
+        // The on-prem implementation accepts these fields at runtime via PlatformContext.
         searchDistroRpms({
           apiContentUnitSearchRequest: {
             packages: [debouncedSearchTerm],
             architecture: arch,
             distribution,
           },
-        });
+        } as Parameters<typeof searchDistroRpms>[0]);
       } else {
         searchDistroRpms({
           apiContentUnitSearchRequest: {
@@ -401,7 +407,7 @@
         },
       });
     }
   }, [isSuccessDistroRepositories, modules, distroUrls]);
 
   useEffect(() => {
     if (!isSuccessModulesInfo) return;
@@ -428,7 +434,7 @@
           }
         });
     });
   }, [dataModulesInfo, dispatch, isSuccessModulesInfo, modules]);
 
   const [
     fetchRecommendationDescriptions,