Wizard: Update order of releases on the Image output step

Fixes #909. Fixes #918.

This updates the order of the releases on the Image output step to sort from newest to oldest. The RELEASES Object was converted to Map which remembers insertion order.

The color of the `Show options for further development of RHEL` option in the Release dropdown select was also changed to blue.

src/Components/CreateImageWizard/CreateImageWizard.scss

@@ -45,10 +45,6 @@
     height: 1em;
 }
 
-.pf-c-select__menu-item.pf-m-load {
-    --pf-c-select__menu-item--Color: var(--pf-global--Color--100);
-}
-
 .pf-u-min-width {
     --pf-u-min-width--MinWidth: 11ch;
 }

src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js

@@ -28,6 +28,29 @@ const ImageOutputReleaseSelect = ({ label, isRequired, ...props }) => {
     setShowDevelopmentOptions(true);
   };
 
+  const setSelectOptions = () => {
+    var options = [];
+    const filteredRhel = new Map(
+      [...RELEASES].filter(([key]) => {
+        // Only show non-RHEL distros if expanded
+        if (showDevelopmentOptions) {
+          return true;
+        }
+        return isRhel(key);
+      })
+    );
+
+    filteredRhel.forEach((value, key) => {
+      options.push(
+        <SelectOption key={value} value={key}>
+          {RELEASES.get(key)}
+        </SelectOption>
+      );
+    });
+
+    return options;
+  };
+
   return (
     <FormGroup isRequired={isRequired} label={label}>
       <Select
@@ -35,7 +58,7 @@ const ImageOutputReleaseSelect = ({ label, isRequired, ...props }) => {
         variant={SelectVariant.single}
         onToggle={() => setIsOpen(!isOpen)}
         onSelect={setRelease}
-        selections={RELEASES[getState()?.values?.[input.name]]}
+        selections={RELEASES.get(getState()?.values?.[input.name])}
         isOpen={isOpen}
         {...(!showDevelopmentOptions && {
           loadingVariant: {
@@ -44,22 +67,7 @@ const ImageOutputReleaseSelect = ({ label, isRequired, ...props }) => {
           },
         })}
       >
-        {Object.entries(RELEASES)
-          .filter(([key]) => {
-            // Only show non-RHEL distros if expanded
-            if (showDevelopmentOptions) {
-              return true;
-            }
-
-            return isRhel(key);
-          })
-          .map(([key, release], index) => {
-            return (
-              <SelectOption key={index} value={key}>
-                {release}
-              </SelectOption>
-            );
-          })}
+        {setSelectOptions()}
       </Select>
     </FormGroup>
   );

src/Components/CreateImageWizard/formComponents/ReviewStep.js

@@ -134,7 +134,7 @@ const ReviewStep = () => {
           )}
           <DescriptionListTerm>Release</DescriptionListTerm>
           <DescriptionListDescription>
-            {RELEASES[getState()?.values?.release]}
+            {RELEASES.get(getState()?.values?.release)}
           </DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>

src/constants.js

@@ -8,12 +8,12 @@ export const UNIT_KIB = 1024 ** 1;
 export const UNIT_MIB = 1024 ** 2;
 export const UNIT_GIB = 1024 ** 3;
 
-export const RELEASES = {
-  [RHEL_8]: 'Red Hat Enterprise Linux (RHEL) 8',
-  [RHEL_9]: 'Red Hat Enterprise Linux (RHEL) 9',
-  'centos-8': 'CentOS Stream 8',
-  'centos-9': 'CentOS Stream 9',
-};
+export const RELEASES = new Map([
+  [RHEL_9, 'Red Hat Enterprise Linux (RHEL) 9'],
+  [RHEL_8, 'Red Hat Enterprise Linux (RHEL) 8'],
+  ['centos-9', 'CentOS Stream 9'],
+  ['centos-8', 'CentOS Stream 8'],
+]);
 
 export const DEFAULT_AWS_REGION = 'us-east-1';