libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Realm settings(keys): Adds keys list to Realm settings keys tab (#555)

Browse source 
* wip keys

* keys

* keys

* adds keys table to realm settings

* rebase and fix conflicts

* rebase and fix conflicts

* remove unused declarations

* fix lint

* fix groups test locally

* address PR feedback from Stan
This commit is contained in:
Jenny 2021-05-14 14:58:08 -04:00 committed by GitHub
parent 78721498cf
commit 8e1a1c57bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 458 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-messages.json
View file

@ -11,6 +11,7 @@
"revert": "Revert",
"cancel": "Cancel",
"continue": "Continue",
"close": "Close",
"delete": "Delete",
"remove": "Remove",
"search": "Search",

26
src/components/confirm-dialog/ConfirmDialog.tsx
View file

@ -35,6 +35,7 @@ export interface ConfirmDialogModalProps extends ConfirmDialogProps {
export type ConfirmDialogProps = {
titleKey: string;
messageKey?: string;
noCancelButton?: boolean;
cancelButtonLabel?: string;
continueButtonLabel?: string;
continueButtonVariant?: ButtonVariant;
@ -47,6 +48,7 @@ export type ConfirmDialogProps = {
export const ConfirmDialogModal = ({
titleKey,
messageKey,
noCancelButton,
cancelButtonLabel,
continueButtonLabel,
continueButtonVariant,
@ -77,17 +79,19 @@ export const ConfirmDialogModal = ({
>
{t(continueButtonLabel || "common:continue")}
</Button>,
<Button
id="modal-cancel"
key="cancel"
variant={ButtonVariant.link}
onClick={() => {
if (onCancel) onCancel();
toggleDialog();
}}
>
{t(cancelButtonLabel || "common:cancel")}
</Button>,
!noCancelButton && (
<Button
id="modal-cancel"
key="cancel"
variant={ButtonVariant.link}
onClick={() => {
if (onCancel) onCancel();
toggleDialog();
}}
>
{t(cancelButtonLabel || "common:cancel")}
</Button>
),
]}
>
{!messageKey && children}

12
src/components/table-toolbar/KeycloakDataTable.tsx
View file

@ -229,11 +229,13 @@ export function KeycloakDataTable<T>({
return node.map(getNodeText).join("");
}
if (typeof node === "object" && node) {
return getNodeText(
isValidElement((node as TitleCell).title)
? (node as TitleCell).title.props.children
: (node as JSX.Element).props.children
);
if ((node as TitleCell).title) {
return getNodeText(
isValidElement((node as TitleCell).title)
? (node as TitleCell).title.props.children
: (node as JSX.Element).props.children
);
}
}
return "";
};

18
src/groups/GroupTable.tsx
View file

@ -56,10 +56,21 @@ export const GroupTable = () => {
return response ? response.length : 0;
};
const loader = async () => {
const loader = async (first?: number, max?: number, search?: string) => {
const params: { [name: string]: string | number } = {
first: first!,
max: max!,
};
const searchParam = search || "";
if (searchParam) {
params.search = searchParam;
}
const groupsData = id
? (await adminClient.groups.findOne({ id })).subGroups
: await adminClient.groups.find();
? (await adminClient.groups.findOne({ id, ...params })).subGroups
: await adminClient.groups.find(params);
if (groupsData) {
const memberPromises = groupsData.map((group) => getMembers(group.id!));
@ -121,6 +132,7 @@ export const GroupTable = () => {
<>
<KeycloakDataTable
key={key}
isPaginated
onSelect={(rows) => setSelectedRows([...rows])}
canSelectAll={false}
loader={loader}

180
src/realm-settings/KeysListTab.tsx Normal file
View file

@ -0,0 +1,180 @@
import React, { useState } from "react";
import { useHistory, useRouteMatch } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button, ButtonVariant, PageSection } from "@patternfly/react-core";
import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { emptyFormatter } from "../util";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import "./RealmSettingsSection.css";
import { cellWidth } from "@patternfly/react-table";
type KeyData = KeyMetadataRepresentation & {
provider?: string;
};
type KeysTabInnerProps = {
keys: KeyData[];
};
export const KeysTabInner = ({ keys }: KeysTabInnerProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const { url } = useRouteMatch();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const [publicKey, setPublicKey] = useState("");
const [certificate, setCertificate] = useState("");
const loader = async () => {
return keys;
};
React.useEffect(() => {
refresh();
}, [keys]);
const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
titleKey: t("realm-settings:publicKeys").slice(0, -1),
messageKey: publicKey,
continueButtonLabel: "common:close",
continueButtonVariant: ButtonVariant.primary,
noCancelButton: true,
onConfirm: async () => {},
});
const [toggleCertificateDialog, CertificateDialog] = useConfirmDialog({
titleKey: t("realm-settings:certificate"),
messageKey: certificate,
continueButtonLabel: "common:close",
continueButtonVariant: ButtonVariant.primary,
noCancelButton: true,
onConfirm: async () => {},
});
const goToCreate = () => history.push(`${url}/add-role`);
const ProviderRenderer = ({ provider }: KeyData) => {
return <>{provider}</>;
};
const renderPublicKeyButton = (publicKey: string) => {
return (
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
);
};
const ButtonRenderer = ({ provider, publicKey, certificate }: KeyData) => {
if (provider === "ecdsa-generated") {
return <>{renderPublicKeyButton(publicKey!)}</>;
}
if (provider === "rsa-generated" || provider === "fallback-RS256") {
return (
<>
<div>
{renderPublicKeyButton(publicKey!)}
<Button
onClick={() => {
toggleCertificateDialog();
setCertificate(certificate!);
}}
variant="secondary"
id="kc-certificate"
>
{t("realm-settings:certificate")}
</Button>
</div>
</>
);
}
};
return (
<>
<PageSection variant="light" padding={{ default: "noPadding" }}>
<PublicKeyDialog />
<CertificateDialog />
<KeycloakDataTable
key={key}
loader={loader}
ariaLabelKey="realm-settings:keysList"
searchPlaceholderKey="realm-settings:searchKey"
canSelectAll
columns={[
{
name: "algorithm",
displayKey: "realm-settings:algorithm",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(15)],
},
{
name: "type",
displayKey: "realm-settings:type",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "kid",
displayKey: "realm-settings:kid",
cellFormatters: [emptyFormatter()],
},
{
name: "provider",
displayKey: "realm-settings:provider",
cellRenderer: ProviderRenderer,
cellFormatters: [emptyFormatter()],
},
{
name: "publicKeys",
displayKey: "realm-settings:publicKeys",
cellRenderer: ButtonRenderer,
cellFormatters: [],
},
]}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noRoles")}
instructions={t("noRolesInstructions")}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
</>
);
};
type KeysProps = {
keys: KeyMetadataRepresentation[];
realmComponents: ComponentRepresentation[];
};
export const KeysListTab = ({ keys, realmComponents, ...props }: KeysProps) => {
return (
<KeysTabInner
keys={keys?.map((key) => {
const provider = realmComponents.find(
(component: ComponentRepresentation) =>
component.id === key.providerId
);
return { ...key, provider: provider?.name };
})}
{...props}
/>
);
};

185
src/realm-settings/KeysTab.tsx Normal file
View file

@ -0,0 +1,185 @@
import React, { useState } from "react";
import { useHistory, useRouteMatch } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button, ButtonVariant, PageSection } from "@patternfly/react-core";
import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { emptyFormatter } from "../util";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import "./RealmSettingsSection.css";
import { cellWidth } from "@patternfly/react-table";
type KeyData = KeyMetadataRepresentation & {
provider?: string;
};
type KeysTabInnerProps = {
keys: KeyData[];
};
export const KeysTabInner = ({ keys }: KeysTabInnerProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const { url } = useRouteMatch();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const [publicKey, setPublicKey] = useState("");
const [certificate, setCertificate] = useState("");
const loader = async () => {
return keys;
};
React.useEffect(() => {
refresh();
}, [keys]);
const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
titleKey: t("realm-settings:publicKeys").slice(0, -1),
messageKey: publicKey,
continueButtonLabel: "common:close",
continueButtonVariant: ButtonVariant.primary,
noCancelButton: true,
onConfirm: async () => {},
});
const [toggleCertificateDialog, CertificateDialog] = useConfirmDialog({
titleKey: t("realm-settings:certificate"),
messageKey: certificate,
continueButtonLabel: "common:close",
continueButtonVariant: ButtonVariant.primary,
noCancelButton: true,
onConfirm: async () => {},
});
const goToCreate = () => history.push(`${url}/add-role`);
const ProviderRenderer = ({ provider }: KeyData) => {
return <>{provider}</>;
};
const ButtonRenderer = ({ provider, publicKey, certificate }: KeyData) => {
if (provider === "ecdsa-generated") {
return (
<>
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
</>
);
}
if (provider === "rsa-generated" || provider === "fallback-RS256") {
return (
<>
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-rsa-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
<Button
onClick={() => {
toggleCertificateDialog();
setCertificate(certificate!);
}}
variant="secondary"
id="kc-certificate"
>
{t("realm-settings:certificate")}
</Button>
</>
);
}
};
return (
<>
<PageSection variant="light" padding={{ default: "noPadding" }}>
<PublicKeyDialog />
<CertificateDialog />
<KeycloakDataTable
key={key}
loader={loader}
ariaLabelKey="realm-settings:keysList"
searchPlaceholderKey="realm-settings:searchKey"
canSelectAll
columns={[
{
name: "algorithm",
displayKey: "realm-settings:algorithm",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(15)],
},
{
name: "type",
displayKey: "realm-settings:type",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "kid",
displayKey: "realm-settings:kid",
cellFormatters: [emptyFormatter()],
},
{
name: "provider",
displayKey: "realm-settings:provider",
cellRenderer: ProviderRenderer,
cellFormatters: [emptyFormatter()],
},
{
name: "publicKeys",
displayKey: "realm-settings:publicKeys",
cellRenderer: ButtonRenderer,
cellFormatters: [],
},
]}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noRoles")}
instructions={t("noRolesInstructions")}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
</>
);
};
type KeysProps = {
keys: KeyMetadataRepresentation[];
realmComponents: ComponentRepresentation[];
};
export const KeysTab = ({ keys, realmComponents, ...props }: KeysProps) => {
return (
<KeysTabInner
keys={keys?.map((key) => {
const provider = realmComponents.find(
(component: ComponentRepresentation) =>
component.id === key.providerId
);
return { ...key, provider: provider?.providerId };
})}
{...props}
/>
);
};

3
src/realm-settings/RealmSettingsSection.css
View file

@ -16,3 +16,6 @@ div.pf-c-card__body.kc-form-panel__body {
padding-left: 0px;
padding-bottom: var(--pf-global--spacer--2xl);
}
button#kc-certificate.pf-c-button.pf-m-secondary {
margin-left: var(--pf-global--spacer--md);
}

42
src/realm-settings/RealmSettingsSection.tsx
View file

@ -10,6 +10,7 @@ import {
DropdownSeparator,
PageSection,
Tab,
Tabs,
TabTitleText,
} from "@patternfly/react-core";
@ -26,6 +27,9 @@ import { RealmSettingsGeneralTab } from "./GeneralTab";
import { PartialImportDialog } from "./PartialImport";
import { RealmSettingsThemesTab } from "./ThemesTab";
import { RealmSettingsEmailTab } from "./EmailTab";
import { KeysListTab } from "./KeysListTab";
import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
type RealmSettingsHeaderProps = {
onChange: (value: boolean) => void;
@ -126,6 +130,11 @@ export const RealmSettingsSection = () => {
const form = useForm();
const { control, getValues, setValue } = form;
const [realm, setRealm] = useState<RealmRepresentation>();
const [activeTab2, setActiveTab2] = useState(0);
const [keys, setKeys] = useState<KeyMetadataRepresentation[]>([]);
const [realmComponents, setRealmComponents] = useState<
ComponentRepresentation[]
>([]);
useEffect(() => {
return asyncStateFetch(
@ -138,6 +147,21 @@ export const RealmSettingsSection = () => {
);
}, []);
useEffect(() => {
const update = async () => {
const keysMetaData = await adminClient.realms.getKeys({
realm: realmName,
});
setKeys(keysMetaData.keys!);
const realmComponents = await adminClient.components.find({
type: "org.keycloak.keys.KeyProvider",
realm: realmName,
});
setRealmComponents(realmComponents);
};
setTimeout(update, 100);
}, []);
const setupForm = (realm: RealmRepresentation) => {
Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
};
@ -207,6 +231,24 @@ export const RealmSettingsSection = () => {
reset={() => setupForm(realm!)}
/>
</Tab>
<Tab
eventKey="keys"
title={<TabTitleText>{t("realm-settings:keys")}</TabTitleText>}
data-testid="rs-keys-tab"
>
<Tabs
activeKey={activeTab2}
onSelect={(_, key) => setActiveTab2(key as number)}
>
<Tab
id="setup"
eventKey={0}
title={<TabTitleText>{t("keysList")}</TabTitleText>}
>
<KeysListTab keys={keys} realmComponents={realmComponents} />
</Tab>
</Tabs>
</Tab>
</KeycloakTabs>
</FormProvider>
</PageSection>

10
src/realm-settings/messages.json
View file

@ -30,6 +30,16 @@
"enableStartTLS": "Enable StartTLS",
"username": "Username",
"password": "Password",
"keys": "Keys",
"keysList": "Keys list",
"searchKey":"Search key",
"providers": "Providers",
"algorithm": "Algorithm",
"type": "Type",
"kid": "Kid",
"provider": "Provider",
"publicKeys": "Public keys",
"certificate": "Certificate",
"userRegistration": "User registration",
"userRegistrationHelpText": "Enable/disable the registration page. A link for registration will show on login page too.",
"forgotPassword": "Forgot password",