fix(dashboards): Move generated dashboards to bottom by default

frontend/src/lib/constants.tsx

@@ -240,3 +240,5 @@ export const SESSION_RECORDINGS_PLAYLIST_FREE_COUNT = 5
 
 // If _any_ item on a dashboard is older than this, dashboard is automatically reloaded
 export const AUTO_REFRESH_DASHBOARD_THRESHOLD_HOURS = 20
+
+export const GENERATED_DASHBOARD_PREFIX = 'Generated Dashboard'

frontend/src/models/dashboardsModel.test.ts

@@ -0,0 +1,133 @@
+import { initKeaTests } from '~/test/init'
+import { expectLogic } from 'kea-test-utils'
+import { DashboardBasicType } from '~/types'
+import { useMocks } from '~/mocks/jest'
+import { dashboardsModel, nameCompareFunction } from './dashboardsModel'
+import { DashboardPrivilegeLevel, DashboardRestrictionLevel } from 'lib/constants'
+
+const dashboards: Partial<DashboardBasicType>[] = [
+    {
+        id: 1,
+        name: 'Generated Dashboard: 123',
+    },
+    {
+        id: 2,
+        name: 'Generated Dashboard: 456',
+    },
+    {
+        id: 3,
+        name: 'Dashboard: 789',
+    },
+    {
+        id: 4,
+        name: 'Generated Dashboard: 101',
+    },
+    {
+        id: 5,
+        name: 'Dashboard: 112',
+    },
+    {
+        id: 6,
+        name: 'Dashboard: 131',
+    },
+    {
+        id: 7,
+    },
+    {
+        id: 8,
+        name: 'k',
+    },
+]
+
+const basicDashboard: DashboardBasicType = {
+    id: 1,
+    name: '',
+    description: 'This is not a generated dashboard',
+    pinned: false,
+    created_at: new Date().toISOString(),
+    created_by: null,
+    is_shared: false,
+    deleted: false,
+    creation_mode: 'default',
+    restriction_level: DashboardRestrictionLevel.EveryoneInProjectCanEdit,
+    effective_restriction_level: DashboardRestrictionLevel.EveryoneInProjectCanEdit,
+    effective_privilege_level: DashboardPrivilegeLevel.CanEdit,
+}
+
+describe('the dashboards model', () => {
+    let logic: ReturnType<typeof dashboardsModel.build>
+
+    beforeEach(async () => {
+        useMocks({
+            get: {
+                '/api/projects/:team_id/dashboards/': () => {
+                    return [
+                        200,
+                        {
+                            count: dashboards.length,
+                            results: dashboards,
+                            next: undefined,
+                        },
+                    ]
+                },
+            },
+        })
+
+        initKeaTests()
+        logic = dashboardsModel()
+        logic.mount()
+    })
+
+    describe('sorting dashboards', () => {
+        it('can sort dashboards correctly', async () => {
+            await expectLogic(logic, () => {
+                logic.actions.loadDashboards()
+            })
+                .toDispatchActions(['loadDashboardsSuccess'])
+                .toMatchValues({
+                    nameSortedDashboards: [
+                        {
+                            id: 5,
+                            name: 'Dashboard: 112',
+                        },
+                        {
+                            id: 6,
+                            name: 'Dashboard: 131',
+                        },
+                        {
+                            id: 3,
+                            name: 'Dashboard: 789',
+                        },
+                        {
+                            id: 8,
+                            name: 'k',
+                        },
+                        {
+                            id: 7,
+                        },
+                    ],
+                })
+        })
+
+        it('compares names correctly', async () => {
+            const generatedDashboardA = { ...basicDashboard, id: 1, name: 'Generated Dashboard: XYZ' }
+            const untitledDashboard = { ...basicDashboard, id: 2, name: 'Untitled' }
+            const randomDashboard = { ...basicDashboard, id: 3, name: 'Random' }
+            const randomDashboard2 = { ...basicDashboard, id: 3, name: 'Too Random' }
+            expect(nameCompareFunction(generatedDashboardA, untitledDashboard)).toEqual(-1)
+            expect(nameCompareFunction(untitledDashboard, generatedDashboardA)).toEqual(1)
+            expect(nameCompareFunction(generatedDashboardA, randomDashboard)).toEqual(-1)
+            expect(nameCompareFunction(randomDashboard, generatedDashboardA)).toEqual(1)
+            expect(nameCompareFunction(generatedDashboardA, randomDashboard2)).toEqual(-1)
+            expect(nameCompareFunction(randomDashboard2, generatedDashboardA)).toEqual(1)
+
+            expect(nameCompareFunction(untitledDashboard, randomDashboard)).toEqual(1)
+            expect(nameCompareFunction(randomDashboard, untitledDashboard)).toEqual(-1)
+            expect(nameCompareFunction(untitledDashboard, randomDashboard2)).toEqual(1)
+            expect(nameCompareFunction(randomDashboard2, untitledDashboard)).toEqual(-1)
+
+            expect(nameCompareFunction(randomDashboard2, randomDashboard)).toEqual(1)
+            expect(nameCompareFunction(randomDashboard, randomDashboard2)).toEqual(-1)
+        })
+    })
+})

