feat(aci): Disable monitor creating/editing when user does not have alerts:write (#96687)

Author: malwilley

static/app/views/detectors/components/details/common/actions.tsx

@@ -1,12 +1,23 @@
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Link} from 'sentry/components/core/link';
 import {IconEdit} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import useOrganization from 'sentry/utils/useOrganization';
 import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
+import {useCanEditDetector} from 'sentry/views/detectors/utils/useCanEditDetector';
 
 export function DisableDetectorAction({detector}: {detector: Detector}) {
+  const canEdit = useCanEditDetector({
+    detectorType: detector.type,
+    projectId: detector.projectId,
+  });
+
+  if (!canEdit) {
+    return null;
+  }
+
   /**
    * TODO: Implement disable detector
    */
@@ -19,13 +30,25 @@ export function DisableDetectorAction({detector}: {detector: Detector}) {
 
 export function EditDetectorAction({detector}: {detector: Detector}) {
   const organization = useOrganization();
+  const canEdit = useCanEditDetector({
+    detectorType: detector.type,
+    projectId: detector.projectId,
+  });
+
+  const permissionTooltipText = tct(
+    'You do not have permission to edit this monitor. Ask your organization owner or manager to [settingsLink:enable monitor access] for you.',
+    {settingsLink: <Link to={`/settings/${organization.slug}/#alertsMemberWrite`} />}
+  );
 
   return (
     <LinkButton
       to={`${makeMonitorDetailsPathname(organization.slug, detector.id)}edit/`}
       priority="primary"
       icon={<IconEdit />}
       size="sm"
+      disabled={!canEdit}
+      title={canEdit ? undefined : permissionTooltipText}
+      tooltipProps={{isHoverable: true}}
     >
       {t('Edit')}
     </LinkButton>

static/app/views/detectors/components/details/uptime/index.spec.tsx

@@ -0,0 +1,36 @@
+import {createContext, useContext} from 'react';
+
+import type {Project} from 'sentry/types/project';
+import type {DetectorType} from 'sentry/types/workflowEngine/detectors';
+
+type DetectorFormContextType = {
+  detectorType: DetectorType;
+  project: Project;
+};
+
+const DetectorFormContext = createContext<DetectorFormContextType | null>(null);
+
+export function DetectorFormProvider({
+  detectorType,
+  project,
+  children,
+}: {
+  children: React.ReactNode;
+  detectorType: DetectorType;
+  project: Project;
+}) {
+  return (
+    <DetectorFormContext.Provider value={{detectorType, project}}>
+      {children}
+    </DetectorFormContext.Provider>
+  );
+}
+
+export function useDetectorFormContext() {
+  const context = useContext(DetectorFormContext);
+  if (!context) {
+    throw new Error('useDetectorFormContext must be used within a DetectorFormProvider');
+  }
+
+  return context;
+}

static/app/views/detectors/components/forms/context.tsx

@@ -9,6 +9,8 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {t} from 'sentry/locale';
 import useProjects from 'sentry/utils/useProjects';
+import {useDetectorFormContext} from 'sentry/views/detectors/components/forms/context';
+import {useCanEditDetector} from 'sentry/views/detectors/utils/useCanEditDetector';
 
 export function DetectorBaseFields() {
   return (
@@ -43,14 +45,16 @@ export function DetectorBaseFields() {
 
 function ProjectField() {
   const {projects, fetching} = useProjects();
+  const {project, detectorType} = useDetectorFormContext();
+  const canEditDetector = useCanEditDetector({projectId: project.id, detectorType});
 
   return (
     <StyledProjectField
       inline={false}
       flexibleControlStateSize
       stacked
       projects={projects}
-      groupProjects={project => (project.isMember ? 'member' : 'all')}
+      groupProjects={p => (p.isMember ? 'member' : 'all')}
       groups={[
         {key: 'member', label: t('My Projects')},
         {key: 'all', label: t('All Projects')},
@@ -60,6 +64,17 @@ function ProjectField() {
       aria-label={t('Select Project')}
       disabled={fetching}
       size="sm"
+      validate={() => {
+        if (!canEditDetector) {
+          return [
+            [
+              'projectId',
+              t('You do not have permission to create or edit monitors in this project'),
+            ],
+          ];
+        }
+        return [];
+      }}
     />
   );
 }