fixed x and empty select on dialog (#220)

* fixed x and empty select on dialog

fixes: #210

* make button disabled when nothing is selected
This commit is contained in:
Erik Jan de Wit 2020-11-17 21:56:23 +01:00 committed by GitHub
parent bd2c8d8f86
commit 8e33519df1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 23 deletions

View file

@ -65,6 +65,9 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
setRows([...allRows.filter((row) => !nameFilter.includes(row.item.name))]);
}
const selectedRows = rows
.filter((row) => row.selected)
.map((row) => row.item);
const isBuiltIn = !!props.filter;
return (
@ -72,17 +75,16 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
variant={ModalVariant.medium}
title={t("chooseAMapperType")}
isOpen={props.open}
onClose={props.toggleDialog}
actions={
isBuiltIn
? [
<Button
id="modal-confirm"
key="confirm"
isDisabled={rows.length === 0}
isDisabled={rows.length === 0 || selectedRows.length === 0}
onClick={() => {
props.onConfirm(
rows.filter((row) => row.selected).map((row) => row.item)
);
props.onConfirm(selectedRows);
props.toggleDialog();
}}
>

View file

@ -17,23 +17,22 @@ describe("<MapperDialog/>", () => {
toggleDialog={() => setOpen(!open)}
/>
<Button id="open" onClick={() => setOpen(true)}>
Show
{!open ? "Show" : "Hide"}
</Button>
</ServerInfoContext.Provider>
);
};
it("should return empty array when selecting nothing", () => {
const onConfirm = jest.fn();
it("should have disabled add button when nothing is selected", () => {
const container = mount(
<Test filter={[]} protocol="openid-connect" onConfirm={onConfirm} />
<Test filter={[]} protocol="openid-connect" onConfirm={() => {}} />
);
container.find("button#open").simulate("click");
expect(container).toMatchSnapshot();
container.find("button#modal-confirm").simulate("click");
expect(onConfirm).toBeCalledWith([]);
const button = container.find("button#modal-confirm");
expect(button.hasClass("pf-m-disabled")).toBe(true);
});
it("should return array with selected build in protocol mapping", () => {
@ -74,4 +73,17 @@ describe("<MapperDialog/>", () => {
serverInfo.protocolMapperTypes[protocol][0]
);
});
it("should close the dialog on 'X' click", () => {
const container = mount(
<Test protocol="openid-connect" onConfirm={() => {}} />
);
expect(container.find("button#open").text()).toBe("Show");
container.find("button#open").simulate("click");
expect(container.find("button#open").text()).toBe("Hide");
container.find('button[aria-label="Close"]').simulate("click");
expect(container.find("button#open").text()).toBe("Show");
});
});

View file

@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<MapperDialog/> should return empty array when selecting nothing 1`] = `
exports[`<MapperDialog/> should have disabled add button when nothing is selected 1`] = `
<Test
filter={Array []}
onConfirm={[MockFunction]}
onConfirm={[Function]}
protocol="openid-connect"
>
<AddMapperDialog
filter={Array []}
onConfirm={[MockFunction]}
onConfirm={[Function]}
open={true}
protocol="openid-connect"
toggleDialog={[Function]}
@ -18,7 +18,7 @@ exports[`<MapperDialog/> should return empty array when selecting nothing 1`] =
Array [
<Button
id="modal-confirm"
isDisabled={false}
isDisabled={true}
onClick={[Function]}
>
Add
@ -1026,11 +1026,12 @@ exports[`<MapperDialog/> should return empty array when selecting nothing 1`] =
class="pf-c-modal-box__footer"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
aria-disabled="true"
class="pf-c-button pf-m-primary pf-m-disabled"
data-ouia-component-id="OUIA-Generated-Button-primary-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
disabled=""
id="modal-confirm"
type="button"
>
@ -1059,7 +1060,7 @@ exports[`<MapperDialog/> should return empty array when selecting nothing 1`] =
Array [
<Button
id="modal-confirm"
isDisabled={false}
isDisabled={true}
onClick={[Function]}
>
Add
@ -17440,20 +17441,21 @@ exports[`<MapperDialog/> should return empty array when selecting nothing 1`] =
>
<Button
id="modal-confirm"
isDisabled={false}
isDisabled={true}
key="confirm"
onClick={[Function]}
>
<button
aria-disabled={false}
aria-disabled={true}
aria-label={null}
className="pf-c-button pf-m-primary"
className="pf-c-button pf-m-primary pf-m-disabled"
data-ouia-component-id="OUIA-Generated-Button-primary-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false}
disabled={true}
id="modal-confirm"
onClick={[Function]}
tabIndex={null}
type="button"
>
Add
@ -17508,7 +17510,7 @@ exports[`<MapperDialog/> should return empty array when selecting nothing 1`] =
onClick={[Function]}
type="button"
>
Show
Hide
</button>
</Button>
</Test>
@ -19157,7 +19159,7 @@ exports[`<MapperDialog/> should return selected protocol mapping type on click 1
onClick={[Function]}
type="button"
>
Show
Hide
</button>
</Button>
</Test>