Dashboard Improvements I

frontend/src/global.scss

@@ -249,21 +249,35 @@ code.code {
     color: $text_default;
     font-family: inherit;
     background-color: $bg_light;
-}
+    border: 1px solid $border;
+    @extend .text-default;
+    color: $text_default;
 
-.Toastify__toast-body {
-    @extend .l3;
-    color: $success;
-    p {
-        @extend .text-default;
-        color: $text_default;
+    h1 {
+        font-size: 1.14rem;
+        font-weight: bold;
     }
 }
 
 .Toastify__progress-bar--default {
     background: $success;
 }
 
+.Toastify__toast--success {
+    h1 {
+        color: $success;
+    }
+}
+
+.Toastify__toast--info {
+    h1 {
+        color: $primary_alt;
+    }
+    &.accent-border {
+        border-color: $primary_alt;
+    }
+}
+
 .Toastify__toast--error {
     h1 {
         color: $danger;
@@ -350,6 +364,15 @@ code.code {
     margin-left: 5px;
 }
 
+.btn-lg-2x {
+    font-size: 1.5rem !important;
+    line-height: 1 !important;
+    svg {
+        width: 1.5rem !important;
+        height: 1.5rem !important;
+    }
+}
+
 // Badges styles
 .badge {
     border-radius: 50%;

frontend/src/lib/utils/eventUsageLogic.ts

@@ -6,6 +6,7 @@ import { userLogic } from 'scenes/userLogic'
 import { eventUsageLogicType } from './eventUsageLogicType'
 import { AnnotationType, FilterType, DashboardType, PersonType } from '~/types'
 import { ViewType } from 'scenes/insights/insightLogic'
+import { Moment } from 'moment'
 
 const keyMappingKeys = Object.keys(keyMapping.event)
 
@@ -14,7 +15,6 @@ export const eventUsageLogic = kea<eventUsageLogicType<AnnotationType, FilterTyp
         reportAnnotationViewed: (annotations: AnnotationType[] | null) => ({ annotations }),
         reportPersonDetailViewed: (person: PersonType) => ({ person }),
         reportInsightViewed: (filters: Partial<FilterType>, isFirstLoad: boolean) => ({ filters, isFirstLoad }),
-        reportDashboardViewed: (dashboard: DashboardType, hasShareToken: boolean) => ({ dashboard, hasShareToken }),
         reportBookmarkletDragged: true,
         reportIngestionBookmarkletCollapsible: (activePanels: string[]) => ({ activePanels }),
         reportProjectCreationSubmitted: (projectCount: number, nameLength: number) => ({ projectCount, nameLength }),
@@ -47,6 +47,30 @@ export const eventUsageLogic = kea<eventUsageLogicType<AnnotationType, FilterTyp
             oldPropertyType?: string,
             newPropertyType?: string
         ) => ({ action, totalProperties, oldPropertyType, newPropertyType }),
+        reportDashboardViewed: (dashboard: DashboardType, hasShareToken: boolean) => ({ dashboard, hasShareToken }),
+        reportDashboardEditModeToggled: (
+            isOnEditMode: boolean,
+            source: 'long_press' | 'more_dropdown' | 'dashboard_header' | 'hotkey' | 'rename_input' | 'toast' | null
+        ) => ({ isOnEditMode, source }),
+        reportDashboardRefreshed: (lastRefreshed?: string | Moment | null) => ({ lastRefreshed }),
+        reportDashboardDateRangeChanged: (dateFrom?: string | Moment, dateTo?: string | Moment | null) => ({
+            dateFrom,
+            dateTo,
+        }),
+        reportDashboardPinToggled: (pinned: boolean, source: 'more_dropdown' | 'main_nav' | 'dashboards_list') => ({
+            pinned,
+            source,
+        }),
+        reportDashboardPresentationModeToggled: (
+            isPresentationMode: boolean,
+            source: 'more_dropdown' | 'hotkey' | 'dashboard_header' | 'browser' | null
+        ) => ({
+            isPresentationMode,
+            source,
+        }),
+        reportDashboardDropdownNavigation: true,
+        reportDashboardRenamed: (originalLength: number, newLength: number) => ({ originalLength, newLength }),
+        reportDashboardShareToggled: (isShared: boolean) => ({ isShared }),
     },
     listeners: {
         reportAnnotationViewed: async ({ annotations }, breakpoint) => {
@@ -238,5 +262,34 @@ export const eventUsageLogic = kea<eventUsageLogicType<AnnotationType, FilterTyp
                 total_properties: totalProperties,
             })
         },
+        reportDashboardEditModeToggled: async ({ isOnEditMode, source }) => {
+            posthog.capture(`dashboard edit mode toggled`, { is_on_edit_mode: isOnEditMode, source })
+        },
+        reportDashboardRefreshed: async ({ lastRefreshed }) => {
+            posthog.capture(`dashboard refreshed`, { last_refreshed: lastRefreshed?.toString() })
+        },
+        reportDashboardDateRangeChanged: async ({ dateFrom, dateTo }) => {
+            posthog.capture(`dashboard date range changed`, {
+                date_from: dateFrom?.toString(),
+                date_to: dateTo?.toString(),
+            })
+        },
+        reportDashboardPinToggled: async ({ pinned, source }) => {
+            posthog.capture(`dashboard pin toggled`, { pinned: pinned, source })
+        },
+        reportDashboardPresentationModeToggled: async ({ isPresentationMode, source }) => {
+            posthog.capture(`dashboard presentation mode toggled`, { is_presentation_mode: isPresentationMode, source })
+        },
+        reportDashboardDropdownNavigation: async () => {
+            /* Triggered when a user navigates using the dropdown in the header.
+             */
+            posthog.capture(`dashboard dropdown navigated`)
+        },
+        reportDashboardRenamed: async ({ originalLength, newLength }) => {
+            posthog.capture(`dashboard renamed`, { original_length: originalLength, new_length: newLength })
+        },
+        reportDashboardShareToggled: async ({ isShared }) => {
+            posthog.capture(`dashboard share toggled`, { is_shared: isShared })
+        },
     },
 })

