From 02e48d03dfaad124ba7e3c8a591ea8382e350ddb Mon Sep 17 00:00:00 2001
From: benji-bitfly <174338202+benji-bitfly@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:03:17 +0100
Subject: [PATCH 1/3] feat(DashboardTableEfficiency): Display `-` when relative
 values are equal to `0`

Improve `UX` by displaying `-` for `0` values.

See: BEDS-844
---
 frontend/.vscode/settings.json                |  1 +
 frontend/components/bc/menu/BcMenuBar.vue     |  4 +-
 .../table/DashboardTableEfficiency.vue        | 42 +++++++++++--------
 .../table/DashboardTableValidators.vue        |  8 ++--
 .../dashboard/table/SummaryValue.vue          |  4 +-
 5 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 4bac3b2e7..1afe95be7 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -11,6 +11,7 @@
     "BcToggle",
     "DashboardChartSummaryChartFilter",
     "DashboardGroupManagementModal",
+    "DashboardTableEfficiency",
     "DashboardTableSummaryDetails",
     "DashboardTableValidators",
     "DashboardValidatorManagmentModal",
diff --git a/frontend/components/bc/menu/BcMenuBar.vue b/frontend/components/bc/menu/BcMenuBar.vue
index c284e2df5..a30d43b1e 100644
--- a/frontend/components/bc/menu/BcMenuBar.vue
+++ b/frontend/components/bc/menu/BcMenuBar.vue
@@ -33,7 +33,7 @@ defineProps<Props>()
       <BcLink
         v-else-if="item.route && !item.command"
         :to="item.route"
-        class="pointer"
+
         :class="{ 'p-active': item.active }"
       >
         <span
@@ -50,7 +50,7 @@ defineProps<Props>()
       </BcLink>
       <span
         v-else
-        class="button-content pointer"
+        class="button-content"
         :class="[item.class, { 'p-active': item.active }]"
         :highlight="item.highlight || null"
       >
