fix(dashboards): Preserve page filters when navigating from prebuilt dashboard link (#113070)

Fixes DAIN-1445

- The link from a prebuilt dashboard banner to the saved dashboard was
dropping project, environment, and date filter selections.
- Uses `extractSelectionParameters` to carry the current page filter
query params through to the dashboard link.
- Also fixes the link path from `dashboards` to `dashboard` (singular)
to match the correct route.

Author: edwardgou-sentry

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

@@ -0,0 +1,55 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {PrebuiltDashboardRenderer} from 'sentry/views/dashboards/prebuiltDashboardRenderer';
+import {PrebuiltDashboardId} from 'sentry/views/dashboards/utils/prebuiltConfigs';
+
+jest.mock('sentry/views/dashboards/detail', () => ({
+  DashboardDetailWithInjectedProps: () => <div data-test-id="dashboard-detail" />,
+}));
+
+jest.mock('sentry/views/dashboards/utils/usePopulateLinkedDashboards', () => ({
+  useGetPrebuiltDashboard: () => ({
+    dashboard: {id: '42', widgets: []},
+    isLoading: false,
+  }),
+}));
+
+describe('PrebuiltDashboardRenderer', () => {
+  const organization = OrganizationFixture();
+
+  it('renders dashboard link with page filter query params from the URL', async () => {
+    render(
+      <PrebuiltDashboardRenderer prebuiltId={PrebuiltDashboardId.BACKEND_OVERVIEW} />,
+      {
+        organization,
+        initialRouterConfig: {
+          location: {
+            pathname: '/insights/backend/',
+            query: {
+              project: '1',
+              environment: 'production',
+              statsPeriod: '7d',
+            },
+          },
+        },
+      }
+    );
+
+    const link = await screen.findByRole('link', {
+      name: 'View this page on Dashboards',
+    });
+
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringContaining(`/organizations/${organization.slug}/dashboard/42/`)
+    );
+    expect(link).toHaveAttribute('href', expect.stringContaining('project=1'));
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringContaining('environment=production')
+    );
+    expect(link).toHaveAttribute('href', expect.stringContaining('statsPeriod=7d'));
+  });
+});

static/app/views/dashboards/prebuiltDashboardRenderer.tsx

@@ -5,10 +5,12 @@ import {Link} from '@sentry/scraps/link';
 
 import {useDismissable} from 'sentry/components/banner';
 import {LoadingContainer} from 'sentry/components/loading/loadingContainer';
+import {extractSelectionParameters} from 'sentry/components/pageFilters/parse';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {IconClose} from 'sentry/icons';
 import {tct} from 'sentry/locale';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
+import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {DashboardDetailWithInjectedProps as DashboardDetail} from 'sentry/views/dashboards/detail';
 import {
@@ -33,6 +35,7 @@ export function PrebuiltDashboardRenderer({
   storageNamespace,
 }: PrebuiltDashboardRendererProps) {
   const organization = useOrganization();
+  const location = useLocation();
   const prebuiltDashboard = PREBUILT_DASHBOARDS[prebuiltId];
   const {dashboard: populatedPrebuiltDashboard, isLoading} =
     useGetPrebuiltDashboard(prebuiltId);
@@ -100,7 +103,10 @@ export function PrebuiltDashboardRenderer({
               {
                 link: (
                   <Link
-                    to={`/organizations/${organization.slug}/dashboards/${dashboardId}/`}
+                    to={{
+                      pathname: `/organizations/${organization.slug}/dashboard/${dashboardId}/`,
+                      query: extractSelectionParameters(location.query),
+                    }}
                   />
                 ),
               }