feat(experiments): better result refresh buttons

frontend/src/scenes/experiments/ExperimentView/Info.tsx

@@ -1,9 +1,10 @@
-import { IconWarning } from '@posthog/icons'
+import { IconRefresh, IconWarning } from '@posthog/icons'
 import { LemonButton, Link, ProfilePicture, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { EditableField } from 'lib/components/EditableField/EditableField'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 
@@ -15,8 +16,9 @@ import { StatusTag } from './components'
 import { ExperimentDates } from './ExperimentDates'
 
 export function Info(): JSX.Element {
-    const { experiment, featureFlags } = useValues(experimentLogic)
-    const { updateExperiment, setExperimentStatsVersion } = useActions(experimentLogic)
+    const { experiment, featureFlags, metricResults } = useValues(experimentLogic)
+    const { updateExperiment, setExperimentStatsVersion, loadMetricResults, loadSecondaryMetricResults } =
+        useActions(experimentLogic)
 
     const { created_by } = experiment
 
@@ -26,6 +28,8 @@ export function Info(): JSX.Element {
 
     const currentStatsVersion = experiment.stats_config?.version || 1
 
+    const lastRefresh = metricResults?.[0]?.last_refresh
+
     return (
         <div>
             <div className="flex">
@@ -94,6 +98,37 @@ export function Info(): JSX.Element {
 
                 <div className="w-1/2 flex flex-col justify-end">
                     <div className="ml-auto inline-flex space-x-8">
+                        {lastRefresh && (
+                            <div className="block">
+                                <div className="text-xs font-semibold uppercase tracking-wide">Last refreshed</div>
+                                <div className="inline-flex space-x-2">
+                                    <span
+                                        className={`${
+                                            lastRefresh
+                                                ? dayjs().diff(dayjs(lastRefresh), 'hours') > 12
+                                                    ? 'text-danger'
+                                                    : dayjs().diff(dayjs(lastRefresh), 'hours') > 6
+                                                    ? 'text-warning'
+                                                    : ''
+                                                : ''
+                                        }`}
+                                    >
+                                        {lastRefresh ? dayjs(lastRefresh).fromNow() : 'a while ago'}
+                                    </span>
+                                    <LemonButton
+                                        type="secondary"
+                                        size="xsmall"
+                                        onClick={() => {
+                                            loadMetricResults(true)
+                                            loadSecondaryMetricResults(true)
+                                        }}
+                                        data-attr="refresh-experiment"
+                                        icon={<IconRefresh />}
+                                        tooltip="Refresh experiment results"
+                                    />
+                                </div>
+                            </div>
+                        )}
                         <ExperimentDates />
                         <div className="block">
                             <div className="text-xs font-semibold uppercase tracking-wide">Created by</div>

frontend/src/scenes/experiments/ExperimentView/components.tsx

@@ -1,4 +1,4 @@
-import { IconFlask, IconRefresh } from '@posthog/icons'
+import { IconFlask } from '@posthog/icons'
 import {
     LemonBanner,
     LemonButton,
@@ -263,8 +263,6 @@ export function PageHeaderCustom(): JSX.Element {
         launchExperiment,
         endExperiment,
         archiveExperiment,
-        loadMetricResults,
-        loadSecondaryMetricResults,
         createExposureCohort,
         openShipVariantModal,
         createExperimentDashboard,
@@ -317,16 +315,6 @@ export function PageHeaderCustom(): JSX.Element {
                                 />
                                 <LemonDivider vertical />
                             </>
-                            <LemonButton
-                                type="secondary"
-                                onClick={() => {
-                                    loadMetricResults(true)
-                                    loadSecondaryMetricResults(true)
-                                }}
-                                data-attr="refresh-experiment"
-                                icon={<IconRefresh />}
-                                tooltip="Refresh experiment results"
-                            />
                             <ResetButton experimentId={experiment.id} />
                             {!experiment.end_date && (
                                 <LemonButton