improve UX of dropdown inputs (#2774)

Signed-off-by: aporss <[email protected]>
AthenZ · Oct 28, 2024 · 3d07ae8 · 3d07ae8
1 parent 51de9a6
commit 3d07ae8
Show file tree

Hide file tree

Showing 115 changed files with 1,508 additions and 169 deletions.
diff --git a/ui/src/__tests__/components/denali/__snapshots__/Alert.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/Alert.test.js.snap
@@ -175,6 +175,7 @@ exports[`Alert should disable animations 1`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -211,6 +212,7 @@ exports[`Alert should disable animations 1`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"
@@ -411,6 +413,7 @@ exports[`Alert should render all alert types 1`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -447,6 +450,7 @@ exports[`Alert should render all alert types 1`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"
@@ -640,6 +644,7 @@ exports[`Alert should render all alert types 2`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -676,6 +681,7 @@ exports[`Alert should render all alert types 2`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"
@@ -869,6 +875,7 @@ exports[`Alert should render all alert types 3`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -905,6 +912,7 @@ exports[`Alert should render all alert types 3`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"
@@ -1098,6 +1106,7 @@ exports[`Alert should render all alert types 4`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -1134,6 +1143,7 @@ exports[`Alert should render all alert types 4`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"
@@ -1324,6 +1334,7 @@ exports[`Alert should render open state 1`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"
@@ -1360,6 +1371,7 @@ exports[`Alert should render open state 1`] = `
               <svg
                 class="emotion-3"
                 data-testid="icon"
+                data-wdio=""
                 height="28px"
                 id=""
                 viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/__snapshots__/Input.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/Input.test.js.snap
@@ -696,6 +696,7 @@ exports[`Input should render a small input with an icon 1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="20px"
       id=""
       viewBox="0 0 1024 1024"
@@ -992,6 +993,7 @@ exports[`Input should render an input with an icon 1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="24px"
       id=""
       viewBox="0 0 1024 1024"
@@ -1590,6 +1592,7 @@ exports[`Input should render icon with renderIcon function  1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="24px"
       id=""
       viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/__snapshots__/InputDropdown.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/InputDropdown.test.js.snap
@@ -138,6 +138,7 @@ exports[`InputDropdown opens the dropdown 1`] = `
     data-testid="input-wrapper"
   >
     <input
+      aria-activedescendant="downshift-0-item-0"
       aria-autocomplete="list"
       aria-controls="downshift-0-menu"
       aria-labelledby="downshift-0-label"
@@ -157,6 +158,7 @@ exports[`InputDropdown opens the dropdown 1`] = `
       <svg
         class="emotion-2"
         data-testid="icon"
+        data-wdio=""
         height="24px"
         id=""
         viewBox="0 0 1024 1024"
@@ -331,6 +333,7 @@ exports[`InputDropdown renders a filterable dropdown 1`] = `
       <svg
         class="emotion-2"
         data-testid="icon"
+        data-wdio=""
         height="24px"
         id=""
         viewBox="0 0 1024 1024"
@@ -507,6 +510,7 @@ exports[`InputDropdown renders fluid dropdown 1`] = `
       <svg
         class="emotion-2"
         data-testid="icon"
+        data-wdio=""
         height="24px"
         id=""
         viewBox="0 0 1024 1024"
@@ -682,6 +686,7 @@ exports[`InputDropdown renders initial (closed) state 1`] = `
       <svg
         class="emotion-2"
         data-testid="icon"
+        data-wdio=""
         height="24px"
         id=""
         viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/__snapshots__/Modal.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/Modal.test.js.snap
@@ -166,6 +166,7 @@ exports[`Modal should render open state 1`] = `
             <svg
               class="emotion-2"
               data-testid="icon"
+              data-wdio=""
               height="28px"
               id=""
               viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/__snapshots__/SearchInput.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/SearchInput.test.js.snap
@@ -133,6 +133,7 @@ exports[`SearchInput should render 1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="24px"
       id=""
       viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/__snapshots__/Tag.test.js.snap b/ui/src/__tests__/components/denali/__snapshots__/Tag.test.js.snap
@@ -274,6 +274,7 @@ exports[`Tag should render a removable Tag 1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="20px"
       id=""
       viewBox="0 0 1024 1024"
@@ -434,6 +435,7 @@ exports[`Tag should render a small Tag 1`] = `
     <svg
       class="emotion-1"
       data-testid="icon"
+      data-wdio=""
       height="16px"
       id=""
       viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/denali/icons/__snapshots__/Icon.test.js.snap b/ui/src/__tests__/components/denali/icons/__snapshots__/Icon.test.js.snap
@@ -9,6 +9,7 @@ exports[`Icon should render default icon with svg 1`] = `
 <svg
   class="emotion-0"
   data-testid="icon"
+  data-wdio=""
   height="1em"
   id=""
   viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/domain/__snapshots__/ManageDomains.test.js.snap b/ui/src/__tests__/components/domain/__snapshots__/ManageDomains.test.js.snap
@@ -333,6 +333,7 @@ exports[`ManageDomains should render 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.mujibur"
           >
             add
           </a>
@@ -405,6 +406,7 @@ exports[`ManageDomains should render 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.pgote"
           >
             add
           </a>
@@ -758,6 +760,7 @@ exports[`ManageDomains should render no domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.mujibur"
           >
             add
           </a>
@@ -830,6 +833,7 @@ exports[`ManageDomains should render no domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.mujibur.test"
           >
             add
           </a>
@@ -841,6 +845,7 @@ exports[`ManageDomains should render no domain 1`] = `
           <svg
             class="emotion-70"
             data-testid="icon"
+            data-wdio=""
             height="1.25em"
             id="home.mujibur.test-delete-button"
             viewBox="0 0 1024 1024"
@@ -1196,6 +1201,7 @@ exports[`ManageDomains should render personal domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.mujibur"
           >
             add
           </a>
@@ -1268,6 +1274,7 @@ exports[`ManageDomains should render personal domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.pgote"
           >
             add
           </a>
@@ -1615,6 +1622,7 @@ exports[`ManageDomains should render top level domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home.mujibur"
           >
             add
           </a>
@@ -1687,6 +1695,7 @@ exports[`ManageDomains should render top level domain 1`] = `
         >
           <a
             class="emotion-43 emotion-44"
+            data-testid="business-service-home"
           >
             add
           </a>

diff --git a/ui/src/__tests__/components/domain/__snapshots__/UserDomain.test.js.snap b/ui/src/__tests__/components/domain/__snapshots__/UserDomain.test.js.snap
@@ -40,6 +40,7 @@ exports[`UserDomains should hide domains on click of arrow 1`] = `
     <svg
       class="emotion-2"
       data-testid="icon"
+      data-wdio=""
       height="1em"
       id=""
       viewBox="0 0 1024 1024"
@@ -164,6 +165,7 @@ exports[`UserDomains should render 1`] = `
     <svg
       class="emotion-2"
       data-testid="icon"
+      data-wdio=""
       height="1em"
       id=""
       viewBox="0 0 1024 1024"
@@ -220,6 +222,7 @@ exports[`UserDomains should render 1`] = `
           <svg
             class="emotion-21"
             data-testid="icon"
+            data-wdio=""
             height="1em"
             id=""
             viewBox="0 0 1024 1024"
@@ -255,6 +258,7 @@ exports[`UserDomains should render 1`] = `
           <svg
             class="emotion-21"
             data-testid="icon"
+            data-wdio=""
             height="1em"
             id=""
             viewBox="0 0 1024 1024"
@@ -378,6 +382,7 @@ exports[`UserDomains should render with no domains 1`] = `
     <svg
       class="emotion-2"
       data-testid="icon"
+      data-wdio=""
       height="1em"
       id=""
       viewBox="0 0 1024 1024"

diff --git a/ui/src/__tests__/components/group/AddGroup.test.js b/ui/src/__tests__/components/group/AddGroup.test.js
@@ -447,12 +447,6 @@ describe('AddGroup', () => {
         fireEvent.change(screen.getByPlaceholderText('Enter New Group Name'), {
             target: { value: 'group.test' },
         });
-        fireEvent.change(
-            screen.getByPlaceholderText(GROUP_MEMBER_PLACEHOLDER),
-            {
-                target: { value: 'user.test' },
-            }
-        );
         fireEvent.click(button);
         await waitFor(() => {
             expect(onSubmit.mock.calls.length).toBe(1);

diff --git a/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap b/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap
@@ -71,6 +71,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id=""
         viewBox="0 0 1024 1024"
@@ -99,6 +100,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id=""
         viewBox="0 0 1024 1024"
@@ -121,6 +123,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id=""
         viewBox="0 0 1024 1024"
@@ -146,6 +149,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id=""
         viewBox="0 0 1024 1024"
@@ -171,6 +175,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id="group-settings-icon-testui"
         viewBox="0 0 1024 1024"
@@ -196,6 +201,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id="group-history-icon-testui"
         viewBox="0 0 1024 1024"
@@ -221,6 +227,7 @@ exports[`GroupRow should render 1`] = `
       <svg
         class="emotion-12"
         data-testid="icon"
+        data-wdio=""
         height="1.25em"
         id="delete-group-icon-testui"
         viewBox="0 0 1024 1024"