fix(ktable): disable column visibility dropdown [KHCP-13248]

src/components/KTable/ColumnVisibilityMenu.vue

@@ -2,6 +2,7 @@
   <div class="table-column-visibility-menu">
     <KDropdown
       data-testid="table-column-visibility-menu"
+      :disabled="disabled"
       :kpop-attributes="{ placement: 'bottom-end' }"
       @toggle-dropdown="handleDropdownToggle"
     >
@@ -14,6 +15,7 @@
           aria-label="Show/Hide Columns"
           class="menu-button"
           data-testid="column-visibility-menu-button"
+          :disabled="disabled"
           icon
           size="large"
         >
@@ -91,6 +93,10 @@ const props = defineProps({
     type: Object as PropType<Record<string, boolean>>,
     default: () => ({}),
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const isDropdownOpen = ref<boolean>(false)

src/components/KTable/KTable.vue

@@ -9,9 +9,10 @@
         name="toolbar"
         :state="stateData"
       />
+
       <ColumnVisibilityMenu
-        v-if="hasColumnVisibilityMenu"
         :columns="visibilityColumns"
+        :disabled="columnVisibilityDisabled"
         :table-id="tableId"
         :visibility-preferences="visibilityPreferences"
         @update="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
@@ -530,10 +531,18 @@ const resizerHoveredColumn = ref('')
 const currentHoveredColumn = ref('')
 const hasHidableColumns = computed((): boolean => tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0)
 const hasColumnVisibilityMenu = computed((): boolean => {
-  // has hidable columns, no error/loading/empty state
-  return !!(hasHidableColumns.value &&
-    !props.error && !isTableLoading.value && !props.loading && (data.value && data.value.length))
+  if (!hasHidableColumns.value || props.error) {
+    return false
+  }
+
+  if (slots.toolbar) {
+    // when toolbar slot is present, we want to disable column visibility menu rather than hide it in certain states
+    return true
+  }
+
+  return !isTableLoading.value && !props.loading && data.value && !!data.value.length
 })
+const columnVisibilityDisabled = computed((): boolean => isTableLoading.value || props.loading || !(data.value && data.value.length))
 // columns whose visibility can be toggled
 const visibilityColumns = computed((): TableHeader[] => tableHeaders.value.filter((header: TableHeader) => header.hidable))
 // visibility preferences from the host app (initialized by app)