CreateImageWizard: Don't show centos on non-beta

The distinction is made by checking if the distribution contained
'rhel'. This is the same way the review page determins if it should show
a registration tab.

src/Components/CreateImageWizard/ImageCreator.js

@@ -14,6 +14,7 @@ import ActivationKeys from './formComponents/ActivationKeys';
 import Select from '@data-driven-forms/pf4-component-mapper/select';
 import FileSystemConfiguration from './formComponents/FileSystemConfiguration';
 import FileSystemConfigToggle from './formComponents/FileSystemConfigToggle';
+import ImageOutputReleaseSelect from './formComponents/ImageOutputReleaseSelect';
 
 const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, customValidatorMapper, defaultArch, className, ...props }) => {
     return schema ? <FormRenderer
@@ -39,6 +40,7 @@ const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, custom
             'activation-keys': ActivationKeys,
             'file-system-config-toggle': FileSystemConfigToggle,
             'file-system-configuration': FileSystemConfiguration,
+            'image-output-release-select': ImageOutputReleaseSelect,
             ...customComponentMapper,
         } }
         onCancel={ onClose }

src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
+import { RELEASES } from '../../../constants';
+
+const ImageOutputReleaseSelect = ({ label, isRequired, ...props }) => {
+    const { change, getState } = useFormApi();
+    const { input } = useFieldApi(props);
+    const [ isOpen, setIsOpen ] = useState(false);
+
+    const setRelease = (_, selection) => {
+        change(input.name, selection);
+        setIsOpen(false);
+    };
+
+    const handleClear = () => {
+        change(input.name, null);
+    };
+
+    return (
+        <FormGroup isRequired={ isRequired } label={ label }>
+            <Select
+                variant={ SelectVariant.single }
+                onToggle={ () => setIsOpen(!isOpen) }
+                onSelect={ setRelease }
+                onClear={ handleClear }
+                selections={ RELEASES[getState()?.values?.[input.name]] }
+                isOpen={ isOpen }>
+                {
+                    Object.entries(RELEASES)
+                        .filter(([ key ]) => {
+                            // Only show non-RHEL distros in beta
+                            if (!(insights.chrome.isBeta() || key.includes('rhel'))) {
+                                return false;
+                            }
+
+                            return true;
+                        })
+                        .map(([ key, release ], index) => {
+                            return <SelectOption key={ index } value={ key }>
+                                { release }
+                            </SelectOption>;
+                        })
+                }
+            </Select>
+        </FormGroup>
+    );
+};
+
+ImageOutputReleaseSelect.propTypes = {
+    label: PropTypes.node,
+    isRequired: PropTypes.bool
+};
+
+export default ImageOutputReleaseSelect;

src/Components/CreateImageWizard/formComponents/ReviewStep.js

@@ -19,9 +19,8 @@ import {
 } from '@patternfly/react-table';
 import { HelpIcon } from '@patternfly/react-icons';
 import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
-import { releaseValues } from '../steps/imageOutput';
 import { googleAccType } from '../steps/googleCloud';
-import { UNIT_GIB, UNIT_MIB } from '../../../constants';
+import { RELEASES, UNIT_GIB, UNIT_MIB } from '../../../constants';
 
 const FSReviewTable = ({ ...props }) => {
     return (
@@ -107,7 +106,7 @@ const ReviewStep = () => {
                     }
                     <DescriptionListTerm>Release</DescriptionListTerm>
                     <DescriptionListDescription>
-                        {releaseValues?.[getState()?.values?.release]}
+                        {RELEASES[getState()?.values?.release]}
                     </DescriptionListDescription>
                 </DescriptionListGroup>
             </DescriptionList>

src/Components/CreateImageWizard/steps/imageOutput.js

@@ -7,12 +7,6 @@ import { Text } from '@patternfly/react-core';
 import DocumentationButton from '../../sharedComponents/DocumentationButton';
 import StepTemplate from './stepTemplate';
 
-export const releaseValues = {
-    [RHEL_8]: 'Red Hat Enterprise Linux (RHEL) 8',
-    'centos-8': 'CentOS Stream 8',
-    'centos-9': 'CentOS Stream 9',
-};
-
 export default {
     StepTemplate,
     id: 'wizard-imageoutput',
@@ -26,15 +20,10 @@ export default {
             label: <Text>Image builder allows you to create a custom image and push it to target environments.<br /><DocumentationButton /></Text>
         },
         {
-            component: componentTypes.SELECT,
+            component: 'image-output-release-select',
             label: 'Release',
             name: 'release',
-            simpleValue: true,
             initialValue: RHEL_8,
-            options: Object.entries(releaseValues).map(([ key, title ]) => ({
-                label: title,
-                value: key
-            })),
             isRequired: true,
             validate: [
                 {