fix(dashboards): Add All Metrics fails to add on first attempt (#106371)

The `navigate` call here was triggering a failed attempt to Add to
Dashboard for adding All Metrics. The reason why it does this is because
the route components are lazily loaded. When the first view occurs, it
lazily loads the component. When the navigate is called, it goes down a
different code path which seems to remount the component.

Getting rid of the navigate call fixes this issue and `location.state`
isn't preserved through navigations so there isn't a need to reset the
state.

Author: narsaynorath

static/app/views/dashboards/create.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {WidgetFixture} from 'sentry-fixture/widget';
 
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -128,10 +128,6 @@ describe('Dashboards > CreateDashboard', () => {
     // Wait for widgets to be rendered
     expect(await screen.findAllByTestId('sortable-widget')).toHaveLength(2);
 
-    // Verify location state is cleared after consuming widgets
-    await waitFor(() => {
-      expect(router.location.state).toEqual({});
-    });
     expect(router.location.pathname).toBe('/organizations/org-slug/dashboards/new/');
 
     // Click save to check that the widgets are passed to the API

static/app/views/dashboards/create.tsx

@@ -1,12 +1,11 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 
 import Feature from 'sentry/components/acl/feature';
 import {Alert} from 'sentry/components/core/alert';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
-import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 
@@ -20,7 +19,6 @@ export default function CreateDashboard() {
   const organization = useOrganization();
   const {templateId} = useParams<{templateId: string}>();
   const location = useLocation();
-  const navigate = useNavigate();
 
   const template = templateId
     ? getDashboardTemplates(organization).find(
@@ -45,13 +43,6 @@ export default function CreateDashboard() {
     return baseDashboard;
   });
 
-  // Clear location state after consuming it
-  useEffect(() => {
-    if (hasWidgetsToAdd) {
-      navigate(location.pathname, {replace: true, state: {}});
-    }
-  }, [hasWidgetsToAdd, navigate, location.pathname]);
-
   function renderDisabled() {
     return (
       <Layout.Page withPadding>