From 8e33519df1223b7cffac9c70c4d8b6784b8e04b4 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 17 Nov 2020 21:56:23 +0100
Subject: [PATCH] fixed x and empty select on dialog (#220)

* fixed x and empty select on dialog

fixes: #210

* make button disabled when nothing is selected
---
 src/client-scopes/add/MapperDialog.tsx        | 10 ++++---
 .../add/__tests__/MapperDialog.test.tsx       | 24 ++++++++++++----
 .../__snapshots__/MapperDialog.test.tsx.snap  | 28 ++++++++++---------
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/client-scopes/add/MapperDialog.tsx b/src/client-scopes/add/MapperDialog.tsx
index d8ba827921..680f5a3d2e 100644
--- a/src/client-scopes/add/MapperDialog.tsx
+++ b/src/client-scopes/add/MapperDialog.tsx
@@ -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();
                 }}
               >
diff --git a/src/client-scopes/add/__tests__/MapperDialog.test.tsx b/src/client-scopes/add/__tests__/MapperDialog.test.tsx
index c0a58994bd..1ba8a091af 100644
--- a/src/client-scopes/add/__tests__/MapperDialog.test.tsx
+++ b/src/client-scopes/add/__tests__/MapperDialog.test.tsx
@@ -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");
+  });
 });
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 caf40430c3..aaebb63237 100644
--- a/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap
+++ b/src/client-scopes/add/__tests__/__snapshots__/MapperDialog.test.tsx.snap
@@ -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>