fix merge conflict

2020-10-06 10:12:05 -04:00 · 2020-10-06 10:12:05 -04:00 · bcffc68fdc
commit bcffc68fdc
parent eb57faf826 410c553ac0
57 changed files with 1086 additions and 495 deletions
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -5,92 +5,34 @@ 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 { 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 { RealmContextProvider } from "./context/realm-context/RealmContext";
+import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";

-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>
+      <WhoAmIContextProvider>
        <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>
-
-              <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} />
+                {routes(() => {}).map((route, i) => (
+                  <Route key={i} {...route} exact />
+                ))}
              </Switch>
            </Page>
          </Help>
        </RealmContextProvider>
+      </WhoAmIContextProvider>
    </Router>
  );
 };
--- a/src/PageHeader.tsx
+++ b/src/PageHeader.tsx
@ -14,7 +14,8 @@ import {
  PageHeaderToolsGroup,
 } from "@patternfly/react-core";
 import { HelpIcon } from "@patternfly/react-icons";
-import { KeycloakContext } from "./auth/KeycloakContext";
+import { KeycloakContext } from "./context/auth/KeycloakContext";
+import { WhoAmIContext } from "./context/whoami/WhoAmI";
 import { HelpHeader } from "./components/help-enabler/HelpHeader";
 import { Link } from "react-router-dom";