frontend/src/models/dashboardsModel.tsx

@@ -9,6 +9,7 @@ import { urls } from 'scenes/urls'
 import { teamLogic } from 'scenes/teamLogic'
 import { lemonToast } from 'lib/lemon-ui/lemonToast'
 import { tagsModel } from '~/models/tagsModel'
+import { GENERATED_DASHBOARD_PREFIX } from 'lib/constants'
 
 export const dashboardsModel = kea<dashboardsModelType>({
     path: ['models', 'dashboardsModel'],
@@ -237,19 +238,17 @@ export const dashboardsModel = kea<dashboardsModelType>({
         nameSortedDashboards: [
             () => [selectors.rawDashboards],
             (rawDashboards) => {
-                return [...Object.values(rawDashboards)].sort((a, b) =>
-                    (a.name ?? 'Untitled').localeCompare(b.name ?? 'Untitled')
-                )
+                return [...Object.values(rawDashboards)]
+                    .filter((dashboard) => !(dashboard.name ?? 'Untitled').startsWith(GENERATED_DASHBOARD_PREFIX))
+                    .sort(nameCompareFunction)
             },
         ],
         /** Display dashboards are additionally sorted by pin status: pinned first. */
         pinSortedDashboards: [
             () => [selectors.nameSortedDashboards],
             (nameSortedDashboards) => {
                 return [...nameSortedDashboards].sort(
-                    (a, b) =>
-                        (Number(b.pinned) - Number(a.pinned)) * 10 +
-                        (a.name ?? 'Untitled').localeCompare(b.name ?? 'Untitled')
+                    (a, b) => (Number(b.pinned) - Number(a.pinned)) * 10 + nameCompareFunction(a, b)
                 )
             },
         ],
@@ -332,3 +331,11 @@ export const dashboardsModel = kea<dashboardsModelType>({
         },
     }),
 })
+
+export function nameCompareFunction(a: DashboardBasicType, b: DashboardBasicType): number {
+    // No matter where we're comparing dashboards, we want to sort generated dashboards last
+    const firstName = a.name ?? 'Untitled'
+    const secondName = b.name ?? 'Untitled'
+
+    return firstName.localeCompare(secondName)
+}

frontend/src/scenes/dashboard/Dashboard.tsx

@@ -15,11 +15,12 @@ import { SceneExport } from 'scenes/sceneTypes'
 import { InsightErrorState } from 'scenes/insights/EmptyStates'
 import { DashboardHeader } from './DashboardHeader'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { LemonDivider } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { groupsModel } from '../../models/groupsModel'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { urls } from 'scenes/urls'
 
 interface DashboardProps {
     id?: string
@@ -149,6 +150,11 @@ function DashboardScene(): JSX.Element {
                                 />
                             </div>
                         )}
+                        {placement === DashboardPlacement.FeatureFlag && dashboard?.id && (
+                            <LemonButton type="secondary" size="small" to={urls.dashboard(dashboard.id)}>
+                                Edit dashboard
+                            </LemonButton>
+                        )}
                         {placement !== DashboardPlacement.Export && (
                             <div className="flex space-x-4 dashoard-items-actions">
                                 <div

frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx

@@ -1,5 +1,5 @@
 import { useActions, useValues } from 'kea'
-import { dashboardsModel } from '~/models/dashboardsModel'
+import { dashboardsModel, nameCompareFunction } from '~/models/dashboardsModel'
 import { DashboardsFilters, dashboardsLogic } from 'scenes/dashboard/dashboards/dashboardsLogic'
 import { userLogic } from 'scenes/userLogic'
 import { teamLogic } from 'scenes/teamLogic'
@@ -109,7 +109,7 @@ export function DashboardsTable({
                     </div>
                 )
             },
-            sorter: (a, b) => (a.name ?? 'Untitled').localeCompare(b.name ?? 'Untitled'),
+            sorter: nameCompareFunction,
         },
         ...(hasAvailableFeature(AvailableFeature.TAGGING)
             ? [

playwright.config.ts

@@ -20,7 +20,7 @@ const config: PlaywrightTestConfig = {
          * For example in `await expect(locator).toHaveText();`
          */
         timeout: 5000,
-        toHaveScreenshot: { maxDiffPixelRatio: 0.005 },
+        toHaveScreenshot: { maxDiffPixelRatio: 0.008 },
     },
     /* Run tests in files in parallel */
     fullyParallel: true,