be able to use admin client in nodejs mode (#231)

src/KeycloakAdminConsole.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import KeycloakAdminClient from "keycloak-admin";
+
+import { AdminClient } from "./context/auth/AdminClient";
+import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
+import { RealmContextProvider } from "./context/realm-context/RealmContext";
+import { App } from "./App";
+
+export type KeycloakAdminConsoleProps = {
+  adminClient: KeycloakAdminClient;
+};
+
+export const KeycloakAdminConsole = ({
+  adminClient,
+}: KeycloakAdminConsoleProps) => {
+  return (
+    <AdminClient.Provider value={adminClient}>
+      <WhoAmIContextProvider>
+        <RealmContextProvider>
+          <App />
+        </RealmContextProvider>
+      </WhoAmIContextProvider>
+    </AdminClient.Provider>
+  );
+};

src/PageHeader.tsx

@@ -25,23 +25,31 @@ export const Header = () => {
 
   const ManageAccountDropdownItem = () => {
     return (
-      <DropdownItem
-        key="manage account"
-        onClick={() => adminClient.keycloak.accountManagement()}
-      >
-        {t("manageAccount")}
-      </DropdownItem>
+      <>
+        {adminClient.keycloak && (
+          <DropdownItem
+            key="manage account"
+            onClick={() => adminClient.keycloak.accountManagement()}
+          >
+            {t("manageAccount")}
+          </DropdownItem>
+        )}
+      </>
     );
   };
 
   const SignOutDropdownItem = () => {
     return (
-      <DropdownItem
-        key="sign out"
-        onClick={() => adminClient.keycloak.logout({ redirectUri: "" })}
-      >
-        {t("signOut")}
-      </DropdownItem>
+      <>
+        {adminClient.keycloak && (
+          <DropdownItem
+            key="sign out"
+            onClick={() => adminClient.keycloak.logout({ redirectUri: "" })}
+          >
+            {t("signOut")}
+          </DropdownItem>
+        )}
+      </>
     );
   };
 

src/clients/ClientsSection.tsx

@@ -77,7 +77,11 @@ export const ClientsSection = () => {
             <ClientList
               clients={clients}
               refresh={loader}
-              baseUrl={adminClient.keycloak.authServerUrl!}
+              baseUrl={
+                adminClient.keycloak
+                  ? adminClient.keycloak.authServerUrl!
+                  : adminClient.baseUrl + "/"
+              }
             />
           </PaginatingTableToolbar>
         )}

src/context/whoami/WhoAmI.tsx

@@ -56,8 +56,6 @@ export const WhoAmIContextProvider = ({ children }: WhoAmIProviderProps) => {
   const adminClient = useContext(AdminClient)!;
 
   const whoAmILoader = async () => {
-    if (adminClient.keycloak === undefined) return undefined;
-
     return await adminClient.whoAmI.find();
   };
 

src/index.tsx

@@ -3,22 +3,13 @@ import ReactDom from "react-dom";
 import i18n from "./i18n";
 
 import init from "./context/auth/keycloak";
-import { AdminClient } from "./context/auth/AdminClient";
-import { RealmContextProvider } from "./context/realm-context/RealmContext";
-import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
-import { App } from "./App";
+import { KeycloakAdminConsole } from "./KeycloakAdminConsole";
 
 console.info("supported languages", ...i18n.languages);
 
 init().then((adminClient) => {
   ReactDom.render(
-    <AdminClient.Provider value={adminClient}>
-      <WhoAmIContextProvider>
-        <RealmContextProvider>
-          <App />
-        </RealmContextProvider>
-      </WhoAmIContextProvider>
-    </AdminClient.Provider>,
+    <KeycloakAdminConsole adminClient={adminClient} />,
     document.getElementById("app")
   );
 });