From dc33e41ce22f2fdd2b75fda457f8cb6bae509c2d Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Fri, 28 Apr 2023 16:40:09 +0200
Subject: [PATCH] Settings: Normalize color hex to be lowercase; display custom
 values

---
 .../components/Stages/Stage/Stage.js            | 17 ++++++++++++++++-
 .../pages/ReviewWorkflows/utils/colors.js       |  2 +-
 .../ReviewWorkflows/utils/tests/colors.test.js  |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js
index 9985f3be06..c7447b96b3 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js
@@ -172,6 +172,9 @@ export function Stage({
     ),
     color: hex,
   }));
+  // TODO: the .toUpperCase() conversion can be removed once the hex code is normalized in
+  // the admin API
+  const colorValue = colorOptions.find(({ value }) => value === colorField.value.toUpperCase());
 
   return (
     <Box ref={composedRef}>
@@ -275,7 +278,19 @@ export function Stage({
                         colorField.onChange({ target: { value } });
                         dispatch(updateStage(id, { color: value }));
                       }}
-                      value={colorOptions.find(({ value }) => value === colorField.value)}
+                      // If no color was found in all the valid theme colors it means a user
+                      // has set a custom value e.g. through the content API. In that case we
+                      // display the custom color and a "Custom" label.
+                      value={
+                        colorValue ?? {
+                          value: colorField.value,
+                          label: formatMessage({
+                            id: 'Settings.review-workflows.stage.color.name.custom',
+                            defaultMessage: 'Custom',
+                          }),
+                          color: colorField.value,
+                        }
+                      }
                     />
 
                     <FieldError />
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
index e33a85d796..0d10447f33 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
@@ -27,7 +27,7 @@ export function getStageColorByHex(hex) {
 
 export function getAvailableStageColors() {
   return Object.entries(STAGE_COLORS).map(([themeColorName, name]) => ({
-    hex: lightTheme.colors[themeColorName],
+    hex: lightTheme.colors[themeColorName].toUpperCase(),
     name,
   }));
 }
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
index 746dc1ee8b..73b198c4d5 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
@@ -11,6 +11,8 @@ describe('Settings | Review Workflows | colors', () => {
         hex: expect.any(String),
         name: expect.any(String),
       });
+
+      expect(color.hex).toBe(color.hex.toUpperCase());
     });
   });