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

@@ -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 && (
+          <Divider />
-            <NavGroup title="">
-              <LeftNav title="home" path="/" />
-            </NavGroup>
-          )}
           {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" />

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}

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}
+              key={tableKey}
-              loader={loader}
+              isSearching
-              ariaLabelKey="client-scopes:clientScopeList"
+              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")}

src/realm-settings/RealmSettingsSection.tsx

@@ -310,7 +310,6 @@ export const RealmSettingsSection = () => {
             >
               <EventsTab />
             </Tab>
-
             <Tab
               id="localization"
               eventKey="localization"