added by configuration dialog into the flow (#221)

* updated the detail screen to support new mapping

* fix merge error

* added by configuration dialog

src/client-scopes/details/MapperList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import {
   AlertVariant,
   ButtonVariant,
@@ -43,6 +43,7 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
   const { addAlert } = useAlerts();
+  const history = useHistory();
 
   const [filteredData, setFilteredData] = useState<
     { mapper: ProtocolMapperRepresentation; cells: Row }[]
@@ -53,21 +54,34 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
     clientScope.protocol!
   ];
 
-  const [builtInDialogOpen, setBuiltInDialogOpen] = useState(false);
+  const [addMapperDialogOpen, setAddMapperDialogOpen] = useState(false);
-  const toggleBuiltInMapperDialog = () =>
+  const [filter, setFilter] = useState(clientScope.protocolMappers);
-    setBuiltInDialogOpen(!builtInDialogOpen);
+  const toggleAddMapperDialog = (buildIn: boolean) => {
+    if (buildIn) {
+      setFilter(mapperList);
+    } else {
+      setFilter(undefined);
+    }
+    setAddMapperDialogOpen(!addMapperDialogOpen);
+  };
+
   const addMappers = async (
     mappers: ProtocolMapperTypeRepresentation | ProtocolMapperRepresentation[]
-  ) => {
+  ): Promise<void> => {
-    try {
+    if (filter === undefined) {
-      await adminClient.clientScopes.addMultipleProtocolMappers(
+      const mapper = mappers as ProtocolMapperTypeRepresentation;
-        { id: clientScope.id! },
+      history.push(`/client-scopes/${clientScope.id}/${mapper.id}`);
-        mappers as ProtocolMapperRepresentation[]
+    } else {
-      );
+      try {
-      refresh();
+        await adminClient.clientScopes.addMultipleProtocolMappers(
-      addAlert(t("mappingCreatedSuccess"), AlertVariant.success);
+          { id: clientScope.id! },
-    } catch (error) {
+          mappers as ProtocolMapperRepresentation[]
-      addAlert(t("mappingCreatedError", { error }), AlertVariant.danger);
+        );
+        refresh();
+        addAlert(t("mappingCreatedSuccess"), AlertVariant.success);
+      } catch (error) {
+        addAlert(t("mappingCreatedError", { error }), AlertVariant.danger);
+      }
     }
   };
 
@@ -76,20 +90,20 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
       <>
         <AddMapperDialog
           protocol={clientScope.protocol!}
-          filter={mapperList || []}
+          filter={filter}
           onConfirm={addMappers}
-          open={builtInDialogOpen}
+          open={addMapperDialogOpen}
-          toggleDialog={toggleBuiltInMapperDialog}
+          toggleDialog={() => setAddMapperDialogOpen(!addMapperDialogOpen)}
         />
         <ListEmptyState
           message={t("emptyMappers")}
           instructions={t("emptyMappersInstructions")}
           primaryActionText={t("emptyPrimaryAction")}
-          onPrimaryAction={toggleBuiltInMapperDialog}
+          onPrimaryAction={() => toggleAddMapperDialog(true)}
           secondaryActions={[
             {
               text: t("emptySecondaryAction"),
-              onClick: () => {},
+              onClick: () => toggleAddMapperDialog(false),
               type: ButtonVariant.secondary,
             },
           ]}
@@ -149,10 +163,16 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
           }
           isOpen={mapperAction}
           dropdownItems={[
-            <DropdownItem key="predefined" onClick={toggleBuiltInMapperDialog}>
+            <DropdownItem
+              key="predefined"
+              onClick={() => toggleAddMapperDialog(true)}
+            >
               {t("fromPredefinedMapper")}
             </DropdownItem>,
-            <DropdownItem key="byConfiguration">
+            <DropdownItem
+              key="byConfiguration"
+              onClick={() => toggleAddMapperDialog(false)}
+            >
               {t("byConfiguration")}
             </DropdownItem>,
           ]}
@@ -161,10 +181,10 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
     >
       <AddMapperDialog
         protocol={clientScope.protocol!}
-        filter={mapperList || []}
+        filter={filter}
         onConfirm={addMappers}
-        open={builtInDialogOpen}
+        open={addMapperDialogOpen}
-        toggleDialog={toggleBuiltInMapperDialog}
+        toggleDialog={() => setAddMapperDialogOpen(!addMapperDialogOpen)}
       />
       <Table
         variant={TableVariant.compact}

src/client-scopes/details/MappingDetails.tsx

@@ -18,6 +18,7 @@ import {
   SelectVariant,
   Switch,
   TextInput,
+  ValidatedOptions,
 } from "@patternfly/react-core";
 import { ConfigPropertyRepresentation } from "keycloak-admin/lib/defs/configPropertyRepresentation";
 
@@ -31,43 +32,54 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";
 
+type Params = {
+  scopeId: string;
+  id: string;
+};
+
 export const MappingDetails = () => {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
   const { addAlert } = useAlerts();
 
-  const { scopeId, id } = useParams<{ scopeId: string; id: string }>();
+  const { scopeId, id } = useParams<Params>();
-  const { register, setValue, control, handleSubmit } = useForm();
+  const { register, errors, setValue, control, handleSubmit } = useForm();
   const [mapping, setMapping] = useState<ProtocolMapperRepresentation>();
   const [typeOpen, setTypeOpen] = useState(false);
   const [configProperties, setConfigProperties] = useState<
     ConfigPropertyRepresentation[]
   >();
 
-  const serverInfo = useServerInfo();
   const history = useHistory();
+  const serverInfo = useServerInfo();
+  const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
 
   useEffect(() => {
-    (async () => {
+    if (id.match(isGuid)) {
-      const data = await adminClient.clientScopes.findProtocolMapper({
+      (async () => {
-        id: scopeId,
+        const data = await adminClient.clientScopes.findProtocolMapper({
-        mapperId: id,
+          id: scopeId,
-      });
+          mapperId: id,
-      if (data) {
-        Object.entries(data).map((entry) => {
-          if (entry[0] === "config") {
-            convertToFormValues(entry[1], "config", setValue);
-          }
-          setValue(entry[0], entry[1]);
         });
-      }
+        if (data) {
-      setMapping(data);
+          Object.entries(data).map((entry) => {
-      const mapperTypes = serverInfo.protocolMapperTypes![data!.protocol!];
+            convertToFormValues(entry[1], "config", setValue);
-      const properties = mapperTypes.find(
+          });
-        (type) => type.id === data.protocolMapper
+        }
-      )?.properties!;
+        const mapperTypes = serverInfo.protocolMapperTypes![data!.protocol!];
-      setConfigProperties(properties);
+        const properties = mapperTypes.find(
-    })();
+          (type) => type.id === data!.protocolMapper
+        )?.properties!;
+        setConfigProperties(properties);
+
+        setMapping(data);
+      })();
+    } else {
+      (async () => {
+        const scope = await adminClient.clientScopes.findOne({ id: scopeId });
+        setMapping({ protocol: scope.protocol, protocolMapper: id });
+      })();
+    }
   }, []);
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
@@ -91,15 +103,20 @@ export const MappingDetails = () => {
 
   const save = async (formMapping: ProtocolMapperRepresentation) => {
     const config = convertFormValuesToObject(formMapping.config);
-    const map = { ...mapping, config };
+    const map = { ...mapping, ...formMapping, config };
+    const key = id.match(isGuid) ? "Updated" : "Created";
     try {
-      await adminClient.clientScopes.updateProtocolMapper(
+      if (id.match(isGuid)) {
-        { id: scopeId, mapperId: id },
+        await adminClient.clientScopes.updateProtocolMapper(
-        map
+          { id: scopeId, mapperId: id },
-      );
+          map
-      addAlert(t("mappingUpdatedSuccess"), AlertVariant.success);
+        );
+      } else {
+        await adminClient.clientScopes.addProtocolMapper({ id: scopeId }, map);
+      }
+      addAlert(t(`mapping${key}Success`), AlertVariant.success);
     } catch (error) {
-      addAlert(t("mappingUpdatedError", { error }), AlertVariant.danger);
+      addAlert(t(`mapping${key}Error`, { error }), AlertVariant.danger);
     }
   };
 
@@ -107,21 +124,55 @@ export const MappingDetails = () => {
     <>
       <DeleteConfirm />
       <ViewHeader
-        titleKey={mapping ? mapping.name! : ""}
+        titleKey={mapping ? mapping.name! : t("addMapper")}
-        subKey={id}
+        subKey={id.match(isGuid) ? id : ""}
         badge={mapping?.protocol}
-        dropdownItems={[
+        dropdownItems={
-          <DropdownItem
+          id.match(isGuid)
-            key="delete"
+            ? [
-            value="delete"
+                <DropdownItem
-            onClick={toggleDeleteDialog}
+                  key="delete"
-          >
+                  value="delete"
-            {t("common:delete")}
+                  onClick={toggleDeleteDialog}
-          </DropdownItem>,
+                >
-        ]}
+                  {t("common:delete")}
+                </DropdownItem>,
+              ]
+            : undefined
+        }
       />
       <PageSection variant="light">
         <Form isHorizontal onSubmit={handleSubmit(save)}>
+          {!id.match(isGuid) && (
+            <FormGroup
+              label={t("name")}
+              labelIcon={
+                <HelpItem
+                  helpText="client-scopes-help:mapperName"
+                  forLabel={t("name")}
+                  forID="name"
+                />
+              }
+              fieldId="name"
+              isRequired
+              validated={
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              }
+              helperTextInvalid={t("common:required")}
+            >
+              <TextInput
+                ref={register({ required: true })}
+                type="text"
+                id="name"
+                name="name"
+                validated={
+                  errors.name
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
+              />
+            </FormGroup>
+          )}
           <FormGroup
             label={t("realmRolePrefix")}
             labelIcon={

src/client-scopes/messages.json

@@ -19,6 +19,8 @@
     "deleteMappingConfirm": "Are you sure you want to delete this mapping?",
     "mappingUpdatedSuccess": "Mapping successfully updated",
     "mappingUpdatedError": "Could not update mapping: '{{error}}'",
+    "mappingCreatedSuccess": "Mapping successfully created",
+    "mappingCreatedError": "Could not create mapping: '{{error}}'",
     "realmRolePrefix": "Realm role prefix",
     "multiValued": "Multivalued",
     "tokenClaimName": "Token claim name",

src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -8,7 +8,7 @@ import { routes } from "../../route-config";
 
 export const PageBreadCrumbs = () => {
   const { t } = useTranslation();
-  const crumbs = useBreadcrumbs(routes(t)).slice(1);
+  const crumbs = useBreadcrumbs(routes(t), { excludePaths: ["/"] });
   return (
     <>
       {crumbs.length > 1 && (