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,
TableVariant,
} 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 { PaginatingTableToolbar } from "./PaginatingTableToolbar";
@ -385,6 +393,45 @@ export function KeycloakDataTable<T>({
columns={columns}
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 &&
rows.length === 0 &&

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

@ -43,34 +43,6 @@ export const RealmSettingsGeneralTab = ({
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 (
<>
<PageSection variant="light">

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

@ -1,7 +1,19 @@
import React, { Component, useState, useEffect } from "react";
import { useHistory, useRouteMatch } from "react-router-dom";
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 { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@ -10,23 +22,32 @@ import { emptyFormatter } from "../util";
import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
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 { asyncStateFetch } from "../context/auth/AdminClient";
import { useErrorHandler } from "react-error-boundary";
type ComponentData = KeyMetadataRepresentation & {
providerDescription?: string;
name?: string;
};
type KeysTabInnerProps = {
components: ComponentData[];
realmComponents: ComponentRepresentation[];
keyProviderComponentTypes: ComponentTypeRepresentation[];
};
export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabInnerProps) => {
export const KeysTabInner = ({
components,
keyProviderComponentTypes,
}: KeysTabInnerProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const { url } = useRouteMatch();
@ -34,41 +55,59 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
const refresh = () => setKey(new Date().getTime());
const errorHandler = useErrorHandler();
const [publicKey, setPublicKey] = useState("");
const [certificate, setCertificate] = useState("");
const [fetchedComponents, setFetchedComponents] = useState<ComponentRepresentation[]>([]);
const [itemOrder, setItemOrder] = useState(["data1", "data2", "data3"]);
const [id, setId] = useState("");
const loader = async () => {
return components;
};
// useEffect(
// () =>
// asyncStateFetch(
// async () => {
// return components;
// },
// async () => {
// useEffect(
// () =>
// asyncStateFetch(
// async () => {
// return components;
// },
// async () => {
// setFetchedComponents(components)
// },
// errorHandler
// ),
// []
// );
// setFetchedComponents(components)
// },
// errorHandler
// ),
// []
// );
React.useEffect(() => {
refresh();
}, [components]);
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 (
@ -76,7 +115,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
<PageSection variant="light" padding={{ default: "noPadding" }}>
{/* <PublicKeyDialog />
<CertificateDialog /> */}
<KeycloakDataTable
{/* <KeycloakDataTable
key={key}
loader={loader}
ariaLabelKey="realm-settings:keysList"
@ -87,6 +126,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
name: "providerId",
displayKey: "realm-settings:name",
cellFormatters: [emptyFormatter()],
// cellRenderer: DataCellRendererTest,
transforms: [cellWidth(15)],
},
{
@ -98,9 +138,9 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
{
name: "providerDescription",
displayKey: "realm-settings:providerDescription",
cellRenderer: ProviderDescriptionRenderer,
// cellRenderer: ProviderDescriptionRenderer,
cellFormatters: [emptyFormatter()],
}
},
]}
emptyState={
<ListEmptyState
@ -111,45 +151,81 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
onPrimaryAction={goToCreate}
/>
}
/>
{/* <DataList
/> */}
<Table
aria-label="Simple Table"
// variant={TableVariant}
// borders={choice !== 'compactBorderless'}
cells={columns}
// rows={rows}
>
<TableHeader />
<TableBody />
</Table>
<DataList
// onSelectDataListItem={(value) => {
// setGroupId(value);
// }}
aria-label={t("groups")}
onDragFinish={onDragFinish}
onDragStart={onDragStart}
onDragMove={onDragMove}
// onDragCancel={this.onDragCancel}
itemOrder={itemOrder}
isCompact
>
{(keyProviderComponentTypes).map((component) => (
<DataListItem draggable
{/* <DataListItem aria-labelledby={"aria"} id="data1" key="1">
<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"}
key={"key"}
id={"id"}
// onClick={(e) => {
// if ((e.target as HTMLInputElement).type !== "checkbox") {
// setGroupId(group.id);
// }
// }}
key={`key-${idx + 1}`}
id={`data${idx + 1}`}
>
<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
dataListCells={[
<DataListCell key={`name}`}>
<>{"group.name"}</>
<DataListCell key={"4"}>
<>
<Button variant="link">{component.providerId}</Button>
</>
</DataListCell>,
<DataListCell key={"5"}>
<>{component.name}</>
</DataListCell>,
<DataListCell key={"6"}>
<>{component.providerDescription}</>
</DataListCell>,
]}
/>
<DataListAction
aria-labelledby={`select`}
id={`select`}
aria-label={t("groupName")}
isPlainButtonAction
>
</DataListAction>
</DataListItemRow>
</DataListItem>
))}
</DataList> */}
</DataList>
</PageSection>
</>
);
@ -159,23 +235,25 @@ type KeysProps = {
components: ComponentRepresentation[];
realmComponents: ComponentRepresentation[];
keyProviderComponentTypes: ComponentTypeRepresentation[];
};
export const KeysProviderTab = ({ components, keyProviderComponentTypes, ...props }: KeysProps) => {
console.log("components", components)
export const KeysProviderTab = ({
components,
keyProviderComponentTypes,
...props
}: KeysProps) => {
// console.log("components", components)
// console.log("keyz", keys)
// console.log("keyz", keyProviderComponentTypes)
return (
<KeysTabInner
components={components?.map((key) => {
components={components?.map((component) => {
const provider = keyProviderComponentTypes.find(
(component: ComponentTypeRepresentation) =>
component.id === key.providerId
(componentType: ComponentTypeRepresentation) =>
component.providerId === componentType.id
);
return { ...key, providerDescription: provider?.helpText };
return { ...component, providerDescription: provider?.helpText };
})}
keyProviderComponentTypes={keyProviderComponentTypes}
// 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 type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
<<<<<<< HEAD
type RealmSettingsLoginTabProps = {
save: (realm: RealmRepresentation) => void;
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 = ({
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 {
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 ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
import { KeysProviderTab } from "./KeysProvidersTab";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
type RealmSettingsHeaderProps = {
onChange: (value: boolean) => void;
@ -135,6 +136,10 @@ export const RealmSettingsSection = () => {
ComponentRepresentation[]
>([]);
const kpComponentTypes = useServerInfo().componentTypes![
"org.keycloak.keys.KeyProvider"
];
useFetch(
() => adminClient.realms.findOne({ realm: realmName }),
(realm) => {
@ -249,7 +254,11 @@ export const RealmSettingsSection = () => {
eventKey={1}
title={<TabTitleText>{t("providers")}</TabTitleText>}
>
{/* <KeysProviderTab /> */}
<KeysProviderTab
components={realmComponents}
realmComponents={realmComponents}
keyProviderComponentTypes={kpComponentTypes}
/>
</Tab>
</Tabs>
</Tab>

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

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