feat(ui): Require org:write role for Metric Alerts form (#16340)

This disables all form fields when editing a Metric Alert without the `org:write` role.

Author: billyvg

src/sentry/static/sentry/app/views/settings/incidentRules/ruleConditionsForm.tsx

@@ -12,6 +12,7 @@ import getMetricDisplayName from './utils/getMetricDisplayName';
 
 type Props = {
   organization: Organization;
+  disabled: boolean;
 };
 
 type TimeWindowMapType = {[key in TimeWindow]: string};
@@ -30,7 +31,7 @@ const TIME_WINDOW_MAP: TimeWindowMapType = {
 
 class RuleConditionsForm extends React.PureComponent<Props> {
   render() {
-    const {organization} = this.props;
+    const {organization, disabled} = this.props;
 
     return (
       <Panel>
@@ -51,6 +52,7 @@ class RuleConditionsForm extends React.PureComponent<Props> {
               ],
             ]}
             required
+            disabled={disabled}
           />
           <FormField
             name="query"
@@ -64,6 +66,7 @@ class RuleConditionsForm extends React.PureComponent<Props> {
             {({onChange, onBlur, onKeyDown}) => {
               return (
                 <SearchBar
+                  disabled={disabled}
                   useFormWrapper={false}
                   organization={organization}
                   onChange={onChange}
@@ -80,6 +83,7 @@ class RuleConditionsForm extends React.PureComponent<Props> {
             help={t('The time window to use when evaluating the Metric')}
             choices={Object.entries(TIME_WINDOW_MAP)}
             required
+            disabled={disabled}
           />
         </PanelBody>
       </Panel>

src/sentry/static/sentry/app/views/settings/incidentRules/ruleForm/index.tsx

@@ -14,6 +14,7 @@ import {
 import {createDefaultTrigger} from 'app/views/settings/incidentRules/constants';
 import {defined} from 'app/utils';
 import {t} from 'app/locale';
+import Access from 'app/components/acl/access';
 import AsyncComponent from 'app/components/asyncComponent';
 import Button from 'app/components/button';
 import Confirm from 'app/components/confirm';
@@ -274,66 +275,73 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
     const {query, aggregation, timeWindow, triggers} = this.state;
 
     return (
-      <Form
-        apiMethod={incidentRuleId ? 'PUT' : 'POST'}
-        apiEndpoint={`/organizations/${organization.slug}/alert-rules/${
-          incidentRuleId ? `${incidentRuleId}/` : ''
-        }`}
-        initialData={{
-          name: rule.name || '',
-          aggregation: rule.aggregation,
-          query: rule.query || '',
-          timeWindow: rule.timeWindow,
-        }}
-        saveOnBlur={false}
-        onSubmit={this.handleSubmit}
-        onSubmitSuccess={onSubmitSuccess}
-        onCancel={this.handleCancel}
-        onFieldChange={this.handleFieldChange}
-        extraButton={
-          !!rule.id ? (
-            <Confirm
-              message={t('Are you sure you want to delete this alert rule?')}
-              header={t('Delete Alert Rule?')}
-              priority="danger"
-              confirmText={t('Delete Rule')}
-              onConfirm={this.handleDeleteRule}
-            >
-              <Button type="button" priority="danger">
-                {t('Delete Rule')}
-              </Button>
-            </Confirm>
-          ) : null
-        }
-        submitLabel={t('Save Rule')}
-      >
-        <TriggersChart
-          api={api}
-          config={config}
-          organization={organization}
-          projects={this.state.projects}
-          triggers={triggers}
-          query={query}
-          aggregation={aggregation}
-          timeWindow={timeWindow}
-        />
-
-        <RuleConditionsForm organization={organization} />
-
-        <Triggers
-          projects={this.state.projects}
-          errors={this.state.triggerErrors}
-          triggers={triggers}
-          currentProject={params.projectId}
-          organization={organization}
-          incidentRuleId={incidentRuleId}
-          availableActions={this.state.availableActions}
-          onChange={this.handleChangeTriggers}
-          onAdd={this.handleAddTrigger}
-        />
-
-        <RuleNameForm />
-      </Form>
+      <Access access={['org:write']}>
+        {({hasAccess}) => (
+          <Form
+            apiMethod={incidentRuleId ? 'PUT' : 'POST'}
+            apiEndpoint={`/organizations/${organization.slug}/alert-rules/${
+              incidentRuleId ? `${incidentRuleId}/` : ''
+            }`}
+            submitDisabled={!hasAccess}
+            initialData={{
+              name: rule.name || '',
+              aggregation: rule.aggregation,
+              query: rule.query || '',
+              timeWindow: rule.timeWindow,
+            }}
+            saveOnBlur={false}
+            onSubmit={this.handleSubmit}
+            onSubmitSuccess={onSubmitSuccess}
+            onCancel={this.handleCancel}
+            onFieldChange={this.handleFieldChange}
+            extraButton={
+              !!rule.id ? (
+                <Confirm
+                  disabled={!hasAccess}
+                  message={t('Are you sure you want to delete this alert rule?')}
+                  header={t('Delete Alert Rule?')}
+                  priority="danger"
+                  confirmText={t('Delete Rule')}
+                  onConfirm={this.handleDeleteRule}
+                >
+                  <Button type="button" priority="danger">
+                    {t('Delete Rule')}
+                  </Button>
+                </Confirm>
+              ) : null
+            }
+            submitLabel={t('Save Rule')}
+          >
+            <TriggersChart
+              api={api}
+              config={config}
+              organization={organization}
+              projects={this.state.projects}
+              triggers={triggers}
+              query={query}
+              aggregation={aggregation}
+              timeWindow={timeWindow}
+            />
+
+            <RuleConditionsForm organization={organization} disabled={!hasAccess} />
+
+            <Triggers
+              disabled={!hasAccess}
+              projects={this.state.projects}
+              errors={this.state.triggerErrors}
+              triggers={triggers}
+              currentProject={params.projectId}
+              organization={organization}
+              incidentRuleId={incidentRuleId}
+              availableActions={this.state.availableActions}
+              onChange={this.handleChangeTriggers}
+              onAdd={this.handleAddTrigger}
+            />
+
+            <RuleNameForm disabled={!hasAccess} />
+          </Form>
+        )}
+      </Access>
     );
   }
 }

src/sentry/static/sentry/app/views/settings/incidentRules/ruleNameForm.tsx

@@ -4,13 +4,20 @@ import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {t} from 'app/locale';
 import TextField from 'app/views/settings/components/forms/textField';
 
-class RuleNameForm extends React.PureComponent {
+type Props = {
+  disabled: boolean;
+};
+
+class RuleNameForm extends React.PureComponent<Props> {
   render() {
+    const {disabled} = this.props;
+
     return (
       <Panel>
         <PanelHeader>{t('Give your rule a name')}</PanelHeader>
         <PanelBody>
           <TextField
+            disabled={disabled}
             name="name"
             type="text"
             label={t('Rule Name')}

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/actionsPanel/index.tsx

@@ -33,6 +33,7 @@ type Props = {
   currentProject: string;
   organization: Organization;
   projects: Project[];
+  disabled: boolean;
   loading: boolean;
   error: boolean;
 
@@ -90,6 +91,7 @@ class ActionsPanel extends React.PureComponent<Props> {
       actions,
       availableActions,
       currentProject,
+      disabled,
       loading,
       organization,
       projects,
@@ -121,7 +123,7 @@ class ActionsPanel extends React.PureComponent<Props> {
 
                   {availableAction && availableAction.allowedTargetTypes.length > 1 ? (
                     <SelectControl
-                      disabled={loading}
+                      disabled={disabled || loading}
                       value={action.targetType}
                       options={
                         availableAction &&
@@ -138,6 +140,7 @@ class ActionsPanel extends React.PureComponent<Props> {
 
                   {isUser || isTeam ? (
                     <SelectMembers
+                      disabled={disabled}
                       key={isTeam ? 'team' : 'member'}
                       showTeam={isTeam}
                       project={projects.find(({slug}) => slug === currentProject)}
@@ -147,21 +150,26 @@ class ActionsPanel extends React.PureComponent<Props> {
                     />
                   ) : (
                     <Input
+                      disabled={disabled}
                       key={action.type}
                       value={action.targetIdentifier}
                       onChange={this.handleChangeSpecificTargetIdentifier.bind(this, i)}
                       placeholder="Channel or user i.e. #critical"
                     />
                   )}
-                  <DeleteActionButton index={i} onClick={this.handleDeleteAction} />
+                  <DeleteActionButton
+                    index={i}
+                    onClick={this.handleDeleteAction}
+                    disabled={disabled}
+                  />
                 </PanelItemGrid>
               );
             })}
           <PanelItem>
             <StyledSelectControl
               name="add-action"
               aria-label={t('Add an Action')}
-              disabled={loading}
+              disabled={disabled || loading}
               placeholder={t('Add an Action')}
               onChange={this.handleAddAction}
               options={items}

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/form.tsx

@@ -22,6 +22,7 @@ type AlertRuleThresholdKey = {
 type Props = {
   api: Client;
   config: Config;
+  disabled: boolean;
   organization: Organization;
 
   /**
@@ -119,7 +120,7 @@ class TriggerForm extends React.PureComponent<Props> {
   };
 
   render() {
-    const {error, trigger, isCritical} = this.props;
+    const {disabled, error, trigger, isCritical} = this.props;
     const triggerLabel = isCritical
       ? t('Critical Trigger Threshold')
       : t('Warning Trigger Threshold');
@@ -136,6 +137,7 @@ class TriggerForm extends React.PureComponent<Props> {
           error={error && error.alertThreshold}
         >
           <ThresholdControl
+            disabled={disabled}
             type={AlertRuleThreshold.INCIDENT}
             thresholdType={trigger.thresholdType}
             threshold={trigger.alertThreshold}
@@ -149,6 +151,7 @@ class TriggerForm extends React.PureComponent<Props> {
           error={error && error.resolutionThreshold}
         >
           <ThresholdControl
+            disabled={disabled}
             type={AlertRuleThreshold.RESOLUTION}
             thresholdType={trigger.thresholdType}
             threshold={trigger.resolveThreshold}
@@ -219,6 +222,7 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
       availableActions,
       config,
       currentProject,
+      disabled,
       error,
       isCritical,
       organization,
@@ -232,6 +236,7 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
         <TriggerForm
           api={api}
           config={config}
+          disabled={disabled}
           error={error}
           trigger={trigger}
           organization={organization}
@@ -241,6 +246,7 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
           onChange={this.handleChangeTrigger}
         />
         <ActionsPanel
+          disabled={disabled}
           loading={availableActions === null}
           error={false}
           availableActions={availableActions}

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/index.tsx

@@ -16,6 +16,7 @@ import withProjects from 'app/utils/withProjects';
 
 type DeleteButtonProps = {
   triggerIndex: number;
+  disabled: boolean;
   onDelete: (triggerIndex: number, e: React.MouseEvent<Element>) => void;
 };
 
@@ -25,13 +26,15 @@ type DeleteButtonProps = {
 const DeleteButton: React.FC<DeleteButtonProps> = ({
   triggerIndex,
   onDelete,
+  disabled,
 }: DeleteButtonProps) => (
   <Button
     type="button"
     icon="icon-trash"
     size="xsmall"
     aria-label={t('Delete Trigger')}
     onClick={(e: React.MouseEvent<Element>) => onDelete(triggerIndex, e)}
+    disabled={disabled}
   >
     {t('Delete')}
   </Button>
@@ -44,6 +47,7 @@ type Props = {
   triggers: Trigger[];
   currentProject: string;
   availableActions: MetricAction[] | null;
+  disabled: boolean;
 
   errors: Map<number, {[fieldName: string]: string}>;
 
@@ -77,6 +81,7 @@ class Triggers extends React.Component<Props> {
       organization,
       projects,
       triggers,
+      disabled,
       onAdd,
     } = this.props;
 
@@ -95,13 +100,15 @@ class Triggers extends React.Component<Props> {
                 </Title>
                 {!isCritical && (
                   <DeleteButton
+                    disabled={disabled}
                     triggerIndex={index}
                     onDelete={this.handleDeleteTrigger}
                   />
                 )}
               </PanelHeader>
               <PanelBody>
                 <TriggerForm
+                  disabled={disabled}
                   isCritical={isCritical}
                   error={errors && errors.get(index)}
                   availableActions={availableActions}