feat(mesh-trusts-listing): add zone column (#5004)

Adds a zone column to the mesh-trusts listing in the overview of a mesh.

Closes #5000

---------

Signed-off-by: schogges <moritz.fleck@konghq.com>

Author: schogges

packages/kuma-gui/features/mesh/MeshTrust.feature

@@ -7,9 +7,7 @@ Feature: mesh / mesh-trust
       | item               | $meshtrusts-listing tbody tr            |
       | summary            | [data-testid="slideout-container"]      |
       | summary-title      | $summary [data-testid='slideout-title'] |
-
-  Scenario: MeshTrusts are listed in mesh overview
-    Given the URL "/meshes/default/meshtrusts" responds with
+    And the URL "/meshes/default/meshtrusts" responds with
       """
       body:
         items:
@@ -18,29 +16,27 @@ Feature: mesh / mesh-trust
             kri: kri_mtrust_default___trust-1_
             labels:
               kuma.io/display-name: trust-1
+              kuma.io/origin: zone
+              kuma.io/zone: zone-1
+            spec:
+              trustDomain: default.zone-1.mesh.local
             status:
               origin:
                 kri: kri_mid_default_default_foo_bar_baz
       """
+
+  Scenario: MeshTrusts are listed in mesh overview
     When I visit the "/meshes/default" URL
     Then the "$meshtrusts-listing" element exists
-    And the "$item:nth-child(1)" element contains "trust-1"
-    And the "$item:nth-child(1)" element contains "kri_mid_default_default_foo_bar_baz"
+    And the "$meshtrusts-listing th" element exists 4 times
+    And the "$item:nth-child(1)" element contains
+      | Value                               |
+      | trust-1                             |
+      | zone-1                              |
+      | default.zone-1.mesh.local           |
+      | kri_mid_default_default_foo_bar_baz |
 
   Scenario: Clicking on mesh trust item opens summary view
-    Given the URL "/meshes/default/meshtrusts" responds with
-      """
-      body:
-        items:
-          - name: trust-1
-            mesh: default
-            kri: kri_mtrust_default___trust-1_
-            labels:
-              kuma.io/display-name: trust-1
-            status:
-              origin:
-                kri: kri_mid_default_default_foo_bar_baz
-      """
     When I visit the "/meshes/default" URL
     Then I click the "$item:nth-child(1) td:first-child a" element
     Then the URL contains "/meshes/default/overview/meshtrust/kri_mtrust_default___trust-1_"
@@ -52,28 +48,18 @@ Feature: mesh / mesh-trust
     And the "$summary [data-testid='k-code-block']" element contains "name: trust-1"
 
   Scenario: Clicking on an origin opens the summary tray of mesh identity
-    Given the URL "/meshes/default/meshtrusts" responds with
-      """
-      body:
-        items:
-          - name: trust-1
-            status:
-              origin:
-                kri: kri_mid_default_default_foo_bar_baz
-      """
     And the URL "/meshes/default/meshidentities" responds with
       """
       body:
         items:
           - name: bar
       """
     When I visit the "/meshes/default" URL
-    Then I click the "$item:nth-child(1) td:nth-child(3) a" element
+    Then I click the "$item:nth-child(1) td:nth-child(4) a" element
     Then the URL contains "/meshes/default/overview/meshidentity/kri_mid_default_default_foo_bar_baz"
     And the "$summary" element exists
     And the "$summary-title" element contains "bar"
     And the "$summary [data-testid='k-code-block']" element exists
     And the "$summary [data-testid='k-code-block']" element contains "type: MeshIdentity"
     And the "$summary [data-testid='k-code-block']" element contains "mesh: default"
     And the "$summary [data-testid='k-code-block']" element contains "name: bar"
-    Then pause

packages/kuma-gui/src/app/meshes/locales/en-us/index.yaml

@@ -69,6 +69,7 @@ meshes:
         name: Name
         trust-domain: TrustDomain
         origin: Origin
+        zone: Zone
     items:
       title: Meshes
       breadcrumbs: Meshes

packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue

@@ -5,7 +5,7 @@
       mesh: '',
       environment: String,
     }"
-    v-slot="{ route, t, uri, me }"
+    v-slot="{ route, t, uri, me, can }"
   >
     <RouteTitle
       :title="t('meshes.routes.overview.title')"
@@ -72,6 +72,7 @@
                       :items="items"
                       :headers="[
                         { ...me.get('headers.identity'), label: t('meshes.routes.item.mesh-trusts.name'), key: 'name' },
+                        ...(can('use zones') ? [{ label: t('meshes.routes.item.mesh-trusts.zone'), key: 'zone' }] : []),
                         { ...me.get('headers.type'), label: t('meshes.routes.item.mesh-trusts.trust-domain'), key: 'trustDomain' },
                         { ...me.get('headers.origin'), label: t('meshes.routes.item.mesh-trusts.origin'), key: 'origin' },
                       ]"
@@ -95,6 +96,19 @@
                           <b>{{ item.name }}</b>
                         </XAction>
                       </template>
+                      <template #zone="{ row: item }">
+                        <XAction
+                          v-if="item.zone.length > 0"
+                          :to="{
+                            name: 'zone-cp-detail-view',
+                            params: {
+                              zone: item.zone,
+                            },
+                          }"
+                        >
+                          {{ item.zone }}
+                        </XAction>
+                      </template>
                       <template #trustDomain="{ row: item }">
                         <XBadge appearance="decorative">
                           {{ item.spec.trustDomain }}