From 1aa1fc1a98ccf49681409a4d99368f5e5efda358 Mon Sep 17 00:00:00 2001
From: Manjiri Tapaswi <manjiri.tapaswi@konghq.com>
Date: Thu, 2 May 2024 09:42:52 -0700
Subject: [PATCH] fix(entities): conditionally render Teleport for Konnect and
 div for Kong Manager per pr feedback

---
 .../src/components/CACertificateList.vue                   | 7 +++----
 .../src/components/CertificateList.vue                     | 7 +++----
 .../src/components/ConsumerCredentialList.vue              | 7 +++----
 .../src/components/ConsumerGroupList.vue                   | 7 +++----
 .../entities-consumers/src/components/ConsumerList.vue     | 7 +++----
 .../src/components/GatewayServiceList.vue                  | 7 +++----
 .../entities-key-sets/src/components/KeySetList.vue        | 7 +++----
 packages/entities/entities-keys/src/components/KeyList.vue | 7 +++----
 .../entities-plugins/src/components/PluginList.vue         | 7 +++----
 .../entities/entities-routes/src/components/RouteList.vue  | 7 +++----
 packages/entities/entities-snis/src/components/SniList.vue | 7 +++----
 .../src/components/TargetsList.vue                         | 7 +++----
 .../src/components/UpstreamsList.vue                       | 7 +++----
 .../entities/entities-vaults/src/components/VaultList.vue  | 7 +++----
 14 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
index 9143394eb4..80600f67e5 100644
--- a/packages/entities/entities-certificates/src/components/CACertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
index 954b98c9b8..f7c577053c 100644
--- a/packages/entities/entities-certificates/src/components/CertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
index 79e55a16e6..f1fd1ba784 100644
--- a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
+++ b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -18,10 +18,7 @@
     >
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -36,6 +33,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
index 8700b41f7d..ab1181d1e0 100644
--- a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
+++ b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -31,10 +31,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -50,6 +47,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
index 0f4dabb4f9..ca60c2d0c2 100644
--- a/packages/entities/entities-consumers/src/components/ConsumerList.vue
+++ b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -31,10 +31,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -50,6 +47,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
index fe3c35ebbd..8cec9ad178 100644
--- a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
+++ b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
index 90346aae60..9da9e4cf75 100644
--- a/packages/entities/entities-key-sets/src/components/KeySetList.vue
+++ b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
index b0fb962ec9..dda56ab9ba 100644
--- a/packages/entities/entities-keys/src/components/KeyList.vue
+++ b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 091118e6b3..afd82b06c9 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -30,10 +30,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -48,6 +45,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
index d554430f0d..44edb32599 100644
--- a/packages/entities/entities-routes/src/components/RouteList.vue
+++ b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -30,10 +30,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -48,6 +45,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
index 7848802077..6e21a442dd 100644
--- a/packages/entities/entities-snis/src/components/SniList.vue
+++ b/packages/entities/entities-snis/src/components/SniList.vue
@@ -28,10 +28,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -46,6 +43,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->
diff --git a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
index 9344bcda61..2e0db58ee4 100644
--- a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
@@ -18,10 +18,7 @@
     >
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -36,6 +33,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column formatting -->
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
index 74db13186a..eaadc4c696 100644
--- a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -28,10 +28,7 @@
 
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -46,6 +43,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column formatting -->
diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
index 641d28c863..00a6840ba2 100644
--- a/packages/entities/entities-vaults/src/components/VaultList.vue
+++ b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -27,10 +27,7 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
-          to="#kong-ui-app-page-header-action-button"
-        >
+        <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
@@ -45,6 +42,8 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <!-- 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" />
       </template>
 
       <!-- Column Formatting -->