Merge pull request #430 from gobitfly/BIDS-2900/SharedDasbhoardsView

Bids 2900/shared dasbhoards view

frontend/components/dashboard/DashboardControls.vue

@@ -25,6 +25,10 @@ const manageGroupsModalVisisble = ref(false)
 const manageValidatorsModalVisisble = ref(false)
 
 const manageButtons = computed<MenuBarEntry[] | undefined>(() => {
+  if (isShared.value) {
+    return undefined
+  }
+
   const buttons: MenuBarEntry[] = []
 
   buttons.push({
@@ -67,7 +71,8 @@ const shareButtonOptions = computed(() => {
 
   const label = !edit ? $t('dashboard.shared') : $t('dashboard.share')
   const icon = !edit ? faUsers : faShare
-  return { label, icon, edit }
+  const disabled = isShared.value || !dashboardKey.value
+  return { label, icon, edit, disabled }
 })
 
 const shareView = () => {
@@ -99,6 +104,8 @@ const share = () => {
 }
 
 const deleteButtonOptions = computed(() => {
+  const visible = !isShared.value
+
   const disabled = isPublic.value && publicEntities.value?.length === 0
 
   // private dashboards always get deleted, public dashboards only get cleared
@@ -108,7 +115,7 @@ const deleteButtonOptions = computed(() => {
   const privateDashboardsCount = isLoggedIn.value ? ((dashboards.value?.validator_dashboards?.length ?? 0) + (dashboards.value?.account_dashboards?.length ?? 0)) : 0
   const forward = deleteDashboard ? (privateDashboardsCount > 1) : (privateDashboardsCount > 0)
 
-  return { disabled, deleteDashboard, forward }
+  return { visible, disabled, deleteDashboard, forward }
 })
 
 const onDelete = () => {
@@ -173,10 +180,10 @@ const deleteAction = async (key: DashboardKey, deleteDashboard: boolean, forward
   <DashboardValidatorManagementModal v-if="dashboardType=='validator'" v-model="manageValidatorsModalVisisble" />
   <div class="header-row">
     <div class="action-button-container">
-      <Button class="share-button" :disabled="!dashboardKey" @click="share()">
+      <Button class="share-button" :disabled="shareButtonOptions.disabled" @click="share()">
         {{ shareButtonOptions.label }}<FontAwesomeIcon :icon="shareButtonOptions.icon" />
       </Button>
-      <Button class="p-button-icon-only" :disabled="deleteButtonOptions.disabled" @click="onDelete()">
+      <Button v-if="deleteButtonOptions.visible" class="p-button-icon-only" :disabled="deleteButtonOptions.disabled" @click="onDelete()">
         <FontAwesomeIcon :icon="faTrash" />
       </Button>
     </div>

frontend/components/dashboard/DashboardHeader.vue

@@ -28,7 +28,7 @@ const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 const { isLoggedIn } = useUserStore()
 const { refreshOverview } = useValidatorDashboardOverviewStore()
 const { dashboards, getDashboardLabel, refreshDashboards } = useUserDashboardStore()
-const { dashboardKey, dashboardType, setDashboardKey, isPrivate } = useDashboardKey()
+const { dashboardKey, dashboardType, setDashboardKey, isPrivate, isShared } = useDashboardKey()
 
 const emit = defineEmits<{(e: 'showCreation'): void }>()
 
@@ -56,7 +56,7 @@ const getDashboardName = (db: Dashboard): string => {
 }
 
 const items = computed<MenuBarEntry[]>(() => {
-  if (dashboards.value === undefined) {
+  if (dashboards.value === undefined || isShared.value) {
     return []
   }
 
@@ -167,7 +167,7 @@ const editDashboard = () => {
           </span>
         </template>
       </Menubar>
-      <Button class="p-button-icon-only" @click="emit('showCreation')">
+      <Button v-if="!isShared" class="p-button-icon-only" @click="emit('showCreation')">
         <IconPlus alt="Plus icon" width="100%" height="100%" />
       </Button>
     </div>

frontend/components/dashboard/SharedDashboardModal.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
+
+const cookiePreference = useCookie<CookiesPreference>(COOKIE_KEY.COOKIES_PREFERENCE, { default: () => undefined })
+const { isShared } = useDashboardKey()
+const { t: $t } = useI18n()
+const route = useRoute()
+
+const visible = computed(() => isShared.value && cookiePreference.value !== undefined)
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    :dismissable-mask="false"
+    :draggable="false"
+    :close-on-escape="false"
+    position="bottom"
+  >
+    <div class="dialog-container">
+      {{ $t('dashboard.shared_modal.text') }}
+      <BcLink :to="`/dashboard`" :replace="route.path.startsWith('/dashboard')">
+        <Button class="get-started">
+          {{ $t('dashboard.shared_modal.get_started') }}
+        </Button>
+      </BcLink>
+    </div>
+  </Dialog>
+</template>
+
+<style lang="scss" scoped>
+@use "~/assets/css/fonts.scss";
+
+.dialog-container {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-large);
+
+  .get-started {
+    min-width: 120px;
+  }
+}
+</style>

frontend/composables/useDashboardKeyProvider.ts

@@ -34,7 +34,7 @@ export function useDashboardKeyProvider (type: DashboardType = 'validator', mock
       }
       // only use the dashboard cookie key as default if you are not logged in and it's not private
       if (!isLoggedIn.value && isPublicKey(dashboardKeyCookie.value)) {
-        setDashboardKey(dashboardKeyCookie.value)
+        setDashboardKey(`${dashboardKeyCookie.value}`)
       }
       return
     }

frontend/i18n/en.json

@@ -280,6 +280,10 @@
         }
       }
     },
+    "shared_modal": {
+      "text": "Create your own dashboard to get the most out of beaconcha.in",
+      "get_started": "Get started"
+    },
     "group": {
       "selection": {
         "all": "All groups",

frontend/pages/dashboard/[[id]]/index.vue

@@ -92,6 +92,7 @@ watch([dashboardKey, isLoggedIn], ([newKey, newLoggedIn], [oldKey]) => {
         <DashboardHeader :dashboard-title="overview?.name" @show-creation="showDashboardCreationDialog()" />
         <DashboardValidatorOverview class="overview" />
       </template>
+      <DashboardSharedDashboardModal />
       <DashboardControls />
       <div>
         <DashboardValidatorSlotViz />