frontend/src/models/dashboardsModel.js

@@ -2,6 +2,7 @@ import { kea } from 'kea'
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { delay, idToKey } from 'lib/utils'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import React from 'react'
 import { toast } from 'react-toastify'
 
@@ -12,8 +13,10 @@ export const dashboardsModel = kea({
         // this is moved out of dashboardLogic, so that you can click "undo" on a item move when already
         // on another dashboard - both dashboards can listen to and share this event, even if one is not yet mounted
         updateDashboardItem: (item) => ({ item }),
+        pinDashboard: (id, source = null) => ({ id, source }),
+        unpinDashboard: (id, source = null) => ({ id, source }),
     }),
-    loaders: () => ({
+    loaders: ({ values }) => ({
         rawDashboards: [
             {},
             {
@@ -41,13 +44,26 @@ export const dashboardsModel = kea({
                 }
                 return result
             },
-            renameDashboard: async ({ id, name }) => await api.update(`api/dashboard/${id}`, { name }),
+            renameDashboard: async ({ id, name }, breakpoint) => {
+                await breakpoint(700)
+                const response = await api.update(`api/dashboard/${id}`, { name })
+                eventUsageLogic.actions.reportDashboardRenamed(values.rawDashboards[id].name.length, name.length)
+                return response
+            },
             setIsSharedDashboard: async ({ id, isShared }) =>
                 await api.update(`api/dashboard/${id}`, { is_shared: isShared }),
             deleteDashboard: async ({ id }) => await api.update(`api/dashboard/${id}`, { deleted: true }),
             restoreDashboard: async ({ id }) => await api.update(`api/dashboard/${id}`, { deleted: false }),
-            pinDashboard: async (id) => await api.update(`api/dashboard/${id}`, { pinned: true }),
-            unpinDashboard: async (id) => await api.update(`api/dashboard/${id}`, { pinned: false }),
+            pinDashboard: async ({ id, source }) => {
+                const response = await api.update(`api/dashboard/${id}`, { pinned: true })
+                eventUsageLogic.actions.reportDashboardPinToggled(true, source)
+                return response
+            },
+            unpinDashboard: async ({ id, source }) => {
+                const response = await api.update(`api/dashboard/${id}`, { pinned: false })
+                eventUsageLogic.actions.reportDashboardPinToggled(false, source)
+                return response
+            },
         },
     }),
 

frontend/src/scenes/dashboard/Dashboard.scss

@@ -0,0 +1,111 @@
+@import '~/vars';
+
+$dashboard-title-size: 32px;
+
+.dashboard {
+    margin-top: $default_spacing * 2;
+
+    .dashboard-items-actions {
+        margin-bottom: $default_spacing;
+        display: flex;
+
+        .left-item {
+            flex-grow: 1;
+        }
+
+        .ant-btn {
+            padding-left: 4px !important;
+        }
+    }
+}
+
+.dashboard-header {
+    display: flex;
+    justify-content: space-between;
+
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+
+    width: 100%;
+
+    &.full-screen {
+        margin-top: 1rem;
+    }
+
+    .dashboard-select {
+        flex: 1;
+        @extend .text-ellipsis;
+        padding-right: $default_spacing * 2;
+
+        .ant-select-single {
+            max-width: 100%;
+            line-height: $dashboard-title-size;
+
+            .ant-select-selector {
+                padding-left: 0;
+                padding-right: 8px;
+                line-height: $dashboard-title-size;
+                height: $dashboard-title-size;
+
+                .ant-select-selection-item {
+                    font-size: $dashboard-title-size;
+                    line-height: $dashboard-title-size;
+                    width: 100%;
+                    height: 35px;
+                    display: block;
+
+                    .anticon-share-alt {
+                        font-size: $dashboard-title-size * 0.65;
+                        color: $success;
+                        margin-left: 6px !important;
+                        margin-right: 4px;
+                        margin-top: $default_spacing / 2;
+                    }
+                }
+            }
+            &.ant-select-open {
+                .ant-select-arrow {
+                    color: rgba($text_default, 0.4);
+                }
+            }
+            .ant-select-arrow {
+                color: $text_default;
+                font-size: 0.5 * $dashboard-title-size;
+            }
+        }
+    }
+    .dashboard-meta {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        .ant-btn {
+            .anticon {
+                vertical-align: baseline;
+            }
+            margin-left: 10px;
+            &.button-box {
+                padding: 4px 8px;
+            }
+            @media (max-width: 750px) {
+                &.button-box-when-small {
+                    padding: 4px 8px;
+                }
+            }
+        }
+    }
+
+    .dashboard-header-created-by {
+        margin-top: $default_spacing / 2;
+        color: $text_muted;
+    }
+
+    @media (max-width: 750px) {
+        .hide-when-small {
+            display: none;
+        }
+
+        .dashboard-header-created-by {
+            display: none; /* header is already too crowded on mobile */
+        }
+    }
+}