libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 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">

194
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
aria-label="Simple Table"
// variant={TableVariant}
// borders={choice !== 'compactBorderless'}
cells={columns}
// rows={rows}
>
<TableHeader />
<TableBody />
</Table>
<DataList
// onSelectDataListItem={(value) => { // onSelectDataListItem={(value) => {
// setGroupId(value); // setGroupId(value);
// }} // }}
aria-label={t("groups")} aria-label={t("groups")}
onDragFinish={onDragFinish}
onDragStart={onDragStart}
onDragMove={onDragMove}
// onDragCancel={this.onDragCancel}
itemOrder={itemOrder}
isCompact isCompact
> >
{(keyProviderComponentTypes).map((component) => ( {/* <DataListItem aria-labelledby={"aria"} id="data1" key="1">
<DataListItem draggable <DataListItemRow className="test" data-testid={"group.name"}>
<DataListItemCells className="test2"
dataListCells={[
<DataListCell key={"1"}>
<>{t("realm-settings:name")}</>
</DataListCell>,
<DataListCell key={"2"}>
<>{t("realm-settings:provider")}</>
</DataListCell>,
<DataListCell key={"3"}>
<>{t("realm-settings:providerDescription")}</>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem> */}
{components.map((component, idx) => (
<DataListItem
draggable
aria-labelledby={"aria"} aria-labelledby={"aria"}
key={"key"} key={`key-${idx + 1}`}
id={"id"} id={`data${idx + 1}`}
// onClick={(e) => {
// if ((e.target as HTMLInputElement).type !== "checkbox") {
// setGroupId(group.id);
// }
// }}
> >
<DataListItemRow data-testid={"group.name"}> <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 <DataListItemCells
dataListCells={[ dataListCells={[
<DataListCell key={`name}`}> <DataListCell key={"4"}>
<>{"group.name"}</> <>
<Button variant="link">{component.providerId}</Button>
</>
</DataListCell>,
<DataListCell key={"5"}>
<>{component.name}</>
</DataListCell>,
<DataListCell key={"6"}>
<>{component.providerDescription}</>
</DataListCell>, </DataListCell>,
]} ]}
/> />
<DataListAction
aria-labelledby={`select`}
id={`select`}
aria-label={t("groupName")}
isPlainButtonAction
>
</DataListAction>
</DataListItemRow> </DataListItemRow>
</DataListItem> </DataListItem>
))} ))}
</DataList> */} </DataList>
</PageSection> </PageSection>
</> </>
); );
@ -159,23 +235,25 @@ 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,
...props
}: KeysProps) => {
// console.log("components", components)
// console.log("keyz", keys) // console.log("keyz", keys)
// console.log("keyz", keyProviderComponentTypes) // 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) => {

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",