@ -134,6 +135,7 @@ const KebabDropdown = () => {

 const UserDropdown = () => {
  const keycloak = useContext(KeycloakContext);
+  const whoami = useContext(WhoAmIContext);
  const [isDropdownOpen, setDropdownOpen] = useState(false);

  const onDropdownToggle = () => {
@ -147,7 +149,7 @@ const UserDropdown = () => {
      isOpen={isDropdownOpen}
      toggle={
        <DropdownToggle onToggle={onDropdownToggle}>
-          {keycloak?.loggedInUser}
+          {whoami.getDisplayName()}
        </DropdownToggle>
      }
      dropdownItems={userDropdownItems}
--- a/src/PageNav.tsx
+++ b/src/PageNav.tsx
@ -10,7 +10,7 @@ import {
 } from "@patternfly/react-core";
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
 import { DataLoader } from "./components/data-loader/DataLoader";
-import { HttpClientContext } from "./http-service/HttpClientContext";
+import { HttpClientContext } from "./context/http-service/HttpClientContext";
 import { RealmRepresentation } from "./realm/models/Realm";

 export const PageNav: React.FunctionComponent = () => {
@ -63,7 +63,7 @@ export const PageNav: React.FunctionComponent = () => {
            <Nav onSelect={onSelect}>
              <NavList>
                <NavItem className="keycloak__page_nav__nav_item__realm-selector">
-                  <RealmSelector realmList={realmList || []} />
+                  <RealmSelector realmList={realmList.data || []} />
                </NavItem>
              </NavList>
              <NavGroup title={t("manage")}>
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/src/client-scopes/ClientScopesSection.tsx
@ -3,12 +3,13 @@ import { Button, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";

-import { RealmContext } from "../components/realm-context/RealmContext";
-import { HttpClientContext } from "../http-service/HttpClientContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { ClientRepresentation } from "../realm/models/Realm";
 import { DataLoader } from "../components/data-loader/DataLoader";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
 import { ClientScopeList } from "./ClientScopesList";
+import { ViewHeader } from "../components/view-header/ViewHeader";

 export const ClientScopesSection = () => {
  const { t } = useTranslation("client-scopes");
@ -25,11 +26,16 @@ export const ClientScopesSection = () => {
      .then((r) => r.data as ClientRepresentation[]);
  };
  return (
+    <>
+      <ViewHeader
+        titleKey="clientScopes"
+        subKey="client-scopes:clientScopeExplain"
+      />
      <PageSection variant="light">
        <DataLoader loader={loader}>
          {(scopes) => (
            <TableToolbar
-            count={scopes!.length}
+              count={scopes.data.length}
              first={first}
              max={max}
              onNextClick={setFirst}
@ -44,10 +50,11 @@ export const ClientScopesSection = () => {
                </Button>
              }
            >
-            <ClientScopeList clientScopes={scopes} />
+              <ClientScopeList clientScopes={scopes.data} />
            </TableToolbar>
          )}
        </DataLoader>
      </PageSection>
+    </>
  );
 };
--- a/src/client-scopes/add/NewClientScopeForm.tsx
+++ b/src/client-scopes/add/NewClientScopeForm.tsx
@ -16,8 +16,8 @@ import { Controller, useForm } from "react-hook-form";

 import { ClientScopeRepresentation } from "../models/client-scope";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { HttpClientContext } from "../../http-service/HttpClientContext";
-import { RealmContext } from "../../components/realm-context/RealmContext";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
+import { RealmContext } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";

 export const NewClientScopeForm = () => {
@ -115,6 +115,7 @@ export const NewClientScopeForm = () => {
          />
        </FormGroup>
        <FormGroup
+          hasNoPaddingTop
          label={
            <>
              {t("displayOnConsentScreen")}{" "}
--- a/src/client-scopes/messages.json
+++ b/src/client-scopes/messages.json
@ -2,6 +2,7 @@
  "client-scopes": {
    "createClientScope": "Create client scope",
    "clientScopeList": "List of client scopes",
+    "clientScopeExplain": "Client scopes allow you to define a common set of protocol mappers and roles, which are shared between multiple clients",
    "name": "Name",
    "description": "Description",
    "protocol": "Protocol",
--- a/src/clients/ClientList.tsx
+++ b/src/clients/ClientList.tsx
@ -10,16 +10,17 @@ import {
  IFormatterValueType,
 } from "@patternfly/react-table";
 import { Badge, AlertVariant } from "@patternfly/react-core";
-import FileSaver from "file-saver";

 import { ExternalLink } from "../components/external-link/ExternalLink";
-import { HttpClientContext } from "../http-service/HttpClientContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { ClientRepresentation } from "./models/client-model";
-import { RealmContext } from "../components/realm-context/RealmContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
+import { exportClient } from "../util";

 type ClientListProps = {
  clients?: ClientRepresentation[];
+  refresh: () => void;
  baseUrl: string;
 };

@ -30,23 +31,12 @@ const columns: (keyof ClientRepresentation)[] = [
  "baseUrl",
 ];

-export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
+export const ClientList = ({ baseUrl, clients, refresh }: ClientListProps) => {
  const { t } = useTranslation("clients");
  const httpClient = useContext(HttpClientContext)!;
  const { realm } = useContext(RealmContext);
  const [add, Alerts] = useAlerts();

-  const enabled = (): IFormatter => (data?: IFormatterValueType) => {
-    const field = data!.toString();
-    const [id, clientId, disabled] = field.split("#");
-    return (
-      <Link to={`client-settings/${id}`}>
-        {clientId}
-        {disabled !== "true" && <Badge isRead>Disabled</Badge>}
-      </Link>
-    );
-  };
-
  const emptyFormatter = (): IFormatter => (data?: IFormatterValueType) => {
    return data ? data : "—";
  };
@ -73,12 +63,25 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {

  const data = clients!
    .map((client) => {
-      client.clientId = `${client.id}#${client.clientId}#${client.enabled}`;
      client.baseUrl = replaceBaseUrl(client);
      return client;
    })
-    .map((column) => {
-      return { cells: columns.map((col) => column[col]), client: column };
+    .map((client) => {
+      return {
+        cells: columns.map((col) =>
+          col === "clientId" ? (
+            <>
+              <Link key={client.id} to={`/clients/${client.id}`}>
+                {client.clientId}
+                {!client.enabled && <Badge isRead>Disabled</Badge>}
+              </Link>
+            </>
+          ) : (
+            client[col]
+          )
+        ),
+        client,
+      };
    });
  return (
    <>
@ -86,7 +89,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
      <Table
        variant={TableVariant.compact}
        cells={[
-          { title: t("clientID"), cellFormatters: [enabled()] },
+          t("clientID"),
          t("type"),
          { title: t("description"), cellFormatters: [emptyFormatter()] },
          {
@ -99,32 +102,17 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
          {
            title: t("common:export"),
            onClick: (_, rowId) => {
-              const clientCopy = JSON.parse(JSON.stringify(data[rowId].client));
-              const [, orgClientId] = clientCopy.clientId.split("#");
-              clientCopy.clientId = orgClientId;
-              delete clientCopy.id;
-
-              if (clientCopy.protocolMappers) {
-                for (let i = 0; i < clientCopy.protocolMappers.length; i++) {
-                  delete clientCopy.protocolMappers[i].id;
-                }
-              }
-
-              FileSaver.saveAs(
-                new Blob([JSON.stringify(clientCopy, null, 2)], {
-                  type: "application/json",
-                }),
-                clientCopy.clientId + ".json"
-              );
+              exportClient(data[rowId].client);
            },
          },
          {
            title: t("common:delete"),
-            onClick: (_, rowId) => {
+            onClick: async (_, rowId) => {
              try {
-                httpClient.doDelete(
+                await httpClient.doDelete(
                  `/admin/realms/${realm}/clients/${data[rowId].client.id}`
                );
+                refresh();
                add(t("clientDeletedSuccess"), AlertVariant.success);
              } catch (error) {
                add(`${t("clientDeleteError")} ${error}`, AlertVariant.danger);
--- a/src/clients/ClientSettings.tsx
+++ b/src/clients/ClientSettings.tsx
@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
  FormGroup,
@ -10,6 +10,8 @@ import {
  ActionGroup,
  Button,
  AlertVariant,
+  SelectOption,
+  ButtonVariant,
 } from "@patternfly/react-core";
 import { useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
@ -17,8 +19,8 @@ import { Controller, useForm } from "react-hook-form";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { ClientDescription } from "./ClientDescription";
 import { CapabilityConfig } from "./add/CapabilityConfig";
-import { RealmContext } from "../components/realm-context/RealmContext";
-import { HttpClientContext } from "../http-service/HttpClientContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { ClientRepresentation } from "../realm/models/Realm";
 import {
  convertToMultiline,
@ -26,6 +28,9 @@ import {
  toValue,
 } from "../components/multi-line-input/MultiLineInput";
 import { useAlerts } from "../components/alert/Alerts";
+import { ViewHeader } from "../components/view-header/ViewHeader";
+import { exportClient } from "../util";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";

 export const ClientSettings = () => {
  const { t } = useTranslation("clients");
@ -34,6 +39,7 @@ export const ClientSettings = () => {
  const [addAlert, Alerts] = useAlerts();

  const { id } = useParams<{ id: string }>();
+  const [name, setName] = useState("");
  const form = useForm();
  const url = `/admin/realms/${realm}/clients/${id}`;

@ -41,6 +47,7 @@ export const ClientSettings = () => {
    (async () => {
      const fetchedClient = await httpClient.doGet<ClientRepresentation>(url);
      if (fetchedClient.data) {
+        setName(fetchedClient.data.clientId);
        Object.entries(fetchedClient.data).map((entry) => {
          if (entry[0] !== "redirectUris") {
            form.setValue(entry[0], entry[1]);
@ -52,6 +59,21 @@ export const ClientSettings = () => {
    })();
  }, []);

+  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
+    titleKey: "clients:clientDeleteConfirmTitle",
+    messageKey: "clients:clientDeleteConfirm",
+    continueButtonLabel: "common:delete",
+    continueButtonVariant: ButtonVariant.danger,
+    onConfirm: () => {
+      try {
+        httpClient.doDelete(`/admin/realms/${realm}/clients/${id}`);
+        addAlert(t("clientDeletedSuccess"), AlertVariant.success);
+      } catch (error) {
+        addAlert(`${t("clientDeleteError")} ${error}`, AlertVariant.danger);
+      }
+    },
+  });
+
  const save = async () => {
    if (await form.trigger()) {
      const redirectUris = toValue(form.getValues()["redirectUris"]);
@ -65,7 +87,58 @@ export const ClientSettings = () => {
  };

  return (
-    <PageSection>
+    <>
+      <DeleteConfirm />
+      <Controller
+        name="enabled"
+        control={form.control}
+        defaultValue={true}
+        render={({ onChange, value }) => {
+          const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
+            titleKey: "clients:disableConfirmTitle",
+            messageKey: "clients:disableConfirm",
+            continueButtonLabel: "common:disable",
+            onConfirm: () => {
+              onChange(!value);
+              save();
+            },
+          });
+          return (
+            <>
+              <DisableConfirm />
+              <ViewHeader
+                titleKey={name}
+                subKey="clients:clientsExplain"
+                selectItems={[
+                  <SelectOption key="export" value="export">
+                    {t("common:export")}
+                  </SelectOption>,
+                  <SelectOption key="delete" value="delete">
+                    {t("common:delete")}
+                  </SelectOption>,
+                ]}
+                isEnabled={value}
+                onToggle={(value) => {
+                  if (!value) {
+                    toggleDisableDialog();
+                  } else {
+                    onChange(value);
+                    save();
+                  }
+                }}
+                onSelect={(value) => {
+                  if (value === "export") {
+                    exportClient(form.getValues());
+                  } else if (value === "delete") {
+                    toggleDeleteDialog();
+                  }
+                }}
+              />
+            </>
+          );
+        }}
+      />
+      <PageSection variant="light">
        <Alerts />
        <ScrollForm
          sections={[
@ -101,7 +174,11 @@ export const ClientSettings = () => {
            </FormGroup>
          </Form>
          <Form isHorizontal>
-          <FormGroup label={t("consentRequired")} fieldId="kc-consent">
+            <FormGroup
+              label={t("consentRequired")}
+              fieldId="kc-consent"
+              hasNoPaddingTop
+            >
              <Controller
                name="consentRequired"
                defaultValue={false}
@ -120,6 +197,7 @@ export const ClientSettings = () => {
            <FormGroup
              label={t("displayOnClient")}
              fieldId="kc-display-on-client"
+              hasNoPaddingTop
            >
              <Controller
                name="alwaysDisplayInConsole"
@ -155,5 +233,6 @@ export const ClientSettings = () => {
          </Form>
        </ScrollForm>
      </PageSection>
+    </>
  );
 };
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@ -1,15 +1,14 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, PageSection } from "@patternfly/react-core";
+import { Button, PageSection, Spinner } from "@patternfly/react-core";

-import { DataLoader } from "../components/data-loader/DataLoader";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
 import { ClientList } from "./ClientList";
-import { HttpClientContext } from "../http-service/HttpClientContext";
-import { KeycloakContext } from "../auth/KeycloakContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
+import { KeycloakContext } from "../context/auth/KeycloakContext";
 import { ClientRepresentation } from "./models/client-model";
-import { RealmContext } from "../components/realm-context/RealmContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
 import { ViewHeader } from "../components/view-header/ViewHeader";

 export const ClientsSection = () => {
@ -18,16 +17,29 @@ export const ClientsSection = () => {

  const [max, setMax] = useState(10);
  const [first, setFirst] = useState(0);
+  const [search, setSearch] = useState("");
+  const [clients, setClients] = useState<ClientRepresentation[]>();
  const httpClient = useContext(HttpClientContext)!;
  const keycloak = useContext(KeycloakContext);
  const { realm } = useContext(RealmContext);

  const loader = async () => {
-    return await httpClient
-      .doGet(`/admin/realms/${realm}/clients`, { params: { first, max } })
-      .then((r) => r.data as ClientRepresentation[]);
+    const params: { [name: string]: string | number } = { first, max };
+    if (search) {
+      params.clientId = search;
+      params.search = "true";
+    }
+    const result = await httpClient.doGet<ClientRepresentation[]>(
+      `/admin/realms/${realm}/clients`,
+      { params: params }
+    );
+    setClients(result.data);
  };

+  useEffect(() => {
+    loader();
+  }, []);
+
  return (
    <>
      <ViewHeader
@ -35,8 +47,12 @@ export const ClientsSection = () => {
        subKey="clients:clientsExplain"
      />
      <PageSection variant="light">
-        <DataLoader loader={loader}>
-          {(clients) => (
+        {!clients && (
+          <div style={{ textAlign: "center" }}>
+            <Spinner />
+          </div>
+        )}
+        {clients && (
          <TableToolbar
            count={clients!.length}
            first={first}
@ -48,6 +64,8 @@ export const ClientsSection = () => {
              setMax(max);
            }}
            inputGroupName="clientsToolbarTextInput"
+            inputGroupOnChange={setSearch}
+            inputGroupOnClick={() => loader()}
            inputGroupPlaceholder={t("Search for client")}
            toolbarItem={
              <>
@ -65,11 +83,11 @@ export const ClientsSection = () => {
          >
            <ClientList
              clients={clients}
+              refresh={loader}
              baseUrl={keycloak!.authServerUrl()!}
            />
          </TableToolbar>
        )}
-        </DataLoader>
      </PageSection>
    </>
  );
--- a/src/clients/tests/ClientList.test.tsx
+++ b/src/clients/tests/ClientList.test.tsx
@ -8,7 +8,11 @@ import { ClientList } from "../ClientList";
 test("renders ClientList", () => {
  const container = render(
    <MemoryRouter>
-      <ClientList clients={clientMock} baseUrl="http://blog.nerdin.ch" />
+      <ClientList
+        clients={clientMock}
+        baseUrl="http://blog.nerdin.ch"
+        refresh={() => {}}
+      />
    </MemoryRouter>
  );
  expect(container).toMatchSnapshot();
--- a/src/clients/tests/snapshots/ClientList.test.tsx.snap
+++ b/src/clients/tests/snapshots/ClientList.test.tsx.snap
@ -6,7 +6,7 @@ Object {
  "baseElement": <body>
    <div>
      <table
-        aria-label="clientList"
+        aria-label="Client list"
        class="pf-c-table pf-m-grid-md pf-m-compact"
        data-ouia-component-id="OUIA-Generated-Table-1"
        data-ouia-component-type="PF4/Table"
@ -20,34 +20,34 @@ Object {
            <th
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
              scope="col"
            >
-              clientID
+              Client ID
            </th>
            <th
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
              scope="col"
            >
-              type
+              Type
            </th>
            <th
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
              scope="col"
            >
-              description
+              Description
            </th>
            <th
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
              scope="col"
            >
-              homeURL
+              Home URL
            </th>
            <td
              class=""
@ -68,10 +68,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/767756c2-21f8-431c-9f4b-edf30654d653"
+                href="/clients/767756c2-21f8-431c-9f4b-edf30654d653"
              >
                account
              </a>
@ -79,21 +79,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              <a
                aria-disabled="false"
@ -167,10 +167,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/337dc87b-e08d-409e-aaac-6ab7df4b925b"
+                href="/clients/337dc87b-e08d-409e-aaac-6ab7df4b925b"
              >
                account-console
              </a>
@ -178,21 +178,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              <a
                aria-disabled="false"
@ -266,10 +266,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/60d59afe-7926-4c22-b829-798125793ef5"
+                href="/clients/60d59afe-7926-4c22-b829-798125793ef5"
              >
                admin-cli
              </a>
@ -277,21 +277,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              —
            </td>
@ -339,10 +339,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/c2d74093-2b8c-4ecb-870f-c7358ff48237"
+                href="/clients/c2d74093-2b8c-4ecb-870f-c7358ff48237"
              >
                broker
              </a>
@ -350,21 +350,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              —
            </td>
@ -412,10 +412,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/66135023-e667-4864-b1f3-f87e805fabc2"
+                href="/clients/66135023-e667-4864-b1f3-f87e805fabc2"
              >
                master-realm
              </a>
@ -423,19 +423,19 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            />
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              —
            </td>
@ -483,10 +483,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/324f4182-d302-44f8-ac8a-149eaa29dc90"
+                href="/clients/324f4182-d302-44f8-ac8a-149eaa29dc90"
              >
                new
              </a>
@ -494,21 +494,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              <a
                aria-disabled="false"
@ -582,10 +582,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/fb45882b-4d85-4f40-920e-6a68298d36d0"
+                href="/clients/fb45882b-4d85-4f40-920e-6a68298d36d0"
              >
                photoz-realm
              </a>
@ -593,19 +593,19 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            />
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              —
            </td>
@ -653,10 +653,10 @@ Object {
            <td
              class=""
              data-key="0"
-              data-label="clientID"
+              data-label="Client ID"
            >
              <a
-                href="/client-settings/9ed60e41-d794-4046-842f-3247bf32f5ce"
+                href="/clients/9ed60e41-d794-4046-842f-3247bf32f5ce"
              >
                security-admin-console
              </a>
@ -664,21 +664,21 @@ Object {
            <td
              class=""
              data-key="1"
-              data-label="type"
+              data-label="Type"
            >
              openid-connect
            </td>
            <td
              class=""
              data-key="2"
-              data-label="description"
+              data-label="Description"
            >
              —
            </td>
            <td
              class=""
              data-key="3"
-              data-label="homeURL"
+              data-label="Home URL"
            >
              <a
                aria-disabled="false"
@ -754,7 +754,7 @@ Object {
  </body>,
  "container": <div>
    <table
-      aria-label="clientList"
+      aria-label="Client list"
      class="pf-c-table pf-m-grid-md pf-m-compact"
      data-ouia-component-id="OUIA-Generated-Table-1"
      data-ouia-component-type="PF4/Table"
@ -768,34 +768,34 @@ Object {
          <th
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
            scope="col"
          >
-            clientID
+            Client ID
          </th>
          <th
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
            scope="col"
          >
-            type
+            Type
          </th>
          <th
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
            scope="col"
          >
-            description
+            Description
          </th>
          <th
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
            scope="col"
          >
-            homeURL
+            Home URL
          </th>
          <td
            class=""
@ -816,10 +816,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/767756c2-21f8-431c-9f4b-edf30654d653"
+              href="/clients/767756c2-21f8-431c-9f4b-edf30654d653"
            >
              account
            </a>
@ -827,21 +827,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            <a
              aria-disabled="false"
@ -915,10 +915,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/337dc87b-e08d-409e-aaac-6ab7df4b925b"
+              href="/clients/337dc87b-e08d-409e-aaac-6ab7df4b925b"
            >
              account-console
            </a>
@ -926,21 +926,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            <a
              aria-disabled="false"
@ -1014,10 +1014,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/60d59afe-7926-4c22-b829-798125793ef5"
+              href="/clients/60d59afe-7926-4c22-b829-798125793ef5"
            >
              admin-cli
            </a>
@ -1025,21 +1025,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            —
          </td>
@ -1087,10 +1087,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/c2d74093-2b8c-4ecb-870f-c7358ff48237"
+              href="/clients/c2d74093-2b8c-4ecb-870f-c7358ff48237"
            >
              broker
            </a>
@ -1098,21 +1098,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            —
          </td>
@ -1160,10 +1160,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/66135023-e667-4864-b1f3-f87e805fabc2"
+              href="/clients/66135023-e667-4864-b1f3-f87e805fabc2"
            >
              master-realm
            </a>
@ -1171,19 +1171,19 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          />
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            —
          </td>
@ -1231,10 +1231,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/324f4182-d302-44f8-ac8a-149eaa29dc90"
+              href="/clients/324f4182-d302-44f8-ac8a-149eaa29dc90"
            >
              new
            </a>
@ -1242,21 +1242,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            <a
              aria-disabled="false"
@ -1330,10 +1330,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/fb45882b-4d85-4f40-920e-6a68298d36d0"
+              href="/clients/fb45882b-4d85-4f40-920e-6a68298d36d0"
            >
              photoz-realm
            </a>
@ -1341,19 +1341,19 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          />
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            —
          </td>
@ -1401,10 +1401,10 @@ Object {
          <td
            class=""
            data-key="0"
-            data-label="clientID"
+            data-label="Client ID"
          >
            <a
-              href="/client-settings/9ed60e41-d794-4046-842f-3247bf32f5ce"
+              href="/clients/9ed60e41-d794-4046-842f-3247bf32f5ce"
            >
              security-admin-console
            </a>
@ -1412,21 +1412,21 @@ Object {
          <td
            class=""
            data-key="1"
-            data-label="type"
+            data-label="Type"
          >
            openid-connect
          </td>
          <td
            class=""
            data-key="2"
-            data-label="description"
+            data-label="Description"
          >
            —
          </td>
          <td
            class=""
            data-key="3"
-            data-label="homeURL"
+            data-label="Home URL"
          >
            <a
              aria-disabled="false"
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@ -18,7 +18,11 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
  const { t } = useTranslation("clients");
  return (
    <Form isHorizontal>
-      <FormGroup label={t("clientAuthentication")} fieldId="kc-authentication">
+      <FormGroup
+        hasNoPaddingTop
+        label={t("clientAuthentication")}
+        fieldId="kc-authentication"
+      >
        <Controller
          name="publicClient"
          defaultValue={false}
@ -35,7 +39,11 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
          )}
        />
      </FormGroup>
-      <FormGroup label={t("clientAuthorization")} fieldId="kc-authorization">
+      <FormGroup
+        hasNoPaddingTop
+        label={t("clientAuthorization")}
+        fieldId="kc-authorization"
+      >
        <Controller
          name="authorizationServicesEnabled"
          defaultValue={false}
@ -52,7 +60,11 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
          )}
        />
      </FormGroup>
-      <FormGroup label={t("authenticationFlow")} fieldId="kc-flow">
+      <FormGroup
+        hasNoPaddingTop
+        label={t("authenticationFlow")}
+        fieldId="kc-flow"
+      >
        <Grid>
          <GridItem lg={4} sm={6}>
            <Controller
--- a/src/clients/add/GeneralSettings.tsx
+++ b/src/clients/add/GeneralSettings.tsx
@ -9,7 +9,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { Controller, UseFormMethods } from "react-hook-form";

-import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
 import { sortProvider } from "../../util";
 import { ServerInfoRepresentation } from "../models/server-info";
 import { ClientDescription } from "../ClientDescription";
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@ -11,12 +11,12 @@ import {
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";

-import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
 import { GeneralSettings } from "./GeneralSettings";
 import { CapabilityConfig } from "./CapabilityConfig";
 import { ClientRepresentation } from "../models/client-model";
 import { useAlerts } from "../../components/alert/Alerts";
-import { RealmContext } from "../../components/realm-context/RealmContext";
+import { RealmContext } from "../../context/realm-context/RealmContext";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

 export const NewClientForm = () => {
--- a/src/clients/import/ImportForm.tsx
+++ b/src/clients/import/ImportForm.tsx
@ -13,10 +13,10 @@ import { useTranslation } from "react-i18next";

 import { ClientRepresentation } from "../models/client-model";
 import { ClientDescription } from "../ClientDescription";
-import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { useAlerts } from "../../components/alert/Alerts";
-import { RealmContext } from "../../components/realm-context/RealmContext";
+import { RealmContext } from "../../context/realm-context/RealmContext";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

 export const ImportForm = () => {
--- a/src/clients/messages.json
+++ b/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",
@ -19,6 +20,10 @@
    "clientImportSuccess": "Client imported successfully",
    "clientDeletedSuccess": "The client has been deleted",
    "clientDeleteError": "Could not delete client:",
+    "clientDeleteConfirmTitle": "Delete client?",
+    "disableConfirmTitle": "Disable client?",
+    "disableConfirm": "If you disable this client, you cannot initiate a login or obtain access tokens.",
+    "clientDeleteConfirm": "If you delete this client, all associated data will be removed.",
    "clientAuthentication": "Client authentication",
    "authentication": "Authentication",
    "authenticationFlow": "Authentication flow",
--- a/src/common-messages.json
+++ b/src/common-messages.json
@ -3,6 +3,7 @@
    "fullName": "{{givenName}} {{familyName}}",
    "unknownUser": "Anonymous",

+    "create": "Create",
    "save": "Save",
    "cancel": "Cancel",
    "continue": "Continue",
@ -10,12 +11,14 @@
    "next": "Next",
    "back": "Back",
    "export": "Export",
+    "action": "Action",
    "resourceFile": "Resource file",
    "clearFile": "Clear this file",
    "on": "On",
    "off":"Off",
    "enabled": "Enabled",
    "disabled": "Disabled",
+    "disable": "Disable",

    "signOut": "Sign out",
    "manageAccount": "Manage account",
@ -24,6 +27,7 @@
    "documentation": "Documentation",
    "enableHelpMode": "Enable help mode",

+    "home": "Home",
    "manage": "Manage",
    "clients": "Clients",
    "clientScopes": "Client scopes",
--- a/src/components/bread-crumb/PageBreadCrumbs.tsx
+++ b/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>
+  );
+};
--- a/src/components/bread-crumb/tests/PageBreadCrumbs.test.tsx
+++ b/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();
+  });
+});
--- a/src/components/bread-crumb/tests/snapshots/PageBreadCrumbs.test.tsx.snap
+++ b/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"
+            >
+              Create client
+            </span>
+          </li>
+        </BreadcrumbItem>
+      </ol>
+    </nav>
+  </Breadcrumb>
+</PageBreadCrumbs>
+`;
--- a/src/components/data-loader/DataLoader.tsx
+++ b/src/components/data-loader/DataLoader.tsx
@ -4,24 +4,31 @@ import { Spinner } from "@patternfly/react-core";
 type DataLoaderProps<T> = {
  loader: () => Promise<T>;
  deps?: any[];
-  children: ((arg: T) => any) | React.ReactNode;
+  children: ((arg: Result<T>) => any) | React.ReactNode;
+};
+
+type Result<T> = {
+  data: T;
+  refresh: () => void;
 };

 export function DataLoader<T>(props: DataLoaderProps<T>) {
  const [data, setData] = useState<{ result: T } | undefined>(undefined);
-  useEffect(() => {
-    setData(undefined);
  const loadData = async () => {
    const result = await props.loader();
    setData({ result });
  };
-
+  useEffect(() => {
+    setData(undefined);
    loadData();
  }, [props]);

  if (data) {
    if (props.children instanceof Function) {
-      return props.children(data.result);
+      return props.children({
+        data: data.result,
+        refresh: () => loadData(),
+      });
    }
    return props.children;
  }
--- a/src/components/data-loader/tests/DataLoader.test.tsx
+++ b/src/components/data-loader/tests/DataLoader.test.tsx
@ -20,9 +20,9 @@ describe("<DataLoader />", () => {
    await act(async () => {
      render(
        <DataLoader loader={loader}>
-          {(data) => (
+          {(result) => (
            <div>
-              {data.map((d, i) => (
+              {result.data.map((d, i) => (
                <i key={i}>{d}</i>
              ))}
            </div>
--- a/src/components/realm-selector/RealmSelector.tsx
+++ b/src/components/realm-selector/RealmSelector.tsx
@ -15,7 +15,8 @@ import {
 import { CheckIcon } from "@patternfly/react-icons";

 import { RealmRepresentation } from "../../realm/models/Realm";
-import { RealmContext } from "../realm-context/RealmContext";
+import { RealmContext } from "../../context/realm-context/RealmContext";
+import { WhoAmIContext } from "../../context/whoami/WhoAmI";

 import "./realm-selector.css";

@ -25,6 +26,7 @@ type RealmSelectorProps = {

 export const RealmSelector = ({ realmList }: RealmSelectorProps) => {
  const { realm, setRealm } = useContext(RealmContext);
+  const whoami = useContext(WhoAmIContext);
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [filteredItems, setFilteredItems] = useState(realmList);
@ -77,6 +79,19 @@ export const RealmSelector = ({ realmList }: RealmSelectorProps) => {
    </DropdownItem>
  ));

+  const addRealmComponent = (
+    <React.Fragment key="Add Realm">
+      {whoami.canCreateRealm() && (
+        <>
+          <Divider key="divider" />
+          <DropdownItem key="add">
+            <AddRealm />
+          </DropdownItem>
+        </>
+      )}
+    </React.Fragment>
+  );
+
  return (
    <>
      {realmList.length > 5 && (
@ -119,13 +134,7 @@ export const RealmSelector = ({ realmList }: RealmSelectorProps) => {
              {toUpperCase(realm)}
            </DropdownToggle>
          }
-          dropdownItems={[
-            ...dropdownItems,
-            <Divider key="divider" />,
-            <DropdownItem key="add">
-              <AddRealm />
-            </DropdownItem>,
-          ]}
+          dropdownItems={[...dropdownItems, addRealmComponent]}
        />
      )}
    </>
--- a/src/components/realm-selector/tests/RealmSelector.test.tsx
+++ b/src/components/realm-selector/tests/RealmSelector.test.tsx
@ -3,7 +3,7 @@ import { mount } from "enzyme";
 import { act } from "@testing-library/react";

 import { RealmSelector } from "../RealmSelector";
-import { RealmContextProvider } from "../../realm-context/RealmContext";
+import { RealmContextProvider } from "../../../context/realm-context/RealmContext";

 it("renders realm selector", async () => {
  const wrapper = mount(
--- a/src/components/realm-selector/tests/snapshots/RealmSelector.test.tsx.snap
+++ b/src/components/realm-selector/tests/snapshots/RealmSelector.test.tsx.snap
@ -23,10 +23,7 @@ exports[`renders realm selector 1`] = `
              value="another"
            />
          </DropdownItem>,
-          <Divider />,
-          <DropdownItem>
-            <AddRealm />
-          </DropdownItem>,
+          <React.Fragment />,
        ]
      }
      id="realm-select"
@ -54,10 +51,7 @@ exports[`renders realm selector 1`] = `
                value="another"
              />
            </DropdownItem>,
-            <Divider />,
-            <DropdownItem>
-              <AddRealm />
-            </DropdownItem>,
+            <React.Fragment />,
          ]
        }
        id="realm-select"
@ -160,29 +154,6 @@ exports[`renders realm selector 1`] = `
                        </div>
                      </a>
                    </li>
-                    <hr
-                      class="pf-c-divider"
-                      index="1"
-                    />
-                    <li
-                      role="menuitem"
-                    >
-                      <a
-                        aria-disabled="false"
-                        class="pf-c-dropdown__menu-item"
-                        tabindex="-1"
-                      >
-                        <div
-                          aria-disabled="false"
-                          class="pf-c-button pf-m-primary pf-m-block"
-                          data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                          data-ouia-component-type="PF4/Button"
-                          data-ouia-safe="true"
-                        >
-                          Create Realm
-                        </div>
-                      </a>
-                    </li>
                  </ul>
                </div>,
              }
@ -268,29 +239,6 @@ exports[`renders realm selector 1`] = `
                          </div>
                        </a>
                      </li>
-                      <hr
-                        class="pf-c-divider"
-                        index="1"
-                      />
-                      <li
-                        role="menuitem"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="pf-c-dropdown__menu-item"
-                          tabindex="-1"
-                        >
-                          <div
-                            aria-disabled="false"
-                            class="pf-c-button pf-m-primary pf-m-block"
-                            data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                            data-ouia-component-type="PF4/Button"
-                            data-ouia-safe="true"
-                          >
-                            Create Realm
-                          </div>
-                        </a>
-                      </li>
                    </ul>
                  </div>,
                }
--- a/src/components/scroll-form/scroll-form.module.css
+++ b/src/components/scroll-form/scroll-form.module.css
@ -1,5 +1,5 @@

 .sticky {
-  position: fixed;
+  position: sticky;
  top: 100px;
 }
--- a/src/components/table-toolbar/TableToolbar.tsx
+++ b/src/components/table-toolbar/TableToolbar.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import {
  ToggleTemplateProps,
  Toolbar,
@ -28,6 +28,7 @@ type TableToolbarProps = {
    newInput: string,
    event: React.FormEvent<HTMLInputElement>
  ) => void;
+  inputGroupOnClick?: MouseEventHandler;
 };

 export const TableToolbar = ({
@ -42,6 +43,7 @@ export const TableToolbar = ({
  inputGroupName,
  inputGroupPlaceholder,
  inputGroupOnChange,
+  inputGroupOnClick,
 }: TableToolbarProps) => {
  const { t } = useTranslation("groups");
  const page = first / max;
@ -82,6 +84,7 @@ export const TableToolbar = ({
                  <Button
                    variant={ButtonVariant.control}
                    aria-label={t("Search")}
+                    onClick={inputGroupOnClick}
                  >
                    <SearchIcon />
                  </Button>
--- a/src/components/view-header/ViewHeader.tsx
+++ b/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;
@ -31,14 +32,13 @@ export const ViewHeader = ({
  badge,
  subKey,
  selectItems,
-  isEnabled,
+  isEnabled = true,
  onSelect,
  onToggle,
 }: ViewHeaderProps) => {
  const { t } = useTranslation();
  const { enabled } = useContext(HelpContext);
  const [open, setOpen] = useState(false);
-  const [checked, setChecked] = useState(isEnabled);
  return (
    <>
      <PageSection variant="light">
@ -68,17 +68,17 @@ export const ViewHeader = ({
                      label={t("common:enabled")}
                      labelOff={t("common:disabled")}
                      className="pf-u-mr-lg"
-                      isChecked={checked}
+                      isChecked={isEnabled}
                      onChange={(value) => {
                        if (onToggle) {
                          onToggle(value);
                        }
-                        setChecked(value);
                      }}
                    />
                  </ToolbarItem>
                  <ToolbarItem>
                    <Select
+                      placeholderText={t("common:action")}
                      isOpen={open}
                      onToggle={() => setOpen(!open)}
                      onSelect={(_, value) => {
--- a/src/context/auth/KeycloakContext.tsx
+++ b/src/context/auth/KeycloakContext.tsx
--- a/src/context/auth/keycloak.service.ts
+++ b/src/context/auth/keycloak.service.ts
--- a/src/context/auth/keycloak.ts
+++ b/src/context/auth/keycloak.ts
--- a/src/context/http-service/HttpClientContext.tsx
+++ b/src/context/http-service/HttpClientContext.tsx
--- a/src/context/http-service/http-client.ts
+++ b/src/context/http-service/http-client.ts
--- a/src/components/realm-context/RealmContext.tsx
+++ b/src/components/realm-context/RealmContext.tsx
@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
+import { WhoAmIContext } from "../../context/whoami/WhoAmI";

 export const RealmContext = React.createContext({
-  realm: "master",
+  realm: "",
  setRealm: (realm: string) => {},
 });

@ -10,7 +11,8 @@ type RealmContextProviderProps = { children: React.ReactNode };
 export const RealmContextProvider = ({
  children,
 }: RealmContextProviderProps) => {
-  const [realm, setRealm] = useState("master");
+  const homeRealm = useContext(WhoAmIContext).getHomeRealm();
+  const [realm, setRealm] = useState(homeRealm);

  return (
    <RealmContext.Provider value={{ realm, setRealm }}>
--- a/src/context/whoami/WhoAmI.tsx
+++ b/src/context/whoami/WhoAmI.tsx
@ -0,0 +1,78 @@
+import React, { useContext } from "react";
+import i18n from "../../i18n";
+
+import WhoAmIRepresentation from "./who-am-i-model";
+
+import { HttpClientContext } from "../http-service/HttpClientContext";
+import { KeycloakContext } from "../auth/KeycloakContext";
+import { DataLoader } from "../../components/data-loader/DataLoader";
+
+export class WhoAmI {
+  constructor(
+    private homeRealm?: string | undefined,
+    private me?: WhoAmIRepresentation | undefined
+  ) {
+    if (this.me !== undefined && this.me.locale) {
+      i18n.changeLanguage(this.me.locale, (error) => {
+        if (error) console.log("Unable to set locale to " + this.me?.locale);
+      });
+    }
+  }
+
+  public getDisplayName(): string {
+    if (this.me === undefined) return "";
+
+    return this.me.displayName;
+  }
+
+  /**
+   * Return the realm I am signed in to.
+   */
+  public getHomeRealm(): string {
+    let realm: string | undefined = this.homeRealm;
+    if (realm === undefined) realm = this.me?.realm;
+    if (realm === undefined) realm = "master"; // this really can't happen in the real world
+
+    return realm;
+  }
+
+  public canCreateRealm(): boolean {
+    return this.me !== undefined && this.me.createRealm;
+  }
+
+  public getRealmAccess(): Readonly<{ [key: string]: ReadonlyArray<string> }> {
+    if (this.me === undefined) return {};
+
+    return this.me.realm_access;
+  }
+}
+
+export const WhoAmIContext = React.createContext(new WhoAmI());
+
+type WhoAmIProviderProps = { children: React.ReactNode };
+export const WhoAmIContextProvider = ({ children }: WhoAmIProviderProps) => {
+  const httpClient = useContext(HttpClientContext)!;
+  const keycloak = useContext(KeycloakContext);
+
+  const whoAmILoader = async () => {
+    if (keycloak === undefined) return undefined;
+
+    const realm = keycloak.realm();
+
+    return await httpClient
+      .doGet(`/admin/${realm}/console/whoami/`)
+      .then((r) => r.data as WhoAmIRepresentation);
+  };
+
+  return (
+    <DataLoader loader={whoAmILoader}>
+      {(whoamirep) => (
+        <WhoAmIContext.Provider
+          value={new WhoAmI(keycloak?.realm(), whoamirep.data)}
+        >
+          {children}
+        </WhoAmIContext.Provider>
+      )}
+    </DataLoader>
+  );
+};
--- a/src/context/whoami/tests/WhoAmI.test.tsx
+++ b/src/context/whoami/tests/WhoAmI.test.tsx
@ -0,0 +1,28 @@
+import whoamiMock from "./mock-whoami.json";
+import { WhoAmI } from "../WhoAmI";
+
+test("returns display name", () => {
+  const whoami = new WhoAmI("master", whoamiMock);
+  expect(whoami.getDisplayName()).toEqual("Stan Silvert");
+});
+
+test("returns correct home realm", () => {
+  let whoami = new WhoAmI("myrealm", whoamiMock);
+  expect(whoami.getHomeRealm()).toEqual("myrealm");
+  whoami = new WhoAmI(undefined, whoamiMock);
+  expect(whoami.getHomeRealm()).toEqual("master");
+});
+
+test("can not create realm", () => {
+  const whoami = new WhoAmI("master", whoamiMock);
+  expect(whoami.canCreateRealm()).toEqual(false);
+});
+
+test("getRealmAccess", () => {
+  const whoami = new WhoAmI("master", whoamiMock);
+  expect(Object.keys(whoami.getRealmAccess()).length).toEqual(2);
+  expect(whoami.getRealmAccess()["master"].length).toEqual(18);
+});
+
+//TODO: When we have easy access to i18n, create test for setting locale.
+//      Tested manually and it does work.
--- a/src/context/whoami/tests/mock-whoami.json
+++ b/src/context/whoami/tests/mock-whoami.json
@ -0,0 +1,49 @@
+{
+  "userId": "1b635073-7ac8-49db-8eb9-f9fa9cd15bf5",
+  "realm": "master",
+  "displayName": "Stan Silvert",
+  "locale": "en",
+  "createRealm": false,
+  "realm_access": {
+    "aaa": [
+      "view-identity-providers",
+      "view-realm",
+      "manage-identity-providers",
+      "impersonation",
+      "create-client",
+      "manage-users",
+      "query-realms",
+      "view-authorization",
+      "query-clients",
+      "query-users",
+      "manage-events",
+      "manage-realm",
+      "view-events",
+      "view-users",
+      "view-clients",
+      "manage-authorization",
+      "manage-clients",
+      "query-groups"
+    ],
+    "master": [
+      "view-realm",
+      "view-identity-providers",
+      "manage-identity-providers",
+      "impersonation",
+      "create-client",
+      "manage-users",
+      "query-realms",
+      "view-authorization",
+      "query-clients",
+      "query-users",
+      "manage-events",
+      "manage-realm",
+      "view-events",
+      "view-users",
+      "view-clients",
+      "manage-authorization",
+      "manage-clients",
+      "query-groups"
+    ]
+  }
+}
--- a/src/context/whoami/who-am-i-model.ts
+++ b/src/context/whoami/who-am-i-model.ts
@ -0,0 +1,8 @@
+export default interface WhoAmIRepresentation {
+  userId: string;
+  realm: string;
+  displayName: string;
+  locale: string;
+  createRealm: boolean;
+  realm_access: { [key: string]: string[] };
+}
--- a/src/events/messages.json
+++ b/src/events/messages.json
@ -0,0 +1,5 @@
+{
+  "events": {
+    "title": "Events"
+  }
+}
--- a/src/groups/GroupsCreateModal.tsx
+++ b/src/groups/GroupsCreateModal.tsx
@ -9,8 +9,8 @@ import {
  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { HttpClientContext } from "../http-service/HttpClientContext";
-import { RealmContext } from "../components/realm-context/RealmContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { useForm } from "react-hook-form";

--- a/src/groups/GroupsList.tsx
+++ b/src/groups/GroupsList.tsx
@ -9,8 +9,8 @@ import { Button, AlertVariant } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { GroupRepresentation } from "./models/groups";
 import { UsersIcon } from "@patternfly/react-icons";
-import { HttpClientContext } from "../http-service/HttpClientContext";
-import { RealmContext } from "../components/realm-context/RealmContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
+import { RealmContext } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";

 type GroupsListProps = {
--- a/src/groups/GroupsSection.tsx
+++ b/src/groups/GroupsSection.tsx
@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { HttpClientContext } from "../http-service/HttpClientContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { GroupsList } from "./GroupsList";
 import { GroupsCreateModal } from "./GroupsCreateModal";
 import { GroupRepresentation } from "./models/groups";
--- a/src/i18n.ts
+++ b/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",
--- a/src/index.tsx
+++ b/src/index.tsx
@ -3,11 +3,11 @@ import ReactDom from "react-dom";
 import i18n from "./i18n";

 import { App } from "./App";
-import init from "./auth/keycloak";
-import { KeycloakContext } from "./auth/KeycloakContext";
-import { KeycloakService } from "./auth/keycloak.service";
-import { HttpClientContext } from "./http-service/HttpClientContext";
-import { HttpClient } from "./http-service/http-client";
+import init from "./context/auth/keycloak";
+import { KeycloakContext } from "./context/auth/KeycloakContext";
+import { KeycloakService } from "./context/auth/keycloak.service";
+import { HttpClientContext } from "./context/http-service/HttpClientContext";
+import { HttpClient } from "./context/http-service/http-client";

 console.info("supported languages", ...i18n.languages);
 init().then((keycloak) => {
--- a/src/realm-roles/RealmRolesSection.tsx
+++ b/src/realm-roles/RealmRolesSection.tsx
@ -14,10 +14,10 @@ import {

 import { DataLoader } from "../components/data-loader/DataLoader";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
-import { HttpClientContext } from "../http-service/HttpClientContext";
+import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { RoleRepresentation } from "../model/role-model";
 import { RolesList } from "./RoleList";
-import { RealmContext } from "../components/realm-context/RealmContext";
+import { RealmContext } from "../context/realm-context/RealmContext";

 export const RealmRolesSection = () => {
  const { t } = useTranslation("roles");
@ -51,7 +51,7 @@ export const RealmRolesSection = () => {
          <Divider component="li" key={1} />
          <PageSection padding={{ default: "noPadding" }}>
            <TableToolbar
-              count={roles!.length}
+              count={roles.data.length}
              first={first}
              max={max}
              onNextClick={setFirst}
@ -68,7 +68,7 @@ export const RealmRolesSection = () => {
                </>
              }
            >
-              <RolesList roles={roles} />
+              <RolesList roles={roles.data} />
            </TableToolbar>
          </PageSection>
        </>
--- a/src/realm-roles/add/NewRoleForm.tsx
+++ b/src/realm-roles/add/NewRoleForm.tsx
@ -0,0 +1,96 @@
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Text,
+  PageSection,
+  TextContent,
+  FormGroup,
+  Form,
+  TextInput,
+  ActionGroup,
+  Button,
+  Divider,
+  AlertVariant,
+  TextArea,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+
+import { RoleRepresentation } from "../../model/role-model";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
+import { useAlerts } from "../../components/alert/Alerts";
+import { Controller, useForm } from "react-hook-form";
+import { RealmContext } from "../../context/realm-context/RealmContext";
+
+export const NewRoleForm = () => {
+  const { t } = useTranslation("roles");
+  const httpClient = useContext(HttpClientContext)!;
+  const [addAlert, Alerts] = useAlerts();
+  const { realm } = useContext(RealmContext);
+
+  const { register, control, errors, handleSubmit } = useForm<
+    RoleRepresentation
+  >();
+
+  const save = async (role: RoleRepresentation) => {
+    try {
+      await httpClient.doPost(`admin/realms/${realm}/roles`, role);
+      addAlert(t("roleCreated"), AlertVariant.success);
+    } catch (error) {
+      addAlert(`${t("roleCreateError")} '${error}'`, AlertVariant.danger);
+    }
+  };
+
+  return (
+    <>
+      <Alerts />
+      <PageSection variant="light">
+        <TextContent>
+          <Text component="h1">{t("createRole")}</Text>
+        </TextContent>
+      </PageSection>
+      <Divider />
+      <PageSection variant="light">
+        <Form isHorizontal onSubmit={handleSubmit(save)}>
+          <FormGroup label={t("roleName")} isRequired fieldId="kc-role-name">
+            <TextInput
+              isRequired
+              type="text"
+              id="kc-role-name"
+              name="name"
+              ref={register()}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("description")}
+            fieldId="kc-role-description"
+            helperTextInvalid="Max length 255"
+            validated={
+              errors ? ValidatedOptions.error : ValidatedOptions.default
+            }
+          >
+            <Controller
+              name="description"
+              defaultValue=""
+              control={control}
+              rules={{ maxLength: 255 }}
+              render={({ onChange, value }) => (
+                <TextArea
+                  type="text"
+                  id="kc-role-description"
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button variant="primary" type="submit">
+              {t("common:create")}
+            </Button>
+            <Button variant="link">{t("common:cancel")}</Button>
+          </ActionGroup>
+        </Form>
+      </PageSection>
+    </>
+  );
+};
--- a/src/realm-roles/messages.json
+++ b/src/realm-roles/messages.json
@ -13,7 +13,9 @@
    "generalSettings": "General Settings",
    "capabilityConfig": "Capability config",
    "roleImportError": "Could not import role",
-    "roleImportSuccess": "Role imported succeful",
+    "roleCreated": "Role created",
+    "roleCreateError": "Could not create role:",
+    "roleImportSuccess": "Role import successful",
    "roleDeletedSucess": "The role has been deleted",
    "roleDeleteError": "Could not delete role:",
    "roleAuthentication": "Role authentication"
--- a/src/realm/add/NewRealmForm.tsx
+++ b/src/realm/add/NewRealmForm.tsx
@ -13,7 +13,7 @@ import {

 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { RealmRepresentation } from "../models/Realm";
-import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { HttpClientContext } from "../../context/http-service/HttpClientContext";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useForm, Controller } from "react-hook-form";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
--- a/src/realm/messages.json
+++ b/src/realm/messages.json
@ -3,7 +3,6 @@
    "uploadFile":"Upload JSON file",
    "realmName":"Realm name",
    "enabled":"Enabled",
-    "create":"Create",
    "createRealm": "Create realm",
    "realmExplain": "A realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.",
    "noRealmRoles": "No realm roles",
--- a/src/route-config.ts
+++ b/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: "",
+  },
+];
--- a/src/sessions/messages.json
+++ b/src/sessions/messages.json
@ -0,0 +1,5 @@
+{
+  "sessions": {
+    "title": "Sessions"
+  }
+}
--- a/src/stories/ClientList.stories.tsx
+++ b/src/stories/ClientList.stories.tsx
@ -10,5 +10,9 @@ export default {
 } as Meta;

 export const ClientListExample = () => (
-  <ClientList clients={clientMock} baseUrl="http://test.nl/" />
+  <ClientList
+    clients={clientMock}
+    baseUrl="http://test.nl/"
+    refresh={() => {}}
+  />
 );
--- a/src/stories/Toolbar.stories.tsx
+++ b/src/stories/Toolbar.stories.tsx
@ -9,7 +9,7 @@ import {
 import { Meta } from "@storybook/react";

 import { RealmSelector } from "../components/realm-selector/RealmSelector";
-import { RealmContextProvider } from "../components/realm-context/RealmContext";
+import { RealmContextProvider } from "../context/realm-context/RealmContext";

 export default {
  title: "Header",
--- a/src/user/messages.json
+++ b/src/user/messages.json
@ -0,0 +1,5 @@
+{
+  "users": {
+    "title": "Users"
+  }
+}
--- a/src/util.ts
+++ b/src/util.ts
@ -1,3 +1,6 @@
+import FileSaver from "file-saver";
+
+import { ClientRepresentation } from "./clients/models/client-model";
 import { ProviderRepresentation } from "./clients/models/server-info";

 export const sortProvider = (
@ -20,3 +23,21 @@ export const sortProvider = (
    return 0;
  }
 };
+
+export const exportClient = (client: ClientRepresentation): void => {
+  const clientCopy = JSON.parse(JSON.stringify(client));
+  delete clientCopy.id;
+
+  if (clientCopy.protocolMappers) {
+    for (let i = 0; i < clientCopy.protocolMappers.length; i++) {
+      delete clientCopy.protocolMappers[i].id;
+    }
+  }
+
+  FileSaver.saveAs(
+    new Blob([JSON.stringify(clientCopy, null, 2)], {
+      type: "application/json",
+    }),
+    clientCopy.clientId + ".json"
+  );
+};
--- a/yarn.lock
+++ b/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"