initial version of the breadcrumb component (#119)

* initial version of the breadcrumb component

* moved breadcrumbs to Page component

package.json

@@ -27,7 +27,8 @@
     "react-dom": "^16.8.5",
     "react-hook-form": "^6.8.2",
     "react-i18next": "^11.7.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "use-react-router-breadcrumbs": "^1.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

src/App.tsx

@@ -5,89 +5,27 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 import { Help } from "./components/help-enabler/HelpHeader";
-import { NewRealmForm } from "./realm/add/NewRealmForm";
-import { NewRoleForm } from "./realm-roles/add/NewRoleForm";
-import { NewClientForm } from "./clients/add/NewClientForm";
-import { NewClientScopeForm } from "./client-scopes/add/NewClientScopeForm";
 
-import { ImportForm } from "./clients/import/ImportForm";
-import { ClientsSection } from "./clients/ClientsSection";
-import { ClientScopesSection } from "./client-scopes/ClientScopesSection";
-import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
-import { UsersSection } from "./user/UsersSection";
-import { GroupsSection } from "./groups/GroupsSection";
-import { SessionsSection } from "./sessions/SessionsSection";
-import { EventsSection } from "./events/EventsSection";
-import { RealmSettingsSection } from "./realm-settings/RealmSettingsSection";
-import { AuthenticationSection } from "./authentication/AuthenticationSection";
-import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
-import { UserFederationSection } from "./user-federation/UserFederationSection";
-
-import { PageNotFoundSection } from "./PageNotFoundSection";
 import { RealmContextProvider } from "./components/realm-context/RealmContext";
-import { ClientSettings } from "./clients/ClientSettings";
+
+import { routes } from "./route-config";
+import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
 
 export const App = () => {
   return (
     <Router>
       <RealmContextProvider>
         <Help>
-          <Page header={<Header />} isManagedSidebar sidebar={<PageNav />}>
+          <Page
+            header={<Header />}
+            isManagedSidebar
+            sidebar={<PageNav />}
+            breadcrumb={<PageBreadCrumbs />}
+          >
             <Switch>
-              <Route exact path="/add-realm" component={NewRealmForm}></Route>
+              {routes(() => {}).map((route, i) => (
-              <Route exact path="/add-role" component={NewRoleForm}></Route>
+                <Route key={i} {...route} exact />
-              <Route exact path="/clients" component={ClientsSection}></Route>
+              ))}
-              <Route
-                exact
-                path="/client-settings/:id"
-                component={ClientSettings}
-              ></Route>
-              <Route exact path="/add-client" component={NewClientForm}></Route>
-              <Route exact path="/import-client" component={ImportForm}></Route>
-
-              <Route
-                exact
-                path="/client-scopes"
-                component={ClientScopesSection}
-              ></Route>
-              <Route
-                exact
-                path="/add-client-scopes"
-                component={NewClientScopeForm}
-              ></Route>
-              <Route
-                exact
-                path="/realm-roles"
-                component={RealmRolesSection}
-              ></Route>
-              <Route exact path="/users" component={UsersSection}></Route>
-              <Route exact path="/groups" component={GroupsSection}></Route>
-              <Route exact path="/sessions" component={SessionsSection}></Route>
-              <Route exact path="/events" component={EventsSection}></Route>
-
-              <Route
-                exact
-                path="/realm-settings"
-                component={RealmSettingsSection}
-              ></Route>
-              <Route
-                exact
-                path="/authentication"
-                component={AuthenticationSection}
-              ></Route>
-              <Route
-                exact
-                path="/identity-providers"
-                component={IdentityProvidersSection}
-              ></Route>
-              <Route
-                exact
-                path="/user-federation"
-                component={UserFederationSection}
-              ></Route>
-
-              <Route exact path="/" component={ClientsSection} />
-              <Route component={PageNotFoundSection} />
             </Switch>
           </Page>
         </Help>

src/clients/ClientList.tsx

@@ -40,7 +40,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
     const field = data!.toString();
     const [id, clientId, disabled] = field.split("#");
     return (
-      <Link to={`client-settings/${id}`}>
+      <Link to={`/clients/${id}`}>
         {clientId}
         {disabled !== "true" && <Badge isRead>Disabled</Badge>}
       </Link>

src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap

@@ -71,7 +71,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/767756c2-21f8-431c-9f4b-edf30654d653"
+                href="/clients/767756c2-21f8-431c-9f4b-edf30654d653"
               >
                 account
               </a>
@@ -170,7 +170,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/337dc87b-e08d-409e-aaac-6ab7df4b925b"
+                href="/clients/337dc87b-e08d-409e-aaac-6ab7df4b925b"
               >
                 account-console
               </a>
@@ -269,7 +269,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/60d59afe-7926-4c22-b829-798125793ef5"
+                href="/clients/60d59afe-7926-4c22-b829-798125793ef5"
               >
                 admin-cli
               </a>
@@ -342,7 +342,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/c2d74093-2b8c-4ecb-870f-c7358ff48237"
+                href="/clients/c2d74093-2b8c-4ecb-870f-c7358ff48237"
               >
                 broker
               </a>
@@ -415,7 +415,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/66135023-e667-4864-b1f3-f87e805fabc2"
+                href="/clients/66135023-e667-4864-b1f3-f87e805fabc2"
               >
                 master-realm
               </a>
@@ -486,7 +486,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/324f4182-d302-44f8-ac8a-149eaa29dc90"
+                href="/clients/324f4182-d302-44f8-ac8a-149eaa29dc90"
               >
                 new
               </a>
@@ -585,7 +585,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/fb45882b-4d85-4f40-920e-6a68298d36d0"
+                href="/clients/fb45882b-4d85-4f40-920e-6a68298d36d0"
               >
                 photoz-realm
               </a>
@@ -656,7 +656,7 @@ Object {
               data-label="clientID"
             >
               <a
-                href="/client-settings/9ed60e41-d794-4046-842f-3247bf32f5ce"
+                href="/clients/9ed60e41-d794-4046-842f-3247bf32f5ce"
               >
                 security-admin-console
               </a>
@@ -819,7 +819,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/767756c2-21f8-431c-9f4b-edf30654d653"
+              href="/clients/767756c2-21f8-431c-9f4b-edf30654d653"
             >
               account
             </a>
@@ -918,7 +918,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/337dc87b-e08d-409e-aaac-6ab7df4b925b"
+              href="/clients/337dc87b-e08d-409e-aaac-6ab7df4b925b"
             >
               account-console
             </a>
@@ -1017,7 +1017,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/60d59afe-7926-4c22-b829-798125793ef5"
+              href="/clients/60d59afe-7926-4c22-b829-798125793ef5"
             >
               admin-cli
             </a>
@@ -1090,7 +1090,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/c2d74093-2b8c-4ecb-870f-c7358ff48237"
+              href="/clients/c2d74093-2b8c-4ecb-870f-c7358ff48237"
             >
               broker
             </a>
@@ -1163,7 +1163,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/66135023-e667-4864-b1f3-f87e805fabc2"
+              href="/clients/66135023-e667-4864-b1f3-f87e805fabc2"
             >
               master-realm
             </a>
@@ -1234,7 +1234,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/324f4182-d302-44f8-ac8a-149eaa29dc90"
+              href="/clients/324f4182-d302-44f8-ac8a-149eaa29dc90"
             >
               new
             </a>
@@ -1333,7 +1333,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/fb45882b-4d85-4f40-920e-6a68298d36d0"
+              href="/clients/fb45882b-4d85-4f40-920e-6a68298d36d0"
             >
               photoz-realm
             </a>
@@ -1404,7 +1404,7 @@ Object {
             data-label="clientID"
           >
             <a
-              href="/client-settings/9ed60e41-d794-4046-842f-3247bf32f5ce"
+              href="/clients/9ed60e41-d794-4046-842f-3247bf32f5ce"
             >
               security-admin-console
             </a>

src/clients/messages.json

@@ -10,6 +10,7 @@
     "description": "Description",
     "name": "Name",
     "clientList": "Client list",
+    "clientSettings": "Client details",
     "generalSettings": "General Settings",
     "capabilityConfig": "Capability config",
     "clientsExplain": "Clients are applications and services that can request authentication of a user",

src/common-messages.json

@@ -25,6 +25,7 @@
     "documentation": "Documentation",
     "enableHelpMode": "Enable help mode",
 
+    "home": "Home",
     "manage": "Manage",
     "clients": "Clients",
     "clientScopes": "Client scopes",

src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
+import useBreadcrumbs from "use-react-router-breadcrumbs";
+import { useTranslation } from "react-i18next";
+
+import { routes } from "../../route-config";
+
+export const PageBreadCrumbs = () => {
+  const { t } = useTranslation();
+  const crumbs = useBreadcrumbs(routes(t));
+  return (
+    <Breadcrumb>
+      {crumbs.map(({ match, breadcrumb: crumb }, i) => (
+        <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
+          {crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
+          {crumbs.length - 1 === i && <>{crumb}</>}
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  );
+};

src/components/bread-crumb/__tests__/PageBreadCrumbs.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { mount } from "enzyme";
+import { PageBreadCrumbs } from "../PageBreadCrumbs";
+import { MemoryRouter } from "react-router-dom";
+
+describe("BreadCrumbs tests", () => {
+  it("couple of crumbs", () => {
+    const crumbs = mount(
+      <MemoryRouter initialEntries={["/add-client"]}>
+        <PageBreadCrumbs />
+      </MemoryRouter>
+    );
+    expect(crumbs.find(PageBreadCrumbs)).toMatchSnapshot();
+  });
+});

src/components/bread-crumb/__tests__/__snapshots__/PageBreadCrumbs.test.tsx.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BreadCrumbs tests couple of crumbs 1`] = `
+<PageBreadCrumbs>
+  <Breadcrumb>
+    <nav
+      aria-label="Breadcrumb"
+      className="pf-c-breadcrumb"
+      data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-safe={true}
+    >
+      <ol
+        className="pf-c-breadcrumb__list"
+      >
+        <BreadcrumbItem
+          isActive={false}
+          key=".$0"
+          showDivider={false}
+        >
+          <li
+            className="pf-c-breadcrumb__item"
+          >
+            <Link
+              to="/"
+            >
+              <LinkAnchor
+                href="/"
+                navigate={[Function]}
+              >
+                <a
+                  href="/"
+                  onClick={[Function]}
+                >
+                  <span
+                    key="/"
+                  >
+                    home
+                  </span>
+                </a>
+              </LinkAnchor>
+            </Link>
+          </li>
+        </BreadcrumbItem>
+        <BreadcrumbItem
+          isActive={true}
+          key=".$1"
+          showDivider={true}
+        >
+          <li
+            className="pf-c-breadcrumb__item"
+          >
+            <span
+              className="pf-c-breadcrumb__item-divider"
+            >
+              <AngleRightIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </AngleRightIcon>
+            </span>
+            <span
+              key="/add-client"
+            >
+              createClient
+            </span>
+          </li>
+        </BreadcrumbItem>
+      </ol>
+    </nav>
+  </Breadcrumb>
+</PageBreadCrumbs>
+`;

src/components/view-header/ViewHeader.tsx

@@ -15,6 +15,7 @@ import {
 } from "@patternfly/react-core";
 import { HelpContext } from "../help-enabler/HelpHeader";
 import { useTranslation } from "react-i18next";
+import { PageBreadCrumbs } from "../bread-crumb/PageBreadCrumbs";
 
 export type ViewHeaderProps = {
   titleKey: string;

src/events/messages.json

@@ -0,0 +1,5 @@
+{
+  "events": {
+    "title": "Events"
+  }
+}

src/i18n.ts

@@ -8,6 +8,9 @@ import clientScopes from "./client-scopes/messages.json";
 import groups from "./groups/messages.json";
 import realm from "./realm/messages.json";
 import roles from "./realm-roles/messages.json";
+import users from "./user/messages.json";
+import sessions from "./sessions/messages.json";
+import events from "./events/messages.json";
 import help from "./help.json";
 
 const initOptions = {
@@ -21,6 +24,10 @@ const initOptions = {
       ...groups,
       ...realm,
       ...roles,
+      ...groups,
+      ...users,
+      ...sessions,
+      ...events,
     },
   },
   lng: "en",

src/route-config.ts

@@ -0,0 +1,117 @@
+import { TFunction } from "i18next";
+import { AuthenticationSection } from "./authentication/AuthenticationSection";
+import { NewClientScopeForm } from "./client-scopes/add/NewClientScopeForm";
+import { ClientScopesSection } from "./client-scopes/ClientScopesSection";
+import { NewClientForm } from "./clients/add/NewClientForm";
+import { ClientSettings } from "./clients/ClientSettings";
+import { ClientsSection } from "./clients/ClientsSection";
+import { ImportForm } from "./clients/import/ImportForm";
+import { EventsSection } from "./events/EventsSection";
+import { GroupsSection } from "./groups/GroupsSection";
+import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
+import { PageNotFoundSection } from "./PageNotFoundSection";
+import { NewRoleForm } from "./realm-roles/add/NewRoleForm";
+import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
+import { RealmSettingsSection } from "./realm-settings/RealmSettingsSection";
+import { NewRealmForm } from "./realm/add/NewRealmForm";
+import { SessionsSection } from "./sessions/SessionsSection";
+import { UserFederationSection } from "./user-federation/UserFederationSection";
+import { UsersSection } from "./user/UsersSection";
+
+export const routes = (t: TFunction) => [
+  {
+    path: "/add-realm",
+    component: NewRealmForm,
+    breadcrumb: t("realm:createRealm"),
+  },
+  {
+    path: "/clients",
+    component: ClientsSection,
+    breadcrumb: t("clients:clientList"),
+  },
+  {
+    path: "/clients/:id",
+    component: ClientSettings,
+    breadcrumb: t("clients:clientSettings"),
+  },
+  {
+    path: "/add-client",
+    component: NewClientForm,
+    breadcrumb: t("clients:createClient"),
+  },
+  {
+    path: "/import-client",
+    component: ImportForm,
+    breadcrumb: t("clients:importClient"),
+  },
+  {
+    path: "/client-scopes",
+    component: ClientScopesSection,
+    breadcrumb: t("clientScopeList"),
+  },
+  {
+    path: "/add-client-scopes",
+    component: NewClientScopeForm,
+    breadcrumb: t("client-scopes:createClientScope"),
+  },
+  {
+    path: "/realm-roles",
+    component: RealmRolesSection,
+    breadcrumb: t("roles:roleList"),
+  },
+  {
+    path: "/add-role",
+    component: NewRoleForm,
+    breadcrumb: t("roles:createRole"),
+  },
+  {
+    path: "/users",
+    component: UsersSection,
+    breadcrumb: t("users:title"),
+  },
+  {
+    path: "/groups",
+    component: GroupsSection,
+    breadcrumb: t("groups"),
+  },
+  {
+    path: "/sessions",
+    component: SessionsSection,
+    breadcrumb: t("sessions:title"),
+  },
+  {
+    path: "/events",
+    component: EventsSection,
+    breadcrumb: t("events:title"),
+  },
+  {
+    path: "/realm-settings",
+    component: RealmSettingsSection,
+    breadcrumb: t("realmSettings"),
+  },
+  {
+    path: "/authentication",
+    component: AuthenticationSection,
+    breadcrumb: t("authentication"),
+  },
+  {
+    path: "/identity-providers",
+    component: IdentityProvidersSection,
+    breadcrumb: t("identityProviders"),
+  },
+  {
+    path: "/user-federation",
+    component: UserFederationSection,
+    breadcrumb: t("userFederation"),
+  },
+  {
+    path: "/",
+    component: ClientsSection,
+    breadcrumb: t("common:home"),
+  },
+  {
+    path: "",
+    component: PageNotFoundSection,
+    breadcrumb: "",
+  },
+];

src/sessions/messages.json

@@ -0,0 +1,5 @@
+{
+  "sessions": {
+    "title": "Sessions"
+  }
+}

src/user/messages.json

@@ -0,0 +1,5 @@
+{
+  "users": {
+    "title": "Users"
+  }
+}

yarn.lock

@@ -18484,6 +18484,11 @@ use-latest@^1.0.0:
   dependencies:
     use-isomorphic-layout-effect "^1.0.0"
 
+use-react-router-breadcrumbs@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/use-react-router-breadcrumbs/-/use-react-router-breadcrumbs-1.0.4.tgz#12b67ba27ac7e6a00e6ae10896ea91e178e87ee2"
+  integrity sha512-SskKm+wFYPD7eiYrg89y1Wn8vMlY+DiZXNFuP4Wt5gMP2aolcahHGR6pRTWsfMW93CEQxdVkXv/ceHL7nfz2Fw==
+
 use-sidecar@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.3.tgz#17a4e567d4830c0c0ee100040e85a7fe68611e0f"