form layout no logic
This commit is contained in:
mfrances
parent
95c22fd862
commit
f863f850d1
3 changed files with 329 additions and 135 deletions
|
|
@ -29,6 +29,7 @@ import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
|
|||
import { RealmRoleTabs } from "./realm-roles/RealmRoleTabs";
|
||||
import { SearchGroups } from "./groups/SearchGroups";
|
||||
import { CreateInitialAccessToken } from "./clients/initial-access/CreateInitialAccessToken";
|
||||
import { LdapMappingDetails } from "./user-federation/ldap/mappers/LdapMappingDetails";
|
||||
|
||||
export type RouteDef = BreadcrumbsRoute & {
|
||||
access: AccessType;
|
||||
|
|
@ -224,6 +225,12 @@ export const routes: RoutesFn = (t: TFunction) => [
|
|||
breadcrumb: t("common:settings"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
|
||||
component: LdapMappingDetails,
|
||||
breadcrumb: t("client-scopes:mappingDetails"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/user-federation/ldap/new",
|
||||
component: UserFederationLdapSettings,
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertVariant } from "@patternfly/react-core";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableVariant,
|
||||
} from "@patternfly/react-table";
|
||||
import { useErrorHandler } from "react-error-boundary";
|
||||
AlertVariant,
|
||||
Button,
|
||||
ToolbarItem,
|
||||
// Dropdown,
|
||||
// DropdownItem,
|
||||
// DropdownToggle,
|
||||
} from "@patternfly/react-core";
|
||||
import { CaretDownIcon } from "@patternfly/react-icons";
|
||||
|
||||
import { TableToolbar } from "../../../components/table-toolbar/TableToolbar";
|
||||
// import {
|
||||
// Table,
|
||||
// TableBody,
|
||||
// TableHeader,
|
||||
// TableVariant,
|
||||
// } from "@patternfly/react-table";
|
||||
import { useErrorHandler } from "react-error-boundary";
|
||||
import { KeycloakDataTable } from "../../../components/table-toolbar/KeycloakDataTable";
|
||||
|
||||
// import { TableToolbar } from "../../../components/table-toolbar/TableToolbar";
|
||||
import { ListEmptyState } from "../../../components/list-empty-state/ListEmptyState";
|
||||
import { useAlerts } from "../../../components/alert/Alerts";
|
||||
import {
|
||||
|
|
@ -17,7 +27,7 @@ import {
|
|||
asyncStateFetch,
|
||||
} from "../../../context/auth/AdminClient";
|
||||
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useParams, Link } from "react-router-dom";
|
||||
|
||||
interface ComponentMapperRepresentation {
|
||||
config?: Record<string, any>;
|
||||
|
|
@ -28,10 +38,10 @@ interface ComponentMapperRepresentation {
|
|||
parentID?: string;
|
||||
}
|
||||
|
||||
type Row = {
|
||||
name: JSX.Element;
|
||||
type: string;
|
||||
};
|
||||
// type Row = ComponentMapperRepresentation {
|
||||
// name: JSX.Element;
|
||||
// type: string;
|
||||
// };
|
||||
|
||||
export const LdapMapperList = () => {
|
||||
const [mappers, setMappers] = useState<ComponentMapperRepresentation[]>();
|
||||
|
|
@ -39,6 +49,9 @@ export const LdapMapperList = () => {
|
|||
const { t } = useTranslation("client-scopes");
|
||||
const adminClient = useAdminClient();
|
||||
const { addAlert } = useAlerts();
|
||||
|
||||
// const [mapperAction, setMapperAction] = useState(false);
|
||||
|
||||
const handleError = useErrorHandler();
|
||||
const [key, setKey] = useState(0);
|
||||
|
||||
|
|
@ -73,36 +86,205 @@ export const LdapMapperList = () => {
|
|||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableToolbar
|
||||
inputGroupName="clientsScopeToolbarTextInput"
|
||||
inputGroupPlaceholder={t("mappersSearchFor")}
|
||||
>
|
||||
<Table
|
||||
variant={TableVariant.compact}
|
||||
cells={[
|
||||
t("common:name"),
|
||||
t("common:type"),
|
||||
]}
|
||||
rows={mappers.map((cell) => {
|
||||
const loader = async () =>
|
||||
Promise.resolve(
|
||||
(mappers || []).map((mapper) => {
|
||||
// const mapperType = mappers.filter(
|
||||
// (type) => type.id === mapper.protocolMapper
|
||||
// )[0];
|
||||
return {
|
||||
cells: Object.values([cell.name, cell.providerId]),
|
||||
};
|
||||
})}
|
||||
aria-label={t("clientScopeList")}
|
||||
...mapper,
|
||||
name: mapper.name,
|
||||
type: mapper.providerId,
|
||||
} as ComponentMapperRepresentation;
|
||||
})
|
||||
// .sort((a, b) => a.priority - b.priority)
|
||||
);
|
||||
|
||||
const url = "mappers";
|
||||
const MapperLink = (mapper: ComponentMapperRepresentation) => (
|
||||
<>
|
||||
<Link to={`${url}/${mapper.id}`}>{mapper.name}</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<KeycloakDataTable
|
||||
key={key}
|
||||
loader={loader}
|
||||
ariaLabelKey="client-scopes:clientScopeList"
|
||||
searchPlaceholderKey="client-scopes:mappersSearchFor"
|
||||
toolbarItem={
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
data-testid="createMapperBtn"
|
||||
variant="primary"
|
||||
// onClick={handleModalToggle}
|
||||
onClick={ () => addAlert(t("Add functionality not implemented yet!"), AlertVariant.success)}
|
||||
>
|
||||
{/* TODO: Add proper strings */}
|
||||
{t("Add mapper")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
}
|
||||
// <Dropdown
|
||||
// onSelect={() => setMapperAction(false)}
|
||||
// toggle={
|
||||
// <DropdownToggle
|
||||
// isPrimary
|
||||
// id="mapperAction"
|
||||
// onToggle={() => setMapperAction(!mapperAction)}
|
||||
// toggleIndicator={CaretDownIcon}
|
||||
// >
|
||||
// {t("addMapper")}
|
||||
// </DropdownToggle>
|
||||
// }
|
||||
// isOpen={mapperAction}
|
||||
// dropdownItems={[
|
||||
// <DropdownItem
|
||||
// key="predefined"
|
||||
// onClick={() =>
|
||||
// addAlert(t("mappingCreatedSuccess"), AlertVariant.success)
|
||||
// }
|
||||
// >
|
||||
// {t("fromPredefinedMapper")}
|
||||
// </DropdownItem>,
|
||||
// ]}
|
||||
// />
|
||||
|
||||
// toolbarItem={
|
||||
// <Dropdown
|
||||
// onSelect={() => setMapperAction(false)}
|
||||
// toggle={
|
||||
// <DropdownToggle
|
||||
// isPrimary
|
||||
// id="mapperAction"
|
||||
// onToggle={() => setMapperAction(!mapperAction)}
|
||||
// toggleIndicator={CaretDownIcon}
|
||||
// >
|
||||
// {t("addMapper")}
|
||||
// </DropdownToggle>
|
||||
// }
|
||||
// isOpen={mapperAction}
|
||||
// dropdownItems={[
|
||||
// <DropdownItem
|
||||
// key="predefined"
|
||||
// onClick={() => toggleAddMapperDialog(true)}
|
||||
// >
|
||||
// {t("fromPredefinedMapper")}
|
||||
// </DropdownItem>,
|
||||
// <DropdownItem
|
||||
// key="byConfiguration"
|
||||
// onClick={() => toggleAddMapperDialog(false)}
|
||||
// >
|
||||
// {t("byConfiguration")}
|
||||
// </DropdownItem>,
|
||||
// ]}
|
||||
// />
|
||||
// }
|
||||
// actions={[
|
||||
// {
|
||||
// title: t("common:delete"),
|
||||
// onRowClick: async (mapper) => {
|
||||
// try {
|
||||
// await adminClient.clientScopes.delProtocolMapper({
|
||||
// id: clientScope.id!,
|
||||
// mapperId: mapper.id!,
|
||||
// });
|
||||
// addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
// refresh();
|
||||
// } catch (error) {
|
||||
// addAlert(
|
||||
// t("mappingDeletedError", { error }),
|
||||
// AlertVariant.danger
|
||||
// );
|
||||
// }
|
||||
// return true;
|
||||
// },
|
||||
// },
|
||||
// ]}
|
||||
actions={[
|
||||
{
|
||||
title: t("common:delete"),
|
||||
onClick: () => {
|
||||
addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
onRowClick: async (mapper) => {
|
||||
try {
|
||||
// await adminClient.clientScopes.delProtocolMapper({
|
||||
// id: mapper.id!,
|
||||
// mapperId: mapper.id!,
|
||||
// });
|
||||
// addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
addAlert(
|
||||
"Delete functionality not implemented yet!",
|
||||
AlertVariant.success
|
||||
);
|
||||
// refresh();
|
||||
} catch (error) {
|
||||
addAlert(
|
||||
t("mappingDeletedError", { error }),
|
||||
AlertVariant.danger
|
||||
);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TableHeader />
|
||||
<TableBody />
|
||||
</Table>
|
||||
</TableToolbar>
|
||||
columns={[
|
||||
{
|
||||
name: "name",
|
||||
cellRenderer: MapperLink,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
},
|
||||
]}
|
||||
emptyState={
|
||||
<ListEmptyState
|
||||
message={t("emptyMappers")}
|
||||
instructions={t("emptyMappersInstructions")}
|
||||
primaryActionText={t("emptyPrimaryAction")}
|
||||
// onPrimaryAction={() => toggleAddMapperDialog(true)}
|
||||
// secondaryActions={[
|
||||
// {
|
||||
// text: t("emptySecondaryAction"),
|
||||
// onClick: () => toggleAddMapperDialog(false),
|
||||
// type: ButtonVariant.secondary,
|
||||
// },
|
||||
// ]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
|
||||
// <TableToolbar
|
||||
// inputGroupName="clientsScopeToolbarTextInput"
|
||||
// inputGroupPlaceholder={t("mappersSearchFor")}
|
||||
// >
|
||||
// <Table
|
||||
// variant={TableVariant.compact}
|
||||
// cells={[
|
||||
// t("common:name"),
|
||||
// t("common:type"),
|
||||
// ]}
|
||||
// rows={mappers.map((cell) => {
|
||||
// return {
|
||||
// cells: Object.values([cell.name, cell.providerId]),
|
||||
// };
|
||||
// })}
|
||||
// aria-label={t("clientScopeList")}
|
||||
// actions={[
|
||||
// {
|
||||
// title: t("common:delete"),
|
||||
// onClick: () => {
|
||||
// addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
// },
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <TableHeader />
|
||||
// <TableBody />
|
||||
// </Table>
|
||||
// </TableToolbar>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {
|
|||
Switch,
|
||||
TextInput,
|
||||
ValidatedOptions,
|
||||
Text
|
||||
} from "@patternfly/react-core";
|
||||
import { ConfigPropertyRepresentation } from "keycloak-admin/lib/defs/configPropertyRepresentation";
|
||||
import ProtocolMapperRepresentation from "keycloak-admin/lib/defs/protocolMapperRepresentation";
|
||||
|
|
@ -42,112 +43,115 @@ type Params = {
|
|||
};
|
||||
|
||||
export const LdapMappingDetails = () => {
|
||||
const { t } = useTranslation("client-scopes");
|
||||
const adminClient = useAdminClient();
|
||||
const handleError = useErrorHandler();
|
||||
const { addAlert } = useAlerts();
|
||||
// const { t } = useTranslation("client-scopes");
|
||||
// const adminClient = useAdminClient();
|
||||
// const handleError = useErrorHandler();
|
||||
// const { addAlert } = useAlerts();
|
||||
|
||||
const { id, mapperId } = useParams<Params>();
|
||||
const { register, errors, setValue, control, handleSubmit } = useForm();
|
||||
const [mapping, setMapping] = useState<ProtocolMapperRepresentation>();
|
||||
const [typeOpen, setTypeOpen] = useState(false);
|
||||
const [configProperties, setConfigProperties] = useState<
|
||||
ConfigPropertyRepresentation[]
|
||||
>();
|
||||
// const { id, mapperId } = useParams<Params>();
|
||||
// const { register, errors, setValue, control, handleSubmit } = useForm();
|
||||
// const [mapping, setMapping] = useState<ProtocolMapperRepresentation>();
|
||||
// const [typeOpen, setTypeOpen] = useState(false);
|
||||
// const [configProperties, setConfigProperties] = useState<
|
||||
// ConfigPropertyRepresentation[]
|
||||
// >();
|
||||
|
||||
const history = useHistory();
|
||||
const serverInfo = useServerInfo();
|
||||
const { url } = useRouteMatch();
|
||||
const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
|
||||
// const history = useHistory();
|
||||
// const serverInfo = useServerInfo();
|
||||
// const { url } = useRouteMatch();
|
||||
// const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
|
||||
|
||||
useEffect(() => {
|
||||
return asyncStateFetch(
|
||||
async () => {
|
||||
if (mapperId.match(isGuid)) {
|
||||
const data = await adminClient.clientScopes.findProtocolMapper({
|
||||
id,
|
||||
mapperId,
|
||||
});
|
||||
if (data) {
|
||||
Object.entries(data).map((entry) => {
|
||||
convertToFormValues(entry[1], "config", setValue);
|
||||
});
|
||||
}
|
||||
const mapperTypes = serverInfo.protocolMapperTypes![data!.protocol!];
|
||||
const properties = mapperTypes.find(
|
||||
(type) => type.id === data!.protocolMapper
|
||||
)?.properties!;
|
||||
// useEffect(() => {
|
||||
// return asyncStateFetch(
|
||||
// async () => {
|
||||
// if (mapperId.match(isGuid)) {
|
||||
// const data = await adminClient.clientScopes.findProtocolMapper({
|
||||
// id,
|
||||
// mapperId,
|
||||
// });
|
||||
// if (data) {
|
||||
// Object.entries(data).map((entry) => {
|
||||
// convertToFormValues(entry[1], "config", setValue);
|
||||
// });
|
||||
// }
|
||||
// const mapperTypes = serverInfo.protocolMapperTypes![data!.protocol!];
|
||||
// const properties = mapperTypes.find(
|
||||
// (type) => type.id === data!.protocolMapper
|
||||
// )?.properties!;
|
||||
|
||||
return {
|
||||
configProperties: properties,
|
||||
mapping: data,
|
||||
};
|
||||
} else {
|
||||
const scope = await adminClient.clientScopes.findOne({ id });
|
||||
const protocolMappers = serverInfo.protocolMapperTypes![
|
||||
scope.protocol!
|
||||
];
|
||||
const mapping = protocolMappers.find(
|
||||
(mapper) => mapper.id === mapperId
|
||||
)!;
|
||||
return {
|
||||
mapping: {
|
||||
name: mapping.name,
|
||||
protocol: scope.protocol,
|
||||
protocolMapper: mapperId,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
(result) => {
|
||||
setConfigProperties(result.configProperties);
|
||||
setMapping(result.mapping);
|
||||
},
|
||||
handleError
|
||||
);
|
||||
}, []);
|
||||
// return {
|
||||
// configProperties: properties,
|
||||
// mapping: data,
|
||||
// };
|
||||
// } else {
|
||||
// const scope = await adminClient.clientScopes.findOne({ id });
|
||||
// const protocolMappers = serverInfo.protocolMapperTypes![
|
||||
// scope.protocol!
|
||||
// ];
|
||||
// const mapping = protocolMappers.find(
|
||||
// (mapper) => mapper.id === mapperId
|
||||
// )!;
|
||||
// return {
|
||||
// mapping: {
|
||||
// name: mapping.name,
|
||||
// protocol: scope.protocol,
|
||||
// protocolMapper: mapperId,
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
// },
|
||||
// (result) => {
|
||||
// setConfigProperties(result.configProperties);
|
||||
// setMapping(result.mapping);
|
||||
// },
|
||||
// handleError
|
||||
// );
|
||||
// }, []);
|
||||
|
||||
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
|
||||
titleKey: "client-scopes:deleteMappingTitle",
|
||||
messageKey: "client-scopes:deleteMappingConfirm",
|
||||
continueButtonLabel: "common:delete",
|
||||
continueButtonVariant: ButtonVariant.danger,
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await adminClient.clientScopes.delClientScopeMappings(
|
||||
{ client: id, id: mapperId },
|
||||
[]
|
||||
);
|
||||
addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
history.push(`${url}/${id}`);
|
||||
} catch (error) {
|
||||
addAlert(t("mappingDeletedError", { error }), AlertVariant.danger);
|
||||
}
|
||||
},
|
||||
});
|
||||
// const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
|
||||
// titleKey: "client-scopes:deleteMappingTitle",
|
||||
// messageKey: "client-scopes:deleteMappingConfirm",
|
||||
// continueButtonLabel: "common:delete",
|
||||
// continueButtonVariant: ButtonVariant.danger,
|
||||
// onConfirm: async () => {
|
||||
// try {
|
||||
// await adminClient.clientScopes.delClientScopeMappings(
|
||||
// { client: id, id: mapperId },
|
||||
// []
|
||||
// );
|
||||
// addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
|
||||
// history.push(`${url}/${id}`);
|
||||
// } catch (error) {
|
||||
// addAlert(t("mappingDeletedError", { error }), AlertVariant.danger);
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
|
||||
const save = async (formMapping: ProtocolMapperRepresentation) => {
|
||||
const config = convertFormValuesToObject(formMapping.config);
|
||||
const map = { ...mapping, ...formMapping, config };
|
||||
const key = mapperId.match(isGuid) ? "Updated" : "Created";
|
||||
try {
|
||||
if (mapperId.match(isGuid)) {
|
||||
await adminClient.clientScopes.updateProtocolMapper(
|
||||
{ id, mapperId },
|
||||
map
|
||||
);
|
||||
} else {
|
||||
await adminClient.clientScopes.addProtocolMapper({ id }, map);
|
||||
}
|
||||
addAlert(t(`mapping${key}Success`), AlertVariant.success);
|
||||
} catch (error) {
|
||||
addAlert(t(`mapping${key}Error`, { error }), AlertVariant.danger);
|
||||
}
|
||||
};
|
||||
// const save = async (formMapping: ProtocolMapperRepresentation) => {
|
||||
// const config = convertFormValuesToObject(formMapping.config);
|
||||
// const map = { ...mapping, ...formMapping, config };
|
||||
// const key = mapperId.match(isGuid) ? "Updated" : "Created";
|
||||
// try {
|
||||
// if (mapperId.match(isGuid)) {
|
||||
// await adminClient.clientScopes.updateProtocolMapper(
|
||||
// { id, mapperId },
|
||||
// map
|
||||
// );
|
||||
// } else {
|
||||
// await adminClient.clientScopes.addProtocolMapper({ id }, map);
|
||||
// }
|
||||
// addAlert(t(`mapping${key}Success`), AlertVariant.success);
|
||||
// } catch (error) {
|
||||
// addAlert(t(`mapping${key}Error`, { error }), AlertVariant.danger);
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteConfirm />
|
||||
<Text>
|
||||
Coming soon!
|
||||
</Text>
|
||||
{/* <DeleteConfirm />
|
||||
<ViewHeader
|
||||
titleKey={mapping ? mapping.name! : t("addMapper")}
|
||||
subKey={mapperId.match(isGuid) ? mapperId : ""}
|
||||
|
|
@ -371,6 +375,7 @@ export const LdapMappingDetails = () => {
|
|||
</ActionGroup>
|
||||
</FormAccess>
|
||||
</PageSection>
|
||||
*/}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue