Feat: Open dashboards in edit mode (#5628)

packages/frontend-2/pages/workspaces/[slug]/dashboards/[id].vue

@@ -27,6 +27,9 @@
     </Portal>
     <Portal to="primary-actions">
       <div class="flex items-center gap-2">
+        <FormButton v-if="canEdit" size="sm" @click="editMode = !editMode">
+          {{ editModeButtonText }}
+        </FormButton>
         <DashboardsShare
           v-if="canRead && !hasDashboardToken"
           :id="dashboard?.id"
@@ -46,6 +49,7 @@
     </Portal>
     <div class="w-screen h-[calc(100vh-3rem)]">
       <iframe
+        :key="`dashboard-${id}-${editMode ? 'edit' : 'view'}`"
         :src="dashboardUrl"
         class="w-full h-full border-0"
         frameborder="0"
@@ -111,6 +115,11 @@ const {
 const { isLoggedIn } = useActiveUser()
 
 const editDialogOpen = ref(false)
+const editMode = ref(false)
+
+const editModeButtonText = computed(() => {
+  return editMode.value ? 'Exit edit mode' : 'Edit'
+})
 
 const hasDashboardToken = computed(() => !!dashboardToken.value)
 const canEdit = computed(
@@ -123,7 +132,9 @@ const workspace = computed(() => result.value?.dashboard?.workspace)
 const dashboard = computed(() => result.value?.dashboard)
 const dashboardUrl = computed(
   () =>
-    `${dashboardsOrigin}/${dashboardToken.value ? 'view' : 'dashboards'}/${id}?token=${
+    `${dashboardsOrigin}/${
+      dashboardToken.value ? 'view' : editMode.value ? 'dashboards' : 'view'
+    }/${id}?token=${
       dashboardToken.value || effectiveAuthToken.value
     }&isEmbed=true&theme=${isDarkTheme.value ? 'dark' : 'light'}`
 )

packages/frontend-2/plugins/intercom.client.ts

@@ -61,13 +61,14 @@ export const useIntercom = () => {
     // Hide default launcher on viewer routes (/models/)
     const isViewerRoute = route.path.includes('/models/')
     const isPresentationRoute = route.path.includes('/presentations/')
+    const isDashboardRoute = route.path.includes('/dashboards/')
 
     Intercom({
       /* eslint-disable camelcase */
       app_id: intercomAppId,
       user_id: user.value.id || '',
       created_at: Math.floor(new Date(user.value.createdAt || '').getTime() / 1000),
-      hide_default_launcher: isViewerRoute || isPresentationRoute,
+      hide_default_launcher: isViewerRoute || isPresentationRoute || isDashboardRoute,
       /* eslint-enable camelcase */
       name: user.value.name || '',
       email: user.value.email || ''
@@ -141,10 +142,11 @@ export const useIntercom = () => {
 
     const isViewerRoute = route.path.includes('/models/')
     const isPresentationRoute = route.path.includes('/presentations/')
+    const isDashboardRoute = route.path.includes('/dashboards/')
 
     update({
       /* eslint-disable camelcase */
-      hide_default_launcher: isViewerRoute || isPresentationRoute
+      hide_default_launcher: isViewerRoute || isPresentationRoute || isDashboardRoute
       /* eslint-enable camelcase */
     })
   }