fix: Fix auto refresh toggle (#20174)

* Clean up cause of error Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. * Fix refresh logic * Consolidate refresh
PostHog · Feb 8, 2024 · 438d31c · 438d31c
1 parent 86ba2ca
commit 438d31c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 22 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx
@@ -26,6 +26,7 @@ export function LemonRadio<T extends React.Key>({
             {options.map((option) => {
                 const content = (
                     <label
+                        key={option.value}
                         className={clsx(
                             'flex items-center space-x-2',
                             option.disabledReason ? 'text-muted cursor-not-allowed' : 'cursor-pointer'
@@ -35,7 +36,7 @@ export function LemonRadio<T extends React.Key>({
                             type="radio"
                             checked={option.value === value}
                             value={option.value}
-                            onClick={() => {
+                            onChange={() => {
                                 if (!option.disabledReason) {
                                     onChange(option.value)
                                 }
@@ -46,13 +47,14 @@ export function LemonRadio<T extends React.Key>({
                     </label>
                 )
 
-                return option.disabledReason ? (
-                    <Tooltip trigger="hover" key={option.value} title={option.disabledReason}>
-                        {content}
-                    </Tooltip>
-                ) : (
-                    content
-                )
+                if (option.disabledReason) {
+                    return (
+                        <Tooltip trigger="hover" key={option.value} title={option.disabledReason}>
+                            {content}
+                        </Tooltip>
+                    )
+                }
+                return content
             })}
         </div>
     )

diff --git a/frontend/src/scenes/dashboard/DashboardItems.tsx b/frontend/src/scenes/dashboard/DashboardItems.tsx
@@ -138,7 +138,7 @@ export function DashboardItems(): JSX.Element {
                                 highlighted={highlightedInsightId && insight.short_id === highlightedInsightId}
                                 updateColor={(color) => updateTileColor(tile.id, color)}
                                 ribbonColor={tile.color}
-                                refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh_manual' })}
+                                refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh' })}
                                 rename={() => renameInsight(insight)}
                                 duplicate={() => duplicateInsight(insight)}
                                 showDetailsControls={placement != DashboardPlacement.Export}

diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
@@ -14,11 +14,14 @@ export const LastRefreshText = (): JSX.Element => {
     return <span>Last updated {lastRefreshed ? dayjs(lastRefreshed).fromNow() : 'a while ago'}</span>
 }
 
-// in seconds
+const refreshIntervalSeconds = [1800, 3600]
+if (process.env.NODE_ENV === 'development') {
+    refreshIntervalSeconds.push(10)
+}
 const intervalOptions = [
-    ...Array.from([1800, 3600], (v) => ({
-        label: humanFriendlyDuration(v),
-        value: v,
+    ...Array.from(refreshIntervalSeconds, (value) => ({
+        label: humanFriendlyDuration(value),
+        value: value,
     })),
 ]
 
@@ -61,7 +64,7 @@ export function DashboardReloadAction(): JSX.Element {
                                     id="auto-refresh-picker"
                                 >
                                     <Tooltip
-                                        title="Auto-refresh will only work while this tab is open"
+                                        title="Auto refresh will only work while this tab is open"
                                         placement="topRight"
                                     >
                                         <div>

diff --git a/frontend/src/scenes/dashboard/dashboardLogic.test.ts b/frontend/src/scenes/dashboard/dashboardLogic.test.ts
@@ -579,7 +579,7 @@ describe('dashboardLogic', () => {
                 await expectLogic(logic, () => {
                     logic.actions.refreshAllDashboardItems({
                         tiles: [dashboards['5'].tiles[0]],
-                        action: 'refresh_manual',
+                        action: 'refresh',
                     })
                 })
                     .toFinishAllListeners()

diff --git a/frontend/src/scenes/dashboard/dashboardLogic.tsx b/frontend/src/scenes/dashboard/dashboardLogic.tsx
@@ -912,7 +912,7 @@ export const dashboardLogic = kea<dashboardLogicType>([
         refreshAllDashboardItemsManual: () => {
             // reset auto refresh interval
             actions.resetInterval()
-            actions.refreshAllDashboardItems({ action: 'refresh_manual' })
+            actions.refreshAllDashboardItems({ action: 'refresh' })
         },
         refreshAllDashboardItems: async ({ tiles, action, initialLoad, dashboardQueryId = uuid() }, breakpoint) => {
             if (!props.id) {
@@ -949,9 +949,7 @@ export const dashboardLogic = kea<dashboardLogicType>([
             let refreshesFinished = 0
             let totalResponseBytes = 0
 
-            const hardRefreshWithoutCache = ['refresh_manual', 'refresh_above_threshold', 'load_missing'].includes(
-                action
-            )
+            const hardRefreshWithoutCache = ['refresh', 'load_missing'].includes(action)
 
             // array of functions that reload each item
             const fetchItemFunctions = insights.map((insight) => async () => {
@@ -1076,8 +1074,15 @@ export const dashboardLogic = kea<dashboardLogicType>([
             }
 
             if (values.autoRefresh.enabled) {
+                // Refresh right now after enabling if we haven't refreshed recently
+                if (
+                    values.lastRefreshed &&
+                    values.lastRefreshed.isBefore(now().subtract(values.autoRefresh.interval, 'seconds'))
+                ) {
+                    actions.refreshAllDashboardItems({ action: 'refresh' })
+                }
                 cache.autoRefreshInterval = window.setInterval(() => {
-                    actions.refreshAllDashboardItems({ action: 'refresh_automatic' })
+                    actions.refreshAllDashboardItems({ action: 'refresh' })
                 }, values.autoRefresh.interval * 1000)
             }
         },
@@ -1097,7 +1102,7 @@ export const dashboardLogic = kea<dashboardLogicType>([
                 values.lastRefreshed.isBefore(now().subtract(AUTO_REFRESH_DASHBOARD_THRESHOLD_HOURS, 'hours')) &&
                 !process.env.STORYBOOK // allow mocking of date in storybook without triggering refresh
             ) {
-                actions.refreshAllDashboardItems({ action: 'refresh_above_threshold', initialLoad, dashboardQueryId })
+                actions.refreshAllDashboardItems({ action: 'refresh', initialLoad, dashboardQueryId })
                 allLoaded = false
             } else {
                 const tilesWithNoResults = values.tiles?.filter((t) => !!t.insight && !t.insight.result) || []

diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx
@@ -180,7 +180,7 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                                             toggleQueryEditorPanel()
                                         }}
                                         fullWidth
-                                        label="View Source"
+                                        label="View source"
                                     />
                                     {hogQL && (
                                         <>