From bf4c34b61bd522c66558ce93719a17b3d14e71dd Mon Sep 17 00:00:00 2001
From: John Cowen <john.cowen@konghq.com>
Date: Mon, 25 Nov 2024 18:08:00 +0000
Subject: [PATCH] refactor(meshes): refactor meshes to use our newer patterns

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 .../features/application/Loading.feature      |   4 +-
 .../app-collection/AppCollection.vue          |  16 +-
 .../components/data-source/DataLoader.vue     |  16 +-
 .../src/app/meshes/views/MeshDetailView.vue   | 108 +++++++------
 .../src/app/meshes/views/MeshListView.vue     | 152 +++++++++---------
 .../src/app/x/components/x-layout/XLayout.vue |  16 +-
 6 files changed, 183 insertions(+), 129 deletions(-)

diff --git a/packages/kuma-gui/features/application/Loading.feature b/packages/kuma-gui/features/application/Loading.feature
index 76fdaabe5b..81db1a6c0d 100644
--- a/packages/kuma-gui/features/application/Loading.feature
+++ b/packages/kuma-gui/features/application/Loading.feature
@@ -2,8 +2,8 @@ Feature: application / loading
 
   Background:
     Given the CSS selectors
-      | Alias              | Selector                                                    |
-      | collection-loading | [data-testid$='-collection'] [data-testid='table-skeleton'] |
+      | Alias              | Selector                      |
+      | collection-loading | [data-testid='list-skeleton'] |
 
   Scenario: Collections show a loading view
     Given the environment
diff --git a/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue b/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
index 38e497c1d9..ae418654a3 100644
--- a/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
+++ b/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
@@ -43,8 +43,9 @@
 
 <script lang="ts" setup generic="Row extends {}">
 import { KTable } from '@kong/kongponents'
-import { useSlots, ref, watch, Ref } from 'vue'
+import { useSlots, ref, watch, Ref, inject } from 'vue'
 
