From c67a9a7744d6b842b325599780c556da1878272a Mon Sep 17 00:00:00 2001
From: Agnieszka Gancarczyk <agancarc@redhat.com>
Date: Mon, 17 Jun 2024 20:25:38 +0100
Subject: [PATCH] fixed issue related to dark mode

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
---
 .../dropdown-panel/DropdownPanel.tsx          | 11 +++++-
 .../dropdown-panel/dropdown-panel.css         | 15 +++++---
 .../UserDataTableAttributeSearchForm.tsx      |  4 ++-
 js/apps/admin-ui/src/events/AdminEvents.tsx   |  8 +++--
 .../admin-ui/src/realm-settings/ThemesTab.tsx |  2 +-
 .../localization/EffectiveMessageBundles.tsx  | 35 +++++++++++--------
 js/apps/admin-ui/src/util.ts                  |  9 ++---
 7 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx b/js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx
index b37951c18724..b40230501df2 100644
--- a/js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx
+++ b/js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { Icon } from "@patternfly/react-core";
 import { CaretDownIcon } from "@patternfly/react-icons";
+import { mediaQuery } from "../../util";
 import "./dropdown-panel.css";
 
 type DropdownPanelProps = {
@@ -63,7 +64,15 @@ const DropdownPanel: React.FC<DropdownPanelProps> = ({
         </Icon>
       </button>
       {searchDropdownOpen && (
-        <div className="kc-dropdown-panel-content">{children}</div>
+        <div
+          className={
+            mediaQuery?.matches
+              ? "kc-dropdown-panel-content dark-mode"
+              : "kc-dropdown-panel-content light-mode"
+          }
+        >
+          {children}
+        </div>
       )}
     </span>
   );
diff --git a/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css b/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
index 243a9d5cf349..4d57ed3797fd 100644
--- a/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
+++ b/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
@@ -1,9 +1,8 @@
 .kc-dropdown-panel {
   background-color: transparent;
-  padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm)
-    var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm);
-  border-color: var(--pf-v5-global--BorderColor--300)
-    var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
+  padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--form-element)
+    var(--pf-v5-global--spacer--sm);
+  border-color: var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
     var(--pf-v5-global--BorderColor--300);
   border-width: var(--pf-v5-global--BorderWidth--sm);
   border-style: solid;
@@ -36,3 +35,11 @@
   padding: 0.75rem;
   z-index: 1;
 }
+
+.light-mode {
+  background-color: var(--pf-v5-global--Color--light-100);
+}
+
+.dark-mode {
+  background-color: var(--pf-v5-global--BackgroundColor--300);
+}
diff --git a/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx b/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
index 06fdfc42010b..3761bda28ef0 100644
--- a/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
+++ b/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
@@ -162,7 +162,9 @@ export function UserDataTableAttributeSearchForm({
                 setSelectAttributeKeyOpen(false);
                 setValue("name", option.name!);
               }}
-            />
+            >
+              {label(t, option.displayName!, option.name)}
+            </SelectOption>
           ))}
         </KeycloakSelect>
       );
diff --git a/js/apps/admin-ui/src/events/AdminEvents.tsx b/js/apps/admin-ui/src/events/AdminEvents.tsx
index ea820c495ba3..20b52befc3b8 100644
--- a/js/apps/admin-ui/src/events/AdminEvents.tsx
+++ b/js/apps/admin-ui/src/events/AdminEvents.tsx
@@ -333,7 +333,9 @@ export const AdminEvents = () => {
                             }
                           >
                             {resourceTypes?.map((option) => (
-                              <SelectOption key={option} value={option} />
+                              <SelectOption key={option} value={option}>
+                                {option}
+                              </SelectOption>
                             ))}
                           </KeycloakSelect>
                         )}
@@ -399,7 +401,9 @@ export const AdminEvents = () => {
                               <SelectOption
                                 key={option.toString()}
                                 value={option}
-                              />
+                              >
+                                {option}
+                              </SelectOption>
                             ))}
                           </KeycloakSelect>
                         )}
diff --git a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
index 09571f609ca9..1dcde7f11f88 100644
--- a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
@@ -163,7 +163,7 @@ export const RealmSettingsThemesTab = ({
                 isOpen={adminUIThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-admin-theme"
-                aria-label="selectAdminTheme"
+                aria-label={t("selectAdminTheme")}
               >
                 {themeTypes.admin
                   .filter((theme) => theme.name !== "base")
diff --git a/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx b/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
index ec127fe63db0..9247737489a2 100644
--- a/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
+++ b/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
@@ -229,6 +229,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="theme"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -252,7 +253,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectThemesOpen}
-                      aria-labelledby={t("theme")}
+                      aria-label={t("selectTheme")}
                       chipGroupComponent={
                         <ChipGroup>
                           <Chip
@@ -270,14 +271,16 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="theme_placeholder"
-                          value="Select theme"
                           label={t("selectTheme")}
-                          className="kc__effective_message_bundles_search_theme__placeholder"
                           isDisabled
-                        />,
+                        >
+                          {t("selectTheme")}
+                        </SelectOption>,
                       ].concat(
                         themeNames.map((option) => (
-                          <SelectOption key={option} value={option} />
+                          <SelectOption key={option} value={option}>
+                            {option}
+                          </SelectOption>
                         )),
                       )}
                     </KeycloakSelect>
@@ -292,6 +295,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="themeType"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -315,7 +319,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectThemeTypeOpen}
-                      aria-labelledby={t("themeType")}
+                      aria-label={t("selectThemeType")}
                       chipGroupComponent={
                         <ChipGroup>
                           <Chip
@@ -333,14 +337,16 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="themeType_placeholder"
-                          value="Select theme type"
                           label={t("selectThemeType")}
-                          className="pf-m-plain"
                           isDisabled
-                        />,
+                        >
+                          {t("selectThemeType")}
+                        </SelectOption>,
                       ].concat(
                         themeTypes.map((option) => (
-                          <SelectOption key={option} value={option} />
+                          <SelectOption key={option} value={option}>
+                            {option}
+                          </SelectOption>
                         )),
                       )}
                     </KeycloakSelect>
@@ -351,6 +357,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="locale"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -374,7 +381,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectLanguageOpen}
-                      aria-labelledby="language"
+                      aria-label={t("selectLanguage")}
                       chipGroupComponent={
                         <ChipGroup>
                           {field.value ? (
@@ -397,11 +404,11 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="language_placeholder"
-                          value="Select language"
                           label={t("selectLanguage")}
-                          className="pf-m-plain"
                           isDisabled
-                        />,
+                        >
+                          {t("selectLanguage")}
+                        </SelectOption>,
                       ].concat(
                         combinedLocales.map((option) => (
                           <SelectOption key={option} value={option}>
diff --git a/js/apps/admin-ui/src/util.ts b/js/apps/admin-ui/src/util.ts
index 8f7df6689152..bfd6984d653a 100644
--- a/js/apps/admin-ui/src/util.ts
+++ b/js/apps/admin-ui/src/util.ts
@@ -83,9 +83,10 @@ export function convertAttributeNameToForm<T>(
   name: string,
 ): PathValue<T, Path<T>> {
   const index = name.indexOf(".");
-  return `${name.substring(0, index)}.${beerify(
-    name.substring(index + 1),
-  )}` as PathValue<T, Path<T>>;
+  return `${name.substring(0, index)}.${beerify(name.substring(index + 1))}` as PathValue<
+    T,
+    Path<T>
+  >;
 }
 
 export const beerify = <T extends string>(name: T) =>
@@ -182,7 +183,7 @@ export const localeToDisplayName = (locale: string, displayLocale: string) => {
 };
 
 const DARK_MODE_CLASS = "pf-v5-theme-dark";
-const mediaQuery =
+export const mediaQuery =
   window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
 
 updateDarkMode(mediaQuery?.matches);