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>