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

…Kong Manager
Kong · May 2, 2024 · 933997c · 933997c
1 parent c3ba6a6
commit 933997c
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 14 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -28,7 +28,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -45,6 +45,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -28,7 +28,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -45,6 +45,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for KM instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </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
@@ -19,7 +19,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -36,6 +36,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </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
@@ -32,7 +32,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -50,6 +50,23 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -32,7 +32,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -50,6 +50,23 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </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
@@ -28,7 +28,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -45,6 +45,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </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
@@ -28,7 +28,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -45,6 +45,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -28,7 +28,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -45,6 +45,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <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>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -31,7 +31,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -48,6 +48,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <!-- Hide Create button if table is empty -->
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-plugin"
+              icon="plus"
+              size="large"
+              :to="config.createRoute"
+            >
+              {{ t('plugins.list.toolbar_actions.new_plugin') }}
+            </KButton>
+          </PermissionsWrapper>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -31,7 +31,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -48,6 +48,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <!-- Hide Create button if table is empty -->
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-route"
+              icon="plus"
+              size="large"
+              :to="config.createRoute"
+            >
+              {{ t('routes.list.toolbar_actions.new_route') }}
+            </KButton>
+          </PermissionsWrapper>
+        </div>
       </template>
 
       <!-- Column Formatting -->

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -29,7 +29,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -46,6 +46,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <!-- Hide Create button if table is empty -->
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-add-sni"
+              icon="plus"
+              size="large"
+              :to="config.createRoute"
+            >
+              {{ t('snis.list.toolbar_actions.new') }}
+            </KButton>
+          </PermissionsWrapper>
+        </div>
       </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
@@ -19,7 +19,7 @@
       <!-- Create action -->
       <template #toolbar-button>
         <Teleport
-          :disabled="!useActionOutside || config.app !== 'konnect'"
+          v-if="useActionOutside && config.app === 'konnect'"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -36,6 +36,22 @@
             </KButton>
           </PermissionsWrapper>
         </Teleport>
+        <div v-else>
+          <!-- render as a div for Kong Manager instead of Teleport, as there is no target to go to in KM -->
+          <PermissionsWrapper :auth-function="() => canCreate()">
+            <!-- Hide Create button if table is empty -->
+            <KButton
+              v-show="hasData"
+              appearance="primary"
+              data-testid="toolbar-new-target"
+              icon="plus"
+              :to="props.config.createRoute ? props.config.createRoute : undefined"
+              @click="() => !props.config.createRoute ? handleCreateTarget() : undefined"
+            >
+              {{ t('targets.list.toolbar_actions.new_target') }}
+            </KButton>
+          </PermissionsWrapper>
+        </div>
       </template>
 
       <!-- Column formatting -->