From f863f850d158aa1af497950b5fc30ea4294220e7 Mon Sep 17 00:00:00 2001 From: mfrances Date: Tue, 23 Mar 2021 17:15:46 -0400 Subject: [PATCH] form layout no logic --- src/route-config.ts | 7 + .../ldap/mappers/LdapMapperList.tsx | 256 +++++++++++++++--- .../ldap/mappers/LdapMappingDetails.tsx | 201 +++++++------- 3 files changed, 329 insertions(+), 135 deletions(-) diff --git a/src/route-config.ts b/src/route-config.ts index 39075781cb..643e59e7b8 100644 --- a/src/route-config.ts +++ b/src/route-config.ts @@ -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, diff --git a/src/user-federation/ldap/mappers/LdapMapperList.tsx b/src/user-federation/ldap/mappers/LdapMapperList.tsx index 5caf577318..33de6509cd 100644 --- a/src/user-federation/ldap/mappers/LdapMapperList.tsx +++ b/src/user-federation/ldap/mappers/LdapMapperList.tsx @@ -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; @@ -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(); @@ -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) => ( + <> + {mapper.name} + + ); + return ( - - { - return { - cells: Object.values([cell.name, cell.providerId]), - }; - })} - aria-label={t("clientScopeList")} + <> + + + + } + // setMapperAction(false)} + // toggle={ + // setMapperAction(!mapperAction)} + // toggleIndicator={CaretDownIcon} + // > + // {t("addMapper")} + // + // } + // isOpen={mapperAction} + // dropdownItems={[ + // + // addAlert(t("mappingCreatedSuccess"), AlertVariant.success) + // } + // > + // {t("fromPredefinedMapper")} + // , + // ]} + // /> + + // toolbarItem={ + // setMapperAction(false)} + // toggle={ + // setMapperAction(!mapperAction)} + // toggleIndicator={CaretDownIcon} + // > + // {t("addMapper")} + // + // } + // isOpen={mapperAction} + // dropdownItems={[ + // toggleAddMapperDialog(true)} + // > + // {t("fromPredefinedMapper")} + // , + // toggleAddMapperDialog(false)} + // > + // {t("byConfiguration")} + // , + // ]} + // /> + // } + // 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; }, }, ]} - > - - -
- + columns={[ + { + name: "name", + cellRenderer: MapperLink, + }, + { + name: "type", + }, + ]} + emptyState={ + toggleAddMapperDialog(true)} + // secondaryActions={[ + // { + // text: t("emptySecondaryAction"), + // onClick: () => toggleAddMapperDialog(false), + // type: ButtonVariant.secondary, + // }, + // ]} + /> + } + /> + + + // + // { + // return { + // cells: Object.values([cell.name, cell.providerId]), + // }; + // })} + // aria-label={t("clientScopeList")} + // actions={[ + // { + // title: t("common:delete"), + // onClick: () => { + // addAlert(t("mappingDeletedSuccess"), AlertVariant.success); + // }, + // }, + // ]} + // > + // + // + //
+ // ); }; diff --git a/src/user-federation/ldap/mappers/LdapMappingDetails.tsx b/src/user-federation/ldap/mappers/LdapMappingDetails.tsx index 0beb18ed86..43839a05fb 100644 --- a/src/user-federation/ldap/mappers/LdapMappingDetails.tsx +++ b/src/user-federation/ldap/mappers/LdapMappingDetails.tsx @@ -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(); - const { register, errors, setValue, control, handleSubmit } = useForm(); - const [mapping, setMapping] = useState(); - const [typeOpen, setTypeOpen] = useState(false); - const [configProperties, setConfigProperties] = useState< - ConfigPropertyRepresentation[] - >(); +// const { id, mapperId } = useParams(); +// const { register, errors, setValue, control, handleSubmit } = useForm(); +// const [mapping, setMapping] = useState(); +// 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 ( <> - + + Coming soon! + + {/* { - + */} + ); };