From d6e1161c83c9074d612de36780a99eff4936a530 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Thu, 5 Nov 2020 22:26:43 +0100 Subject: [PATCH] hooked up the build in mapper dialog (#197) * hooked up the build in mapper dialog * spelling * useEffect for setTimout * fix state * fix bug with alerts clearing checked items * fixed tests * Update src/client-scopes/messages.json Co-authored-by: Stan Silvert * simplified dialog usage Co-authored-by: Stan Silvert --- src/client-scopes/add/MapperDialog.tsx | 99 +- .../add/__tests__/MapperDialog.test.tsx | 24 +- .../__snapshots__/MapperDialog.test.tsx.snap | 27265 ++++++++-------- src/client-scopes/details/MapperList.tsx | 74 +- src/client-scopes/form/ClientScopeForm.tsx | 40 +- src/client-scopes/messages.json | 3 + src/components/alert/Alerts.tsx | 32 +- src/stories/AddMapperDialog.stories.tsx | 16 +- src/stories/MapperList.stories.tsx | 2 +- 9 files changed, 13814 insertions(+), 13741 deletions(-) diff --git a/src/client-scopes/add/MapperDialog.tsx b/src/client-scopes/add/MapperDialog.tsx index a35d1a76b1..fb81fd1c82 100644 --- a/src/client-scopes/add/MapperDialog.tsx +++ b/src/client-scopes/add/MapperDialog.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState } from "react"; +import React, { useState } from "react"; import { Button, ButtonVariant, @@ -8,6 +8,7 @@ import { DataListItemCells, DataListItemRow, Modal, + ModalVariant, Text, TextContent, } from "@patternfly/react-core"; @@ -24,75 +25,67 @@ import { ProtocolMapperRepresentation, ProtocolMapperTypeRepresentation, } from "../../context/server-info/server-info"; +import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState"; -export type AddMapperDialogProps = { +export type AddMapperDialogModalProps = { protocol: string; - buildIn: boolean; + filter?: ProtocolMapperRepresentation[]; onConfirm: ( value: ProtocolMapperTypeRepresentation | ProtocolMapperRepresentation[] - ) => {}; + ) => void; }; -type AddMapperDialogModalProps = AddMapperDialogProps & { +export type AddMapperDialogProps = AddMapperDialogModalProps & { open: boolean; toggleDialog: () => void; }; -export const useAddMapperDialog = ( - props: AddMapperDialogProps -): [() => void, () => ReactElement] => { - const [show, setShow] = useState(false); +export const AddMapperDialog = (props: AddMapperDialogProps) => { + const { t } = useTranslation("client-scopes"); - function toggleDialog() { - setShow((show) => !show); + const serverInfo = useServerInfo(); + const protocol = props.protocol; + const protocolMappers = serverInfo.protocolMapperTypes[protocol]; + const builtInMappers = serverInfo.builtinProtocolMappers[protocol]; + const [filter, setFilter] = useState([]); + + const allRows = builtInMappers.map((mapper) => { + const mapperType = protocolMappers.filter( + (type) => type.id === mapper.protocolMapper + )[0]; + return { + item: mapper, + selected: false, + cells: [mapper.name, mapperType.helpText], + }; + }); + const [rows, setRows] = useState(allRows); + + if (props.filter && props.filter.length !== filter.length) { + setFilter(props.filter); + const nameFilter = props.filter.map((f) => f.name); + setRows([...allRows.filter((row) => !nameFilter.includes(row.item.name))]); } - const Dialog = () => ( - - ); - return [toggleDialog, Dialog]; -}; - -export const AddMapperDialog = ({ - protocol, - buildIn, - open, - toggleDialog, - onConfirm, -}: AddMapperDialogModalProps) => { - const serverInfo = useServerInfo(); - const protocolMappers = serverInfo.protocolMapperTypes[protocol]; - const buildInMappers = serverInfo.builtinProtocolMappers[protocol]; - const { t } = useTranslation("client-scopes"); - const [rows, setRows] = useState( - buildInMappers.map((mapper) => { - const mapperType = protocolMappers.filter( - (type) => type.id === mapper.protocolMapper - )[0]; - return { - item: mapper, - selected: false, - cells: [mapper.name, mapperType.helpText], - }; - }) - ); + const isBuiltIn = !!props.filter; return ( { - onConfirm( + props.onConfirm( rows.filter((row) => row.selected).map((row) => row.item) ); - toggleDialog(); + props.toggleDialog(); }} > {t("common:add")} @@ -102,7 +95,7 @@ export const AddMapperDialog = ({ key="cancel" variant={ButtonVariant.secondary} onClick={() => { - toggleDialog(); + props.toggleDialog(); }} > {t("common:cancel")} @@ -114,12 +107,12 @@ export const AddMapperDialog = ({ {t("predefinedMappingDescription")} - {!buildIn && ( + {!isBuiltIn && ( { const mapper = protocolMappers.find((mapper) => mapper.id === id); - onConfirm(mapper!); - toggleDialog(); + props.onConfirm(mapper!); + props.toggleDialog(); }} aria-label={t("chooseAMapperType")} isCompact @@ -146,7 +139,7 @@ export const AddMapperDialog = ({ ))} )} - {buildIn && ( + {isBuiltIn && rows.length > 0 && (
)} + {isBuiltIn && rows.length === 0 && ( + + )} ); }; diff --git a/src/client-scopes/add/__tests__/MapperDialog.test.tsx b/src/client-scopes/add/__tests__/MapperDialog.test.tsx index 5fff4ba058..c0a58994bd 100644 --- a/src/client-scopes/add/__tests__/MapperDialog.test.tsx +++ b/src/client-scopes/add/__tests__/MapperDialog.test.tsx @@ -1,18 +1,22 @@ -import React from "react"; +import React, { useState } from "react"; import { mount } from "enzyme"; import { Button } from "@patternfly/react-core"; import serverInfo from "../../../context/server-info/__tests__/mock.json"; import { ServerInfoContext } from "../../../context/server-info/ServerInfoProvider"; -import { AddMapperDialogProps, useAddMapperDialog } from "../MapperDialog"; +import { AddMapperDialogModalProps, AddMapperDialog } from "../MapperDialog"; describe("", () => { - const Test = (args: AddMapperDialogProps) => { - const [toggle, Dialog] = useAddMapperDialog(args); + const Test = (args: AddMapperDialogModalProps) => { + const [open, setOpen] = useState(false); return ( - - @@ -22,7 +26,7 @@ describe("", () => { it("should return empty array when selecting nothing", () => { const onConfirm = jest.fn(); const container = mount( - + ); container.find("button#open").simulate("click"); @@ -36,7 +40,7 @@ describe("", () => { const onConfirm = jest.fn(); const protocol = "openid-connect"; const container = mount( - + ); container.find("button#open").simulate("click"); @@ -57,9 +61,7 @@ describe("", () => { it("should return selected protocol mapping type on click", () => { const onConfirm = jest.fn(); const protocol = "openid-connect"; - const container = mount( - - ); + const container = mount(); container.find("button#open").simulate("click"); expect(container).toMatchSnapshot(); diff --git a/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap b/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap index 869ec0e135..7201f652b9 100644 --- a/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap +++ b/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap @@ -2,2488 +2,3079 @@ exports[` should return empty array when selecting nothing 1`] = ` - - + + add + , + , + ] + } + appendTo={[Function]} + aria-describedby="" + aria-label="" + aria-labelledby="" + className="" + hasNoBodyWrapper={false} + isOpen={true} + onClose={[Function]} + ouiaSafe={true} + showClose={true} + title="chooseAMapperType" + variant="medium" > - +
- add - , - , - ] - } - appendTo={[Function]} - aria-describedby="" - aria-label="" - aria-labelledby="" - className="" - hasNoBodyWrapper={false} - isOpen={true} - onClose={[Function]} - ouiaSafe={true} - showClose={true} - title="chooseAMapperType" - variant="default" - > -
- } - > - - add - , - , - ] - } - aria-describedby="" - aria-label="" - aria-labelledby="" - boxId="pf-modal-part-1" - className="" - descriptorId="pf-modal-part-3" - hasNoBodyWrapper={false} - isOpen={true} - labelId="pf-modal-part-2" - onClose={[Function]} - ouiaId="OUIA-Generated-Modal-default-2" - ouiaSafe={true} - showClose={true} - title="chooseAMapperType" - variant="default" - > - -
+ } + > + - , + , + ] + } + aria-describedby="" + aria-label="" + aria-labelledby="" + boxId="pf-modal-part-0" + className="" + descriptorId="pf-modal-part-2" + hasNoBodyWrapper={false} + isOpen={true} + labelId="pf-modal-part-1" + onClose={[Function]} + ouiaId="OUIA-Generated-Modal-medium-1" + ouiaSafe={true} + showClose={true} + title="chooseAMapperType" + variant="medium" + > + +
+ +
-
- - + + +
+ - - + - -
- -
- -
- -
- - - - - -
+ cancel + + + + + + + + + + + + + + -
+ + +
+

-

- chooseAMapperType -

-
+ chooseAMapperType + +
+
-
-

- predefinedMappingDescription -

-
-
    -
  • -
    -
    -
    - User Realm Role -
    -
    - Map a user realm role to a token claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - User Session Note -
    -
    - Map a custom user session note to a token claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - User Address -
    -
    - Maps user address attributes (street, locality, region, postal_code, and country) to the OpenID Connect 'address' claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - Role Name Mapper -
    -
    - Map an assigned role to a new name or position in the token. -
    -
    -
    -
    • -
  • -
    -
    -
    - User Client Role -
    -
    - Map a user client role to a token claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - User Property -
    -
    - Map a built in user property (email, firstName, lastName) to a token claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - Hardcoded Role -
    -
    - Hardcode a role into the access token. -
    -
    -
    -
    • -
  • -
    -
    -
    - Hardcoded claim -
    -
    - Hardcode a claim into the token. -
    -
    -
    -
    • -
  • -
    -
    -
    - Pairwise subject identifier -
    -
    - Calculates a pairwise subject identifier using a salted sha-256 hash. See OpenID Connect specification for more info about pairwise subject identifiers. -
    -
    -
    -
    • -
  • -
    -
    -
    - User's full name -
    -
    - Maps the user's first and last name to the OpenID Connect 'name' claim. Format is <first> + ' ' + <last> -
    -
    -
    -
    • -
  • -
    -
    -
    - Allowed Web Origins -
    -
    - Adds all allowed web origins to the 'allowed-origins' claim in the token -
    -
    -
    -
    • -
  • -
    -
    -
    - Audience -
    -
    - Add specified audience to the audience (aud) field of token -
    -
    -
    -
    • -
  • -
    -
    -
    - User Attribute -
    -
    - Map a custom user attribute to a token claim. -
    -
    -
    -
    • -
  • -
    -
    -
    - Group Membership -
    -
    - Map user group membership -
    -
    -
    -
    • -
  • -
    -
    -
    - Audience Resolve -
    -
    - Adds all client_ids of "allowed" clients to the audience field of the token. Allowed client means the client - for which user has at least one client role -
    -
    -
    -
    • -
+ predefinedMappingDescription +

+
    +
  • +
    +
    +
    + User Realm Role +
    +
    + Map a user realm role to a token claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + User Session Note +
    +
    + Map a custom user session note to a token claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + User Address +
    +
    + Maps user address attributes (street, locality, region, postal_code, and country) to the OpenID Connect 'address' claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + Role Name Mapper +
    +
    + Map an assigned role to a new name or position in the token. +
    +
    +
    +
    • +
  • +
    +
    +
    + User Client Role +
    +
    + Map a user client role to a token claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + User Property +
    +
    + Map a built in user property (email, firstName, lastName) to a token claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + Hardcoded Role +
    +
    + Hardcode a role into the access token. +
    +
    +
    +
    • +
  • +
    +
    +
    + Hardcoded claim +
    +
    + Hardcode a claim into the token. +
    +
    +
    +
    • +
  • +
    +
    +
    + Pairwise subject identifier +
    +
    + Calculates a pairwise subject identifier using a salted sha-256 hash. See OpenID Connect specification for more info about pairwise subject identifiers. +
    +
    +
    +
    • +
  • +
    +
    +
    + User's full name +
    +
    + Maps the user's first and last name to the OpenID Connect 'name' claim. Format is <first> + ' ' + <last> +
    +
    +
    +
    • +
  • +
    +
    +
    + Allowed Web Origins +
    +
    + Adds all allowed web origins to the 'allowed-origins' claim in the token +
    +
    +
    +
    • +
  • +
    +
    +
    + Audience +
    +
    + Add specified audience to the audience (aud) field of token +
    +
    +
    +
    • +
  • +
    +
    +
    + User Attribute +
    +
    + Map a custom user attribute to a token claim. +
    +
    +
    +
    • +
  • +
    +
    +
    + Group Membership +
    +
    + Map user group membership +
    +
    +
    +
    • +
  • +
    +
    +
    + Audience Resolve +
    +
    + Adds all client_ids of "allowed" clients to the audience field of the token. Allowed client means the client + for which user has at least one client role +
    +
    +
    +
    • +
- } + + } + > + - - -
- +
+ +
-
- - + + + + +
  • -
  • - -
    - - - User Address - - , - - - Maps user address attributes (street, locality, region, postal_code, and country) to the OpenID Connect 'address' claim. - - , - ] - } - key=".0" - rowid="User Address" - > -
    - -
    + + User Address -
    -     - -
    + + , + + Maps user address attributes (street, locality, region, postal_code, and country) to the OpenID Connect 'address' claim. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="User Address" + > +
    + +
    + User Address +
    +     + +
    + Maps user address attributes (street, locality, region, postal_code, and country) to the OpenID Connect 'address' claim. +
    +     +
    + +
    + + + + +
  • -
  • - -
    - - - Role Name Mapper - - , - - - Map an assigned role to a new name or position in the token. - - , - ] - } - key=".0" - rowid="Role Name Mapper" - > -
    - -
    + + Role Name Mapper -
    -     - -
    + + , + + Map an assigned role to a new name or position in the token. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Role Name Mapper" + > +
    + +
    + Role Name Mapper +
    +     + +
    + Map an assigned role to a new name or position in the token. +
    +     +
    + +
    + + + + +
  • -
  • - -
    - - - User Client Role - - , - - - Map a user client role to a token claim. - - , - ] - } - key=".0" - rowid="User Client Role" - > -
    - -
    + + User Client Role -
    -     - -
    + + , + + Map a user client role to a token claim. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="User Client Role" + > +
    + +
    + User Client Role +
    +     + +
    + Map a user client role to a token claim. +
    +     +
    + +
    + + + + +
  • -
  • - -
    - - - User Property - - , - - - Map a built in user property (email, firstName, lastName) to a token claim. - - , - ] - } - key=".0" - rowid="User Property" - > -
    - -
    + + User Property -
    -     - -
    + + , + + Map a built in user property (email, firstName, lastName) to a token claim. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="User Property" + > +
    + +
    + User Property +
    +     + +
    + Map a built in user property (email, firstName, lastName) to a token claim. +
    +     +
    + +
    + + + + +
  • -
  • - -
    - - - Hardcoded Role - - , - - - Hardcode a role into the access token. - - , - ] - } - key=".0" - rowid="Hardcoded Role" - > -
    - -
    + + Hardcoded Role -
    -     - -
    + + , + + Hardcode a role into the access token. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Hardcoded Role" + > +
    + +
    + Hardcoded Role +
    +     + +
    + Hardcode a role into the access token. +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - Hardcoded claim - - , - - - Hardcode a claim into the token. - - , - ] - } - key=".0" - rowid="Hardcoded claim" - > -
    - -
    + + Hardcoded claim -
    -     - -
    + + , + + Hardcode a claim into the token. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Hardcoded claim" + > +
    + +
    + Hardcoded claim +
    +     + +
    + Hardcode a claim into the token. +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - Pairwise subject identifier - - , - - - Calculates a pairwise subject identifier using a salted sha-256 hash. See OpenID Connect specification for more info about pairwise subject identifiers. - - , - ] - } - key=".0" - rowid="Pairwise subject identifier" - > -
    - -
    + + Pairwise subject identifier -
    -     - -
    + + , + + Calculates a pairwise subject identifier using a salted sha-256 hash. See OpenID Connect specification for more info about pairwise subject identifiers. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Pairwise subject identifier" + > +
    + +
    + Pairwise subject identifier +
    +     + +
    + Calculates a pairwise subject identifier using a salted sha-256 hash. See OpenID Connect specification for more info about pairwise subject identifiers. +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - User's full name - - , - - - Maps the user's first and last name to the OpenID Connect 'name' claim. Format is <first> + ' ' + <last> - - , - ] - } - key=".0" - rowid="User's full name" - > -
    - -
    + + User's full name -
    -     - -
    + + , + + Maps the user's first and last name to the OpenID Connect 'name' claim. Format is <first> + ' ' + <last> -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="User's full name" + > +
    + +
    + User's full name +
    +     + +
    + Maps the user's first and last name to the OpenID Connect 'name' claim. Format is <first> + ' ' + <last> +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - Allowed Web Origins - - , - - - Adds all allowed web origins to the 'allowed-origins' claim in the token - - , - ] - } - key=".0" - rowid="Allowed Web Origins" - > -
    - -
    + + Allowed Web Origins -
    -     - -
    + + , + + Adds all allowed web origins to the 'allowed-origins' claim in the token -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Allowed Web Origins" + > +
    + +
    + Allowed Web Origins +
    +     + +
    + Adds all allowed web origins to the 'allowed-origins' claim in the token +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - Audience - - , - - - Add specified audience to the audience (aud) field of token - - , - ] - } - key=".0" - rowid="Audience" - > -
    - -
    + + Audience -
    -     - -
    + + , + + Add specified audience to the audience (aud) field of token -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="Audience" + > +
    + +
    + Audience +
    +     + +
    + Add specified audience to the audience (aud) field of token +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - User Attribute - - , - - - Map a custom user attribute to a token claim. - - , - ] - } - key=".0" - rowid="User Attribute" - > -
    - -
    + + User Attribute -
    -     - -
    + + , + + Map a custom user attribute to a token claim. -
    -     -
    -     -
    -     -
    • -     - + , + ] + } + key=".0" + rowid="User Attribute" + > +
    + +
    + User Attribute +
    +     + +
    + Map a custom user attribute to a token claim. +
    +     +
    + + + + +     + +
  • -
  • - -
    - - - Group Membership - - , - - - Map user group membership - - , - ] - } - key=".0" - rowid="Group Membership" - > -
    - -
    + + Group Membership -
    -     - -
    + + , + + Map user group membership -
    -     -
    -     -
    -     -
    • -     - -
  • - -
    + , + ] + } + key=".0" + rowid="Group Membership" > - - - Audience Resolve - - , - - - Adds all client_ids of "allowed" clients to the audience field of the token. Allowed client means the client - for which user has at least one client role - - , - ] - } - key=".0" - rowid="Audience Resolve" +
    -
    - -
    + Group Membership +
    +     + +
    + Map user group membership +
    +     +
    + +
    + +
    • +     + +
  • + +
    + + Audience Resolve -
    - - -
    + + , + + Adds all client_ids of "allowed" clients to the audience field of the token. Allowed client means the client for which user has at least one client role -
    -     - - - -     -
    • -     - - - - - - - - - -     -     - - - - + + , + ] + } + key=".0" + rowid="Audience Resolve" + > +
    + +
    + Audience Resolve +
    +     + +
    + Adds all client_ids of "allowed" clients to the audience field of the token. Allowed client means the client + for which user has at least one client role +
    +     +
    + + + + + + + + + + + + + + + +     + + +