From 16ec27de466759b531dd1a7abf487af815e95efe Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 27 Nov 2024 17:12:01 +0200
Subject: [PATCH] handle empty topic states, mid-topic terminating segments and
 alter counter to also count terminating segments

---
 .../UNS/Hierarchy/components/TopicSegment.vue | 45 +++++++++++++++--
 .../src/pages/team/UNS/Hierarchy/index.vue    | 50 +++++++++++--------
 .../cypress/tests-ee/uns/hierarchy.spec.js    | 22 +++++---
 3 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue b/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
index 42e6c381b2..e30265c9ac 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="segment-wrapper" :class="{open: isSegmentOpen}" data-el="segment-wrapper" :data-value="segment.name">
+    <div class="segment-wrapper" :class="{open: isSegmentOpen, empty: segment.isEmpty}" data-el="segment-wrapper" :data-value="segment.name">
         <div class="segment flex" @click="toggleChildren">
             <div class="diagram">
                 <span v-if="!isRoot" class="connector-elbow" />
@@ -8,7 +8,18 @@
             <div class="content flex gap-1.5 items-center font-bold" :class="{'cursor-pointer': hasChildren, 'cursor-default': !hasChildren, 'pl-10': !isRoot}">
                 <ChevronRightIcon v-if="hasChildren" class="chevron ff-icon-sm" />
                 <p class="flex gap-2.5 items-end" :class="{'ml-2': !hasChildren}">
-                    <span class="title">{{ segmentText }}</span>
+                    <span class="title">
+                        <span v-if="segment.isEmpty && !isRoot && !hasChildren" class="separator">/</span>
+
+                        {{ segmentText }}
+                        <span
+                            v-if="segment.isEndOfTopic && segment.childrenCount"
+                            class="separator cursor-help"
+                            title="This topic is also able to receive events"
+                        >
+                            <ArchiveIcon class="ff-icon-sm" />
+                        </span>
+                    </span>
                     <span v-if="hasChildren" class="font-normal opacity-50 text-xs">{{ topicsCounterLabel }}</span>
                     <text-copier :text="segment.path" :show-text="false" class="ff-text-copier" />
                 </p>
@@ -17,7 +28,7 @@
         <div v-if="hasChildren && isSegmentOpen" class="children" data-el="segment-children" :class="{ 'pl-10': isRoot}">
             <topic-segment
                 v-for="(child, key) in childrenSegments"
-                :key="child.path"
+                :key="'-'+child.path"
                 :segment="children[child]"
                 :children="children[child].children"
                 :has-siblings="Object.keys(children).length > 1"
@@ -30,12 +41,13 @@
 </template>
 
 <script>
