From 16840659dc6affc0b7e97b11d41bffe557dbbbab Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 12 Mar 2024 18:47:47 +0000
Subject: [PATCH] web/satellite: add info tooltip to segment card

This change adds an info tooltip to the segment card on the dashboard
explaining what a segment is.

Issue: https://github.com/storj/storj/issues/6809

Change-Id: Iad66f6b57af5356fe6537ffcccb05cc84528c9bf
---
 .../src/components/UsageProgressComponent.vue    | 13 ++++++++++---
 web/satellite/src/views/Dashboard.vue            | 16 +++++++++++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/satellite/src/components/UsageProgressComponent.vue b/web/satellite/src/components/UsageProgressComponent.vue
index ee89be89e73b..244ee4e417a6 100644
--- a/web/satellite/src/components/UsageProgressComponent.vue
+++ b/web/satellite/src/components/UsageProgressComponent.vue
@@ -7,12 +7,15 @@
             <v-card-title class="d-flex align-center">
                 <component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" bold />
                 {{ title }}
-                <v-tooltip v-if="extraInfo" width="250" location="bottom">
+                <v-tooltip v-if="extraInfo || slots.extraInfo" width="250" location="bottom">
                     <template #activator="activator">
                         <v-icon v-bind="activator.props" size="16" :icon="mdiInformationOutline" class="ml-2 text-medium-emphasis" />
                     </template>
                     <template #default>
-                        <p>{{ extraInfo }}</p>
+                        <template v-if="slots.extraInfo">
+                            <slot name="extraInfo" />
+                        </template>
+                        <p v-else>{{ extraInfo }}</p>
                     </template>
                 </v-tooltip>
             </v-card-title>
@@ -37,7 +40,7 @@
 
 <script setup lang="ts">
 import { VCard, VCardItem, VProgressLinear, VRow, VCol, VCardTitle, VTooltip, VIcon } from 'vuetify/components';
-import { computed } from 'vue';
+import { Component, computed } from 'vue';
 import { mdiInformationOutline } from '@mdi/js';
 
 import IconCloud from '@/components/icons/IconCloud.vue';
@@ -61,6 +64,10 @@ const emit = defineEmits<{
     ctaClick: [];
 }>();
 
+const slots = defineSlots<{
+    extraInfo?: Component;
+}>();
+
 const iconComponents = {
     cloud: IconCloud,
     'arrow-down': IconArrowDown,
diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue
index e72bc9a8d765..09d599f49109 100644
--- a/web/satellite/src/views/Dashboard.vue
+++ b/web/satellite/src/views/Dashboard.vue
@@ -119,7 +119,21 @@
                     :available="`${availableSegment.toLocaleString()} Available`"
                     :cta="getCTALabel(segmentUsedPercent, true)"
                     @cta-click="onSegmentsCTAClicked"
-                />
+                >
+                    <template #extraInfo>
+                        <p>
+                            Segments are the encrypted parts of an uploaded file.
+                            <a
+                                class="link"
+                                href="https://docs.storj.io/dcs/pricing#per-segment-fee"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                Learn more
+                            </a>
+                        </p>
+                    </template>
+                </UsageProgressComponent>
             </v-col>
             <v-col cols="12" md="6">
                 <UsageProgressComponent