From 43ea5499fb7d0121393c0f9ac20f99494c0b9ad2 Mon Sep 17 00:00:00 2001
From: Julian Bez <julian@posthog.com>
Date: Wed, 7 Feb 2024 11:15:54 +0000
Subject: [PATCH] feat: Improve figuring out dashboard last refresh (#20163)

---
 frontend/src/scenes/dashboard/DashboardReloadAction.tsx | 9 +++------
 frontend/src/scenes/dashboard/dashboardLogic.tsx        | 8 ++++----
 frontend/src/scenes/insights/utils.tsx                  | 4 ++++
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
index 48881d7ed25d9..bda68b97bc5ad 100644
--- a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
+++ b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
@@ -11,12 +11,7 @@ import { DASHBOARD_MIN_REFRESH_INTERVAL_MINUTES, dashboardLogic } from 'scenes/d
 
 export const LastRefreshText = (): JSX.Element => {
     const { lastRefreshed } = useValues(dashboardLogic)
-    return (
-        <span>
-            Last updated{' '}
-            <span className="font-medium">{lastRefreshed ? dayjs(lastRefreshed).fromNow() : 'a while ago'}</span>
-        </span>
-    )
+    return <span>Last updated {lastRefreshed ? dayjs(lastRefreshed).fromNow() : 'a while ago'}</span>
 }
 
 // in seconds
@@ -49,6 +44,8 @@ export function DashboardReloadAction(): JSX.Element {
                 disabledReason={
                     blockRefresh
                         ? `Dashboards can only be refreshed every ${DASHBOARD_MIN_REFRESH_INTERVAL_MINUTES} minutes.`
+                        : itemsLoading
+                        ? 'Refreshing...'
                         : ''
                 }
                 sideAction={{
diff --git a/frontend/src/scenes/dashboard/dashboardLogic.tsx b/frontend/src/scenes/dashboard/dashboardLogic.tsx
index edf6a46a416e8..821def0390e35 100644
--- a/frontend/src/scenes/dashboard/dashboardLogic.tsx
+++ b/frontend/src/scenes/dashboard/dashboardLogic.tsx
@@ -53,7 +53,7 @@ import {
     TileLayout,
 } from '~/types'
 
-import { getResponseBytes, sortDates } from '../insights/utils'
+import { getResponseBytes, sortDates, sortDayJsDates } from '../insights/utils'
 import { teamLogic } from '../teamLogic'
 import type { dashboardLogicType } from './dashboardLogicType'
 
@@ -670,9 +670,9 @@ export const dashboardLogic = kea<dashboardLogicType>([
                     return null
                 }
 
-                const oldest = sortDates(insightTiles.map((i) => i.last_refresh))
-                const candidateShortest = oldest.length > 0 ? dayjs(oldest[0]) : null
-                return candidateShortest?.isValid() ? candidateShortest : null
+                const validDates = insightTiles.map((i) => dayjs(i.last_refresh)).filter((date) => date.isValid())
+                const oldest = sortDayJsDates(validDates)
+                return oldest.length > 0 ? oldest[0] : null
             },
         ],
         blockRefresh: [
diff --git a/frontend/src/scenes/insights/utils.tsx b/frontend/src/scenes/insights/utils.tsx
index 73e8717be04f2..5954fec77238a 100644
--- a/frontend/src/scenes/insights/utils.tsx
+++ b/frontend/src/scenes/insights/utils.tsx
@@ -298,6 +298,10 @@ export function sortDates(dates: Array<string | null>): Array<string | null> {
     return dates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
 }
 
+export function sortDayJsDates(dates: Array<dayjs.Dayjs>): Array<dayjs.Dayjs> {
+    return dates.sort((a, b) => (a.isAfter(b) ? 1 : -1))
+}
+
 // Gets content-length header from a fetch Response
 export function getResponseBytes(apiResponse: Response): number {
     return parseInt(apiResponse.headers.get('Content-Length') ?? '0')