feat(dashboards): Updates prebuilt dashboard preview and management in the All Dashboards view (#104018)

- Updates prebuilt dashboards to display metadata and preview properly
in table and grid views in the All Dashboards page
    - Fix number of widgets display
    - Adds tooltip to owner icon
    - Fix preview grid not displaying
- Disables access management in the All Dashboards page for prebuilt
dashboards
- Disables delete capability in the the All Dashboards page for prebuilt
dashboards

Author: edwardgou-sentry

static/app/views/dashboards/editAccessSelector.tsx

@@ -34,6 +34,7 @@ import type {
 
 interface EditAccessSelectorProps {
   dashboard: DashboardDetails | DashboardListItem;
+  disabled?: boolean;
   listOnly?: boolean;
   onChangeEditAccess?: (newDashboardPermissions: DashboardPermissions) => void;
 }
@@ -46,6 +47,7 @@ function EditAccessSelector({
   dashboard,
   onChangeEditAccess,
   listOnly = false,
+  disabled = false,
 }: EditAccessSelectorProps) {
   const currentUser: User = useUser();
   const dashboardCreator: User | undefined = dashboard.createdBy;
@@ -320,6 +322,7 @@ function EditAccessSelector({
         }}
         priority="primary"
         disabled={
+          disabled ||
           !userCanEditDashboardPermissions ||
           isEqual(getDashboardPermissions(), {
             ...dashboard.permissions,
@@ -369,14 +372,20 @@ function EditAccessSelector({
       onSearch={debounce(val => void onSearch(val), DEFAULT_DEBOUNCE_DURATION)}
       strategy="fixed"
       preventOverflowOptions={{mainAxis: false}}
+      disabled={disabled}
     />
   );
 
+  const tooltipTitle = disabled
+    ? t('Prebuilt dashboards cannot be edited')
+    : t('Only the creator of this dashboard can manage editor access');
+
   return (
     <Tooltip
-      title={t('Only the creator of this dashboard can manage editor access')}
+      title={tooltipTitle}
       disabled={
-        userCanEditDashboardPermissions || isMenuOpen || isCollapsedAvatarTooltipOpen
+        !disabled &&
+        (userCanEditDashboardPermissions || isMenuOpen || isCollapsedAvatarTooltipOpen)
       }
     >
       {dropdownMenu}

static/app/views/dashboards/manage/dashboardGrid.tsx

@@ -16,6 +16,7 @@ import {IconEllipsis} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useQueryClient} from 'sentry/utils/queryClient';
 import withApi from 'sentry/utils/withApi';
@@ -122,6 +123,10 @@ function DashboardGrid({
             onConfirm: () => handleDeleteDashboard(dashboard, 'grid'),
           });
         },
+        disabled: defined(dashboard.prebuiltId),
+        tooltip: defined(dashboard.prebuiltId)
+          ? t('Prebuilt dashboards cannot be deleted')
+          : undefined,
       },
     ];
 

static/app/views/dashboards/manage/dashboardTable.tsx

@@ -4,6 +4,7 @@ import type {Location} from 'history';
 import cloneDeep from 'lodash/cloneDeep';
 
 import {Flex} from '@sentry/scraps/layout';
+import {Tooltip} from '@sentry/scraps/tooltip/tooltip';
 
 import {
   updateDashboardFavorite,
@@ -27,6 +28,7 @@ import {IconCopy, IconDelete, IconStar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useQueryClient} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -229,7 +231,11 @@ function DashboardTable({
           <UserAvatar hasTooltip user={dataRow[ResponseKeys.OWNER]} size={26} />
         </BodyCellContainer>
       ) : (
-        <ActivityAvatar type="system" size={26} />
+        <BodyCellContainer>
+          <Tooltip title="Sentry">
+            <ActivityAvatar type="system" size={26} />
+          </Tooltip>
+        </BodyCellContainer>
       );
     }
 
@@ -253,6 +259,7 @@ function DashboardTable({
           dashboard={dataRow}
           onChangeEditAccess={onChangeEditAccess}
           listOnly
+          disabled={defined(dataRow.prebuiltId)} // Prebuilt dashboards cannot be edited
         />
       );
     }
@@ -309,7 +316,14 @@ function DashboardTable({
               data-test-id="dashboard-delete"
               icon={<IconDelete />}
               size="sm"
-              disabled={dashboards && dashboards.length <= 1}
+              disabled={
+                (dashboards && dashboards.length <= 1) || defined(dataRow.prebuiltId)
+              }
+              title={
+                defined(dataRow.prebuiltId)
+                  ? t('Prebuilt dashboards cannot be deleted')
+                  : undefined
+              }
             />
           </Flex>
         </BodyCellContainer>

static/app/views/dashboards/manage/index.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import type {Query} from 'history';
 import debounce from 'lodash/debounce';
@@ -50,6 +50,7 @@ import OwnedDashboardsTable, {
 } from 'sentry/views/dashboards/manage/tableView/ownedDashboardsTable';
 import type {DashboardsLayout} from 'sentry/views/dashboards/manage/types';
 import type {DashboardDetails, DashboardListItem} from 'sentry/views/dashboards/types';
+import {PREBUILT_DASHBOARDS} from 'sentry/views/dashboards/utils/prebuiltConfigs';
 import RouteError from 'sentry/views/routeError';
 
 import DashboardGrid from './dashboardGrid';
@@ -155,7 +156,7 @@ function ManageDashboards() {
   });
 
   const {
-    data: dashboards,
+    data: dashboardsWithoutPrebuiltConfigs,
     isLoading,
     isError,
     error,
@@ -183,6 +184,29 @@ function ManageDashboards() {
     }
   );
 
+  const dashboards = useMemo(
+    () =>
+      dashboardsWithoutPrebuiltConfigs?.map(dashboard => {
+        if (dashboard.prebuiltId && dashboard.prebuiltId in PREBUILT_DASHBOARDS) {
+          return {
+            ...dashboard,
+            widgetDisplay: PREBUILT_DASHBOARDS[dashboard.prebuiltId].widgets.map(
+              widget => widget.displayType
+            ),
+            widgetPreview: PREBUILT_DASHBOARDS[dashboard.prebuiltId].widgets.map(
+              widget => ({
+                displayType: widget.displayType,
+                layout: widget.layout ?? null,
+              })
+            ),
+            projects: [],
+          };
+        }
+        return dashboard;
+      }),
+    [dashboardsWithoutPrebuiltConfigs]
+  );
+
   const ownedDashboards = useOwnedDashboards({
     query: decodeScalar(location.query.query, ''),
     cursor: decodeScalar(location.query[OWNED_CURSOR_KEY], ''),

static/app/views/dashboards/types.tsx

@@ -168,6 +168,7 @@ export type DashboardListItem = {
   isFavorited?: boolean;
   lastVisited?: string;
   permissions?: DashboardPermissions;
+  prebuiltId?: PrebuiltDashboardId;
 };
 
 export enum DashboardFilterKeys {