V2Wizard: Add descriptions to package recommendations

After the list of package recommendations is fetched, each of the packages gets queried as a searchTerm against the list of distribution repositories.

This fetched the summary of the package which can be used as a description.

src/Components/CreateImageWizardV2/steps/Packages/PackageRecommendations.tsx

@@ -16,19 +16,47 @@ import { OptimizeIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useDispatch } from 'react-redux';
 
+import PackageRecommendationDescription from './components/PackageRecommendationDescription';
+import { RedHatRepository } from './Packages';
+
+import { useListRepositoriesQuery } from '../../../../store/contentSourcesApi';
 import { useAppSelector } from '../../../../store/hooks';
 import { useRecommendPackageMutation } from '../../../../store/imageBuilderApi';
-import { addPackage, selectPackages } from '../../../../store/wizardSlice';
+import {
+  addPackage,
+  selectArchitecture,
+  selectDistribution,
+  selectPackages,
+} from '../../../../store/wizardSlice';
+import { releaseToVersion } from '../../../../Utilities/releaseToVersion';
 import useDebounce from '../../../../Utilities/useDebounce';
 
 const PackageRecommendations = () => {
   const dispatch = useDispatch();
 
+  const arch = useAppSelector(selectArchitecture);
+  const distribution = useAppSelector(selectDistribution);
+  const version = releaseToVersion(distribution);
   const undebouncedPackages = useAppSelector(selectPackages);
   const packages = useDebounce(undebouncedPackages);
+  let distroRepoUrls: string[] = [];
 
   const [isExpanded, setIsExpanded] = useState(true);
 
+  const { data: distroRepositories, isSuccess: isSuccessDistroRepositories } =
+    useListRepositoriesQuery({
+      availableForArch: arch,
+      availableForVersion: version,
+      contentType: 'rpm',
+      origin: 'red_hat',
+      limit: 100,
+      offset: 0,
+    });
+
+  if (isSuccessDistroRepositories && distroRepositories.data) {
+    distroRepoUrls = distroRepositories.data.map((repo) => repo.url || '');
+  }
+
   const [fetchRecommendedPackages, { data, isSuccess, isLoading, isError }] =
     useRecommendPackageMutation();
 
@@ -119,8 +147,9 @@ const PackageRecommendations = () => {
                 <Table variant="compact">
                   <Thead>
                     <Tr>
-                      <Th width={80}>Package name</Th>
-                      {/*<Th width={50}>Package summary</Th>*/}
+                      <Th width={20}>Package name</Th>
+                      <Th width={35}>Description</Th>
+                      <Th width={25}>Package repository</Th>
                       <Th width={20}>
                         <Button
                           variant="link"
@@ -138,7 +167,17 @@ const PackageRecommendations = () => {
                     {data.packages.map((pkg) => (
                       <Tr key={pkg}>
                         <Td>{pkg}</Td>
-                        {/*<Td>TODO summary</Td>*/}
+                        <Td>
+                          {distroRepoUrls && (
+                            <PackageRecommendationDescription
+                              pkg={pkg}
+                              urls={distroRepoUrls}
+                            />
+                          )}
+                        </Td>
+                        <Td>
+                          <RedHatRepository />
+                        </Td>
                         <Td>
                           <Button
                             variant="link"

src/Components/CreateImageWizardV2/steps/Packages/components/PackageRecommendationDescription.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+
+import { Spinner } from '@patternfly/react-core';
+
+import { useSearchRpmMutation } from '../../../../../store/contentSourcesApi';
+
+type PackageRecommendationDescriptionTypes = {
+  pkg: string;
+  urls: string[];
+};
+
+const PackageRecommendationDescription = ({
+  pkg,
+  urls,
+}: PackageRecommendationDescriptionTypes) => {
+  const [
+    searchRpms,
+    {
+      data: dataPkgRecInfo,
+      isSuccess: isSuccessPkgRecInfo,
+      isLoading: isLoadingPkgRecInfo,
+      isError: isErrorPkgRecInfo,
+    },
+  ] = useSearchRpmMutation();
+
+  useEffect(() => {
+    searchRpms({
+      apiContentUnitSearchRequest: {
+        search: pkg,
+        urls: urls,
+      },
+    });
+  }, [pkg, searchRpms, urls]);
+
+  if (isLoadingPkgRecInfo) {
+    return <Spinner size="md" />;
+  }
+  if (isSuccessPkgRecInfo && dataPkgRecInfo) {
+    if (dataPkgRecInfo.length > 0) {
+      return dataPkgRecInfo[0].summary;
+    } else {
+      return 'Package was not found in distribution repositories';
+    }
+  }
+  if (isErrorPkgRecInfo) {
+    return 'There was an error when fetching a description';
+  }
+};
+
+export default PackageRecommendationDescription;