V2Wizard: Select a repository when added from recommendations

This selects a repository on the Custom repositories step when it's added on the Packages step from the recommendations.

The check box is also disabled as removing the repository would have to trigger removal of the added packages as well.

And expandable with explanation about the disabled check box was added.

src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx

@@ -49,6 +49,7 @@ import {
   selectArchitecture,
   selectCustomRepositories,
   selectDistribution,
+  selectRecommendedRepositories,
 } from '../../../../store/wizardSlice';
 import { releaseToVersion } from '../../../../Utilities/releaseToVersion';
 import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
@@ -175,6 +176,7 @@ const Repositories = () => {
   const distribution = useAppSelector(selectDistribution);
   const version = releaseToVersion(distribution);
   const repositoriesList = useAppSelector(selectCustomRepositories);
+  const recommendedRepos = useAppSelector(selectRecommendedRepositories);
 
   const [filterValue, setFilterValue] = useState('');
   const [perPage, setPerPage] = useState(10);
@@ -235,8 +237,27 @@ const Repositories = () => {
     setToggleSelected(id);
   };
 
-  const isRepoSelected = (repoURL: string | undefined) =>
-    selected.includes(repoURL);
+  const isRepoSelected = (repoURL: string | undefined) => {
+    return (
+      // repository is in the list of selected repositories
+      // or it comes from the repository recommendations
+      selected.includes(repoURL) ||
+      (recommendedRepos.length > 0 && repoURL?.includes('epel')) ||
+      false
+    );
+  };
+
+  const isRepoDisabled = (repo: ApiRepositoryResponseRead) => {
+    return (
+      // repository data is still fetching, it's not valid
+      // or it comes from the repository recommendations
+      // and removing it would mean invalidating packages
+      // added from the recommended repository
+      isFetching ||
+      repo.status !== 'Valid' ||
+      (recommendedRepos.length > 0 && repo.url?.includes('epel'))
+    );
+  };
 
   const handlePerPageSelect = (
     _: React.MouseEvent,
@@ -472,8 +493,7 @@ const Repositories = () => {
                                       rowIndex,
                                       isSelecting
                                     ),
-                                  isDisabled:
-                                    isFetching || repo.status !== 'Valid',
+                                  isDisabled: isRepoDisabled(repo),
                                 }}
                               />
                               <Td dataLabel={'Name'}>

src/Components/CreateImageWizardV2/steps/Repositories/index.tsx

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { Button, Form, Text, Title } from '@patternfly/react-core';
+import {
+  Button,
+  ExpandableSection,
+  Form,
+  List,
+  ListItem,
+  Text,
+  Title,
+} from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import Repositories from './Repositories';
 
+import { useAppSelector } from '../../../../store/hooks';
+import {
+  selectPackages,
+  selectRecommendedRepositories,
+} from '../../../../store/wizardSlice';
 import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
 
 const ManageRepositoriesButton = () => {
@@ -25,6 +38,14 @@ const ManageRepositoriesButton = () => {
 };
 
 const RepositoriesStep = () => {
+  const packages = useAppSelector(selectPackages);
+  const recommendedRepos = useAppSelector(selectRecommendedRepositories);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
@@ -36,6 +57,25 @@ const RepositoriesStep = () => {
         <br />
         <ManageRepositoriesButton />
       </Text>
+      {recommendedRepos.length > 0 && (
+        <ExpandableSection
+          toggleText={"Why can't I remove a selected repository?"}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+        >
+          EPEL repository cannot be removed, because packages from it were
+          selected. If you wish to remove the repository, please remove
+          following packages on the Packages step:
+          <List>
+            {packages
+              .filter((pkg) => pkg.repository === 'recommended')
+              .map((pkg) => (
+                <ListItem key={pkg.name}>{pkg.name}</ListItem>
+              ))}
+          </List>
+        </ExpandableSection>
+      )}
       <Repositories />
     </Form>
   );