Realm settings: Return user to Policies subtab (#1823)

* add function to go to policies subtab

* use routable tabs

* use new defaultLocation prop

* rebase, lint, and tests

* unskip

* fix cancel test

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -625,15 +625,15 @@ export default class RealmSettingsPage {
   }
 
   shouldDisplayDeleteClientPolicyDialog() {
-    cy.get(this.moreDrpDwn).last().click();
+    this.listingPage.searchItem("Test", false);
-    cy.get(this.moreDrpDwnItems).click();
+    this.listingPage.clickRowDetails("Test").clickDetailMenu("Delete");
     cy.get(this.deleteDialogTitle).contains("Delete policy?");
     cy.get(this.deleteDialogBodyText).contains(
       "This action will permanently delete the policy Test. This cannot be undone."
     );
     cy.findByTestId("modalConfirm").contains("Delete");
     cy.get(this.deleteDialogCancelBtn).contains("Cancel").click();
-    cy.get("table").should("not.have.text", "Test");
+    cy.get("table").should("be.visible").contains("td", "Test");
   }
 
   shouldDeleteClientProfileDialog() {
@@ -914,7 +914,7 @@ export default class RealmSettingsPage {
       "Test Description"
     );
     cy.findByTestId(this.cancelNewClientPolicyBtn).click();
-    cy.get("table").should("not.have.text", "Test");
+    cy.findByTestId(this.createPolicyEmptyStateBtn).should("exist");
   }
 
   shouldCompleteAndCreateNewClientPolicy() {
@@ -1119,12 +1119,12 @@ export default class RealmSettingsPage {
     );
     cy.findByTestId(this.saveNewClientPolicyBtn).click();
     cy.get(this.alertMessage).should("be.visible", "New client policy created");
-    cy.wait(200);
+    cy.wait(500);
     cy.findByTestId(this.clientPolicyDrpDwn).contains("Action").click();
     cy.findByTestId("deleteClientPolicyDropdown").click();
     cy.findByTestId("modalConfirm").contains("Delete").click();
     cy.get(this.alertMessage).should("be.visible", "Client profile deleted");
-    cy.get("table").should("not.have.text", "Test Again Description");
+    cy.findByTestId(this.createPolicyEmptyStateBtn).should("exist");
   }
 
   shouldReloadJSONPolicies() {

src/realm-settings/ClientProfileForm.tsx

@@ -176,7 +176,7 @@ export default function ClientProfileForm() {
             globalProfiles,
           });
           addAlert(t("deleteClientSuccess"), AlertVariant.success);
-          history.push(toClientPolicies({ realm }));
+          history.push(toClientPolicies({ realm, tab: "profiles" }));
         } catch (error) {
           addError(t("deleteClientError"), error);
         }

src/realm-settings/NewClientPolicyForm.tsx

@@ -34,13 +34,13 @@ import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import "./RealmSettingsSection.css";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
-import { toClientPolicies } from "./routes/ClientPolicies";
 import { toNewClientPolicyCondition } from "./routes/AddCondition";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { toEditClientPolicyCondition } from "./routes/EditCondition";
 import type { EditClientPolicyParams } from "./routes/EditClientPolicy";
 import { AddClientProfileModal } from "./AddClientProfileModal";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
+import { toRealmSettings } from "./routes/RealmSettings";
 
 type NewClientPolicyForm = Required<ClientPolicyRepresentation>;
 
@@ -274,7 +274,13 @@ export default function NewClientPolicyForm() {
           policies: updatedPolicies,
         });
         addAlert(t("deleteClientPolicySuccess"), AlertVariant.success);
-        history.push(toClientPolicies({ realm }));
+        history.push(
+          toRealmSettings({
+            realm,
+            tab: "clientPolicies",
+            subTab: "policies",
+          })
+        );
       } catch (error) {
         addError(t("deleteClientPolicyError"), error);
       }
@@ -314,7 +320,13 @@ export default function NewClientPolicyForm() {
               policies: updatedPolicies,
             });
             addAlert(t("deleteClientSuccess"), AlertVariant.success);
-            history.push(toClientPolicies({ realm }));
+            history.push(
+              toRealmSettings({
+                realm,
+                tab: "clientPolicies",
+                subTab: "policies",
+              })
+            );
           } catch (error) {
             addError(t("deleteClientError"), error);
           }
@@ -354,7 +366,13 @@ export default function NewClientPolicyForm() {
             policies: updatedPolicies,
           });
           addAlert(t("deleteClientSuccess"), AlertVariant.success);
-          history.push(toClientPolicies({ realm }));
+          history.push(
+            toRealmSettings({
+              realm,
+              tab: "clientPolicies",
+              subTab: "policies",
+            })
+          );
         } catch (error) {
           addError(t("deleteClientError"), error);
         }
