From 6131dafe481b3050dcedf743640f9d804eae4e27 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Fri, 13 Jan 2023 11:07:18 +0100
Subject: [PATCH] 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.
---
 .../CreateImageWizard/CreateImageWizard.scss  |  4 --
 .../ImageOutputReleaseSelect.js               | 42 +++++++++++--------
 .../formComponents/ReviewStep.js              |  2 +-
 src/constants.js                              | 12 +++---
 4 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss
index c3f05e04..508867e1 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.scss
+++ b/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;
 }
diff --git a/src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js b/src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js
index 9fbfe024..36403d64 100644
--- a/src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js
+++ b/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>
   );
diff --git a/src/Components/CreateImageWizard/formComponents/ReviewStep.js b/src/Components/CreateImageWizard/formComponents/ReviewStep.js
index 7053ea0c..32de2715 100644
--- a/src/Components/CreateImageWizard/formComponents/ReviewStep.js
+++ b/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>
diff --git a/src/constants.js b/src/constants.js
index 676e600d..0cfc4908 100644
--- a/src/constants.js
+++ b/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';