src: Rename "V2" folders to just Wizard

This replaces all occurences of "CreateImageWizardV2" with just "CreateImageWizard" as it is the only version now.

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

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  Alert,
+  Button,
+  ExpandableSection,
+  Flex,
+  FlexItem,
+  Icon,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Popover,
+  Spinner,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { HelpIcon, 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,
+  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();
+
+  useEffect(() => {
+    if (isExpanded && packages.length > 0) {
+      (async () => {
+        await fetchRecommendedPackages({
+          recommendPackageRequest: {
+            packages: packages.map((pkg) => pkg.name),
+            recommendedPackages: 5,
+          },
+        });
+      })();
+    }
+  }, [fetchRecommendedPackages, packages, isExpanded]);
+
+  const addAllPackages = () => {
+    if (data?.packages?.length) {
+      data.packages.forEach((pkg) =>
+        dispatch(
+          addPackage({
+            name: pkg,
+            summary: 'Added from recommended packages',
+            repository: 'distro',
+          })
+        )
+      );
+    }
+  };
+
+  const addRecommendedPackage = (pkg: string) => {
+    dispatch(
+      addPackage({
+        name: pkg,
+        summary: 'Added from recommended packages',
+        repository: 'distro',
+      })
+    );
+  };
+
+  const isRecommendedPackageSelected = (recPkg: string) => {
+    const foundInPackages = packages?.some((pkg) => recPkg === pkg.name);
+    return foundInPackages;
+  };
+
+  return (
+    <Panel variant="bordered" className="panel-border">
+      <PanelMain>
+        <PanelMainBody>
+          <ExpandableSection
+            toggleContent={
+              <Flex>
+                <FlexItem>
+                  <Icon>
+                    <OptimizeIcon />
+                  </Icon>{' '}
+                  Recommended Red Hat packages{' '}
+                </FlexItem>
+                <FlexItem>
+                  <TextContent>
+                    <Text component={TextVariants.small}>
+                      <em>Powered by RHEL Lightspeed</em>{' '}
+                      <Popover
+                        maxWidth="30rem"
+                        // overrides the expandable behaviour to allow placing
+                        // a popover there
+                        onShow={() => setIsExpanded(false)}
+                        onHide={() => setIsExpanded(false)}
+                        bodyContent={
+                          <TextContent>
+                            <Text>
+                              RHEL Lightspeed provides intelligent tools to
+                              improve the productivity and efficiency of teams
+                              using RHEL.
+                            </Text>
+                          </TextContent>
+                        }
+                      >
+                        <HelpIcon />
+                      </Popover>
+                    </Text>
+                  </TextContent>
+                </FlexItem>
+              </Flex>
+            }
+            onToggle={(_, bool) => setIsExpanded(bool)}
+            isExpanded={isExpanded}
+          >
+            {packages.length === 0 && (
+              <>Select packages to generate recommendations.</>
+            )}
+            {isLoading && <Spinner size="lg" />}
+            {isError && (
+              <Alert
+                title="Recommendations couldn't be fetched"
+                variant="danger"
+                isPlain
+                isInline
+              >
+                There was an error when fetching package recommendations. Try
+                again by changing your selected packages.
+              </Alert>
+            )}
+            {isSuccess && !data?.packages?.length && (
+              <>No recommendations found for the set of selected packages</>
+            )}
+            {isSuccess && data && data?.packages && (
+              <>
+                <TextContent>
+                  <Text>
+                    Other users commonly add these packages with the ones you
+                    selected.
+                  </Text>
+                </TextContent>
+                <Table variant="compact">
+                  <Thead>
+                    <Tr>
+                      <Th width={20}>Package name</Th>
+                      <Th width={35}>Description</Th>
+                      <Th width={25}>Package repository</Th>
+                      <Th width={20}>
+                        <Button
+                          variant="link"
+                          component="a"
+                          onClick={() => addAllPackages()}
+                          isInline
+                          data-testid="add-all-recommendations-button"
+                        >
+                          Add all packages
+                        </Button>
+                      </Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {data.packages.map((pkg) => (
+                      <Tr key={pkg}>
+                        <Td>{pkg}</Td>
+                        <Td>
+                          {distroRepoUrls && (
+                            <PackageRecommendationDescription
+                              pkg={pkg}
+                              urls={distroRepoUrls}
+                            />
+                          )}
+                        </Td>
+                        <Td>
+                          <RedHatRepository />
+                        </Td>
+                        <Td>
+                          <Button
+                            variant="link"
+                            component="a"
+                            onClick={() => addRecommendedPackage(pkg)}
+                            isInline
+                            isDisabled={isRecommendedPackageSelected(pkg)}
+                            data-testid="add-recommendation-button"
+                          >
+                            Add package
+                          </Button>
+                        </Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </>
+            )}
+          </ExpandableSection>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+};
+
+export default PackageRecommendations;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {
+  HelperText,
+  HelperTextItem,
+  FormHelperText,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+export type HelperTextVariant =
+  | 'default'
+  | 'indeterminate'
+  | 'warning'
+  | 'success'
+  | 'error';
+
+interface Props {
+  variant?: HelperTextVariant;
+  textValue?: string;
+  defaultText?: string;
+  hide?: boolean;
+}
+
+const CustomHelperText = ({
+  hide = false,
+  variant = 'error',
+  textValue = '',
+  defaultText = '',
+}: Props) =>
+  (!!textValue || !!defaultText) && !hide ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant={variant}>
+          {textValue ? textValue : defaultText}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : (
+    <></>
+  );
+
+export default CustomHelperText;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Button, Popover, TextContent, Text } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+
+const PackageInfoNotAvailablePopover = () => {
+  return (
+    <Popover
+      headerContent="Package description"
+      bodyContent={
+        <TextContent>
+          <Text>
+            The package description provides more information about the package.
+          </Text>
+          <Text>
+            When editing an existing blueprint, you may see a &quot;Not
+            available&quot; value in the field because information about
+            previously added packages can not be fetched.
+          </Text>
+        </TextContent>
+      }
+    >
+      <Button
+        variant="plain"
+        aria-label="Package description"
+        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+      >
+        <HelpIcon />
+      </Button>
+    </Popover>
+  );
+};
+
+export default PackageInfoNotAvailablePopover;

src/Components/CreateImageWizard/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;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Alert, Text, Form, Title } from '@patternfly/react-core';
+import { useFlag } from '@unleash/proxy-client-react';
+
+import PackageRecommendations from './PackageRecommendations';
+import Packages from './Packages';
+
+import { CENTOS_9 } from '../../../../constants';
+import { useAppSelector } from '../../../../store/hooks';
+import { selectDistribution } from '../../../../store/wizardSlice';
+import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
+
+const PackagesStep = () => {
+  const { isBeta } = useGetEnvironment();
+  const packageRecommendationsFlag = useFlag('image-builder.pkgrecs.enabled');
+  const distribution = useAppSelector(selectDistribution);
+  return (
+    <Form>
+      <Title headingLevel="h1" size="xl">
+        Additional packages
+      </Title>
+      <Text>Blueprints created with Images include all required packages.</Text>
+      <Alert variant="info" isInline title="Search for package groups">
+        Search for package groups by starting your search with the &apos;@&apos;
+        character. A single &apos;@&apos; as search input lists all available
+        package groups.
+      </Alert>
+      <Packages />
+      {isBeta() && packageRecommendationsFlag && distribution !== CENTOS_9 && (
+        <PackageRecommendations />
+      )}
+    </Form>
+  );
+};
+
+export default PackagesStep;