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:
parent
bd2c8d8f86
commit
8e33519df1
3 changed files with 39 additions and 23 deletions
|
@ -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();
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue