From ef108c92d20c1599ee676e7535958fbca9939626 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 12 Sep 2024 21:56:14 -0400
Subject: [PATCH 1/6] fix(ktable): disable column visibility dropdown
 [KHCP-13248]

---
 src/components/KTable/ColumnVisibilityMenu.vue |  6 ++++++
 src/components/KTable/KTable.vue               | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index 66e5c25b16..080c7da6e5 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/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)
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 784efab7d6..cfda443567 100644
--- a/src/components/KTable/KTable.vue
+++ b/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)

From b5e97eea4af783d79127d8ce89dff326895b9fe6 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 16 Sep 2024 11:07:31 -0400
Subject: [PATCH 2/6] fix(ktable, ktableview): toolbar default items visibility
 [KHCP-13248]

---
 src/components/KTable/KTable.vue         |  3 +-
 src/components/KTableView/KTableView.vue | 36 +++++++++++++++++++-----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 16496bbb36..2fb0e989e6 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -545,7 +545,8 @@ const hasColumnVisibilityMenu = computed((): boolean => {
     return true
   }
 
-  return !isTableLoading.value && !props.loading && data.value && !!data.value.length
+  // show when not loading and there is data
+  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
diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
index bec1ebd746..5c90316e16 100644
--- a/src/components/KTableView/KTableView.vue
+++ b/src/components/KTableView/KTableView.vue
@@ -11,11 +11,11 @@
       <slot name="toolbar" />
 
       <div
-        v-if="hasBulkActions || hasColumnVisibilityMenu"
+        v-if="showBulkActionsToolbar || hasColumnVisibilityMenu"
         class="toolbar-default-items-container"
       >
         <slot
-          v-if="hasBulkActions"
+          v-if="showBulkActionsToolbar"
           name="bulk-actions"
           :selected-rows="bulkActionsSelectedRows"
         >
@@ -23,7 +23,7 @@
             v-if="!$slots['bulk-actions']"
             :button-label="tableHeaders.find((header: TableViewHeader) => header.key === TableViewHeaderKeys.BULK_ACTIONS)!.label"
             :count="bulkActionsSelectedRowsCount"
-            :disabled="!bulkActionsSelectedRowsCount || loading"
+            :disabled="!bulkActionsSelectedRowsCount || loading || !tableData.length"
           >
             <template #items>
               <slot
@@ -37,6 +37,7 @@
         <ColumnVisibilityMenu
           v-if="hasColumnVisibilityMenu"
           :columns="visibilityColumns"
+          :disabled="columnVisibilityDisabled"
           :table-id="tableId"
           :visibility-preferences="visibilityPreferences"
           @update="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
@@ -615,10 +616,18 @@ const resizerHoveredColumn = ref('')
 const currentHoveredColumn = ref('')
 const hasHidableColumns = computed((): boolean => tableHeaders.value.filter((header: TableViewHeader) => header.hidable).length > 0)
 const hasColumnVisibilityMenu = computed((): boolean => {
-  // has hidable columns, no error/loading/empty state
-  return !!(hasHidableColumns.value &&
-    !props.error && !props.loading && !props.loading && (tableData.value && tableData.value.length))
+  if (props.nested || !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 !props.loading && !!tableData.value && !!tableData.value.length
 })
+const columnVisibilityDisabled = computed((): boolean => props.loading || !(tableData.value && tableData.value.length))
 // columns whose visibility can be toggled
 const visibilityColumns = computed((): TableViewHeader[] => tableHeaders.value.filter((header: TableViewHeader) => header.hidable && header.key !== TableViewHeaderKeys.EXPANDABLE && header.key !== TableViewHeaderKeys.BULK_ACTIONS))
 // visibility preferences from the host app (initialized by app)
@@ -630,7 +639,7 @@ const isScrolledHorizontally = ref<boolean>(false)
 const sortColumnKey = ref('')
 const sortColumnOrder = ref<SortColumnOrder>('desc')
 const isClickable = ref(false)
-const hasToolbarSlot = computed((): boolean => !props.nested && (!!slots.toolbar || hasColumnVisibilityMenu.value || hasBulkActions.value))
+const hasToolbarSlot = computed((): boolean => !props.nested && (!!slots.toolbar || hasColumnVisibilityMenu.value || showBulkActionsToolbar.value))
 const isActionsDropdownHovered = ref<boolean>(false)
 const tableWrapperStyles = computed((): Record<string, string> => ({
   maxHeight: getSizeFromString(props.maxHeight),
@@ -639,6 +648,19 @@ const tableWrapperStyles = computed((): Record<string, string> => ({
 const tableData = ref<TableViewData>([...props.data].map((row) => ({ ...row, selected: false })))
 const bulkActionsSelectedRows = ref<TableViewData>([])
 const hasBulkActions = computed((): boolean => !props.nested && !props.error && tableHeaders.value.some((header: TableViewHeader) => header.key === TableViewHeaderKeys.BULK_ACTIONS) && !!(slots['bulk-action-items'] || slots['bulk-actions']))
+const showBulkActionsToolbar = computed((): boolean => {
+  if (props.nested || !hasBulkActions.value || props.error) {
+    return false
+  }
+
+  if (slots.toolbar) {
+    // when toolbar slot is present, we want to disable bulk actions dropdown rather than hide it in certain states
+    return true
+  }
+
+  // show when not loading and there is data
+  return !props.loading && !!tableData.value && !!tableData.value.length
+})
 const bulkActionsSelectedRowsCount = computed((): string => {
   const selectedRowsCount = bulkActionsSelectedRows.value.length
 

From 47ca6621ba33dbc070f2581663d57d9a1b29b7f8 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 16 Sep 2024 11:17:03 -0400
Subject: [PATCH 3/6] fix: minor fix

---
 src/components/KTableView/KTableView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
index 5c90316e16..b7c1af9f23 100644
--- a/src/components/KTableView/KTableView.vue
+++ b/src/components/KTableView/KTableView.vue
@@ -625,6 +625,7 @@ const hasColumnVisibilityMenu = computed((): boolean => {
     return true
   }
 
+  // show when not loading and there is data
   return !props.loading && !!tableData.value && !!tableData.value.length
 })
 const columnVisibilityDisabled = computed((): boolean => props.loading || !(tableData.value && tableData.value.length))

From ac4a4e47b32b5e435007bf5cacf5f190316f694c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 16 Sep 2024 16:15:44 -0400
Subject: [PATCH 4/6] fix(ktable): revert changes [KHCP-13248]

---
 src/components/KTable/KTable.vue | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 2fb0e989e6..692536952c 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -16,7 +16,6 @@
       >
         <ColumnVisibilityMenu
           :columns="visibilityColumns"
-          :disabled="columnVisibilityDisabled"
           :table-id="tableId"
           :visibility-preferences="visibilityPreferences"
           @update="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
@@ -536,19 +535,10 @@ const resizerHoveredColumn = ref('')
 const currentHoveredColumn = ref('')
 const hasHidableColumns = computed((): boolean => tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0)
 const hasColumnVisibilityMenu = computed((): boolean => {
-  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
-  }
-
-  // show when not loading and there is data
-  return !isTableLoading.value && !props.loading && !!data.value && !!data.value.length
+  // has hidable columns, no error/loading/empty state
+  return !!(hasHidableColumns.value &&
+    !props.error && !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)

From b1b25dc842d07d3d08ec2e1dae31a749df6833de Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 16 Sep 2024 16:36:15 -0400
Subject: [PATCH 5/6] chore(sandbox): test example [KHCP-13248]

---
 .../SandboxTableView/SandboxTableView.vue     | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/sandbox/pages/SandboxTableView/SandboxTableView.vue b/sandbox/pages/SandboxTableView/SandboxTableView.vue
index 2520e714c5..45421ef77c 100644
--- a/sandbox/pages/SandboxTableView/SandboxTableView.vue
+++ b/sandbox/pages/SandboxTableView/SandboxTableView.vue
@@ -4,6 +4,57 @@
     title="KTableView"
   >
     <div class="k-table-view-sandbox">
+      <SandboxSectionComponent title="Toolbar default items">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ tableLoadingState: false, tableEmptyState: false, tableHidableHeaders: true, tableBulkActions: false, tableToolbar: false }"
+        >
+          <div class="horizontal-container">
+            <KInputSwitch
+              v-model="data.tableLoadingState"
+              label="Loading state"
+            />
+            <KInputSwitch
+              v-model="data.tableEmptyState"
+              label="Empty state"
+            />
+            <KInputSwitch
+              v-model="data.tableHidableHeaders"
+              label="Hidable headers"
+            />
+            <KInputSwitch
+              v-model="data.tableBulkActions"
+              label="Bulk actions"
+            />
+            <KInputSwitch
+              v-model="data.tableToolbar"
+              label="Toolbar content"
+            />
+          </div>
+
+          <KTableView
+            :key="data.tableKey"
+            :data="data.tableEmptyState ? [] : tableData"
+            :headers="headers(data.tableHidableHeaders, false, data.tableBulkActions)"
+            :loading="data.tableLoadingState"
+            :pagination-attributes="{ totalCount: tableData.length }"
+          >
+            <template
+              v-if="data.tableToolbar"
+              #toolbar
+            >
+              foobar
+            </template>
+            <template #bulk-action-items>
+              <SandboxTableViewActions :count="selectedData.length" />
+            </template>
+            <template #action-items>
+              <SandboxTableViewActions />
+            </template>
+          </KTableView>
+        </KComponent>
+      </SandboxSectionComponent>
+
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
@@ -12,7 +63,7 @@
       <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute & emptyStateButtonAppearance & maxHeight">
         <KComponent
           v-slot="{ data }"
-          :data="{ tableKey: 0, tableRowHover: false, tableEmptyState: false }"
+          :data="{ tableRowHover: false, tableEmptyState: false }"
         >
           <div class="horizontal-container">
             <KInputSwitch
@@ -22,7 +73,6 @@
             <KInputSwitch
               v-model="data.tableEmptyState"
               label="Empty state"
-              @change="data.tableKey++"
             />
           </div>
 

From f84b7d6904eb79568a646f551a30c42525a07463 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 17 Sep 2024 09:36:29 -0400
Subject: [PATCH 6/6] chore(sandbox): remove example [KHCP-13248]

---
 .../SandboxTableView/SandboxTableView.vue     | 51 -------------------
 1 file changed, 51 deletions(-)

diff --git a/sandbox/pages/SandboxTableView/SandboxTableView.vue b/sandbox/pages/SandboxTableView/SandboxTableView.vue
index 45421ef77c..631c0a4b7c 100644
--- a/sandbox/pages/SandboxTableView/SandboxTableView.vue
+++ b/sandbox/pages/SandboxTableView/SandboxTableView.vue
@@ -4,57 +4,6 @@
     title="KTableView"
   >
     <div class="k-table-view-sandbox">
-      <SandboxSectionComponent title="Toolbar default items">
-        <KComponent
-          v-slot="{ data }"
-          :data="{ tableLoadingState: false, tableEmptyState: false, tableHidableHeaders: true, tableBulkActions: false, tableToolbar: false }"
-        >
-          <div class="horizontal-container">
-            <KInputSwitch
-              v-model="data.tableLoadingState"
-              label="Loading state"
-            />
-            <KInputSwitch
-              v-model="data.tableEmptyState"
-              label="Empty state"
-            />
-            <KInputSwitch
-              v-model="data.tableHidableHeaders"
-              label="Hidable headers"
-            />
-            <KInputSwitch
-              v-model="data.tableBulkActions"
-              label="Bulk actions"
-            />
-            <KInputSwitch
-              v-model="data.tableToolbar"
-              label="Toolbar content"
-            />
-          </div>
-
-          <KTableView
-            :key="data.tableKey"
-            :data="data.tableEmptyState ? [] : tableData"
-            :headers="headers(data.tableHidableHeaders, false, data.tableBulkActions)"
-            :loading="data.tableLoadingState"
-            :pagination-attributes="{ totalCount: tableData.length }"
-          >
-            <template
-              v-if="data.tableToolbar"
-              #toolbar
-            >
-              foobar
-            </template>
-            <template #bulk-action-items>
-              <SandboxTableViewActions :count="selectedData.length" />
-            </template>
-            <template #action-items>
-              <SandboxTableViewActions />
-            </template>
-          </KTableView>
-        </KComponent>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle