web/satellite: dashboard lag message tooltip (#3982)

web/satellite/src/components/project/ProjectDashboard.vue

@@ -3,7 +3,14 @@
 
 <template>
     <div class="dashboard-area">
+        <div class="dashboard-area__header-wrapper">
             <h1 class="dashboard-area__title">{{projectName}} Dashboard</h1>
+            <VInfo
+                class="dashboard-area__tooltip__wrapper"
+                bold-text="Expect a delay of a few hours between network activity and the latest dashboard stats.">
+                <InfoIcon class="dashboard-area__tooltip__icon"/>
+            </VInfo>
+        </div>
         <ProjectUsage/>
         <ProjectSummary/>
         <BucketArea/>
@@ -13,10 +20,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import VInfo from '@/components/common/VInfo.vue';
 import BucketArea from '@/components/project/buckets/BucketArea.vue';
 import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
 import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
 
+import InfoIcon from '@/../static/images/common/infoTooltipSm.svg';
+
 import { RouteConfig } from '@/router';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
@@ -25,8 +35,10 @@ import { MetaUtils } from '@/utils/meta';
 @Component({
     components: {
         BucketArea,
+        InfoIcon,
         ProjectUsage,
         ProjectSummary,
+        VInfo,
     },
 })
 export default class ProjectDashboard extends Vue {
@@ -79,5 +91,34 @@ export default class ProjectDashboard extends Vue {
             color: #384b65;
             margin: 0 0 30px 0;
         }
+
+        &__header-wrapper {
+            display: flex;
+            margin-top: 10px;
+        }
+
+        &__tooltip {
+
+            &__wrapper {
+                margin: 7px 0 0 10px;
+
+                /deep/ .info__message-box {
+                    background-image: url('../../../static/images/tooltipMessageBg.png');
+                    min-width: 300px;
+                    text-align: left;
+                    left: 195px;
+                    bottom: 15px;
+                    padding: 10px 10px 10px 35px;
+
+                    &__text {
+
+                        &__bold-text {
+                            font-family: 'font_medium', sans-serif;
+                            color: #354049;
+                        }
+                    }
+                }
+            }
+        }
     }
 </style>

web/satellite/static/images/common/infoTooltipSm.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="team-header-svg-rect" x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#AFB7C1"/>
+    <path class="team-header-svg-path" d="M7 7.25177C7.00959 6.23527 7.28777 5.44177 7.83453 4.87129C8.38129 4.29043 9.1199 4 10.0504 4C10.952 4 11.6667 4.22819 12.1942 4.68458C12.7314 5.14097 13 5.79444 13 6.64498C13 7.03913 12.9376 7.38661 12.8129 7.68741C12.6882 7.98821 12.5396 8.24234 12.3669 8.44979C12.1942 8.65724 11.9592 8.90099 11.6619 9.18105C11.2686 9.54408 10.9712 9.876 10.7698 10.1768C10.5779 10.4672 10.482 10.8303 10.482 11.2659H9.04317C9.04317 10.851 9.10072 10.488 9.21583 10.1768C9.33094 9.86563 9.46523 9.6115 9.61871 9.41443C9.78177 9.20698 10.0024 8.96841 10.2806 8.69873C10.6067 8.37718 10.8465 8.09712 11 7.85856C11.1535 7.61999 11.2302 7.31919 11.2302 6.95615C11.2302 6.55163 11.1103 6.25082 10.8705 6.05375C10.6403 5.8463 10.3141 5.74257 9.89209 5.74257C9.45084 5.74257 9.10552 5.87223 8.85611 6.13154C8.60671 6.38048 8.47242 6.75389 8.45324 7.25177H7ZM9.73381 12.7595C10.0216 12.7595 10.2566 12.8633 10.4388 13.0707C10.6307 13.2782 10.7266 13.5427 10.7266 13.8642C10.7266 14.1961 10.6307 14.471 10.4388 14.6888C10.2566 14.8963 10.0216 15 9.73381 15C9.45564 15 9.22062 14.8911 9.02878 14.6733C8.84652 14.4554 8.7554 14.1858 8.7554 13.8642C8.7554 13.5427 8.84652 13.2782 9.02878 13.0707C9.22062 12.8633 9.45564 12.7595 9.73381 12.7595Z" fill="#354049"/>
+</svg>

web/satellite/tests/unit/project/__snapshots__/ProjectDashboard.spec.ts.snap

@@ -2,7 +2,12 @@
 
 exports[`ProjectDashboard.vue renders correctly 1`] = `
 <div class="dashboard-area">
+  <div class="dashboard-area__header-wrapper">
     <h1 class="dashboard-area__title">test Dashboard</h1>
+    <vinfo-stub text="" boldtext="Expect a delay of a few hours between network activity and the latest dashboard stats." class="dashboard-area__tooltip__wrapper">
+      <infoicon-stub class="dashboard-area__tooltip__icon"></infoicon-stub>
+    </vinfo-stub>
+  </div>
   <projectusage-stub></projectusage-stub>
   <projectsummary-stub></projectsummary-stub>
   <bucketarea-stub></bucketarea-stub>