chore: XDS Configurations > XDS Connections (#3514)

Changes the text of `XDS Configurations` titles to say `XDS
Connections`. This is mainly the title for some nest tables that we
have, but also I removed the word `Configuration` from the Subscription
Summary Drawers and just left it blank.

Leaving it blank meant I needed a new right alignment `XLayout` so I
following flexbox I added `start`, `around`, `between` and `end` for our
`separated` layout, and also (importantly) made all `separated` layouts
take up 100% of their parents width (similar to a native div).

Closes #3452

Signed-off-by: John Cowen <[email protected]>

Author: johncowen

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

@@ -96,7 +96,7 @@ data-planes:
         disabled: !!text/markdown |
           This Data Plane Proxy does not have mTLS configured, yet  — <a href="{KUMA_DOCS_URL}/policies/mutual-tls?{KUMA_UTM_QUERY_PARAMS}">Learn about certificates in {KUMA_PRODUCT_NAME}</a>
       subscriptions:
-        title: XDS Configurations
+        title: XDS Connections
       rules:
         proxy: Proxy rule
         to: To rules

packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryView.vue

@@ -24,32 +24,29 @@
             </h2>
           </template>
 
-          <XLayout type="stack">
+          <XLayout
+            type="stack"
+          >
             <header>
               <XLayout
                 type="separated"
-                size="max"
+                justify="end"
               >
-                <h3>
-                  {{ t('subscriptions.routes.item.config') }}
-                </h3>
-                <div>
-                  <XSelect
-                    :label="t('subscriptions.routes.item.format')"
-                    :selected="route.params.format"
-                    @change="(value) => {
-                      route.update({ format: value })
-                    }"
+                <XSelect
+                  :label="t('subscriptions.routes.item.format')"
+                  :selected="route.params.format"
+                  @change="(value) => {
+                    route.update({ format: value })
+                  }"
+                >
+                  <template
+                    v-for="value in ['structured', 'yaml']"
+                    :key="value"
+                    #[`${value}-option`]
                   >
-                    <template
-                      v-for="value in ['structured', 'yaml']"
-                      :key="value"
-                      #[`${value}-option`]
-                    >
-                      {{ t(`subscriptions.routes.item.formats.${value}`) }}
-                    </template>
-                  </XSelect>
-                </div>
+                    {{ t(`subscriptions.routes.item.formats.${value}`) }}
+                  </template>
+                </XSelect>
               </XLayout>
             </header>
 

packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue

@@ -1,13 +1,16 @@
 <template>
-  <div>
+  <XLayout
+    type="stack"
+  >
     <template
       v-if="slots['primary-actions']"
     >
-      <div
-        class="toolbar"
+      <XLayout
+        type="separated"
+        justify="end"
       >
         <slot name="primary-actions" />
-      </div>
+      </XLayout>
     </template>
     <KCodeBlock
       :id="id"
@@ -33,7 +36,7 @@
         <slot name="secondary-actions" />
       </template>
     </KCodeBlock>
-  </div>
+  </XLayout>
 </template>
 
 <script lang="ts" setup>
@@ -82,13 +85,6 @@ async function handleCodeBlockRenderEvent({ preElement, codeElement, language, c
 </script>
 
 <style lang="scss" scoped>
-.toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: $kui-space-60;
-  margin-bottom: $kui-space-60;
-}
 // Makes code block actions sticky
 :deep(.code-block-actions) {
   position: sticky;

packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="props.type === 'separated' && props.truncate ? KTruncate : 'div'"
-    :class="['x-layout', props.type, props.size]"
+    :class="['x-layout', props.type, props.size, props.justify]"
   >
     <slot name="default" />
   </component>
@@ -12,10 +12,12 @@ const props = withDefaults(defineProps<{
   // TODO(jc) :variant
   type?: 'stack' | 'separated' | 'columns'
   size?: 'small' | 'normal' | 'max'
+  justify?: 'start' | 'around' | 'between' | 'end'
   truncate?: boolean
 }>(), {
   type: 'stack',
   size: 'normal',
+  justify: 'start',
   truncate: false,
 })
 </script>
@@ -26,18 +28,26 @@ const props = withDefaults(defineProps<{
 .stack.small > * + * {
   margin-block-start: $kui-space-40;
 }
-.max {
-  width: 100%;
-}
 .separated:not(.k-truncate) {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: $kui-space-40;
+  width: 100%;
 
-  &.max {
+  &.start {
+    justify-content: flex-start;
+  }
+  &.max,
+  &.between {
     justify-content: space-between;
   }
+  &.around {
+    justify-content: space-around;
+  }
+  &.end {
+    justify-content: flex-end;
+  }
 }
 .columns {
   --threshold: 40rem;

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

@@ -16,7 +16,7 @@ zone-egresses:
       overview: 'Overview'
       config: 'Configuration'
       subscriptions:
-        title: 'XDS connections'
+        title: 'XDS Connections'
       about:
         title: About this Zone Egress
     items:

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

@@ -17,7 +17,7 @@ zone-ingresses:
       overview: 'Overview'
       config: Configuration
       subscriptions:
-        title: 'XDS connections'
+        title: 'XDS Connections'
       about:
         title: About this Zone Ingress
     items: