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

wip key providers

Browse source
This commit is contained in:
jenny-s51 2021-05-03 17:07:22 -04:00
parent 78a22cd5b8
commit 59f7812a24
7 changed files with 220 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,15 @@ import {
TableHeader, TableHeader,
TableVariant, TableVariant,
} from "@patternfly/react-table"; } from "@patternfly/react-table";
import { Spinner } from "@patternfly/react-core"; import {
DataList,
DataListAction,
DataListCell,
DataListItem,
DataListItemCells,
DataListItemRow,
Spinner,
} from "@patternfly/react-core";
import _ from "lodash"; import _ from "lodash";
import { PaginatingTableToolbar } from "./PaginatingTableToolbar"; import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
@ -385,6 +393,45 @@ export function KeycloakDataTable<T>({
columns={columns} columns={columns}
ariaLabelKey={ariaLabelKey} ariaLabelKey={ariaLabelKey}
/> />
// <DataList
// // onSelectDataListItem={(value) => {
// // setGroupId(value);
// // }}
// aria-label={t("groups")}
// isCompact
// itemOrder={itemOrder}
// >
// {(rows!).map((component) => (
// <DataListItem draggable
// aria-labelledby={"aria"}
// key={"key"}
// id={"id"}
// // onClick={(e) => {
// // if ((e.target as HTMLInputElement).type !== "checkbox") {
// // setGroupId(group.id);
// // }
// // }}
// >
// <DataListItemRow data-testid={"group.name"}>
// <DataListItemCells
// dataListCells={[
// <DataListCell key={`name}`}>
// <>{Math.random()}</>
// </DataListCell>,
// ]}
// />
// <DataListAction
// aria-labelledby={`select`}
// id={`select`}
// aria-label={t("groupName")}
// isPlainButtonAction
// >
// </DataListAction>
// </DataListItemRow>
// </DataListItem>
// ))}
// </DataList>
)} )}
{!loading && {!loading &&
rows.length === 0 && rows.length === 0 &&

28
src/realm-settings/GeneralTab.tsx
View file

@ -43,34 +43,6 @@ export const RealmSettingsGeneralTab = ({
const requireSslTypes = ["all", "external", "none"]; const requireSslTypes = ["all", "external", "none"];
<<<<<<< HEAD
=======
useEffect(() => {
return asyncStateFetch(
() => adminClient.realms.findOne({ realm: realmName }),
(realm) => {
setRealm(realm);
setupForm(realm);
},
handleError
);
}, []);
const setupForm = (realm: RealmRepresentation) => {
Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
};
const save = async (realm: RealmRepresentation) => {
try {
await adminClient.realms.update({ realm: realmName }, realm);
setRealm(realm);
addAlert(t("saveSuccess"), AlertVariant.success);
} catch (error) {
addAlert(t("saveError", { error }), AlertVariant.danger);
}
};
>>>>>>> wip keys
return ( return (
<> <>
<PageSection variant="light"> <PageSection variant="light">

234
src/realm-settings/KeysProvidersTab.tsx
View file

@ -1,7 +1,19 @@
import React, { Component, useState, useEffect } from "react"; import React, { Component, useState, useEffect } from "react";
import { useHistory, useRouteMatch } from "react-router-dom"; import { useHistory, useRouteMatch } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Button, ButtonVariant, DataList, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, PageSection } from "@patternfly/react-core"; import {
Button,
ButtonVariant,
DataList,
DataListAction,
DataListCell,
DataListControl,
DataListDragButton,
DataListItem,
DataListItemCells,
DataListItemRow,
PageSection,
} from "@patternfly/react-core";
import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation"; import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState"; import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@ -10,23 +22,32 @@ import { emptyFormatter } from "../util";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import "./RealmSettingsSection.css"; import "./RealmSettingsSection.css";
import { cellWidth } from "@patternfly/react-table"; import {
cellWidth,
Table,
TableBody,
TableHeader,
TableVariant,
} from "@patternfly/react-table";
import ComponentTypeRepresentation from "keycloak-admin/lib/defs/componentTypeRepresentation"; import ComponentTypeRepresentation from "keycloak-admin/lib/defs/componentTypeRepresentation";
import { asyncStateFetch } from "../context/auth/AdminClient"; import { asyncStateFetch } from "../context/auth/AdminClient";
import { useErrorHandler } from "react-error-boundary"; import { useErrorHandler } from "react-error-boundary";
type ComponentData = KeyMetadataRepresentation & { type ComponentData = KeyMetadataRepresentation & {
providerDescription?: string; providerDescription?: string;
name?: string;
}; };
type KeysTabInnerProps = { type KeysTabInnerProps = {
components: ComponentData[]; components: ComponentData[];
realmComponents: ComponentRepresentation[]; realmComponents: ComponentRepresentation[];
keyProviderComponentTypes: ComponentTypeRepresentation[]; keyProviderComponentTypes: ComponentTypeRepresentation[];
}; };
export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabInnerProps) => { export const KeysTabInner = ({
components,
keyProviderComponentTypes,
}: KeysTabInnerProps) => {
const { t } = useTranslation("roles"); const { t } = useTranslation("roles");
const history = useHistory(); const history = useHistory();
const { url } = useRouteMatch(); const { url } = useRouteMatch();
@ -34,41 +55,59 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
const refresh = () => setKey(new Date().getTime()); const refresh = () => setKey(new Date().getTime());
const errorHandler = useErrorHandler(); const errorHandler = useErrorHandler();
const [itemOrder, setItemOrder] = useState(["data1", "data2", "data3"]);
const [publicKey, setPublicKey] = useState(""); const [id, setId] = useState("");
const [certificate, setCertificate] = useState("");
const [fetchedComponents, setFetchedComponents] = useState<ComponentRepresentation[]>([]);
const loader = async () => { const loader = async () => {
return components; return components;
}; };
// useEffect( // useEffect(
// () => // () =>
// asyncStateFetch( // asyncStateFetch(
// async () => { // async () => {
// return components; // return components;
// }, // },
// async () => { // async () => {
// setFetchedComponents(components) // setFetchedComponents(components)
// }, // },
// errorHandler // errorHandler
// ), // ),
// [] // []
// ); // );
React.useEffect(() => { React.useEffect(() => {
refresh(); refresh();
}, [components]); }, [components]);
const goToCreate = () => history.push(`${url}/add-role`); const goToCreate = () => history.push(`${url}/add-role`);
const ProviderDescriptionRenderer = ({ providerDescription }: ComponentData) => { console.log("componentsss", components);
const onDragStart = (id: string) => {
console.log(itemOrder);
setId(id);
};
return <>{providerDescription}</>; const onDragMove = (oldIndex, newIndex) => {
console.log(`Dragging item ${id}.`);
};
const columns = [
t("realm-settings:name"),
t("realm-settings:provider"),
t("realm-settings:providerDescription"),
];
// const onDragCancel = () => {
// this.setState({
// liveText: `Dragging cancelled. List is unchanged.`
// });
// };
const onDragFinish = (itemOrder) => {
setItemOrder(itemOrder);
}; };
return ( return (
@ -76,7 +115,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
<PageSection variant="light" padding={{ default: "noPadding" }}> <PageSection variant="light" padding={{ default: "noPadding" }}>
{/* <PublicKeyDialog /> {/* <PublicKeyDialog />
<CertificateDialog /> */} <CertificateDialog /> */}
<KeycloakDataTable {/* <KeycloakDataTable
key={key} key={key}
loader={loader} loader={loader}
ariaLabelKey="realm-settings:keysList" ariaLabelKey="realm-settings:keysList"
@ -87,6 +126,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
name: "providerId", name: "providerId",
displayKey: "realm-settings:name", displayKey: "realm-settings:name",
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
// cellRenderer: DataCellRendererTest,
transforms: [cellWidth(15)], transforms: [cellWidth(15)],
}, },
{ {
@ -98,9 +138,9 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
{ {
name: "providerDescription", name: "providerDescription",
displayKey: "realm-settings:providerDescription", displayKey: "realm-settings:providerDescription",
cellRenderer: ProviderDescriptionRenderer, // cellRenderer: ProviderDescriptionRenderer,
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
} },
]} ]}
emptyState={ emptyState={
<ListEmptyState <ListEmptyState
@ -111,45 +151,81 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
onPrimaryAction={goToCreate} onPrimaryAction={goToCreate}
/> />
} }
/> /> */}
{/* <DataList <Table
// onSelectDataListItem={(value) => { aria-label="Simple Table"
// setGroupId(value); // variant={TableVariant}
// }} // borders={choice !== 'compactBorderless'}
aria-label={t("groups")} cells={columns}
isCompact // rows={rows}
> >
{(keyProviderComponentTypes).map((component) => ( <TableHeader />
<DataListItem draggable <TableBody />
aria-labelledby={"aria"} </Table>
key={"key"} <DataList
id={"id"} // onSelectDataListItem={(value) => {
// onClick={(e) => { // setGroupId(value);
// if ((e.target as HTMLInputElement).type !== "checkbox") { // }}
// setGroupId(group.id); aria-label={t("groups")}
// } onDragFinish={onDragFinish}
// }} onDragStart={onDragStart}
> onDragMove={onDragMove}
<DataListItemRow data-testid={"group.name"}> // onDragCancel={this.onDragCancel}
itemOrder={itemOrder}
<DataListItemCells isCompact
>
{/* <DataListItem aria-labelledby={"aria"} id="data1" key="1">
<DataListItemRow className="test" data-testid={"group.name"}>
<DataListItemCells className="test2"
dataListCells={[ dataListCells={[
<DataListCell key={`name}`}> <DataListCell key={"1"}>
<>{"group.name"}</> <>{t("realm-settings:name")}</>
</DataListCell>, </DataListCell>,
<DataListCell key={"2"}>
<>{t("realm-settings:provider")}</>
</DataListCell>,
<DataListCell key={"3"}>
<>{t("realm-settings:providerDescription")}</>
</DataListCell>
]} ]}
/> />
<DataListAction
aria-labelledby={`select`}
id={`select`}
aria-label={t("groupName")}
isPlainButtonAction
>
</DataListAction>
</DataListItemRow> </DataListItemRow>
</DataListItem> </DataListItem> */}
))} {components.map((component, idx) => (
</DataList> */} <DataListItem
draggable
aria-labelledby={"aria"}
key={`key-${idx + 1}`}
id={`data${idx + 1}`}
>
<DataListItemRow data-testid={"data-list-row"}>
<DataListControl>
<DataListDragButton
aria-label="Reorder"
aria-labelledby="simple-item2"
aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
aria-pressed="false"
/>
</DataListControl>
<DataListItemCells
dataListCells={[
<DataListCell key={"4"}>
<>
<Button variant="link">{component.providerId}</Button>
</>
</DataListCell>,
<DataListCell key={"5"}>
<>{component.name}</>
</DataListCell>,
<DataListCell key={"6"}>
<>{component.providerDescription}</>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
</PageSection> </PageSection>
</> </>
); );
@ -159,32 +235,34 @@ type KeysProps = {
components: ComponentRepresentation[]; components: ComponentRepresentation[];
realmComponents: ComponentRepresentation[]; realmComponents: ComponentRepresentation[];
keyProviderComponentTypes: ComponentTypeRepresentation[]; keyProviderComponentTypes: ComponentTypeRepresentation[];
}; };
export const KeysProviderTab = ({
export const KeysProviderTab = ({ components, keyProviderComponentTypes, ...props }: KeysProps) => { components,
console.log("components", components) keyProviderComponentTypes,
// console.log("keyz", keys) ...props
// console.log("keyz", keyProviderComponentTypes) }: KeysProps) => {
// console.log("components", components)
// console.log("keyz", keys)
// console.log("keyz", keyProviderComponentTypes)
return ( return (
<KeysTabInner <KeysTabInner
components={components?.map((key) => { components={components?.map((component) => {
const provider = keyProviderComponentTypes.find( const provider = keyProviderComponentTypes.find(
(component: ComponentTypeRepresentation) => (componentType: ComponentTypeRepresentation) =>
component.id === key.providerId component.providerId === componentType.id
); );
return { ...key, providerDescription: provider?.helpText }; return { ...component, providerDescription: provider?.helpText };
})} })}
keyProviderComponentTypes={keyProviderComponentTypes} keyProviderComponentTypes={keyProviderComponentTypes}
// keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => { // keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => {
// const provider = keyProviderComponentTypes.find( // const provider = keyProviderComponentTypes.find(
// (key: key) => // (key: key) =>
// component.id === key.providerId // component.id === key.providerId
// ); // );
// return { ...key, provider: provider?.providerId }; // return { ...key, provider: provider?.providerId };
// })} // })}
{...props} {...props}
/> />
); );

20
src/realm-settings/LoginTab.tsx
View file

@ -6,30 +6,10 @@ import { HelpItem } from "../components/help-enabler/HelpItem";
import { FormPanel } from "../components/scroll-form/FormPanel"; import { FormPanel } from "../components/scroll-form/FormPanel";
import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation"; import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
<<<<<<< HEAD
type RealmSettingsLoginTabProps = { type RealmSettingsLoginTabProps = {
save: (realm: RealmRepresentation) => void; save: (realm: RealmRepresentation) => void;
realm: RealmRepresentation; realm: RealmRepresentation;
}; };
=======
export const RealmSettingsLoginTab = () => {
const { t } = useTranslation("realm-settings");
const [realm, setRealm] = useState<RealmRepresentation>();
const handleError = useErrorHandler();
const adminClient = useAdminClient();
const { realm: realmName } = useRealm();
const { addAlert } = useAlerts();
useEffect(() => {
return asyncStateFetch(
() => adminClient.realms.findOne({ realm: realmName }),
(realm) => {
setRealm(realm);
},
handleError
);
}, []);
>>>>>>> wip keys
export const RealmSettingsLoginTab = ({ export const RealmSettingsLoginTab = ({
save, save,

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

@ -20,3 +20,7 @@ div.pf-c-card__body.kc-form-panel__body {
button#kc-certificate.pf-c-button.pf-m-secondary { button#kc-certificate.pf-c-button.pf-m-secondary {
margin-left: var(--pf-global--spacer--md); margin-left: var(--pf-global--spacer--md);
} }
.pf-c-data-list__item-row.test {
font-weight: bold;
}

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

@ -30,6 +30,7 @@ import { KeysListTab } from "./KeysListTab";
import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation"; import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import { KeysProviderTab } from "./KeysProvidersTab"; import { KeysProviderTab } from "./KeysProvidersTab";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
type RealmSettingsHeaderProps = { type RealmSettingsHeaderProps = {
onChange: (value: boolean) => void; onChange: (value: boolean) => void;
@ -135,6 +136,10 @@ export const RealmSettingsSection = () => {
ComponentRepresentation[] ComponentRepresentation[]
>([]); >([]);
const kpComponentTypes = useServerInfo().componentTypes![
"org.keycloak.keys.KeyProvider"
];
useFetch( useFetch(
() => adminClient.realms.findOne({ realm: realmName }), () => adminClient.realms.findOne({ realm: realmName }),
(realm) => { (realm) => {
@ -249,7 +254,11 @@ export const RealmSettingsSection = () => {
eventKey={1} eventKey={1}
title={<TabTitleText>{t("providers")}</TabTitleText>} title={<TabTitleText>{t("providers")}</TabTitleText>}
> >
{/* <KeysProviderTab /> */} <KeysProviderTab
components={realmComponents}
realmComponents={realmComponents}
keyProviderComponentTypes={kpComponentTypes}
/>
</Tab> </Tab>
</Tabs> </Tabs>
</Tab> </Tab>

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

@ -36,8 +36,10 @@
"providers": "Providers", "providers": "Providers",
"algorithm": "Algorithm", "algorithm": "Algorithm",
"type": "Type", "type": "Type",
"name": "Name",
"kid": "Kid", "kid": "Kid",
"provider": "Provider", "provider": "Provider",
"providerDescription": "Provider description",
"publicKeys": "Public keys", "publicKeys": "Public keys",
"certificate": "Certificate", "certificate": "Certificate",
"userRegistration": "User registration", "userRegistration": "User registration",