95 lines
3 KiB
TypeScript
95 lines
3 KiB
TypeScript
import { Breadcrumb, BreadcrumbItem, Spinner } from "@patternfly/react-core";
|
|
import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
|
|
import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
|
|
import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router-dom";
|
|
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
|
|
import { useRealm } from "../context/realm-context/RealmContext";
|
|
import { useWhoAmI } from "../context/whoami/WhoAmI";
|
|
import { KEY_PROVIDER_TYPE } from "../util";
|
|
import { toRealmSettings } from "./routes/RealmSettings";
|
|
import { RealmSettingsTabs } from "./RealmSettingsTabs";
|
|
|
|
export const EditProviderCrumb = () => {
|
|
const { t } = useTranslation("realm-settings");
|
|
const { realm } = useRealm();
|
|
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbItem
|
|
render={(props) => (
|
|
<Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
|
|
{t("keys")}
|
|
</Link>
|
|
)}
|
|
/>
|
|
<BreadcrumbItem>{t("providers")}</BreadcrumbItem>
|
|
<BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
};
|
|
|
|
const sortByPriority = (components: ComponentRepresentation[]) => {
|
|
const sortedComponents = [...components].sort((a, b) => {
|
|
const priorityA = Number(a.config?.priority);
|
|
const priorityB = Number(b.config?.priority);
|
|
|
|
return (
|
|
(!isNaN(priorityB) ? priorityB : 0) - (!isNaN(priorityA) ? priorityA : 0)
|
|
);
|
|
});
|
|
|
|
return sortedComponents;
|
|
};
|
|
|
|
export const RealmSettingsSection = () => {
|
|
const adminClient = useAdminClient();
|
|
const { realm: realmName } = useRealm();
|
|
const [realm, setRealm] = useState<RealmRepresentation>();
|
|
const [realmComponents, setRealmComponents] =
|
|
useState<ComponentRepresentation[]>();
|
|
const [currentUser, setCurrentUser] = useState<UserRepresentation>();
|
|
const { whoAmI } = useWhoAmI();
|
|
const [key, setKey] = useState(0);
|
|
|
|
const refresh = () => {
|
|
setKey(key + 1);
|
|
};
|
|
|
|
useFetch(
|
|
async () => {
|
|
const realm = await adminClient.realms.findOne({ realm: realmName });
|
|
const realmComponents = await adminClient.components.find({
|
|
type: KEY_PROVIDER_TYPE,
|
|
realm: realmName,
|
|
});
|
|
const user = await adminClient.users.findOne({ id: whoAmI.getUserId() });
|
|
|
|
return { user, realm, realmComponents };
|
|
},
|
|
({ user, realm, realmComponents }) => {
|
|
setRealmComponents(sortByPriority(realmComponents));
|
|
setCurrentUser(user);
|
|
setRealm(realm);
|
|
},
|
|
[key]
|
|
);
|
|
|
|
if (!realm || !realmComponents || !currentUser) {
|
|
return (
|
|
<div className="pf-u-text-align-center">
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<RealmSettingsTabs
|
|
realm={realm}
|
|
refresh={refresh}
|
|
realmComponents={realmComponents}
|
|
currentUser={currentUser}
|
|
/>
|
|
);
|
|
};
|