V2Wizard: Add <ReleaseLifecycle> to Image Output step

The `<ReleaseLifecycle>` component has dropped DDF and now uses RTK.

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

@@ -1,14 +1,11 @@
-import React, { useContext } from 'react';
+import React, { useState } from 'react';
 
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
-import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
 import {
   Button,
   ExpandableSection,
   FormGroup,
   Panel,
   PanelMain,
-  Text,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { Chart, registerables } from 'chart.js';
@@ -16,16 +13,15 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 import { Bar } from 'react-chartjs-2';
 
 import {
-  RELEASES,
   RHEL_8,
   RHEL_8_FULL_SUPPORT,
   RHEL_8_MAINTENANCE_SUPPORT,
-  RHEL_9,
   RHEL_9_FULL_SUPPORT,
   RHEL_9_MAINTENANCE_SUPPORT,
-} from '../../../constants';
+} from '../../../../constants';
+import { useAppSelector } from '../../../../store/hooks';
+import { selectDistribution } from '../../../../store/wizardSlice';
 import 'chartjs-adapter-moment';
-import { toMonthAndYear } from '../../../Utilities/time';
 
 Chart.register(annotationPlugin);
 Chart.register(...registerables);
@@ -122,62 +118,42 @@ const MajorReleasesLifecyclesChart = () => {
 };
 
 const ReleaseLifecycle = () => {
-  const { getState } = useFormApi();
-  const { currentStep } = useContext(WizardContext);
-  const release = getState().values.release;
-  const [isExpanded, setIsExpanded] = React.useState(true);
+  const release = useAppSelector((state) => selectDistribution(state));
+  const [isExpanded, setIsExpanded] = useState(true);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
   if (release === RHEL_8) {
-    if (currentStep.name === 'image-output') {
-      return (
-        <ExpandableSection
-          toggleText={
-            isExpanded
-              ? 'Hide information about release lifecycle'
-              : 'Show information about release lifecycle'
-          }
-          onToggle={onToggle}
-          isExpanded={isExpanded}
-          isIndented
+    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'}
         >
-          <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>
-      );
-    } else if (currentStep.name === 'review') {
-      return (
-        <>
-          <Text className="pf-v5-u-font-size-sm">
-            {RELEASES.get(release)} will be supported through{' '}
-            {toMonthAndYear(RHEL_8_FULL_SUPPORT[0])}, with optional ELS support
-            through {toMonthAndYear(RHEL_8_MAINTENANCE_SUPPORT[0])}. Consider
-            building an image with {RELEASES.get(RHEL_9)} to extend the support
-            period.
-          </Text>
-          <FormGroup label="Release lifecycle">
-            <MajorReleasesLifecyclesChart />
-          </FormGroup>
-          <br />
-        </>
-      );
-    }
+          View Red Hat Enterprise Linux Life Cycle dates
+        </Button>
+      </ExpandableSection>
+    );
   }
 };
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Text, Form, Title } from '@patternfly/react-core';
 
+import ReleaseLifecycle from './ReleaseLifecycle';
 import ReleaseSelect from './ReleaseSelect';
 
 import DocumentationButton from '../../../sharedComponents/DocumentationButton';
@@ -17,6 +18,7 @@ const ImageOutputStep = () => {
         <DocumentationButton />
       </Text>
       <ReleaseSelect />
+      <ReleaseLifecycle />
     </Form>
   );
 };