feat(gateways/GatewayListTabsView): add explanatory sentences to gate…

…way types (#3128) Follow up to #3119 Brings back consistency between services and gateways by adding explanatory sentences to the gateway types and moving everything below the action group. Signed-off-by: schogges <[email protected]>
kumahq · Oct 29, 2024 · b98f0a9 · b98f0a9
1 parent cb4b14e
commit b98f0a9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/app/gateways/locales/en-us/index.yaml b/src/app/gateways/locales/en-us/index.yaml
@@ -5,8 +5,14 @@ gateways:
       intro: !!text/markdown |
         Gateways are specialized proxies that manage incoming and outgoing traffic between the service mesh and external clients or other networks, enabling secure and controlled access to services with the mesh.
       navigation:
-        builtin-gateway-list-view: Built-in
-        delegated-gateway-list-view: Delegated
+        builtin-gateway-list-view:
+          label: Built-in
+          description: !!text/markdown |
+            With a <a href="{KUMA_DOCS_URL}/guides/gateway-builtin/?{KUMA_UTM_QUERY_PARAMS}" target="_blank">Built-in Gateway</a> it is possible to route external traffic into the service mesh (North/South). Further <a href="{KUMA_DOCS_URL}/using-mesh/managing-ingress-traffic/builtin/?{KUMA_UTM_QUERY_PARAMS}" target="_blank">configuration</a> enables secure and controlled access to the mesh internal services.
+        delegated-gateway-list-view:
+          label: Delegated
+          description: !!text/markdown |
+            A <a href="{KUMA_DOCS_URL}/using-mesh/managing-ingress-traffic/delegated/?{KUMA_UTM_QUERY_PARAMS}" target="_blank">Delegated Gateway</a> allows the integration of existing API gateway solutions into the mesh by adding an Envoy sidecar proxy to an existing Gateway. It then manages the traffic between the services inside the mesh and external clients (North/South).
 
 builtin-gateways:
   routes:

diff --git a/src/app/gateways/views/GatewayListTabsView.vue b/src/app/gateways/views/GatewayListTabsView.vue
@@ -11,7 +11,6 @@
       :title="t(`${route.child()?.name === 'builtin-gateway-list-view' ? 'builtin' : 'delegated'}-gateways.routes.items.title`)"
     />
     <div class="stack">
-      <div v-html="t('gateways.routes.items.intro', {}, { defaultMessage: '' })" />
       <AppView>
         <template #actions>
           <DataCollection
@@ -36,12 +35,16 @@
                 }"
                 :data-testid="`${name}-sub-tab`"
               >
-                {{ t(`gateways.routes.items.navigation.${name}`) }}
+                {{ t(`gateways.routes.items.navigation.${name}.label`) }}
               </XAction>
             </XActionGroup>
           </DataCollection>
         </template>
 
+        <div
+          v-html="t(`gateways.routes.items.navigation.${route.child()?.name}.description`, {}, { defaultMessage: '' })"
+        />
+
         <RouterView
           v-slot="{ Component}"
         >