From 26fb353f6ccdb450151f472c257fe48317cfcd00 Mon Sep 17 00:00:00 2001
From: John Cowen <john.cowen@konghq.com>
Date: Thu, 5 Sep 2024 14:56:28 +0100
Subject: [PATCH] chore: removes EmptyBlock in favour of XEmptyState

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 .../data-collection/DataCollection.vue        |  5 +-
 .../data-planes/views/DataPlaneDetailView.vue | 13 +--
 .../views/DataPlaneSummaryView.vue            | 14 ++--
 .../gateways/components/ListenerRoutes.vue    | 11 ++-
 src/app/policies/views/PolicyListView.vue     | 17 ++--
 src/app/policies/views/PolicySummaryView.vue  | 13 +--
 src/app/services/views/ServiceConfigView.vue  | 80 -------------------
 src/app/x/components/x-empty-state/README.md  | 37 +++++++++
 .../components/x-empty-state/XEmptyState.vue} |  1 +
 src/app/x/index.ts                            |  3 +
 .../views/ZoneEgressSummaryView.vue           | 13 +--
 .../views/ZoneIngressSummaryView.vue          | 14 ++--
 12 files changed, 95 insertions(+), 126 deletions(-)
 delete mode 100644 src/app/services/views/ServiceConfigView.vue
 create mode 100644 src/app/x/components/x-empty-state/README.md
 rename src/app/{common/EmptyBlock.vue => x/components/x-empty-state/XEmptyState.vue} (98%)

diff --git a/src/app/application/components/data-collection/DataCollection.vue b/src/app/application/components/data-collection/DataCollection.vue
index 65397b1ff..7a3ecabed 100644
--- a/src/app/application/components/data-collection/DataCollection.vue
+++ b/src/app/application/components/data-collection/DataCollection.vue
@@ -16,7 +16,7 @@
         name="empty"
         :items="items"
       >
-        <EmptyBlock
+        <XEmptyState
           v-if="props.empty"
           :type="props.type"
         />
@@ -31,7 +31,7 @@
       name="empty"
       :items="items"
     >
-      <EmptyBlock
+      <XEmptyState
         v-if="props.empty"
         :type="props.type"
       />
@@ -76,7 +76,6 @@
 import { useThrottleFn } from '@vueuse/core'
 import { computed, useSlots } from 'vue'
 
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 type PaginationChangeEvent = {
   page: number
 }
diff --git a/src/app/data-planes/views/DataPlaneDetailView.vue b/src/app/data-planes/views/DataPlaneDetailView.vue
index d8e0c5941..965a3f2da 100644
--- a/src/app/data-planes/views/DataPlaneDetailView.vue
+++ b/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -219,9 +219,11 @@
                         v-if="props.data.dataplaneType === 'delegated'"
                         #empty
                       >
-                        <EmptyBlock>
-                          This proxy is a delegated gateway therefore {{ t('common.product.name') }} does not have any visibility into inbounds for this gateway
-                        </EmptyBlock>
+                        <XEmptyState>
+                          <p>
+                            This proxy is a delegated gateway therefore {{ t('common.product.name') }} does not have any visibility into inbounds for this gateway.
+                          </p>
+                        </XEmptyState>
                       </template>
                       <template #default="{ items: _inbounds }">
                         <template
@@ -302,7 +304,7 @@
                   <span>Outbounds</span>
                 </template>
                 <!-- we don't want to show an error here -->
-                <!-- instead we show a No Data EmptyBlock -->
+                <!-- instead we show a No Data EmptyState -->
                 <template v-if="typeof error === 'undefined'">
                   <LoadingBlock v-if="typeof traffic === 'undefined'" />
                   <template
@@ -374,7 +376,7 @@
                   </template>
                 </template>
                 <template v-else>
-                  <EmptyBlock />
+                  <XEmptyState />
                 </template>
               </ConnectionTraffic>
             </div>
@@ -521,7 +523,6 @@ import { computed } from 'vue'
 
 import type { DataplaneOverview, DataplaneInbound } from '../data'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import LoadingBlock from '@/app/common/LoadingBlock.vue'
 import StatusBadge from '@/app/common/StatusBadge.vue'
 import SummaryView from '@/app/common/SummaryView.vue'
diff --git a/src/app/data-planes/views/DataPlaneSummaryView.vue b/src/app/data-planes/views/DataPlaneSummaryView.vue
index d9eb6e9af..c4cac22a0 100644
--- a/src/app/data-planes/views/DataPlaneSummaryView.vue
+++ b/src/app/data-planes/views/DataPlaneSummaryView.vue
@@ -12,13 +12,16 @@
       :find="true"
     >
       <template #empty>
