diff --git a/.changeset/famous-wasps-march.md b/.changeset/famous-wasps-march.md new file mode 100644 index 00000000..475d63ce --- /dev/null +++ b/.changeset/famous-wasps-march.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/app': patch +--- + +Show save badge in Dashboard page diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx index 11f80040..28cc1807 100644 --- a/packages/app/src/DashboardPage.tsx +++ b/packages/app/src/DashboardPage.tsx @@ -21,6 +21,7 @@ import { useQueryParam, withDefault, } from 'use-query-params'; +import { Badge, Transition } from '@mantine/core'; import api from './api'; import AppNav from './AppNav'; @@ -624,6 +625,18 @@ export default function DashboardPage() { }, [dashboardsData, dashboardId, isLocalDashboard, localDashboard]); // Update dashboard + const [isSavedNow, _setSavedNow] = useState(false); + const savedNowTimerRef = useRef(null); + const setSavedNow = useCallback(() => { + if (savedNowTimerRef.current != null) { + clearTimeout(savedNowTimerRef.current); + } + _setSavedNow(true); + savedNowTimerRef.current = setTimeout(() => { + _setSavedNow(false); + }, 1500); + }, []); + const setDashboard = useCallback( (newDashboard: Dashboard) => { if (isLocalDashboard) { @@ -639,17 +652,19 @@ export default function DashboardPage() { { onSuccess: () => { queryClient.invalidateQueries(['dashboards']); + setSavedNow(); }, }, ); } }, [ - dashboardId, - updateDashboard, - queryClient, isLocalDashboard, setLocalDashboard, + updateDashboard, + dashboardId, + queryClient, + setSavedNow, ], ); @@ -895,6 +910,13 @@ export default function DashboardPage() { }) } /> + + {style => ( + + Saved now + + )} + {isLocalDashboard && ( (Unsaved Dashboard) )}