fix(entities): conditionally render Teleport for Konnect and div for …

…Kong Manager per pr feedback
Kong · May 2, 2024 · 1aa1fc1 · 1aa1fc1
1 parent c3ba6a6
commit 1aa1fc1
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 -->