-        <EmptyBlock>
+        <XEmptyState>
           <template #title>
-            {{ t('common.collection.summary.empty_title', { type: 'Data Plane Proxy' }) }}
+            <h2>
+              {{ t('common.collection.summary.empty_title', { type: 'Data Plane Proxy' }) }}
+            </h2>
           </template>
-
-          <p>{{ t('common.collection.summary.empty_message', { type: 'Data Plane Proxy' }) }}</p>
-        </EmptyBlock>
+          <p>
+            {{ t('common.collection.summary.empty_message', { type: 'Data Plane Proxy' }) }}
+          </p>
+        </XEmptyState>
       </template>
       <template
         #default="{ items: proxies }"
@@ -298,7 +301,6 @@ import { InfoIcon } from '@kong/icons'
 
 import type { DataplaneOverview } from '../data'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import StatusBadge from '@/app/common/StatusBadge.vue'
 import TagList from '@/app/common/TagList.vue'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
diff --git a/src/app/gateways/components/ListenerRoutes.vue b/src/app/gateways/components/ListenerRoutes.vue
index add6a4d62..9e7fee5d7 100644
--- a/src/app/gateways/components/ListenerRoutes.vue
+++ b/src/app/gateways/components/ListenerRoutes.vue
@@ -84,11 +84,11 @@
 
         <div class="content">
           <div class="to-rule-list">
-            <EmptyBlock v-if="toRules.length === 0">
-              <template #title>
-                {{ t('builtin-gateways.detail.no_rules', { listener: props.selectedListenerIndex + 1 }) }}
-              </template>
-            </EmptyBlock>
+            <XEmptyState
+              v-if="toRules.length === 0"
+            >
+              {{ t('builtin-gateways.detail.no_rules', { listener: props.selectedListenerIndex + 1 }) }}
+            </XEmptyState>
 
             <template v-else>
               <template
@@ -254,7 +254,6 @@ import { computed } from 'vue'
 import type { MeshGateway } from '../data'
 import { matchesTags } from '../utilities'
 import { useI18n } from '@/app/application'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import TagList from '@/app/common/TagList.vue'
 import TargetRef from '@/app/common/TargetRef.vue'
 import RuleFilter from '@/app/rules/components/RuleFilter.vue'
diff --git a/src/app/policies/views/PolicyListView.vue b/src/app/policies/views/PolicyListView.vue
index 18598b496..f2f08c41f 100644
--- a/src/app/policies/views/PolicyListView.vue
+++ b/src/app/policies/views/PolicyListView.vue
@@ -16,11 +16,9 @@
       :items="props.policyTypes ?? []"
     >
       <template #empty>
-        <EmptyBlock>
-          <template #message>
-            {{ t('policies.routes.items.empty') }}
-          </template>
-        </EmptyBlock>
+        <XEmptyState>
+          {{ t('policies.routes.items.empty') }}
+        </XEmptyState>
       </template>
       <template #item="{ item: type }">
         <AppView>
@@ -110,9 +108,11 @@
                     <template
                       #empty
                     >
-                      <EmptyBlock>
+                      <XEmptyState>
                         <template #title>
-                          {{ t('policies.x-empty-state.title') }}
+                          <h3>
+                            {{ t('policies.x-empty-state.title') }}
+                          </h3>
                         </template>
                         <div
                           v-html="t('policies.x-empty-state.body', { type: type.name, suffix: route.params.s.length > 0 ? t('common.matchingsearch') : '' })"
@@ -127,7 +127,7 @@
                             {{ t('common.documentation') }}
                           </XAction>
                         </template>
-                      </EmptyBlock>
+                      </XEmptyState>
                     </template>
                     <template
                       #default
