fix(table): search box for table column hide/show dropdown [khcp-1310…

…5] (#2406)

fix(table): search box for table column hide/show dropdown [khcp-13105]

src/components/KTable/ColumnVisibilityMenu.vue

@@ -24,12 +24,44 @@
       </KTooltip>
 
       <template #items>
+        <KInput
+          v-if="searchColumnInMenu || filteredItems.length > 5"
+          v-model.trim="searchColumnInMenu"
+          autocomplete="off"
+          class="search-input"
+          data-testid="search-input"
+          placeholder="Search columns"
+          type="search"
+          @click.stop
+          @input="handleSearch"
+        >
+          <template #before>
+            <SearchIcon decorative />
+          </template>
+          <template
+            v-if="searchColumnInMenu"
+            #after
+          >
+            <KButton
+              appearance="tertiary"
+              aria-label="Clear search"
+              class="clear-search"
+              data-testid="clear-search-button"
+              icon
+              size="small"
+              @click.stop="() => searchColumnInMenu = ''"
+            >
+              <CloseIcon decorative />
+            </KButton>
+          </template>
+        </KInput>
+
         <div
           ref="menuItemsRef"
           class="menu-items-wrapper"
         >
           <KDropdownItem
-            v-for="col in columns"
+            v-for="col in filteredItems"
             :key="col.key"
             class="column-visibility-menu-item"
             :data-testid="`column-visibility-menu-item-${col.key}`"
@@ -68,13 +100,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeMount, onMounted, type PropType, nextTick } from 'vue'
+import { ref, watch, onBeforeMount, onMounted, nextTick, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { TableHeader } from '@/types'
-import { TableColumnsIcon } from '@kong/icons'
+import { debounce } from '@/utilities/debounce'
+import { SearchIcon, CloseIcon, TableColumnsIcon } from '@kong/icons'
 import KButton from '@/components/KButton/KButton.vue'
 import KCheckbox from '@/components/KCheckbox/KCheckbox.vue'
 import KDropdown from '@/components/KDropdown/KDropdown.vue'
 import KDropdownItem from '@/components/KDropdown/KDropdownItem.vue'
+import KInput from '@/components/KInput/KInput.vue'
 
 const emit = defineEmits<{
   (e: 'update', columnVisibility: Record<string, boolean>): void
@@ -103,6 +138,7 @@ const isDropdownOpen = ref<boolean>(false)
 const visibilityMap = ref<Record<string, boolean>>({})
 const isDirty = ref(false)
 const menuItemsRef = ref<HTMLDivElement>()
+const searchColumnInMenu = ref('')
 
 const initVisibilityMap = (): void => {
   visibilityMap.value = props.columns.reduce((acc, col: TableHeader) => {
@@ -113,10 +149,28 @@ const initVisibilityMap = (): void => {
   isDirty.value = false
 }
 
+const handleSearch = debounce((search: any) => {
+  searchColumnInMenu.value = search
+  if (menuItemsRef.value) {
+    setOverflowClass(menuItemsRef.value)
+  }
+}, 500)
+
+const filteredItems = computed((): TableHeader[] => {
+  if (!searchColumnInMenu.value) {
+    return props.columns
+  }
+
+  return props.columns.filter(item => {
+    return (item.label ? item.label : item.key).toLowerCase().includes(searchColumnInMenu.value.toLowerCase())
+  })
+})
+
 const handleApply = (): void => {
   // pass by ref problems
   emit('update', JSON.parse(JSON.stringify(visibilityMap.value)))
   isDirty.value = false
+  searchColumnInMenu.value = ''
 }
 
 const handleDropdownToggle = (isOpen: boolean): void => {
@@ -134,6 +188,11 @@ const handleDropdownToggle = (isOpen: boolean): void => {
   if (!isOpen && isDirty.value) {
     initVisibilityMap()
   }
+
+  // reset the search if the dropdown is closed
+  if (!isOpen) {
+    searchColumnInMenu.value = ''
+  }
 }
 
 /**
@@ -208,5 +267,14 @@ onBeforeMount(() => {
     margin-bottom: var(--kui-space-0, $kui-space-0);
     margin-left: calc(-1 * var(--kui-space-40, $kui-space-40)); // because dropdown item container and checkbox both have default spacing, reduce it
   }
+
+  :deep(.k-input).search-input {
+    padding: $kui-space-10 $kui-space-30 $kui-space-30 $kui-space-30;
+
+    ::-webkit-search-cancel-button {
+      /* hide the default "X" button */
+      -webkit-appearance: none;
+    }
+  }
 }
 </style>