fix(entities): move Teleport outside of KTable

Kong · May 2, 2024 · 1194ab2 · 1194ab2
1 parent b629e8c
commit 1194ab2
Show file tree

Hide file tree

Showing 14 changed files with 226 additions and 212 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -29,21 +29,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-ca-certificate"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -116,6 +101,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-ca-certificate"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       :entity-type="EntityTypes.CACertificate"

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -29,21 +29,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-certificate"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t('certificates.list.toolbar_actions.new_certificate') }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -140,6 +125,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-certificate"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t('certificates.list.toolbar_actions.new_certificate') }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       :entity-type="EntityTypes.Certificate"

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -20,21 +20,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-credential"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -173,6 +158,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-credential"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       :description="t('credentials.delete.description')"

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -33,22 +33,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-consumer-group"
-              icon="plus"
-              size="large"
-              :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 -->
@@ -115,6 +99,23 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-consumer-group"
+          icon="plus"
+          size="large"
+          :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>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       data-testid="delete-consumer-group-modal"

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -33,22 +33,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-consumer"
-              icon="plus"
-              size="large"
-              :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 -->
@@ -115,6 +99,23 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-consumer"
+          icon="plus"
+          size="large"
+          :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>
+
     <EntityDeleteModal
       :action-button-disabled="isDeletePending"
       data-testid="delete-consumer-modal"

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -29,21 +29,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-gateway-service"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -135,6 +120,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-gateway-service"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityToggleModal
       :action="modalContent.action"
       :entity-id="modalContent.id"

diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -29,21 +29,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-key-set"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t('keySets.list.toolbar_actions.new_key_set') }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -113,6 +98,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-key-set"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t('keySets.list.toolbar_actions.new_key_set') }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       :description="t('keySets.delete.description')"

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -29,21 +29,6 @@
       <template #toolbar-button>
         <!-- render this fallback div for Kong Manager instead, as there is no kong-ui-app-page-header-action-button target to go to in KM -->
         <div id="kong-ui-app-page-header-action-button-default" />
-        <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
-            <KButton
-              v-show="hasData"
-              appearance="primary"
-              data-testid="toolbar-add-key"
-              icon="plus"
-              size="large"
-              :to="config.createRoute"
-            >
-              {{ t('keys.list.toolbar_actions.new_key') }}
-            </KButton>
-          </PermissionsWrapper>
-        </Teleport>
       </template>
 
       <!-- Column Formatting -->
@@ -116,6 +101,22 @@
       </template>
     </EntityBaseTable>
 
+    <Teleport :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : '#kong-ui-app-page-header-action-button-default'">
+      <PermissionsWrapper :auth-function="() => canCreate()">
+        <!-- Hide Create button if table is empty -->
+        <KButton
+          v-show="hasData"
+          appearance="primary"
+          data-testid="toolbar-add-key"
+          icon="plus"
+          size="large"
+          :to="config.createRoute"
+        >
+          {{ t('keys.list.toolbar_actions.new_key') }}
+        </KButton>
+      </PermissionsWrapper>
+    </Teleport>
+
     <EntityDeleteModal
       :action-pending="isDeletePending"
       :description="t('keys.delete.description')"