+import { runInDebug } from '../../'
 import type { TableHeader as KTableHeader, TablePreferences } from '@kong/kongponents'
 type CellAttrParams = {
   headerKey: string
@@ -59,6 +60,19 @@ type ResizeValue = {
 type TableHeader = KTableHeader & {
   width?: number
 }
+
+// when we are inside of a DataLoader make sure its using the `variant="list"`
+// but only error in dev mode, if this fails in production we don't want things
+// to blow up
+const dataLoader = inject<{ props: { variant: string } } | undefined>('data-loader')
+if (typeof dataLoader !== 'undefined') {
+  if (dataLoader.props.variant !== 'list') {
+    runInDebug(() => {
+      // throw new Error('Please use <DataLoader variant="list" />')
+    })
+  }
+}
+//
 const props = withDefaults(defineProps<{
   isSelectedRow?: ((row: Row) => boolean)
   items: Row[] | undefined
diff --git a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
index 6e21a8de1f..8d6edf262d 100644
--- a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
+++ b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
@@ -66,8 +66,15 @@
         :refresh="props.src !== '' ? refresh : () => {}"
       >
         <LoadingBlock
+          v-if="props.variant === 'default'"
           v-bind="$attrs"
         />
+        <KSkeleton
+          v-else
+          data-testid="list-skeleton"
+          v-bind="$attrs"
+          type="table"
+        />
       </slot>
       <slot
         v-else
@@ -84,22 +91,27 @@
   typeOf(): any
 }" setup
 >
-import { computed, ref, useSlots } from 'vue'
+import { computed, ref, useSlots, provide } from 'vue'
 
 import type { TypeOf } from '@/app/application'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
 import LoadingBlock from '@/app/common/LoadingBlock.vue'
-
 const props = withDefaults(defineProps<{
   data?: unknown[]
   errors?: (Error | undefined)[]
   src?: T
   loader?: boolean
+  variant?: 'default' | 'list'
 }>(), {
   errors: () => [],
   data: () => [],
   src: '' as any,
   loader: true,
+  variant: 'default',
+})
+
+provide('data-loader', {
+  props,
 })
 
 const slots = useSlots()
diff --git a/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue b/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue
index 21467049f9..9647c591b2 100644
--- a/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue
+++ b/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue
@@ -23,7 +23,9 @@
         ]"
         :key="missingTLSPolicy"
       >
-        <AppView :docs="t('meshes.href.docs')">
+        <AppView
+          :docs="t('meshes.href.docs')"
+        >
           <template
             v-if="!props.mesh.mtlsBackend || missingTLSPolicy"
             #notifications
@@ -39,13 +41,17 @@
               />
             </ul>
           </template>
-          <div class="stack">
+          <XLayout
+            class="stack"
+          >
             <AppAboutSection
               :title="t('meshes.routes.item.subtitle', { name: props.mesh.name })"
               :created="t('common.formats.datetime', { value: Date.parse(props.mesh.creationTime) })"
               :modified="t('common.formats.datetime', { value: Date.parse(props.mesh.modificationTime) })"
             >
-              <div class="columns">
+              <XLayout
+                type="columns"
+              >
                 <template
                   v-for="policy in ['MeshTrafficPermission', 'MeshMetric', 'MeshAccessLog', 'MeshTrace']"
                   :key="policy"
@@ -79,60 +85,60 @@
                     </DefinitionCard>
                   </template>
                 </template>
-              </div>
+              </XLayout>
             </AppAboutSection>
 
-            <KCard>
-              <div class="stack">
-                <div class="columns">
-                  <ResourceStatus
-                    :total="data?.services.total ?? 0"
-                    data-testid="services-status"
-                  >
-                    <template #title>
-                      {{ t('meshes.detail.services') }}
-                    </template>
-                  </ResourceStatus>
+            <XCard>
+              <XLayout
+                type="columns"
+              >
+                <ResourceStatus
+                  :total="data?.services.total ?? 0"
+                  data-testid="services-status"
+                >
+                  <template #title>
+                    {{ t('meshes.detail.services') }}
+                  </template>
+                </ResourceStatus>
 
-                  <ResourceStatus
-                    :total="data?.dataplanesByType.standard.total ?? 0"
-                    :online="data?.dataplanesByType.standard.online ?? 0"
-                    data-testid="data-plane-proxies-status"
-                  >
-                    <template #title>
-                      {{ t('meshes.detail.data_plane_proxies') }}
-                    </template>
-                  </ResourceStatus>
+                <ResourceStatus
+                  :total="data?.dataplanesByType.standard.total ?? 0"
+                  :online="data?.dataplanesByType.standard.online ?? 0"
+                  data-testid="data-plane-proxies-status"
+                >
+                  <template #title>
+                    {{ t('meshes.detail.data_plane_proxies') }}
+                  </template>
+                </ResourceStatus>
 
-                  <ResourceStatus
-                    :total="data?.totalPolicyCount ?? 0"
-                    data-testid="policies-status"
-                  >
-                    <template #title>
-                      {{ t('meshes.detail.policies') }}
-                    </template>
-                  </ResourceStatus>
-                  <DefinitionCard>
-                    <template #title>
-                      {{ t('http.api.property.mtls') }}
-                    </template>
+                <ResourceStatus
+                  :total="data?.totalPolicyCount ?? 0"
+                  data-testid="policies-status"
+                >
+                  <template #title>
+                    {{ t('meshes.detail.policies') }}
+                  </template>
+                </ResourceStatus>
+                <DefinitionCard>
+                  <template #title>
+                    {{ t('http.api.property.mtls') }}
+                  </template>
 
-                    <template #body>
-                      <XBadge
-                        v-if="!props.mesh.mtlsBackend"
-                        appearance="neutral"
-                      >
-                        {{ t('meshes.detail.disabled') }}
-                      </XBadge>
+                  <template #body>
+                    <XBadge
+                      v-if="!props.mesh.mtlsBackend"
+                      appearance="neutral"
+                    >
+                      {{ t('meshes.detail.disabled') }}
+                    </XBadge>
 
-                      <template v-else>
-                        {{ props.mesh.mtlsBackend.type }} / {{ props.mesh.mtlsBackend.name }}
-                      </template>
+                    <template v-else>
+                      {{ props.mesh.mtlsBackend.type }} / {{ props.mesh.mtlsBackend.name }}
                     </template>
-                  </DefinitionCard>
-                </div>
-              </div>
-            </KCard>
+                  </template>
+                </DefinitionCard>
+              </XLayout>
+            </XCard>
             <ResourceCodeBlock
               :resource="mesh.config"
               v-slot="{ copy, copying }"
@@ -152,7 +158,7 @@
                 }"
               />
             </ResourceCodeBlock>
-          </div>
+          </XLayout>
         </AppView>
       </template>
     </DataSource>
diff --git a/packages/kuma-gui/src/app/meshes/views/MeshListView.vue b/packages/kuma-gui/src/app/meshes/views/MeshListView.vue
index 7a994bee3b..fc1d4f6b4d 100644
--- a/packages/kuma-gui/src/app/meshes/views/MeshListView.vue
+++ b/packages/kuma-gui/src/app/meshes/views/MeshListView.vue
@@ -19,84 +19,92 @@
         </h1>
       </template>
 
-      <div class="stack">
-        <div v-html="t('meshes.routes.items.intro', {}, { defaultMessage: '' })" />
-        <KCard>
-          <DataLoader
-            :src="uri(sources, `/mesh-insights`, {}, {
-              page: route.params.page,
-              size: route.params.size,
-            })"
+      <div
+        v-html="t('meshes.routes.items.intro', {}, { defaultMessage: '' })"
+      />
+
+      <XCard>
+        <DataLoader
+          variant="list"
+          :src="uri(sources, `/mesh-insights`, {}, {
+            page: route.params.page,
+            size: route.params.size,
+          })"
+          v-slot="{ data }"
+        >
+          <DataCollection
+            type="meshes"
+            :items="data.items"
+            :page="route.params.page"
+            :page-size="route.params.size"
+            :total="data.total"
+            @change="route.update"
+            v-slot="{ items }"
           >
