Dashboard: rewrite useDashboardSave to not use useEffect (#65602)

rewrite useDashboardSave to not use useEffect
This commit is contained in:
Ashley Harrison
2023-04-11 09:10:32 +01:00
committed by GitHub
parent 1d0e74f998
commit 2e2c989530

View File

@@ -1,5 +1,4 @@
import { useEffect } from 'react'; import { useAsyncFn } from 'react-use';
import useAsyncFn from 'react-use/lib/useAsyncFn';
import { locationUtil } from '@grafana/data'; import { locationUtil } from '@grafana/data';
import { locationService, reportInteraction } from '@grafana/runtime'; import { locationService, reportInteraction } from '@grafana/runtime';
@@ -27,54 +26,55 @@ const saveDashboard = async (saveModel: any, options: SaveDashboardOptions, dash
}; };
export const useDashboardSave = (dashboard: DashboardModel, isCopy = false) => { export const useDashboardSave = (dashboard: DashboardModel, isCopy = false) => {
const [state, onDashboardSave] = useAsyncFn(
async (clone: any, options: SaveDashboardOptions, dashboard: DashboardModel) =>
await saveDashboard(clone, options, dashboard),
[]
);
const dispatch = useDispatch(); const dispatch = useDispatch();
const notifyApp = useAppNotification(); const notifyApp = useAppNotification();
useEffect(() => { const [state, onDashboardSave] = useAsyncFn(
if (state.error && !state.loading) { async (clone: any, options: SaveDashboardOptions, dashboard: DashboardModel) => {
notifyApp.error(state.error.message ?? 'Error saving dashboard'); try {
} const result = await saveDashboard(clone, options, dashboard);
if (state.value) { dashboard.version = result.version;
dashboard.version = state.value.version; dashboard.clearUnsavedChanges();
dashboard.clearUnsavedChanges();
// important that these happen before location redirect below // important that these happen before location redirect below
appEvents.publish(new DashboardSavedEvent()); appEvents.publish(new DashboardSavedEvent());
notifyApp.success('Dashboard saved'); notifyApp.success('Dashboard saved');
if (isCopy) { if (isCopy) {
reportInteraction('grafana_dashboard_copied', { reportInteraction('grafana_dashboard_copied', {
name: dashboard.title, name: dashboard.title,
url: state.value.url, url: result.url,
}); });
} else { } else {
reportInteraction(`grafana_dashboard_${dashboard.id ? 'saved' : 'created'}`, { reportInteraction(`grafana_dashboard_${dashboard.id ? 'saved' : 'created'}`, {
name: dashboard.title, name: dashboard.title,
url: state.value.url, url: result.url,
}); });
} }
const currentPath = locationService.getLocation().pathname; const currentPath = locationService.getLocation().pathname;
const newUrl = locationUtil.stripBaseFromUrl(state.value.url); const newUrl = locationUtil.stripBaseFromUrl(result.url);
if (newUrl !== currentPath) { if (newUrl !== currentPath) {
setTimeout(() => locationService.replace(newUrl)); setTimeout(() => locationService.replace(newUrl));
}
if (dashboard.meta.isStarred) {
dispatch(
updateDashboardName({
id: dashboard.uid,
title: dashboard.title,
url: newUrl,
})
);
}
return result;
} catch (error) {
if (error instanceof Error) {
notifyApp.error(error.message ?? 'Error saving dashboard');
}
throw error;
} }
if (dashboard.meta.isStarred) { },
dispatch( [dispatch, notifyApp]
updateDashboardName({ );
id: dashboard.uid,
title: dashboard.title,
url: newUrl,
})
);
}
}
}, [dashboard, isCopy, state, notifyApp, dispatch]);
return { state, onDashboardSave }; return { state, onDashboardSave };
}; };