form layout no logic

This commit is contained in:
mfrances 2021-03-23 17:15:46 -04:00
parent 95c22fd862
commit f863f850d1
3 changed files with 329 additions and 135 deletions

View file

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

View file

@ -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,11 +49,14 @@ 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);
const { id } = useParams<{ id: string }>();
useEffect(() => {
return asyncStateFetch(
() => {
@ -73,36 +86,205 @@ export const LdapMapperList = () => {
);
}
const loader = async () =>
Promise.resolve(
(mappers || []).map((mapper) => {
// const mapperType = mappers.filter(
// (type) => type.id === mapper.protocolMapper
// )[0];
return {
...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 (
<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")}
<>
<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>
);
};

View file

@ -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>
</>
*/}
</>
);
};