V2 Wizard - Image Output

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -9,9 +9,11 @@ import {
 } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
 
-import { useAppDispatch } from '../../store/hooks';
+import ImageOutputStep from './steps/ImageOutput';
+
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import './CreateImageWizard.scss';
-import { initializeWizard } from '../../store/wizardSlice';
+import { initializeWizard, selectImageTypes } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
 
@@ -53,8 +55,17 @@ const CreateImageWizard = () => {
           <WizardStep
             name="Image output"
             id="step-image-output"
-            footer={<CustomWizardFooter disableNext={false} />}
-          ></WizardStep>
+            footer={
+              <CustomWizardFooter
+                disableNext={
+                  useAppSelector((state) => selectImageTypes(state)).length ===
+                  0
+                }
+              />
+            }
+          >
+            <ImageOutputStep />
+          </WizardStep>
           <WizardStep
             name="Review"
             id="step-review"

src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx

@@ -0,0 +1,60 @@
+import React, { ReactElement, useState } from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
+
+import { ARCHS } from '../../../../constants';
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
+import { ImageRequest } from '../../../../store/imageBuilderApi';
+import {
+  changeArchitecture,
+  selectArchitecture,
+} from '../../../../store/wizardSlice';
+
+const ArchSelect = () => {
+  const arch = useAppSelector((state) => selectArchitecture(state));
+  const dispatch = useAppDispatch();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const setArch = (
+    _event: React.MouseEvent,
+    selection: ImageRequest['architecture']
+  ) => {
+    dispatch(changeArchitecture(selection));
+    setIsOpen(false);
+  };
+
+  const setSelectOptions = () => {
+    const options: ReactElement[] = [];
+    ARCHS.forEach((arch) => {
+      options.push(
+        <SelectOption key={arch} value={arch}>
+          {arch}
+        </SelectOption>
+      );
+    });
+
+    return options;
+  };
+
+  return (
+    <FormGroup isRequired={true} label="Architecture">
+      <Select
+        ouiaId="arch_select"
+        variant={SelectVariant.single}
+        onToggle={() => setIsOpen(!isOpen)}
+        onSelect={setArch}
+        selections={arch}
+        isOpen={isOpen}
+      >
+        {setSelectOptions()}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ArchSelect;

src/Components/CreateImageWizardV2/steps/ImageOutput/CentOSAcknowledgement.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Alert, Button } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+const DeveloperProgramButton = () => {
+  return (
+    <Button
+      component="a"
+      target="_blank"
+      variant="link"
+      icon={<ExternalLinkAltIcon />}
+      iconPosition="right"
+      isInline
+      href={'https://developers.redhat.com/about'}
+    >
+      Red Hat Developer Program
+    </Button>
+  );
+};
+
+const CentOSAcknowledgement = () => {
+  return (
+    <Alert
+      variant="info"
+      isPlain
+      isInline
+      title={
+        <>
+          CentOS Stream builds are intended for the development of future
+          versions of RHEL and are not supported for production workloads or
+          other use cases.
+        </>
+      }
+    >
+      <p>
+        Join the <DeveloperProgramButton /> to learn about paid and no-cost RHEL
+        subscription options.
+      </p>
+    </Alert>
+  );
+};
+
+export default CentOSAcknowledgement;

src/Components/CreateImageWizardV2/steps/ImageOutput/ReleaseLifecycle.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  ExpandableSection,
+  FormGroup,
+  Panel,
+  PanelMain,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Chart, registerables } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import { Bar } from 'react-chartjs-2';
+
+import {
+  RHEL_8,
+  RHEL_8_FULL_SUPPORT,
+  RHEL_8_MAINTENANCE_SUPPORT,
+  RHEL_9_FULL_SUPPORT,
+  RHEL_9_MAINTENANCE_SUPPORT,
+} from '../../../../constants';
+import { useAppSelector } from '../../../../store/hooks';
+import { selectDistribution } from '../../../../store/wizardSlice';
+import 'chartjs-adapter-moment';
+
+Chart.register(annotationPlugin);
+Chart.register(...registerables);
+
+const currentDate = new Date().toString();
+
+export const chartMajorVersionCfg = {
+  data: {
+    labels: ['RHEL 9', 'RHEL 8'],
+    datasets: [
+      {
+        label: 'Full support',
+        backgroundColor: '#0066CC',
+        data: [
+          {
+            x: RHEL_9_FULL_SUPPORT,
+            y: 'RHEL 9',
+          },
+          {
+            x: RHEL_8_FULL_SUPPORT,
+            y: 'RHEL 8',
+          },
+        ],
+      },
+      {
+        label: 'Maintenance support',
+        backgroundColor: '#8BC1F7',
+        data: [
+          {
+            x: RHEL_9_MAINTENANCE_SUPPORT,
+            y: 'RHEL 9',
+          },
+          {
+            x: RHEL_8_MAINTENANCE_SUPPORT,
+            y: 'RHEL 8',
+          },
+        ],
+      },
+    ],
+  },
+  options: {
+    indexAxis: 'y' as const,
+    scales: {
+      x: {
+        type: 'time' as const,
+        time: {
+          unit: 'year' as const,
+        },
+        min: '2019-01-01' as const,
+        max: '2033-01-01' as const,
+      },
+      y: {
+        stacked: true,
+      },
+    },
+    responsive: true,
+    maintainAspectRatio: true,
+    aspectRatio: 1 | 5,
+    plugins: {
+      tooltip: {
+        enabled: false,
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      annotation: {
+        annotations: {
+          today: {
+            type: 'line' as const,
+            xMin: currentDate,
+            xMax: currentDate,
+            borderColor: 'black',
+            borderWidth: 2,
+            borderDash: [8, 2],
+          },
+        },
+      },
+    },
+  },
+};
+
+const MajorReleasesLifecyclesChart = () => {
+  return (
+    <Panel>
+      <PanelMain maxHeight="10rem">
+        <Bar
+          data-testid="release-lifecycle-chart"
+          options={chartMajorVersionCfg.options}
+          data={chartMajorVersionCfg.data}
+        />
+      </PanelMain>
+    </Panel>
+  );
+};
+
+const ReleaseLifecycle = () => {
+  const release = useAppSelector((state) => selectDistribution(state));
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  if (release === RHEL_8) {
+    return (
+      <ExpandableSection
+        toggleText={
+          isExpanded
+            ? 'Hide information about release lifecycle'
+            : 'Show information about release lifecycle'
+        }
+        onToggle={onToggle}
+        isExpanded={isExpanded}
+        isIndented
+      >
+        <FormGroup label="Release lifecycle">
+          <MajorReleasesLifecyclesChart />
+        </FormGroup>
+        <br />
+        <Button
+          component="a"
+          target="_blank"
+          variant="link"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          isInline
+          href={'https://access.redhat.com/support/policy/updates/errata'}
+        >
+          View Red Hat Enterprise Linux Life Cycle dates
+        </Button>
+      </ExpandableSection>
+    );
+  }
+};
+
+export default ReleaseLifecycle;