fix(entities): restore Teleport for new entity button only in Konnect…

… app [KHCP-11277]
Kong · May 1, 2024 · c3ba6a6 · c3ba6a6
1 parent 46b157a
commit c3ba6a6
Show file tree

Hide file tree

Showing 14 changed files with 56 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,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -27,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('certificates.list.toolbar_actions.new_certificate') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +18,9 @@
     >
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -35,7 +35,7 @@
               {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +31,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -49,7 +49,7 @@
               {{ config.consumerId ? t('consumer_groups.actions.add_to_group') : t('consumer_groups.list.toolbar_actions.new_consumer_group') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -31,9 +31,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -49,7 +49,7 @@
               {{ config.consumerGroupId ? t('consumers.actions.add_consumer') : t('consumers.list.toolbar_actions.new_consumer') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('keySets.list.toolbar_actions.new_key_set') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -27,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('keys.list.toolbar_actions.new_key') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -30,9 +30,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -47,7 +47,7 @@
               {{ t('plugins.list.toolbar_actions.new_plugin') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -30,9 +30,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -47,7 +47,7 @@
               {{ t('routes.list.toolbar_actions.new_route') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -28,9 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -45,7 +45,7 @@
               {{ t('snis.list.toolbar_actions.new') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +18,9 @@
     >
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -35,7 +35,7 @@
               {{ t('targets.list.toolbar_actions.new_target') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </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,9 +28,9 @@
 
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -45,7 +45,7 @@
               {{ t('upstreams.list.toolbar_actions.new_upstream') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column formatting -->

diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -27,9 +27,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
-        <component
-          :is="useActionOutside ? 'Teleport' : 'div'"
-          :to="useActionOutside ? '#kong-ui-app-page-header-action-button' : undefined"
+        <Teleport
+          :disabled="!useActionOutside || config.app !== 'konnect'"
+          to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
@@ -44,7 +44,7 @@
               {{ t('vaults.list.toolbar_actions.new_vault') }}
             </KButton>
           </PermissionsWrapper>
-        </component>
+        </Teleport>
       </template>
 
       <!-- Column Formatting -->