@@ -488,7 +506,13 @@ export default function NewClientPolicyForm() {
               onClick={() =>
                 showAddConditionsAndProfilesForm || policyName
                   ? reset()
-                  : history.push(toClientPolicies({ realm }))
+                  : history.push(
+                      toRealmSettings({
+                        realm,
+                        tab: "clientPolicies",
+                        subTab: "policies",
+                      })
+                    )
               }
               data-testid="cancelCreatePolicy"
             >

src/realm-settings/PoliciesTab.tsx

@@ -79,7 +79,7 @@ export const PoliciesTab = () => {
       await adminClient.clientPolicies.updatePolicy({
         policies: updatedPolicies,
       });
-      history.push(toClientPolicies({ realm }));
+      history.push(toClientPolicies({ realm, tab: "policies" }));
       addAlert(
         t("realm-settings:updateClientPolicySuccess"),
         AlertVariant.success

src/realm-settings/ProfilesTab.tsx

@@ -202,7 +202,10 @@ export default function ProfilesTab() {
               <Button
                 id="createProfile"
                 component={(props) => (
-                  <Link {...props} to={toAddClientProfile({ realm })} />
+                  <Link
+                    {...props}
+                    to={toAddClientProfile({ realm, tab: "profiles" })}
+                  />
                 )}
                 data-testid="createProfile"
               >

src/realm-settings/RealmSettingsSection.tsx

@@ -39,7 +39,14 @@ export const ToClientPolicies = () => {
   return (
     <BreadcrumbItem
       render={(props) => (
-        <Link {...props} to={toClientPolicies({ realm })}>
+        <Link
+          {...props}
+          to={toRealmSettings({
+            realm,
+            tab: "clientPolicies",
+            subTab: "policies",
+          })}
+        >
           {t("clientPolicies")}
         </Link>
       )}
@@ -66,7 +73,7 @@ export const EditProfileCrumb = () => {
     <Breadcrumb>
       <BreadcrumbItem
         render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm })}>
+          <Link {...props} to={toClientPolicies({ realm, tab: "profiles" })}>
             {t("clientPolicies")}
           </Link>
         )}
@@ -84,7 +91,7 @@ export const EditExecutorCrumb = () => {
     <Breadcrumb>
       <BreadcrumbItem
         render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm })}>
+          <Link {...props} to={toClientPolicies({ realm, tab: "profiles" })}>
             {t("clientPolicies")}
           </Link>
         )}
@@ -102,7 +109,7 @@ export const NewPolicyCrumb = () => {
     <Breadcrumb>
       <BreadcrumbItem
         render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm })}>
+          <Link {...props} to={toClientPolicies({ realm, tab: "policy" })}>
             {t("clientPolicies")}
           </Link>
         )}

src/realm-settings/RealmSettingsTabs.tsx

@@ -57,6 +57,7 @@ import environment from "../environment";
 import helpUrls from "../help-urls";
 import { UserProfileTab } from "./user-profile/UserProfileTab";
 import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
+import { toClientPolicies } from "./routes/ClientPolicies";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -423,13 +424,14 @@ export const RealmSettingsTabs = ({
                 history,
               })}
             >
-              <Tabs
+              <RoutableTabs
-                activeKey={activeTab}
+                mountOnEnter
-                onSelect={(_, key) => setActiveTab(Number(key))}
+                defaultLocation={toClientPolicies({
+                  realm: realmName,
+                  tab: "profiles",
+                })}
               >
                 <Tab
-                  id="profiles"
-                  eventKey={0}
                   data-testid="rs-policies-clientProfiles-tab"
                   aria-label={t("clientProfilesSubTab")}
                   title={
@@ -443,6 +445,13 @@ export const RealmSettingsTabs = ({
                       </span>
                     </TabTitleText>
                   }
+                  {...routableTab({
+                    to: toClientPolicies({
+                      realm: realmName,
+                      tab: "profiles",
+                    }),
+                    history,
+                  })}
                 >
                   <ProfilesTab />
                 </Tab>
@@ -450,7 +459,13 @@ export const RealmSettingsTabs = ({
                   id="policies"
                   data-testid="rs-policies-clientPolicies-tab"
                   aria-label={t("clientPoliciesSubTab")}
-                  eventKey={1}
+                  {...routableTab({
+                    to: toClientPolicies({
+                      realm: realmName,
+                      tab: "policies",
+                    }),
+                    history,
+                  })}
                   title={
                     <TabTitleText>
                       {t("policies")}
@@ -465,7 +480,7 @@ export const RealmSettingsTabs = ({
                 >
                   <PoliciesTab />
                 </Tab>
-              </Tabs>
+              </RoutableTabs>
             </Tab>
             {isFeatureEnabled(Feature.DeclarativeUserProfile) &&
               userProfileEnabled === "true" && (

src/realm-settings/routes/AddClientPolicy.ts

@@ -7,7 +7,7 @@ import { NewPolicyCrumb } from "../RealmSettingsSection";
 export type AddClientPolicyParams = { realm: string };
 
 export const AddClientPolicyRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/add-client-policy",
+  path: "/:realm/realm-settings/clientPolicies/policies/add-client-policy",
   component: lazy(() => import("../NewClientPolicyForm")),
   breadcrumb: () => NewPolicyCrumb,
   access: "manage-clients",

src/realm-settings/routes/AddClientProfile.ts

@@ -5,10 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddClientProfileParams = {
   realm: string;
+  tab: string;
 };
 
 export const AddClientProfileRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/add-profile",
+  path: "/:realm/realm-settings/clientPolicies/:tab/add-profile",
   component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
   access: "manage-realm",

src/realm-settings/routes/ClientPolicies.ts

@@ -3,12 +3,15 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
+export type UserProfileTab = "profiles" | "policies";
+
 export type ClientPoliciesParams = {
   realm: string;
+  tab: string;
 };
 
 export const ClientPoliciesRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies",
+  path: "/:realm/realm-settings/clientPolicies/:tab",
   component: lazy(() => import("../ProfilesTab")),
   breadcrumb: (t) => t("realm-settings:allClientPolicies"),
   access: "view-realm",

src/realm-settings/routes/RealmSettings.ts

@@ -4,6 +4,7 @@ import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type RealmSettingsTab =
+  | "general"
   | "login"
   | "email"
   | "themes"
@@ -20,10 +21,11 @@ export type RealmSettingsTab =
 export type RealmSettingsParams = {
   realm: string;
   tab?: RealmSettingsTab;
+  subTab?: string;
 };
 
 export const RealmSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/:tab?",
+  path: "/:realm/realm-settings/:tab?/:subTab?",
   component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realmSettings"),
   access: "view-realm",