fix(dashboards): Move router calls after clearing editing state (#66004)

static/app/views/dashboards/detail.tsx

@@ -535,23 +535,25 @@ class DashboardDetail extends Component<Props, State> {
       this.handleAddMetricWidget();
       return;
     }
-    this.setState({
-      modifiedDashboard: cloneDashboard(dashboard),
-    });
-
-    if (dashboardId) {
-      router.push(
-        normalizeUrl({
-          pathname: `/organizations/${organization.slug}/dashboard/${dashboardId}/widget/new/`,
-          query: {
-            ...location.query,
-            source: DashboardWidgetSource.DASHBOARDS,
-            dataset,
-          },
-        })
-      );
-      return;
-    }
+    this.setState(
+      {
+        modifiedDashboard: cloneDashboard(dashboard),
+      },
+      () => {
+        if (dashboardId) {
+          router.push(
+            normalizeUrl({
+              pathname: `/organizations/${organization.slug}/dashboard/${dashboardId}/widget/new/`,
+              query: {
+                ...location.query,
+                source: DashboardWidgetSource.DASHBOARDS,
+                dataset,
+              },
+            })
+          );
+        }
+      }
+    );
   };
 
   onCommit = () => {
@@ -584,18 +586,21 @@ class DashboardDetail extends Component<Props, State> {
             (newDashboard: DashboardDetails) => {
               addSuccessMessage(t('Dashboard created'));
               trackAnalytics('dashboards2.create.complete', {organization});
-              this.setState({
-                dashboardState: DashboardState.VIEW,
-              });
-
-              // redirect to new dashboard
-              browserHistory.replace(
-                normalizeUrl({
-                  pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
-                  query: {
-                    query: omit(location.query, Object.values(DashboardFilterKeys)),
-                  },
-                })
+              this.setState(
+                {
+                  dashboardState: DashboardState.VIEW,
+                },
+                () => {
+                  // redirect to new dashboard
+                  browserHistory.replace(
+                    normalizeUrl({
+                      pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
+                      query: {
+                        query: omit(location.query, Object.values(DashboardFilterKeys)),
+                      },
+                    })
+                  );
+                }
               );
             },
             () => undefined
@@ -620,22 +625,24 @@ class DashboardDetail extends Component<Props, State> {
               }
               addSuccessMessage(t('Dashboard updated'));
               trackAnalytics('dashboards2.edit.complete', {organization});
-              this.setState({
-                dashboardState: DashboardState.VIEW,
-                modifiedDashboard: null,
-              });
-
-              if (dashboard && newDashboard.id !== dashboard.id) {
-                browserHistory.replace(
-                  normalizeUrl({
-                    pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
-                    query: {
-                      ...location.query,
-                    },
-                  })
-                );
-                return;
-              }
+              this.setState(
+                {
+                  dashboardState: DashboardState.VIEW,
+                  modifiedDashboard: null,
+                },
+                () => {
+                  if (dashboard && newDashboard.id !== dashboard.id) {
+                    browserHistory.replace(
+                      normalizeUrl({
+                        pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
+                        query: {
+                          ...location.query,
+                        },
+                      })
+                    );
+                  }
+                }
+              );
             },
             // `updateDashboard` does its own error handling
             () => undefined
@@ -938,22 +945,35 @@ class DashboardDetail extends Component<Props, State> {
                                       newModifiedDashboard
                                     ).then(
                                       (newDashboard: DashboardDetails) => {
+                                        addSuccessMessage(t('Dashboard filters updated'));
+
+                                        const navigateToDashboard = () => {
+                                          browserHistory.replace(
+                                            normalizeUrl({
+                                              pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
+                                              query: omit(
+                                                location.query,
+                                                Object.values(DashboardFilterKeys)
+                                              ),
+                                            })
+                                          );
+                                        };
+
                                         if (onDashboardUpdate) {
                                           onDashboardUpdate(newDashboard);
-                                          this.setState({
-                                            modifiedDashboard: null,
-                                          });
+                                          this.setState(
+                                            {
+                                              modifiedDashboard: null,
+                                            },
+                                            () => {
+                                              // Wait for modifiedDashboard state to update before navigating
+                                              navigateToDashboard();
+                                            }
+                                          );
+                                          return;
                                         }
-                                        addSuccessMessage(t('Dashboard filters updated'));
-                                        browserHistory.replace(
-                                          normalizeUrl({
-                                            pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
-                                            query: omit(
-                                              location.query,
-                                              Object.values(DashboardFilterKeys)
-                                            ),
-                                          })
-                                        );
+
+                                        navigateToDashboard();
                                       },
                                       // `updateDashboard` does its own error handling
                                       () => undefined

static/app/views/dashboards/widgetBuilder/widgetBuilder.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import type {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import cloneDeep from 'lodash/cloneDeep';
@@ -216,7 +216,7 @@ function WidgetBuilder({
 
   const api = useApi();
 
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isSubmittingRef = useRef(false);
 
   const [datasetConfig, setDataSetConfig] = useState<ReturnType<typeof getDatasetConfig>>(
     getDatasetConfig(DATA_SET_TO_WIDGET_TYPE[dataSet])
@@ -355,14 +355,14 @@ function WidgetBuilder({
 
   useEffect(() => {
     const onUnload = () => {
-      if (!isSubmitting && state.userHasModified) {
+      if (!isSubmittingRef.current && state.userHasModified) {
         return t('You have unsaved changes, are you sure you want to leave?');
       }
       return undefined;
     };
 
     router.setRouteLeaveHook(route, onUnload);
-  }, [isSubmitting, state.userHasModified, route, router]);
+  }, [state.userHasModified, route, router]);
 
   const widgetType = DATA_SET_TO_WIDGET_TYPE[state.dataSet];
 
@@ -773,7 +773,7 @@ function WidgetBuilder({
       return;
     }
 
-    setIsSubmitting(true);
+    isSubmittingRef.current = true;
     let nextWidgetList = [...dashboard.widgets];
     const updateWidgetIndex = getUpdateWidgetIndex();
     nextWidgetList.splice(updateWidgetIndex, 1);
@@ -813,7 +813,7 @@ function WidgetBuilder({
       });
     }
 
-    setIsSubmitting(true);
+    isSubmittingRef.current = true;
     if (notDashboardsOrigin) {
       submitFromSelectedDashboard(widgetData);
       return;