refactor(meshes): refactor meshes to use our newer patterns

Signed-off-by: John Cowen <[email protected]>
kumahq · Nov 26, 2024 · bf4c34b · bf4c34b
1 parent 6cf85fe
commit bf4c34b
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 129 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>