+import { ArchiveIcon } from '@heroicons/vue/outline'
 import { ChevronRightIcon } from '@heroicons/vue/solid'
 
 import TextCopier from '../../../../../components/TextCopier.vue'
 export default {
     name: 'TopicSegment',
-    components: { TextCopier, ChevronRightIcon },
+    components: { TextCopier, ChevronRightIcon, ArchiveIcon },
     props: {
         segment: {
             required: true,
@@ -80,7 +92,7 @@ export default {
             return `(${this.segment.childrenCount} ${label})`
         },
         segmentText () {
-            return this.hasChildren ? `${this.segment.name}/` : this.segment.name
+            return this.segment.isEmpty ? '(empty)' : this.segment.name
         },
         shouldShowTrunk () {
             return !this.isRoot && this.hasSiblings && this.isLastSibling
@@ -148,6 +160,12 @@ export default {
                 transition: ease .3s;
             }
 
+            .title {
+                align-items: center;
+                display: flex;
+                gap: 3px;
+            }
+
             .ff-text-copier {
                 display: none;
                 height: 17px;
@@ -181,5 +199,22 @@ export default {
             }
         }
     }
+
+    &.empty > {
+        .segment {
+            .content {
+                .title {
+                    color: $ff-grey-600;
+                    font-size: 90%;
+                    font-weight: 300;
+
+                    .separator {
+                        color: $ff-black;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index ad21dd070f..8499a2fe1a 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -79,35 +79,43 @@ export default {
         hierarchy: {
             get () {
                 const hierarchy = {}
-
-                this.topics.forEach(topic => {
-                    const parts = topic.split('/')
-                    let current = hierarchy
-
-                    parts.forEach((part, index) => {
-                        if (!current[part]) {
-                            current[part] = {
-                                name: part,
-                                path: parts.slice(0, index + 1).join('/'),
-                                open: false,
-                                childrenCount: 0,
-                                children: {}
+                const topics = this.topics
+
+                topics.sort()
+                    .forEach(topic => {
+                        const parts = topic.split('/')
+                        let current = hierarchy
+
+                        parts.forEach((part, index) => {
+                            if (!current[part]) {
+                                const isEmpty = part.length === 0
+                                current[part] = {
+                                    name: part,
+                                    isEmpty,
+                                    path: parts.slice(0, index + 1).join('/'),
+                                    open: false,
+                                    childrenCount: 0,
+                                    children: {},
+                                    isEndOfTopic: index === parts.length - 1
+                                }
                             }
-                        }
-                        current = current[part].children
+                            current = current[part].children
+                        })
                     })
-                })
 
                 function calculateChildrenCount (node) {
-                    if (!node.children || Object.keys(node.children).length === 0) {
-                        return 1 // Terminating segment; count as 1.
-                    }
-
                     let count = 0
                     for (const childKey in node.children) {
                         const childNode = node.children[childKey]
-                        count += calculateChildrenCount(childNode) // Only count terminating children.
+                        count += calculateChildrenCount(childNode)
                     }
+
+                    for (const childKey in node.children) {
+                        if (node.children[childKey].isEndOfTopic) {
+                            count++
+                        }
+                    }
+
                     node.childrenCount = count
                     return count
                 }
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
index 79614e83f7..aee40ab4e4 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
@@ -68,7 +68,8 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
                 'foo/bar/baz',
                 'foo/thud',
                 'foo/flam/paz/daz',
-                'wibble/wabble/bork'
+                'wibble/wabble/bork',
+                'wibble/wabble/bork/spork'
             ]).as('getTopics')
             cy.get('[data-nav="team-unified-namespace"]').click()
 
@@ -77,9 +78,11 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.get('[data-el="segment-wrapper"]').should('have.length', 2)
 
             cy.get('[data-el="segment-wrapper"][data-value="foo"]').contains('3 topics')
-            cy.get('[data-el="segment-wrapper"][data-value="foo"]').contains('foo/')
-            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('1 topic')
-            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('wibble/')
+            cy.get('[data-el="segment-wrapper"][data-value="foo"]').contains('foo')
+
+            // check that terminating topic segments are correctly included in the parent count
+            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('2 topics')
+            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('wibble')
 
             cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('not.exist')
             cy.get('[data-el="segment-wrapper"][data-value="bar"]').should('not.exist')
@@ -89,18 +92,16 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.get('[data-el="segment-wrapper"][data-value="foo"]').click()
             cy.get('[data-el="segment-wrapper"][data-value="foo"]').within(() => {
                 cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('not.exist')
-                cy.get('[data-el="segment-wrapper"][data-value="bar"]').contains('bar/')
+                cy.get('[data-el="segment-wrapper"][data-value="bar"]').contains('bar')
                 cy.get('[data-el="segment-wrapper"][data-value="bar"]').contains('1 topic')
                 cy.get('[data-el="segment-wrapper"][data-value="bar"]').click()
                 cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('exist')
                 cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('contain', 'baz')
-                cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('not.contain', 'baz/')
 
                 cy.get('[data-el="segment-wrapper"][data-value="thud"]').should('not.contain', '1 topic')
-                cy.get('[data-el="segment-wrapper"][data-value="thud"]').should('not.contain', 'thud/')
 
                 cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('not.exist')
-                cy.get('[data-el="segment-wrapper"][data-value="flam"]').contains('flam/')
+                cy.get('[data-el="segment-wrapper"][data-value="flam"]').contains('flam')
                 cy.get('[data-el="segment-wrapper"][data-value="flam"]').contains('1 topic')
                 cy.get('[data-el="segment-wrapper"][data-value="flam"]').click()
                 cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('exist')
@@ -113,6 +114,11 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
 
             cy.get('[data-el="segment-wrapper"][data-value="foo"] > .segment .content').click()
             cy.get('[data-el="segment-wrapper"]').should('have.length', 2)
+
+            // check that terminating topic segments are marked with an svg icon
+            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').click()
+            cy.get('[data-el="segment-wrapper"][data-value="wabble"]').click()
+            cy.get('[data-el="segment-wrapper"][data-value="bork"]').find('svg').should('exist')
         })
     })