fix(policies): ensure legacy policies section has an empty state (#2269)

Whilst playing around with kuma I spotted a bug when using non-federated/single-zone mode where we show a legacy policies section but we don't show an empty state, and instead its just a blank space which looks broken.

I noticed that this was for "sidecar" dataplanes only, "gateway" dataplanes where showing an empty state, but I decided to add a KCard around the empty state in both places so there is a little change there also to make them consistent.

There's a question about whether we should show the "Legacy Policies" block at all if its empty, but seeing as we do for gateway dataplanes I decided at least for the moment to continue to show it.

I stopped short of doing a bit more work here as I know there is work in progress that is altering this code for different reasons, but there is likely to be a follow up in this area later.


Signed-off-by: John Cowen <john.cowen@konghq.com>

src/app/data-planes/components/PolicyTypeEntryList.vue

@@ -4,7 +4,7 @@
     multiple-open
   >
     <AccordionItem
-      v-for="(policyTypeEntry, index) in legacyPolicyTypeEntries"
+      v-for="(policyTypeEntry, index) in items"
       :key="index"
     >
       <template #accordion-header>
@@ -78,7 +78,7 @@
                       name: 'policy-detail-view',
                       params: {
                         mesh: origin.mesh,
-                        policyPath: props.policyTypesByName[origin.type]!.path,
+                        policyPath: props.types[origin.type]!.path,
                         policy: origin.name,
                       },
                     }"
@@ -114,7 +114,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
@@ -125,12 +124,10 @@ import type { PolicyType, PolicyTypeEntry, PolicyTypeEntryConnection } from '@/t
 import { toYaml } from '@/utilities/toYaml'
 
 const props = defineProps<{
-  policyTypeEntries: PolicyTypeEntry[]
-  policyTypesByName: Record<string, PolicyType | undefined>
+  items: PolicyTypeEntry[]
+  types: Record<string, PolicyType | undefined>
 }>()
 
-const legacyPolicyTypeEntries = computed(() => props.policyTypeEntries.filter((policyTypeEntry) => props.policyTypesByName[policyTypeEntry.type]?.isTargetRefBased === false))
-
 function getCellAttributes({ headerKey }: any): Record<string, string> {
   return { class: `cell-${headerKey}` }
 }

src/app/data-planes/views/DataPlanePoliciesView.vue

@@ -55,51 +55,59 @@
                   :data="[policyTypesData]"
                   :errors="[policyTypesError]"
                 >
-                  <DataCollection
-                    v-if="gatewayDataplane"
-                    :items="gatewayDataplane.routePolicies"
+                  <template
+                    v-for="types in [policyTypesData!.policies.reduce<Record<string, PolicyType>>((prev, item) => Object.assign(prev, { [item.name]: item }), {})]"
+                    :key="types"
                   >
-                    <!-- we need to check routePolicies and listenerEntries for emptyness -->
-                    <EmptyBlock v-if="gatewayDataplane.listenerEntries.length === 0" />
                     <KCard
-                      v-else
                       class="mt-4"
                     >
-                      <BuiltinGatewayPolicies
-                        v-if="policyTypesData"
-                        :policy-types-by-name="policyTypesData.policies.reduce((obj, policyType) => Object.assign(obj, { [policyType.name]: policyType }), {})"
-                        :gateway-dataplane="gatewayDataplane"
-                        data-testid="builtin-gateway-dataplane-policies"
-                      />
+                      <DataCollection
+                        v-if="gatewayDataplane"
+                        :items="gatewayDataplane.routePolicies"
+                      >
+                        <!-- we need to check routePolicies and listenerEntries for emptiness -->
+                        <EmptyBlock v-if="gatewayDataplane.listenerEntries.length === 0" />
+                        <BuiltinGatewayPolicies
+                          v-else
+                          :policy-types-by-name="types"
+                          :gateway-dataplane="gatewayDataplane"
+                          data-testid="builtin-gateway-dataplane-policies"
+                        />
+                      </DataCollection>
                     </KCard>
-                  </DataCollection>
+                  </template>
                 </DataLoader>
               </template>
 
               <!-- anything but builtin gateways -->
               <template v-else>
                 <DataLoader
-                  v-slot="{ data: sidecarDataplaneData}: SidecarDataplaneCollectionSource"
+                  v-slot="{ data: sidecarDataplaneData }: SidecarDataplaneCollectionSource"
                   :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/sidecar-dataplane-policies`"
                   :data="[policyTypesData]"
                   :errors="[policyTypesError]"
                 >
-                  <DataCollection
-                    v-if="sidecarDataplaneData"
-                    v-slot="{items: policyTypeEntries}"
-                    :items="sidecarDataplaneData.policyTypeEntries"
+                  <template
+                    v-for="types in [policyTypesData!.policies.reduce<Record<string, PolicyType>>((prev, item) => Object.assign(prev, { [item.name]: item }), {})]"
+                    :key="types"
                   >
                     <KCard
                       class="mt-4"
                     >
-                      <PolicyTypeEntryList
-                        v-if="policyTypesData"
-                        :policy-type-entries="policyTypeEntries"
-                        :policy-types-by-name="policyTypesData.policies.reduce((obj, policyType) => Object.assign(obj, { [policyType.name]: policyType }), {})"
-                        data-testid="sidecar-dataplane-policies"
-                      />
+                      <DataCollection
+                        v-slot="{ items }"
+                        :predicate="(item) => types[item.type]?.isTargetRefBased === false"
+                        :items="sidecarDataplaneData!.policyTypeEntries"
+                      >
+                        <PolicyTypeEntryList
+                          :items="items"
+                          :types="types"
+                          data-testid="sidecar-dataplane-policies"
+                        />
+                      </DataCollection>
                     </KCard>
-                  </DataCollection>
+                  </template>
                 </DataLoader>
               </template>
             </div>
@@ -117,6 +125,7 @@ import StandardDataplanePolicies from '../components/StandardDataplanePolicies.v
 import type { DataplaneOverview } from '../data'
 import type { DataplaneRulesSource, MeshGatewayDataplaneSource, SidecarDataplaneCollectionSource } from '../sources'
 import EmptyBlock from '@/app/common/EmptyBlock.vue'
+import type { PolicyType } from '@/app/policies/data'
 import type { PolicyTypeCollectionSource } from '@/app/policies/sources'
 
 const props = defineProps<{

src/app/policies/sources.ts

@@ -1,9 +1,9 @@
 import { Policy, PolicyDataplane } from './data'
+import type { PolicyType } from './data'
 import { defineSources } from '../application/services/data-source'
 import type { DataSourceResponse } from '@/app/application'
 import type KumaApi from '@/services/kuma-api/KumaApi'
 import type { PaginatedApiListResponse as CollectionResponse } from '@/types/api.d'
-import type { PolicyType } from '@/types/index.d'
 
 export type PolicyCollection = CollectionResponse<Policy>
 export type PolicySource = DataSourceResponse<Policy>