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: #6809 Change-Id: Iad66f6b57af5356fe6537ffcccb05cc84528c9bf
storj · Mar 13, 2024 · 1684065 · 1684065
1 parent ce6ddad
commit 1684065
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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