@@ -279,7 +279,6 @@
 import type { PolicyType } from '../data'
 import { sources } from '../sources'
 import AppCollection from '@/app/application/components/app-collection/AppCollection.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import SummaryView from '@/app/common/SummaryView.vue'
 const props = defineProps<{
diff --git a/src/app/policies/views/PolicySummaryView.vue b/src/app/policies/views/PolicySummaryView.vue
index 4e09d8c4a..c2e137b8b 100644
--- a/src/app/policies/views/PolicySummaryView.vue
+++ b/src/app/policies/views/PolicySummaryView.vue
@@ -17,12 +17,16 @@
       :find="true"
     >
       <template #empty>
-        <EmptyBlock>
+        <XEmptyState>
           <template #title>
-            {{ t('common.collection.summary.empty_title', { type: props.policyType.name }) }}
+            <h2>
+              {{ t('common.collection.summary.empty_title', { type: props.policyType.name }) }}
+            </h2>
           </template>
-          <p>{{ t('common.collection.summary.empty_message', { type: props.policyType.name }) }}</p>
-        </EmptyBlock>
+          <p>
+            {{ t('common.collection.summary.empty_message', { type: props.policyType.name }) }}
+          </p>
+        </XEmptyState>
       </template>
       <template
         #default="{ items: policies }"
@@ -89,7 +93,6 @@
 import PolicySummary from '../components/PolicySummary.vue'
 import type { Policy, PolicyType } from '../data'
 import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 
 const props = defineProps<{
   items: Policy[]
diff --git a/src/app/services/views/ServiceConfigView.vue b/src/app/services/views/ServiceConfigView.vue
deleted file mode 100644
index 6402fbdb0..000000000
--- a/src/app/services/views/ServiceConfigView.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <RouteView
-    name="service-config-view"
-    :params="{
-      mesh: '',
-      service: '',
-      codeSearch: '',
-      codeFilter: false,
-      codeRegExp: false,
-    }"
-    v-slot="{ route, t }"
-  >
-    <AppView>
-      <template #title>
-        <h2>
-          <RouteTitle
-            :title="t('services.routes.item.navigation.service-config-view')"
-          />
-        </h2>
-      </template>
-
-      <KCard>
-        <div>
-          <DataSource
-            :src="`/meshes/${route.params.mesh}/external-services/for/${route.params.service}`"
-            v-slot="{ data: externalService, error: externalServiceError }: ExternalServiceSource"
-          >
-            <ErrorBlock
-              v-if="externalServiceError"
-              :error="externalServiceError"
-            />
-
-            <LoadingBlock v-else-if="externalService === undefined" />
-
-            <EmptyBlock
-              v-else-if="externalService === null"
-              data-testid="no-matching-external-service"
-            >
-              <template #title>
-                {{ t('services.detail.no_matching_external_service', { name: route.params.service }) }}
-              </template>
-            </EmptyBlock>
-
-            <ResourceCodeBlock
-              v-else
-              :resource="externalService.config"
-              is-searchable
-              :query="route.params.codeSearch"
-              :is-filter-mode="route.params.codeFilter"
-              :is-reg-exp-mode="route.params.codeRegExp"
-              @query-change="route.update({ codeSearch: $event })"
-              @filter-mode-change="route.update({ codeFilter: $event })"
-              @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-              v-slot="{ copy, copying }"
-            >
-              <DataSource
-                v-if="copying"
-                :src="`/meshes/${externalService.mesh}/external-service/${externalService.name}/as/kubernetes?no-store`"
-                @change="(data) => {
-                  copy((resolve) => resolve(data))
-                }"
-                @error="(e) => {
-                  copy((_resolve, reject) => reject(e))
-                }"
-              />
-            </ResourceCodeBlock>
-          </DataSource>
-        </div>
-      </KCard>
-    </AppView>
-  </RouteView>
-</template>
-
-<script lang="ts" setup>
-import type { ExternalServiceSource } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
-import ErrorBlock from '@/app/common/ErrorBlock.vue'
-import LoadingBlock from '@/app/common/LoadingBlock.vue'
-</script>
diff --git a/src/app/x/components/x-empty-state/README.md b/src/app/x/components/x-empty-state/README.md
new file mode 100644
index 000000000..5579da0f2
--- /dev/null
+++ b/src/app/x/components/x-empty-state/README.md
@@ -0,0 +1,37 @@
+# XEmptyState
+
+A lot of the time, generally when dealing with collections of data, you should
+be using `DataCollection` instead of `XEmptyState`. `DataCollection` will
+automatically show an `XEmptyState` when it detects that the collection of data
+is empty.
+
+`DataCollections` also have an `#empty` slot which allows you to pass in an
+`XEmptyState`.
+
+That being said, there are some cases where you'll need to use an `XEmptyState`
+on its own.
+
+`XEmptyState` has a very boring default state:
+
+<Story>
+  <XEmptyState />
+</Story>
+
+But it also has title and default slots to allow you to alter the text. Please
+use semantic elements when changing the default state. You should use `p` tags
+or `<div v-html="t('markdown')" />` for default/body content and the correct
+level of `h*` tag for the title depending on your page and the position/level
+of the empty state.
+
+<Story>
+  <XEmptyState>
+    <template
+      #title
+    >
+      <h2>A different empty state title</h2>
+    </template>
+    <p>
+      Different empty state content/body
+    </p>
+  </XEmptyState>
+</Story>
diff --git a/src/app/common/EmptyBlock.vue b/src/app/x/components/x-empty-state/XEmptyState.vue
similarity index 98%
rename from src/app/common/EmptyBlock.vue
rename to src/app/x/components/x-empty-state/XEmptyState.vue
index cb2a3112e..45cffb6b5 100644
--- a/src/app/common/EmptyBlock.vue
+++ b/src/app/x/components/x-empty-state/XEmptyState.vue
@@ -16,6 +16,7 @@
       :key="title"
     >
       <KEmptyState
