From 0055812ad1b86fbf39abac2b4614df5bc242a94e Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 20 Jul 2021 14:47:05 -0400
Subject: [PATCH] add updated breadcrumb for key providers (#884)

---
 src/realm-settings/RealmSettingsSection.tsx | 19 +++++++++++++++++++
 src/route-config.ts                         | 17 ++++++++++-------
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index 69a5da2d10..8f51e00d28 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import {
   AlertVariant,
+  Breadcrumb,
+  BreadcrumbItem,
   ButtonVariant,
   DropdownItem,
   DropdownSeparator,
@@ -44,6 +46,23 @@ type RealmSettingsHeaderProps = {
   realmName: string;
 };
 
+export const EditProviderCrumb = () => {
+  const { t } = useTranslation("realm-settings");
+  const { realm } = useRealm();
+
+  return (
+    <>
+      <Breadcrumb>
+        <BreadcrumbItem to={`#/${realm}/realm-settings/keys`}>
+          {t("keys")}
+        </BreadcrumbItem>
+        <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
+        <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
+      </Breadcrumb>
+    </>
+  );
+};
+
 const RealmSettingsHeader = ({
   save,
   onChange,
diff --git a/src/route-config.ts b/src/route-config.ts
index 6251d31c20..e54dbd36aa 100644
--- a/src/route-config.ts
+++ b/src/route-config.ts
@@ -14,7 +14,10 @@ import { GroupsSection } from "./groups/GroupsSection";
 import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
 import { PageNotFoundSection } from "./PageNotFoundSection";
 import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
-import { RealmSettingsSection } from "./realm-settings/RealmSettingsSection";
+import {
+  EditProviderCrumb,
+  RealmSettingsSection,
+} from "./realm-settings/RealmSettingsSection";
 import { NewRealmForm } from "./realm/add/NewRealmForm";
 import { SessionsSection } from "./sessions/SessionsSection";
 import { UserFederationSection } from "./user-federation/UserFederationSection";
@@ -192,37 +195,37 @@ export const routes: RoutesFn = (t: TFunction) => [
   {
     path: "/:realm/realm-settings/keys/:id?/aes-generated/settings",
     component: AESGeneratedSettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {
     path: "/:realm/realm-settings/keys/:id?/ecdsa-generated/settings",
     component: ECDSAGeneratedSettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {
     path: "/:realm/realm-settings/keys/:id?/hmac-generated/settings",
     component: HMACGeneratedSettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {
     path: "/:realm/realm-settings/keys/:id?/java-keystore/settings",
     component: JavaKeystoreSettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {
     path: "/:realm/realm-settings/keys/:id?/rsa-generated/settings",
     component: RSAGeneratedSettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {
     path: "/:realm/realm-settings/keys/:id?/rsa/settings",
     component: RSASettings,
-    breadcrumb: t("realm-settings:editProvider"),
+    breadcrumb: EditProviderCrumb,
     access: "view-realm",
   },
   {