feat(dashboards): populate prebuilt dashboard with actual id (#108032)

1. Update `useGetPrebuiltDashboard` to populate `dashboard.id` with the
actual id from the db. This provides a means to lookup the dashboard id
as well.
2. Set `staleTime` in the query to `Infinity` which will cache the value
for 5 minutes, this means if `useGetPrebuiltDashboard` is called with
the same prebuiltId, the api call will be cached.

Author: DominikB2014

static/app/views/dashboards/orgDashboards.tsx

@@ -89,6 +89,7 @@ function OrgDashboards({children, initialDashboard}: OrgDashboardsProps) {
     selectedDashboard = {
       ...selectedDashboard,
       ...prebuiltDashboard,
+      id: selectedDashboard.id,
     };
   }
 

static/app/views/dashboards/utils/usePopulateLinkedDashboards.tsx

@@ -13,10 +13,13 @@ import {
 
 export const useGetPrebuiltDashboard = (prebuiltId?: PrebuiltDashboardId) => {
   const prebuiltDashboard = prebuiltId ? PREBUILT_DASHBOARDS[prebuiltId] : undefined;
-  return usePopulateLinkedDashboards(prebuiltDashboard);
+  return usePopulatePrebuiltIdsWithActualIds(prebuiltDashboard, prebuiltId);
 };
 
-const usePopulateLinkedDashboards = (dashboard?: PrebuiltDashboard) => {
+const usePopulatePrebuiltIdsWithActualIds = (
+  dashboard?: PrebuiltDashboard,
+  prebuiltId?: PrebuiltDashboardId
+) => {
   const organization = useOrganization();
 
   const widgets = useMemo(() => dashboard?.widgets ?? [], [dashboard]);
@@ -42,27 +45,32 @@ const usePopulateLinkedDashboards = (dashboard?: PrebuiltDashboard) => {
         path: {organizationIdOrSlug: organization.slug},
       }),
       {
-        query: {prebuiltId: prebuiltIds.sort()},
+        query: {prebuiltId: [...prebuiltIds.sort(), prebuiltId].filter(defined)},
       },
     ],
     {
-      enabled: hasLinkedDashboards,
-      staleTime: 0,
+      enabled: hasLinkedDashboards || Boolean(prebuiltId),
+      staleTime: Infinity,
       retry: false,
     }
   );
 
   return useMemo(() => {
-    if (!hasLinkedDashboards) {
-      return {dashboard, isLoading: false};
+    const populatedDashboard = {
+      ...dashboard,
+      id: data?.find(d => d.prebuiltId === prebuiltId)?.id || undefined,
+    };
+
+    if (!hasLinkedDashboards && !prebuiltId) {
+      return {dashboard: populatedDashboard, isLoading: false};
     }
 
     if (!data) {
-      return {dashboard, isLoading};
+      return {dashboard: populatedDashboard, isLoading};
     }
 
-    const populatedDashboard = {
-      ...dashboard,
+    const populatedDashboardWithLinkedDashboards = {
+      ...populatedDashboard,
       widgets: widgets.map(widget => ({
         ...widget,
         queries: widget.queries.map(query => ({
@@ -80,6 +88,6 @@ const usePopulateLinkedDashboards = (dashboard?: PrebuiltDashboard) => {
       })),
     };
 
-    return {dashboard: populatedDashboard, isLoading};
-  }, [dashboard, widgets, data, hasLinkedDashboards, isLoading]);
+    return {dashboard: populatedDashboardWithLinkedDashboards, isLoading};
+  }, [dashboard, widgets, data, hasLinkedDashboards, isLoading, prebuiltId]);
 };