feat(*): add support to EntityBaseTable to use action button outside …

…[KHCP-9618] (#913) * feat(*): add support to EntityBaseTable to use action button outside * fix(*): apply pr feedback and add props to a poc entity * fix(*): fix conditional logic * fix(*): apply pr feedback * fix(*): apply pr feedback * fix(*): use static id for consuming app * fix(*): use Teleport in routes and plugins * feat(*): add useActionOutside prop and Teleport to all entities * feat(*): add useActionOutside prop and Teleport to ConsumerCredential * feat(*): add tooltip to each entity create new button * fix(*): fix indentation * fix(*): remove tooltip from create new entities button * fix(*): hide teleported create button in empty state for all entities * fix(*): avoid jump of cta button for all entities * fix(*): show teleported create button by default for all entities * fix(*): use data length instead as fetcherState doesnt update
Kong · Nov 29, 2023 · bbe5a07 · bbe5a07
1 parent 29156d8
commit bbe5a07
Show file tree

Hide file tree

Showing 14 changed files with 424 additions and 142 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -13,6 +13,7 @@
       preferences-storage-key="kong-ui-entities-ca-certificates-list"
       :query="filterQuery"
       :table-headers="tableHeaders"
+      :use-action-outside="useActionOutside"
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @sort="resetPagination"
@@ -26,16 +27,23 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <PermissionsWrapper :auth-function="() => canCreate()">
-          <KButton
-            appearance="primary"
-            data-testid="toolbar-add-ca-certificate"
-            icon="plus"
-            :to="config.createRoute"
-          >
-            {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
-          </KButton>
-        </PermissionsWrapper>
+        <!-- Hide Create button if table is empty -->
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-ca-certificate"
+              icon="plus"
+              :to="config.createRoute"
+            >
+              {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
+            </KButton>
+          </PermissionsWrapper>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -215,6 +223,11 @@ const props = defineProps({
     required: false,
     default: async () => true,
   },
+  /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+  useActionOutside: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n: { t, formatUnixTimeStamp }, i18nT } = composables.useI18n()
@@ -415,10 +428,17 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+const hasData = ref(true)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is empty, hide the teleported Create button
+  if (state?.response?.data?.length === 0) {
+    hasData.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('ca-certificates.errors.general'),

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -13,6 +13,7 @@
       preferences-storage-key="kong-ui-entities-certificates-list"
       :query="filterQuery"
       :table-headers="tableHeaders"
+      :use-action-outside="useActionOutside"
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @sort="resetPagination"
@@ -26,16 +27,23 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <PermissionsWrapper :auth-function="() => canCreate()">
-          <KButton
-            appearance="primary"
-            data-testid="toolbar-add-certificate"
-            icon="plus"
-            :to="config.createRoute"
-          >
-            {{ t('certificates.list.toolbar_actions.new_certificate') }}
-          </KButton>
-        </PermissionsWrapper>
+        <!-- Hide Create button if table is empty -->
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-certificate"
+              icon="plus"
+              :to="config.createRoute"
+            >
+              {{ t('certificates.list.toolbar_actions.new_certificate') }}
+            </KButton>
+          </PermissionsWrapper>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -249,6 +257,11 @@ const props = defineProps({
     required: false,
     default: async () => true,
   },
+  /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+  useActionOutside: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n: { t, formatUnixTimeStamp }, i18nT } = composables.useI18n()
@@ -482,10 +495,17 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+const hasData = ref(true)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is empty, hide the teleported Create button
+  if (state?.response?.data?.length === 0) {
+    hasData.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('certificates.errors.general'),

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -13,20 +13,28 @@
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-consumer-credentials-list"
       :table-headers="tableHeaders"
+      :use-action-outside="useActionOutside"
       @sort="resetPagination"
     >
       <!-- Create action -->
       <template #toolbar-button>
-        <PermissionsWrapper :auth-function="() => canCreate()">
-          <KButton
-            appearance="primary"
-            data-testid="toolbar-add-credential"
-            icon="plus"
-            :to="config.createRoute"
-          >
-            {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
-          </KButton>
-        </PermissionsWrapper>
+        <!-- Hide Create button if table is empty -->
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-credential"
+              icon="plus"
+              :to="config.createRoute"
+            >
+              {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
+            </KButton>
+          </PermissionsWrapper>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -251,6 +259,11 @@ const props = defineProps({
     required: false,
     default: async () => true,
   },
+  /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+  useActionOutside: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
@@ -443,10 +456,18 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const hasData = ref(true)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is empty, hide the teleported Create button
+  if (state?.response?.data?.length === 0) {
+    hasData.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('credentials.error.general'),

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -15,6 +15,7 @@
       :query="filterQuery"
       :row-attributes="rowAttributes"
       :table-headers="tableHeaders"
+      :use-action-outside="useActionOutside"
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @empty-state-cta-clicked="handleEmptyStateCtaClicked"
@@ -30,17 +31,24 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <PermissionsWrapper :auth-function="() => canCreate()">
-          <KButton
-            appearance="primary"
-            data-testid="toolbar-add-consumer-group"
-            icon="plus"
-            :to="config.consumerId ? undefined : config.createRoute"
-            @click="() => config.consumerId ? handleAddToGroupClick() : undefined"
-          >
-            {{ config.consumerId ? t('consumer_groups.actions.add_to_group') : t('consumer_groups.list.toolbar_actions.new_consumer_group') }}
-          </KButton>
-        </PermissionsWrapper>
+        <!-- Hide Create button if table is empty -->
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-consumer-group"
+              icon="plus"
+              :to="config.consumerId ? undefined : config.createRoute"
+              @click="() => config.consumerId ? handleAddToGroupClick() : undefined"
+            >
+              {{ config.consumerId ? t('consumer_groups.actions.add_to_group') : t('consumer_groups.list.toolbar_actions.new_consumer_group') }}
+            </KButton>
+          </PermissionsWrapper>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -252,6 +260,11 @@ const props = defineProps({
     required: false,
     default: async () => true,
   },
+  /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+  useActionOutside: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18nT, i18n: { t } } = composables.useI18n()
@@ -543,10 +556,17 @@ const exitGroups = async (): Promise<void> => {
   }
 }
 
+const hasData = ref(true)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is empty, hide the teleported Create button
+  if (state?.response?.data?.length === 0) {
+    hasData.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('consumer_groups.errors.general'),

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -15,6 +15,7 @@
       :query="filterQuery"
       :row-attributes="rowAttributes"
       :table-headers="tableHeaders"
+      :use-action-outside="useActionOutside"
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @empty-state-cta-clicked="handleEmptyStateCtaClicked"
@@ -30,17 +31,24 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <PermissionsWrapper :auth-function="() => canCreate()">
-          <KButton
-            appearance="primary"
-            data-testid="toolbar-add-consumer"
-            icon="plus"
-            :to="config.consumerGroupId ? undefined : config.createRoute"
-            @click="() => config.consumerGroupId ? handleAddConsumerClick() : undefined"
-          >
-            {{ config.consumerGroupId ? t('consumers.actions.add_consumer') : t('consumers.list.toolbar_actions.new_consumer') }}
-          </KButton>
-        </PermissionsWrapper>
+        <!-- Hide Create button if table is empty -->
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-consumer"
+              icon="plus"
+              :to="config.consumerGroupId ? undefined : config.createRoute"
+              @click="() => config.consumerGroupId ? handleAddConsumerClick() : undefined"
+            >
+              {{ config.consumerGroupId ? t('consumers.actions.add_consumer') : t('consumers.list.toolbar_actions.new_consumer') }}
+            </KButton>
+          </PermissionsWrapper>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -252,6 +260,11 @@ const props = defineProps({
     required: false,
     default: async () => true,
   },
+  /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+  useActionOutside: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18nT, i18n: { t } } = composables.useI18n()
@@ -553,10 +566,17 @@ const removeConsumers = async (): Promise<void> => {
   }
 }
 
+const hasData = ref(true)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is empty, hide the teleported Create button
+  if (state?.response?.data?.length === 0) {
+    hasData.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('consumers.errors.general'),