From f93d478f44298efa5e7e7ffd5ceb73f9ec49dcff Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 17 Aug 2021 08:50:31 -0400
Subject: [PATCH] Realm settings(localization): add locale dropdown to table
 (#936)

* add localization dropdown

uncomment isDisabled

clean up names

comment out localization tab again

disable actions menu if form not submitted

uncomment tab

use currentRealm for tableLoader

fix axe issues labeled as serious

PR feedback from Erik

use isSearching instead of keepToolbar

* fix node build

* use object entries

Co-authored-by: Jon Koops <jonkoops@gmail.com>
---
 src/PageNav.tsx                               |  11 +-
 .../table-toolbar/KeycloakDataTable.tsx       |   4 +-
 src/realm-settings/LocalizationTab.tsx        | 102 +++++++++++++++---
 src/realm-settings/RealmSettingsSection.tsx   |   1 -
 4 files changed, 97 insertions(+), 21 deletions(-)

diff --git a/src/PageNav.tsx b/src/PageNav.tsx
index 81ee7854b2..338c7da947 100644
--- a/src/PageNav.tsx
+++ b/src/PageNav.tsx
@@ -7,6 +7,7 @@ import {
   NavGroup,
   NavList,
   PageSidebar,
+  Divider,
 } from "@patternfly/react-core";
 
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
@@ -90,13 +91,9 @@ export const PageNav: React.FunctionComponent = () => {
               <RealmSelector />
             </NavItem>
           </NavList>
-          {!isOnAddRealm && (
-            <NavGroup title="">
-              <LeftNav title="home" path="/" />
-            </NavGroup>
-          )}
+          <Divider />
           {showManage && !isOnAddRealm && (
-            <NavGroup title={t("manage")}>
+            <NavGroup aria-label={t("manage")} title={t("manage")}>
               <LeftNav title="clients" path="/clients" />
               <LeftNav title="clientScopes" path="/client-scopes" />
               <LeftNav title="realmRoles" path="/roles" />
@@ -108,7 +105,7 @@ export const PageNav: React.FunctionComponent = () => {
           )}
 
           {showConfigure && !isOnAddRealm && (
-            <NavGroup title={t("configure")}>
+            <NavGroup aria-label={t("configure")} title={t("configure")}>
               <LeftNav title="realmSettings" path="/realm-settings" />
               <LeftNav title="authentication" path="/authentication" />
               <LeftNav title="identityProviders" path="/identity-providers" />
diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index 2966ea0801..2de250bdbc 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -375,6 +375,7 @@ export function KeycloakDataTable<T>({
       {((data && data.length > 0) ||
         search !== "" ||
         isSearching ||
+        emptyState ||
         loading) && (
         <PaginatingTableToolbar
           count={data?.length || 0}
@@ -413,7 +414,8 @@ export function KeycloakDataTable<T>({
           {!loading &&
             (!data || data.length === 0) &&
             (search !== "" || !isSearching) &&
-            searchPlaceholderKey && (
+            searchPlaceholderKey &&
+            !emptyState && (
               <ListEmptyState
                 hasIcon={true}
                 icon={icon}
diff --git a/src/realm-settings/LocalizationTab.tsx b/src/realm-settings/LocalizationTab.tsx
index 7c952dad9e..ab6d7082b8 100644
--- a/src/realm-settings/LocalizationTab.tsx
+++ b/src/realm-settings/LocalizationTab.tsx
@@ -5,13 +5,16 @@ import {
   ActionGroup,
   AlertVariant,
   Button,
+  Divider,
   FormGroup,
   PageSection,
   Select,
+  SelectGroup,
   SelectOption,
   SelectVariant,
   Switch,
   TextContent,
+  ToolbarItem,
 } from "@patternfly/react-core";
 
 import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
@@ -42,19 +45,21 @@ export const LocalizationTab = ({
   save,
   reset,
   realm,
-  refresh,
 }: LocalizationTabProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const [addMessageBundleModalOpen, setAddMessageBundleModalOpen] =
     useState(false);
-  const [key, setKey] = useState(0);
 
   const [supportedLocalesOpen, setSupportedLocalesOpen] = useState(false);
   const [defaultLocaleOpen, setDefaultLocaleOpen] = useState(false);
+  const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
+  const [selectMenuLocale, setSelectMenuLocale] = useState("en");
 
-  const { getValues, control, handleSubmit } = useFormContext();
+  const { getValues, control, handleSubmit, formState } = useFormContext();
   const [valueSelected, setValueSelected] = useState(false);
+  const [selectMenuValueSelected, setSelectMenuValueSelected] = useState(false);
+
   const themeTypes = useServerInfo().themes!;
   const bundleForm = useForm<BundleForm>({ mode: "onChange" });
   const { addAlert, addError } = useAlerts();
@@ -76,11 +81,25 @@ export const LocalizationTab = ({
     try {
       const result = await adminClient.realms.getRealmLocalizationTexts({
         realm: realm.realm!,
-        selectedLocale: getValues("defaultLocale") || "en",
+        selectedLocale: selectMenuLocale || getValues("defaultLocale") || "en",
       });
-      return Object.keys(result).map((key) => [key, result[key]]);
+
+      return Object.entries(result);
     } catch (error) {
-      return [[]];
+      return [];
+    }
+  };
+
+  const tableLoader = async () => {
+    try {
+      const result = await adminClient.realms.getRealmLocalizationTexts({
+        realm: currentRealm,
+        selectedLocale: selectMenuLocale,
+      });
+
+      return Object.entries(result);
+    } catch (error) {
+      return [];
     }
   };
 
@@ -88,6 +107,34 @@ export const LocalizationTab = ({
     setAddMessageBundleModalOpen(!addMessageBundleModalOpen);
   };
 
+  const options = [
+    <SelectGroup label={t("defaultLocale")} key="group1">
+      {watchSupportedLocales
+        .filter((item) => item === realm?.defaultLocale)
+        .map((locale) => (
+          <SelectOption key={locale} value={locale}>
+            {t(`allSupportedLocales.${locale}`)}
+          </SelectOption>
+        ))}
+    </SelectGroup>,
+    <Divider key="divider" />,
+    <SelectGroup label={t("supportedLocales")} key="group2">
+      {watchSupportedLocales
+        .filter((item) => item !== realm?.defaultLocale)
+        .map((locale) => (
+          <SelectOption key={locale} value={locale}>
+            {t(`allSupportedLocales.${locale}`)}
+          </SelectOption>
+        ))}
+    </SelectGroup>,
+  ];
+
+  const [tableKey, setTableKey] = useState(0);
+
+  const refreshTable = () => {
+    setTableKey(new Date().getTime());
+  };
+
   const addKeyValue = async (pair: KeyValueType): Promise<void> => {
     try {
       adminClient.setConfig({
@@ -96,7 +143,8 @@ export const LocalizationTab = ({
       await adminClient.realms.addLocalization(
         {
           realm: currentRealm!,
-          selectedLocale: getValues("defaultLocale") || "en",
+          selectedLocale:
+            selectMenuLocale || getValues("defaultLocale") || "en",
           key: pair.key,
         },
         pair.value
@@ -105,7 +153,7 @@ export const LocalizationTab = ({
       adminClient.setConfig({
         realmName: currentRealm!,
       });
-      refresh();
+      refreshTable();
       addAlert(t("pairCreatedSuccess"), AlertVariant.success);
     } catch (error) {
       addError("realm-settings:pairCreatedError", error);
@@ -230,7 +278,6 @@ export const LocalizationTab = ({
                         onSelect={(_, value) => {
                           onChange(value as string);
                           setValueSelected(true);
-                          setKey(new Date().getTime());
                           setDefaultLocaleOpen(false);
                         }}
                         selections={
@@ -269,6 +316,7 @@ export const LocalizationTab = ({
             <ActionGroup>
               <Button
                 variant="primary"
+                isDisabled={!formState.isDirty}
                 type="submit"
                 data-testid="localization-tab-save"
               >
@@ -287,12 +335,42 @@ export const LocalizationTab = ({
           </TextContent>
           <div className="tableBorder">
             <KeycloakDataTable
-              key={key}
-              loader={loader}
-              ariaLabelKey="client-scopes:clientScopeList"
+              key={tableKey}
+              isSearching
+              loader={selectMenuValueSelected ? tableLoader : loader}
+              ariaLabelKey="realm-settings:localization"
+              searchTypeComponent={
+                <ToolbarItem>
+                  <Select
+                    width={180}
+                    data-testid="filter-by-locale-select"
+                    isOpen={filterDropdownOpen}
+                    className="kc-filter-by-locale-select"
+                    variant={SelectVariant.single}
+                    isDisabled={!formState.isSubmitSuccessful}
+                    onToggle={(isExpanded) => setFilterDropdownOpen(isExpanded)}
+                    onSelect={(_, value) => {
+                      setSelectMenuLocale(value.toString());
+                      setSelectMenuValueSelected(true);
+                      refreshTable();
+                      setFilterDropdownOpen(false);
+                    }}
+                    selections={
+                      selectMenuValueSelected
+                        ? t(`allSupportedLocales.${selectMenuLocale}`)
+                        : realm.defaultLocale !== ""
+                        ? t(`allSupportedLocales.${"en"}`)
+                        : t("placeholderText")
+                    }
+                  >
+                    {options}
+                  </Select>
+                </ToolbarItem>
+              }
               toolbarItem={
                 <Button
                   data-testid="add-bundle-button"
+                  isDisabled={!formState.isSubmitSuccessful}
                   onClick={() => setAddMessageBundleModalOpen(true)}
                 >
                   {t("addMessageBundle")}
diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index 4db58c7f22..2029fbdcfe 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@@ -310,7 +310,6 @@ export const RealmSettingsSection = () => {
             >
               <EventsTab />
             </Tab>
-
             <Tab
               id="localization"
               eventKey="localization"