feat(dashboards): automatically populate dashboard ids in prebuilt dashboards

static/app/utils/discover/fieldRenderers.tsx

@@ -1425,8 +1425,9 @@ function getDashboardUrl(
       linkedDashboard => linkedDashboard.field === field
     );
     if (dashboardLink && dashboardLink.dashboardId !== '-1') {
-      const newTemporaryFilters: GlobalFilter[] =
-        dashboardFilters[DashboardFilterKeys.GLOBAL_FILTER] ?? [];
+      const newTemporaryFilters: GlobalFilter[] = [
+        ...(dashboardFilters[DashboardFilterKeys.GLOBAL_FILTER] ?? []),
+      ].filter(filter => Boolean(filter.value));
 
       // Format the value as a proper filter condition string
       const mutableSearch = new MutableSearch('');

static/app/views/dashboards/filtersBar.tsx

@@ -90,10 +90,21 @@ export default function FiltersBar({
       [];
 
     if (hasDrillDownFlowsFeature) {
-      return [
-        ...globalFilters,
+      const finalFilters = [...globalFilters];
+      const temporaryFilters = [
         ...(dashboardFiltersFromURL?.[DashboardFilterKeys.TEMPORARY_FILTERS] ?? []),
       ];
+      finalFilters.forEach(filter => {
+        // if a temporary filter exists for the same dataset and key, override it and delete it from the temporary filters to avoid duplicates
+        const temporaryFilter = temporaryFilters.find(
+          tf => tf.dataset === filter.dataset && tf.tag.key === filter.tag.key
+        );
+        if (temporaryFilter) {
+          filter.value = temporaryFilter.value;
+          temporaryFilters.splice(temporaryFilters.indexOf(temporaryFilter), 1);
+        }
+      });
+      return [...finalFilters, ...temporaryFilters];
     }
 
     return globalFilters;

static/app/views/dashboards/prebuiltDashboardRenderer.tsx

@@ -1,6 +1,8 @@
 import LoadingContainer from 'sentry/components/loading/loadingContainer';
 import {defined} from 'sentry/utils';
+import {useApiQuery} from 'sentry/utils/queryClient';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 import DashboardDetail from 'sentry/views/dashboards/detail';
 import {DashboardState, type DashboardDetails} from 'sentry/views/dashboards/types';
@@ -59,6 +61,8 @@ export function PrebuiltDashboardRenderer({prebuiltId}: PrebuiltDashboardRendere
 
 const usePopulateLinkedDashboards = (dashboard: PrebuiltDashboard) => {
   const {widgets} = dashboard;
+  const organization = useOrganization();
+
   const linkedDashboardsWithStaticDashboardIds = widgets
     .flatMap(widget => {
       return widget.queries
@@ -67,11 +71,39 @@ const usePopulateLinkedDashboards = (dashboard: PrebuiltDashboard) => {
     })
     .filter(linkedDashboard => linkedDashboard.staticDashboardId !== undefined);
 
-  if (!linkedDashboardsWithStaticDashboardIds.length) {
+  const hasLinkedDashboards = linkedDashboardsWithStaticDashboardIds.length > 0;
+  const path = `/organizations/${organization.slug}/dashboards/`;
+
+  const {data, isLoading} = useApiQuery<DashboardDetails[]>(
+    [
+      path,
+      {
+        query: {
+          prebuiltId: linkedDashboardsWithStaticDashboardIds.map(
+            d => d.staticDashboardId
+          ),
+        },
+      },
+    ],
+    {
+      enabled: hasLinkedDashboards,
+      staleTime: 0,
+      retry: false,
+    }
+  );
+
+  if (!hasLinkedDashboards) {
     return {dashboard, isLoading: false};
   }
 
-  // TODO we should fetch the real dashboard id here, this requires BROWSE-128
+  linkedDashboardsWithStaticDashboardIds.forEach(linkedDashboard => {
+    const dasboardId = data?.find(
+      d => d.prebuiltId === linkedDashboard.staticDashboardId
+    )?.id;
+    if (dasboardId) {
+      linkedDashboard.dashboardId = dasboardId;
+    }
+  });
 
-  return {dashboard, isLoading: false};
+  return {dashboard, isLoading};
 };