feat(dashboards): Prevents rendering edit and save ui on prebuilt insights dashboards (#104101)

Prebuilt insights dashboards are not editable by users. Removes save and
edit buttons when rendering a prebuilt dashboard

Author: edwardgou-sentry

static/app/views/dashboards/controls.tsx

@@ -15,6 +15,7 @@ import {IconAdd, IconDownload, IconEdit, IconStar} from 'sentry/icons';
 import {t, tct} 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 useApi from 'sentry/utils/useApi';
@@ -83,6 +84,9 @@ function Controls({
   const currentUser = useUser();
   const {teams: userTeams} = useUserTeams();
   const api = useApi();
+
+  const isPrebuiltDashboard = defined(dashboard.prebuiltId);
+
   if ([DashboardState.EDIT, DashboardState.PENDING_DELETE].includes(dashboardState)) {
     return (
       <StyledButtonBar key="edit-controls">
@@ -199,6 +203,9 @@ function Controls({
     if (!hasFeature) {
       return null;
     }
+    if (isPrebuiltDashboard) {
+      return null;
+    }
     const isDisabled = !hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving;
     const toolTipMessage = isSaving
       ? DASHBOARD_SAVING_MESSAGE
@@ -247,7 +254,7 @@ function Controls({
                 />
               </Tooltip>
             </Feature>
-            {dashboard.id !== 'default-overview' && (
+            {dashboard.id !== 'default-overview' && !isPrebuiltDashboard && (
               <EditAccessSelector
                 dashboard={dashboard}
                 onChangeEditAccess={onChangeEditAccess}
@@ -290,7 +297,7 @@ function Controls({
               </Tooltip>
             )}
             {renderEditButton(hasFeature)}
-            {hasFeature ? (
+            {hasFeature && !isPrebuiltDashboard ? (
               <Tooltip
                 title={tooltipMessage}
                 disabled={!widgetLimitReached && hasEditAccess}

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

@@ -31,6 +31,7 @@ import DashboardDetail from 'sentry/views/dashboards/detail';
 import EditAccessSelector from 'sentry/views/dashboards/editAccessSelector';
 import * as types from 'sentry/views/dashboards/types';
 import {DashboardState} from 'sentry/views/dashboards/types';
+import {PrebuiltDashboardId} from 'sentry/views/dashboards/utils/prebuiltConfigs';
 import ViewEditDashboard from 'sentry/views/dashboards/view';
 import useWidgetBuilderState from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 import {OrganizationContext} from 'sentry/views/organizationContext';
@@ -2285,6 +2286,35 @@ describe('Dashboards > Detail', () => {
       expect(await screen.findByLabelText('Star')).toBeInTheDocument();
     });
 
+    it('does not render save or edit features on prebuilt insights dashboards', async () => {
+      render(
+        <DashboardDetail
+          {...RouteComponentPropsFixture()}
+          initialState={DashboardState.VIEW}
+          dashboard={DashboardFixture([], {
+            prebuiltId: PrebuiltDashboardId.FRONTEND_SESSION_HEALTH,
+          })}
+          dashboards={[]}
+          onDashboardUpdate={jest.fn()}
+          newWidget={undefined}
+          onSetNewWidget={() => {}}
+        />,
+        {
+          organization: initialData.organization,
+          deprecatedRouterMocks: true,
+        }
+      );
+
+      await userEvent.click(await screen.findByText('24H'));
+      await userEvent.click(screen.getByText('Last 7 days'));
+      await screen.findByText('7D');
+
+      expect(screen.queryByTestId('filter-bar-cancel')).not.toBeInTheDocument();
+      expect(screen.queryByText('Save')).not.toBeInTheDocument();
+      expect(screen.queryByText('Editors:')).not.toBeInTheDocument();
+      expect(screen.queryByText('Add Widget')).not.toBeInTheDocument();
+    });
+
     describe('widget builder redesign', () => {
       let mockUpdateDashboard!: jest.SpyInstance;
       beforeEach(() => {

static/app/views/dashboards/detail.tsx

@@ -1187,6 +1187,7 @@ class DashboardDetail extends Component<Props, State> {
                                 isPreview={this.isPreview}
                                 onDashboardFilterChange={this.handleChangeFilter}
                                 shouldBusySaveButton={this.state.isSavingDashboardFilters}
+                                isPrebuiltDashboard={defined(dashboard.prebuiltId)}
                                 onCancel={() => {
                                   resetPageFilters(dashboard, location);
                                   trackAnalytics('dashboards2.filter.cancel', {

static/app/views/dashboards/filtersBar.tsx

@@ -44,6 +44,7 @@ type FiltersBarProps = {
   onDashboardFilterChange: (activeFilters: DashboardFilters) => void;
   dashboardCreator?: User;
   dashboardPermissions?: DashboardPermissions;
+  isPrebuiltDashboard?: boolean;
   onCancel?: () => void;
   onSave?: () => Promise<void>;
   shouldBusySaveButton?: boolean;
@@ -62,6 +63,7 @@ export default function FiltersBar({
   onDashboardFilterChange,
   onSave,
   shouldBusySaveButton,
+  isPrebuiltDashboard,
 }: FiltersBarProps) {
   const {selection} = usePageFilters();
   const organization = useOrganization();
@@ -195,34 +197,38 @@ export default function FiltersBar({
           />
         </Fragment>
       )}
-      {!hasTemporaryFilters && hasUnsavedChanges && !isEditingDashboard && !isPreview && (
-        <ButtonBar>
-          <Button
-            title={
-              !hasEditAccess && t('You do not have permission to edit this dashboard')
-            }
-            priority="primary"
-            onClick={async () => {
-              await onSave?.();
-              invalidateStarredDashboards();
-            }}
-            disabled={!hasEditAccess}
-            busy={shouldBusySaveButton}
-          >
-            {t('Save')}
-          </Button>
-          <Button
-            data-test-id="filter-bar-cancel"
-            onClick={() => {
-              onCancel?.();
-              setActiveGlobalFilters(filters.globalFilter ?? []);
-              onDashboardFilterChange(filters);
-            }}
-          >
-            {t('Cancel')}
-          </Button>
-        </ButtonBar>
-      )}
+      {!hasTemporaryFilters &&
+        hasUnsavedChanges &&
+        !isEditingDashboard &&
+        !isPreview &&
+        !isPrebuiltDashboard && (
+          <ButtonBar>
+            <Button
+              title={
+                !hasEditAccess && t('You do not have permission to edit this dashboard')
+              }
+              priority="primary"
+              onClick={async () => {
+                await onSave?.();
+                invalidateStarredDashboards();
+              }}
+              disabled={!hasEditAccess}
+              busy={shouldBusySaveButton}
+            >
+              {t('Save')}
+            </Button>
+            <Button
+              data-test-id="filter-bar-cancel"
+              onClick={() => {
+                onCancel?.();
+                setActiveGlobalFilters(filters.globalFilter ?? []);
+                onDashboardFilterChange(filters);
+              }}
+            >
+              {t('Cancel')}
+            </Button>
+          </ButtonBar>
+        )}
       <ToggleOnDemand />
     </Wrapper>
   );