-            <template
-              #loadable="{ data }"
+            <AppCollection
+              class="mesh-collection"
+              data-testid="mesh-collection"
+              :headers="[
+                { ...me.get('headers.name'), label: t('meshes.common.name'), key: 'name' },
+                { ...me.get('headers.services'), label: t('meshes.routes.items.collection.services'), key: 'services'},
+                { ...me.get('headers.dataplanes'), label: t('meshes.routes.items.collection.dataplanes'), key: 'dataplanes'},
+                { ...me.get('headers.actions'), label: 'Actions', key: 'actions', hideLabel: true },
+              ]"
+              :items="items"
+              :is-selected-row="(row) => row.name === route.params.mesh"
+              @resize="me.set"
             >
-              <DataCollection
-                type="meshes"
-                :items="data?.items ?? [undefined]"
-                :page="route.params.page"
-                :page-size="route.params.size"
-                :total="data?.total"
-                @change="route.update"
+              <template
+                #name="{ row: item }"
               >
-                <AppCollection
-                  class="mesh-collection"
-                  data-testid="mesh-collection"
-                  :headers="[
-                    { ...me.get('headers.name'), label: t('meshes.common.name'), key: 'name' },
-                    { ...me.get('headers.services'), label: t('meshes.routes.items.collection.services'), key: 'services'},
-                    { ...me.get('headers.dataplanes'), label: t('meshes.routes.items.collection.dataplanes'), key: 'dataplanes'},
-                    { ...me.get('headers.actions'), label: 'Actions', key: 'actions', hideLabel: true },
-                  ]"
-                  :items="data?.items"
-                  :is-selected-row="(row) => row.name === route.params.mesh"
-                  @resize="me.set"
+                <XAction
+                  data-action
+                  :to="{
+                    name: 'mesh-detail-view',
+                    params: {
+                      mesh: item.name,
+                    },
+                    query: {
+                      page: route.params.page,
+                      size: route.params.size,
+                    },
+                  }"
                 >
-                  <template #name="{ row: item }">
-                    <XAction
-                      data-action
-                      :to="{
-                        name: 'mesh-detail-view',
-                        params: {
-                          mesh: item.name,
-                        },
-                        query: {
-                          page: route.params.page,
-                          size: route.params.size,
-                        },
-                      }"
-                    >
-                      {{ item.name }}
-                    </XAction>
-                  </template>
+                  {{ item.name }}
+                </XAction>
+              </template>
 
-                  <template #services="{ row: item }">
-                    {{ item.services.internal }}
-                  </template>
+              <template
+                #services="{ row: item }"
+              >
+                {{ item.services.internal }}
+              </template>
 
-                  <template #dataplanes="{ row: item }">
-                    {{ item.dataplanesByType.standard.online }} / {{ item.dataplanesByType.standard.total }}
-                  </template>
-                  <template #actions="{ row: item }">
-                    <XActionGroup>
-                      <XAction
-                        :to="{
-                          name: 'mesh-detail-view',
-                          params: {
-                            mesh: item.name,
-                          },
-                        }"
-                      >
-                        {{ t('common.collection.actions.view') }}
-                      </XAction>
-                    </XActionGroup>
-                  </template>
-                </AppCollection>
-              </DataCollection>
-            </template>
-          </DataLoader>
-        </KCard>
-      </div>
+              <template
+                #dataplanes="{ row: item }"
+              >
+                {{ item.dataplanesByType.standard.online }} / {{ item.dataplanesByType.standard.total }}
+              </template>
+              <template
+                #actions="{ row: item }"
+              >
+                <XActionGroup>
+                  <XAction
+                    :to="{
+                      name: 'mesh-detail-view',
+                      params: {
+                        mesh: item.name,
+                      },
+                    }"
+                  >
+                    {{ t('common.collection.actions.view') }}
+                  </XAction>
+                </XActionGroup>
+              </template>
+            </AppCollection>
+          </DataCollection>
+        </DataLoader>
+      </XCard>
     </AppView>
   </RouteView>
 </template>
diff --git a/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue b/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue
index 6180dfa376..5581817c35 100644
--- a/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue
+++ b/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue
@@ -7,7 +7,7 @@
 </template>
 <script lang="ts" setup>
 const props = withDefaults(defineProps<{
-  type?: 'stack' | 'separated'
+  type?: 'stack' | 'separated' | 'columns'
   size?: 'small' | 'normal'
 }>(), {
   type: 'stack',
@@ -26,4 +26,18 @@ const props = withDefaults(defineProps<{
   flex-wrap: wrap;
   gap: $kui-space-40;
 }
+.columns {
+  --threshold: 40rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-80;
+}
+
+.columns > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--threshold) - 100%) * 999);
+  min-inline-size: 0;
+}
+
 </style>