+        class="x-empty-state"
         data-testid="empty-block"
       >
         <template
diff --git a/src/app/x/index.ts b/src/app/x/index.ts
index 0f97ef090..2275415d1 100644
--- a/src/app/x/index.ts
+++ b/src/app/x/index.ts
@@ -6,6 +6,7 @@ import XBadge from './components/x-badge/XBadge.vue'
 import XBreadcrumbs from './components/x-breadcrumbs/XBreadcrumbs.vue'
 import XCopyButton from './components/x-copy-button/XCopyButton.vue'
 import XDisclosure from './components/x-disclosure/XDisclosure.vue'
+import XEmptyState from './components/x-empty-state/XEmptyState.vue'
 import XIcon from './components/x-icon/XIcon.vue'
 import XInput from './components/x-input/XInput.vue'
 import XPrompt from './components/x-prompt/XPrompt.vue'
@@ -30,6 +31,7 @@ declare module 'vue' {
     XBadge: typeof KBadge
     XCopyButton: typeof XCopyButton
     XBreadcrumbs: typeof XBreadcrumbs
+    XEmptyState: typeof XEmptyState
     XPrompt: typeof XPrompt
     XProvider: typeof XProvider
     XSelect: typeof XSelect
@@ -65,6 +67,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XBreadcrumbs', XBreadcrumbs],
           ['XCard', KCard],
           ['XCopyButton', XCopyButton],
+          ['XEmptyState', XEmptyState],
           ['XIcon', XIcon],
           ['XInput', XInput],
           ['XPrompt', XPrompt],
diff --git a/src/app/zone-egresses/views/ZoneEgressSummaryView.vue b/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
index 33857acd5..806a9c24f 100644
--- a/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
+++ b/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
@@ -12,13 +12,17 @@
       :find="true"
     >
       <template #empty>
-        <EmptyBlock>
+        <XEmptyState>
           <template #title>
-            {{ t('common.collection.summary.empty_title', { type: 'ZoneEgress' }) }}
+            <h2>
+              {{ t('common.collection.summary.empty_title', { type: 'ZoneEgress' }) }}
+            </h2>
           </template>
 
-          <p>{{ t('common.collection.summary.empty_message', { type: 'ZoneEgress' }) }}</p>
-        </EmptyBlock>
+          <p>
+            {{ t('common.collection.summary.empty_message', { type: 'ZoneEgress' }) }}
+          </p>
+        </XEmptyState>
       </template>
       <template
         #default="{ items: proxies }"
@@ -108,7 +112,6 @@
 <script lang="ts" setup>
 import type { ZoneEgressOverview } from '../data'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import StatusBadge from '@/app/common/StatusBadge.vue'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
 
diff --git a/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue b/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue
index 85e762f99..786d7bbe7 100644
--- a/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue
+++ b/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue
@@ -12,13 +12,16 @@
       :find="true"
     >
       <template #empty>
-        <EmptyBlock>
+        <XEmptyState>
           <template #title>
-            {{ t('common.collection.summary.empty_title', { type: 'ZoneIngress' }) }}
+            <h2>
+              {{ t('common.collection.summary.empty_title', { type: 'ZoneIngress' }) }}
+            </h2>
           </template>
-
-          <p>{{ t('common.collection.summary.empty_message', { type: 'ZoneIngress' }) }}</p>
-        </EmptyBlock>
+          <p>
+            {{ t('common.collection.summary.empty_message', { type: 'ZoneIngress' }) }}
+          </p>
+        </XEmptyState>
       </template>
       <template
         #default="{ items: proxies }"
@@ -130,7 +133,6 @@
 <script lang="ts" setup>
 import type { ZoneIngressOverview } from '../data'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
-import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import StatusBadge from '@/app/common/StatusBadge.vue'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'