feat(cmk-ui-library): add a search button

The search only ran on Enter, which gave no visible way to execute it.
CmkSearchInput now renders a submit button next to the field, running
the same handler Enter does.

The decorative magnifier inside the field is gone: with the button
carrying that icon, keeping a second one only made the field noisier.

CMK-37080

Change-Id: Iff9e743240dc62e415302db22315dc3d9eb145bb

Author: otAAAh

packages/cmk-frontend-vue/ui-component-library/components/form-elements/CmkSearchInput/UclCmkSearchInput.vue

@@ -20,6 +20,11 @@ export const a11yData = [
   {
     keys: ['Enter'],
     description: 'Submits the current query, emitting the search event.'
+  },
+  {
+    keys: ['Space'],
+    description:
+      'Activates the focused clear or search button, clearing or submitting the query respectively.'
   }
 ]
 

packages/cmk-ui-library/components/CmkSearchInput.vue

@@ -42,39 +42,51 @@ function clear(): void {
 
 <template>
   <div class="cmk-search-input">
-    <CmkMultitoneIcon
-      class="cmk-search-input__icon"
-      name="search"
-      primary-color="others"
-      size="small"
-      aria-hidden="true"
-    />
-    <input
-      ref="input"
-      v-model="query"
-      type="search"
-      role="searchbox"
-      class="cmk-search-input__field"
-      :aria-label="placeholder"
-      :placeholder="placeholder"
-      autocomplete="off"
-      @keydown.enter="submit"
-    />
-    <CmkIconButton
-      class="cmk-search-input__clear"
-      :class="{ 'cmk-search-input__clear--hidden': query.length === 0 }"
-      name="close"
-      size="small"
-      :title="_t('Clear search')"
-      @click="clear"
-    />
+    <div class="cmk-search-input__box">
+      <input
+        ref="input"
+        v-model="query"
+        type="search"
+        role="searchbox"
+        class="cmk-search-input__field"
+        :aria-label="placeholder"
+        :placeholder="placeholder"
+        autocomplete="off"
+        @keydown.enter="submit"
+      />
+      <CmkIconButton
+        class="cmk-search-input__clear"
+        :class="{ 'cmk-search-input__clear--hidden': query.length === 0 }"
+        name="close"
+        size="small"
+        :title="_t('Clear search')"
+        @click="clear"
+      />
+    </div>
+    <button
+      type="button"
+      class="cmk-search-input__submit"
+      :aria-label="_t('Search')"
+      :title="_t('Search')"
+      @click="submit"
+    >
+      <CmkMultitoneIcon name="search" primary-color="others" size="small" aria-hidden="true" />
+    </button>
   </div>
 </template>
 
 <style scoped>
 .cmk-search-input {
   display: flex;
   align-items: center;
+  gap: var(--dimension-4);
+}
+
+.cmk-search-input__box {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
   height: 27px;
   padding: 0 var(--spacing);
   background-color: var(--default-form-element-bg-color);
@@ -86,15 +98,34 @@ function clear(): void {
   }
 }
 
-.cmk-search-input__icon {
+.cmk-search-input__submit {
+  display: flex;
   flex: 0 0 auto;
-  opacity: 0.6;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 27px;
+  height: 27px;
+  margin: 0;
+  padding: 0;
+  background-color: var(--default-form-element-bg-color);
+  border: 1px solid var(--default-form-element-border-color);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--success);
+  }
+
+  &:focus-visible {
+    outline: revert;
+  }
 }
 
 .cmk-search-input__field {
   flex: 1 1 auto;
   height: 100%;
-  margin: 0 var(--dimension-4);
+  margin: 0 var(--dimension-4) 0 0;
   padding: 0;
   background: transparent;
   border: 0;

packages/cmk-ui-library/tests/components/CmkSearchInput.test.ts

@@ -51,6 +51,23 @@ test('emits the typed query on Enter', async () => {
   expect(emitted('search')).toEqual([['db']])
 })
 
+test('emits the typed query when the search button is clicked', async () => {
+  const { emitted } = renderInput()
+
+  await fireEvent.update(screen.getByRole('searchbox'), 'db')
+  await fireEvent.click(screen.getByRole('button', { name: 'Search' }))
+
+  expect(emitted('search')).toEqual([['db']])
+})
+
+test('emits an empty query when the search button is clicked on an empty field', async () => {
+  const { emitted } = renderInput()
+
+  await fireEvent.click(screen.getByRole('button', { name: 'Search' }))
+
+  expect(emitted('search')).toEqual([['']])
+})
+
 test('keeps the model value in sync while typing', async () => {
   const { emitted } = renderInput()