chore: removes EmptyBlock in favour of XEmptyState

Signed-off-by: John Cowen <john.cowen@konghq.com>
kumahq · Oct 10, 2024 · 26fb353 · 26fb353
1 parent ff7b2e6
commit 26fb353
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 126 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/app/x/components/x-empty-state/README.md 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 → .../components/x-empty-state/XEmptyState.vue b/src/app/common/EmptyBlock.vue → .../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
@@ -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
@@ -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'