Wizard: Get distribution repositories from an api endpoint

Previously the base repository links for each distribution were read from `repos.js` file. This gets the needed information
from a call to api endpoint `architectures/{distribution}`. The data is fetched via RTK Query and is then filtered by an
architecture. For now the x86_64 architecture is hardcoded, this will change when multiple architectures get available.

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -28,7 +28,7 @@ import {
 import './CreateImageWizard.scss';
 import api from '../../api';
 import { UNIT_GIB, UNIT_KIB, UNIT_MIB } from '../../constants';
-import { getDistroRepoUrls } from '../../repos';
+import { useGetArchitecturesByDistributionQuery } from '../../store/apiSlice';
 import { composeAdded } from '../../store/composesSlice';
 import { fetchRepositories } from '../../store/repositoriesSlice';
 import isRhel from '../../Utilities/isRhel';
@@ -241,6 +241,14 @@ const parseSizeUnit = (bytesize) => {
   return [size, unit];
 };
 
+const getDistributionRepoUrls = (distributionInformation) => {
+  const filteredArchx86_64 = distributionInformation.find((info) => {
+    return info.arch === 'x86_64';
+  });
+  const mapped = filteredArchx86_64.repositories.map((repo) => repo.baseurl);
+  return mapped;
+};
+
 const getPackageDescription = async (release, arch, repoUrls, packageName) => {
   let pack;
   // if the env is stage beta then use content-sources api
@@ -348,30 +356,36 @@ const requestToState = (composeRequest) => {
     // customizations
     // packages
     const packs = [];
+    let distroRepoUrls = [];
 
     const distro = composeRequest?.distribution;
-    const distroRepoUrls = getDistroRepoUrls(distro);
-    const payloadRepositories =
-      composeRequest?.customizations?.payload_repositories?.map(
-        (repo) => repo.baseurl
-      );
-    const repoUrls = [...distroRepoUrls];
-    payloadRepositories ? repoUrls.push(...payloadRepositories) : null;
 
-    composeRequest?.customizations?.packages?.forEach(async (packName) => {
-      const packageDescription = await getPackageDescription(
-        distro,
-        imageRequest?.architecture,
-        repoUrls,
-        packName
-      );
-      const pack = {
-        name: packName,
-        summary: packageDescription,
-      };
-      packs.push(pack);
-    });
-    formState['selected-packages'] = packs;
+    const { data: distributionInformation, isSuccess: isSuccessDistroInfo } =
+      useGetArchitecturesByDistributionQuery(distro);
+
+    if (isSuccessDistroInfo) {
+      distroRepoUrls = getDistributionRepoUrls(distributionInformation);
+      const payloadRepositories =
+        composeRequest?.customizations?.payload_repositories?.map(
+          (repo) => repo.baseurl
+        );
+      const repoUrls = [...distroRepoUrls];
+      payloadRepositories ? repoUrls.push(...payloadRepositories) : null;
+      composeRequest?.customizations?.packages?.forEach(async (packName) => {
+        const packageDescription = await getPackageDescription(
+          distro,
+          imageRequest?.architecture,
+          repoUrls,
+          packName
+        );
+        const pack = {
+          name: packName,
+          summary: packageDescription,
+        };
+        packs.push(pack);
+      });
+      formState['selected-packages'] = packs;
+    }
 
     // repositories
     // 'original-payload-repositories' is treated as read-only and is used to populate

src/Components/CreateImageWizard/formComponents/Packages.js

@@ -26,17 +26,24 @@ import {
 import PropTypes from 'prop-types';
 
 import api from '../../../api';
-import { repos } from '../../../repos';
+import { useGetArchitecturesByDistributionQuery } from '../../../store/apiSlice';
 
 export const RedHatPackages = ({ defaultArch }) => {
   const { getState } = useFormApi();
+  const distribution = getState()?.values?.release;
+  const { data: distributionInformation, isSuccess: isSuccessDistroInfo } =
+    useGetArchitecturesByDistributionQuery(distribution);
 
   const getAllPackages = async (packagesSearchName) => {
     // if the env is stage beta then use content-sources api
     // else use image-builder api
     if (insights.chrome.isBeta()) {
-      const distribution = getState()?.values?.release;
-      const repoUrls = repos[distribution].map((repo) => repo.url);
+      const filteredArchx86_64 = distributionInformation.find(
+        (info) => info.arch === 'x86_64'
+      );
+      const repoUrls = filteredArchx86_64.repositories.map(
+        (repo) => repo.baseurl
+      );
       return await api.getPackagesContentSources(repoUrls, packagesSearchName);
     } else {
       const args = [
@@ -56,7 +63,9 @@ export const RedHatPackages = ({ defaultArch }) => {
     }
   };
 
-  return <Packages getAllPackages={getAllPackages} />;
+  return (
+    <Packages getAllPackages={getAllPackages} isSuccess={isSuccessDistroInfo} />
+  );
 };
 
 export const ContentSourcesPackages = () => {
@@ -71,7 +80,7 @@ export const ContentSourcesPackages = () => {
   return <Packages getAllPackages={getAllPackages} />;
 };
 
-const Packages = ({ getAllPackages }) => {
+const Packages = ({ getAllPackages, isSuccess }) => {
   const { change, getState } = useFormApi();
   const [packagesSearchName, setPackagesSearchName] = useState(undefined);
   const [filterChosen, setFilterChosen] = useState('');
@@ -99,8 +108,10 @@ const Packages = ({ getAllPackages }) => {
   }, []);
 
   useEffect(() => {
-    firstInputElement.current?.focus();
-  }, []);
+    if (isSuccess) {
+      firstInputElement.current?.focus();
+    }
+  }, [isSuccess]);
 
   const searchResultsComparator = useCallback((searchTerm) => {
     return (a, b) => {
@@ -266,6 +277,7 @@ const Packages = ({ getAllPackages }) => {
             onSearch={handleAvailablePackagesSearch}
             resetButtonLabel="Clear available packages search"
             onClear={handleClearAvailableSearch}
+            isDisabled={!isSuccess}
           />
         }
       >
@@ -392,4 +404,5 @@ RedHatPackages.propTypes = {
 
 Packages.propTypes = {
   getAllPackages: PropTypes.func,
+  isSuccess: PropTypes.bool,
 };