diff --git a/frontend/components/dashboard/table/DashboardTableEfficiency.vue b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
index e367a8d58..919a39f54 100644
--- a/frontend/components/dashboard/table/DashboardTableEfficiency.vue
+++ b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
@@ -32,30 +32,36 @@ const data = computed(() => {
       <slot name="tooltip">
         <DashboardTableEfficiency
           v-bind="props"
-          :absolute="!absolute"
+          :absolute
           :is-tooltip="true"
         />
       </slot>
     </template>
     <span v-if="absolute">
-      <BcFormatNumber
-        class="positive"
-        :value="props.success"
-      />
-      <span class="slash"> / </span>
-      <BcFormatNumber
-        :class="data.failedClass"
-        :value="props.failed"
+      <span v-if="props.success === 0 && props.failed === 0">0 / 0</span>
+      <template v-else>
+        <BcFormatNumber
+          class="positive"
+          :value="props.success === 0 ? undefined : props.success"
+        />
+        <span class="slash"> / </span>
+        <BcFormatNumber
+          :class="data.failedClass"
+          :value="props.failed === 0 ? undefined : props.failed"
+        />
+      </template>
+    </span>
+    <span v-else>
+      <span v-if="props.success === 0 && props.failed === 0">-</span>
+      <BcFormatPercent
+        v-else
+        class="percent"
+        :base="typeof data.sum === 'number' ? data.sum : undefined"
+        :value="props.success === 0 ? undefined : props.success"
+        :fixed="undefined"
+        :color-break-point="80"
+        :full-on-empty-base="true"
       />
     </span>
-    <BcFormatPercent
-      v-else
-      class="percent"
-      :base="data.sum"
-      :value="props.success"
-      :fixed="undefined"
-      :color-break-point="80"
-      :full-on-empty-base="true"
-    />
   </BcTooltip>
 </template>
diff --git a/frontend/components/dashboard/table/DashboardTableValidators.vue b/frontend/components/dashboard/table/DashboardTableValidators.vue
index a1359940f..8debdc3d8 100644
--- a/frontend/components/dashboard/table/DashboardTableValidators.vue
+++ b/frontend/components/dashboard/table/DashboardTableValidators.vue
@@ -53,9 +53,12 @@ const groupName = computed(() => {
 </script>
 
 <template>
-  <div class="validator_column">
+  <div
+    v-if="validators.length"
+    class="validator_column"
+  >
     <span
-      v-if="validators.length && validatorCount <= 3"
+      v-if="validatorCount <= 3"
       class="validators"
     >
       <template
@@ -76,7 +79,6 @@ const groupName = computed(() => {
       {{ validatorCount }} {{ $t('common.validator', validatorCount) }}
     </span>
     <FontAwesomeIcon
-      v-if="validators?.length"
       class="link popout"
       :icon="faArrowUpRightFromSquare"
       @click="openValidatorModal"
diff --git a/frontend/components/dashboard/table/SummaryValue.vue b/frontend/components/dashboard/table/SummaryValue.vue
index a8e906313..e7cd5ad6f 100644
--- a/frontend/components/dashboard/table/SummaryValue.vue
+++ b/frontend/components/dashboard/table/SummaryValue.vue
@@ -238,6 +238,7 @@ const openValidatorModal = () => {
       </template>
     </DashboardTableEfficiency>
     <BcTooltip
+      v-if="data.tooltip?.title && data.tooltip?.text"
       position="top"
       :text="data.tooltip?.text"
       :title="data.tooltip?.title"
@@ -248,7 +249,7 @@ const openValidatorModal = () => {
       />
     </BcTooltip>
     <FontAwesomeIcon
-      v-if="data?.context"
+      v-if="data?.context && data.efficiency.status_count.success > 0"
       class="link popout"
       :icon="faArrowUpRightFromSquare"
       @click="openValidatorModal"
@@ -274,6 +275,7 @@ const openValidatorModal = () => {
       :color-break-point="80"
     />
     <BcTooltip
+      v-if="data.tooltip?.title"
       position="top"
       :text="data.tooltip?.text"
       :title="data.tooltip?.title"

From f92cd4db73c3af08e4a6f3b5fab84d72a9acae4f Mon Sep 17 00:00:00 2001
From: benji-bitfly <174338202+benji-bitfly@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:10:17 +0100
Subject: [PATCH 2/3] refactor: `rename` component

It is easier to work with components if their name reflect the file path in nuxt.
---
 .../table/{SummaryValue.vue => DashboardTableSummaryValue.vue}    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename frontend/components/dashboard/table/{SummaryValue.vue => DashboardTableSummaryValue.vue} (100%)

diff --git a/frontend/components/dashboard/table/SummaryValue.vue b/frontend/components/dashboard/table/DashboardTableSummaryValue.vue
similarity index 100%
rename from frontend/components/dashboard/table/SummaryValue.vue
rename to frontend/components/dashboard/table/DashboardTableSummaryValue.vue

From 7b6d8859a9c3c32edeeef368f5f64142d41d6423 Mon Sep 17 00:00:00 2001
From: benji-bitfly <174338202+benji-bitfly@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:28:59 +0100
Subject: [PATCH 3/3] fix: add `cursor: pointer` to `p-menubar-item` scss class
 and change `px` to `rem`

---
 frontend/assets/css/prime_menubar.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/assets/css/prime_menubar.scss b/frontend/assets/css/prime_menubar.scss
index 1a7780955..e71671a19 100644
--- a/frontend/assets/css/prime_menubar.scss
+++ b/frontend/assets/css/prime_menubar.scss
@@ -32,15 +32,16 @@
         border-color: var(--primary-color);
       }
       > .p-menubar-item-content {
+        cursor: pointer;
         padding: var(--padding-small) var(--padding);
         border-radius: var(--border-radius);
-        height: 27px;
-        margin-top: 1px;
+        height: 1.6875rem;
+        margin-top: 0.0625rem;
         justify-content: center;
 
         &:not(:has(.text)) {
-          padding-left: 8px;
-          padding-right: 8px;
+          padding-left: 0.5rem;
+          padding-right: 0.5rem;
         }
       }