Rares/1448 permissions (#1529)

# What this PR does

Adds a few more permission checks for #1448 

## Which issue(s) this PR fixes

#1448

## Checklist

- [x] `CHANGELOG.md` updated

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed a few permission issues on the UI ([1448](https://github.com/grafana/oncall/pull/1448))
 - Fix resolution note rendering in Slack message threads where the Slack username was not
   being properly rendered ([1561](https://github.com/grafana/oncall/pull/1561))
 

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.module.css

@@ -46,10 +46,6 @@
   margin-top: 8px;
 }
 
-.payloadExample {
-  margin-top: 24px;
-}
-
 .autoresolve-condition section {
   border: 1px solid var(--primary-text-link);
 }

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx

@@ -18,7 +18,7 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { makeRequest } from 'network';
 import LocationHelper from 'utils/LocationHelper';
-import { UserActions } from 'utils/authorization';
+import { UserActions, isUserActionAllowed } from 'utils/authorization';
 
 import styles from './AlertTemplatesForm.module.css';
 
@@ -254,29 +254,29 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
         <Block className={cx('templates', 'borderRightBottom')}>
           <VerticalGroup>
             {templates?.payload_example ? (
-              <VerticalGroup>
-                <VerticalGroup>
-                  <Label>{`${capitalCase(activeGroup)} Preview`}</Label>
-                  <VerticalGroup style={{ width: '100%' }}>
-                    {groups[activeGroup].map((template) => (
-                      <TemplatePreview
-                        active={template.name === activeTemplate?.name}
-                        key={template.name}
-                        templateName={template.name}
-                        templateBody={tempValues[template.name] ?? templates[template.name]}
-                        onEditClick={getTemplatePreviewEditClickHandler(template.name)}
-                        alertReceiveChannelId={alertReceiveChannelId}
-                        alertGroupId={alertGroupId}
-                      />
-                    ))}
-                  </VerticalGroup>
-                </VerticalGroup>
-                <div className={cx('payloadExample')}>
+              <VerticalGroup spacing="md">
+                {isUserActionAllowed(UserActions.IntegrationsTest) && (
                   <VerticalGroup>
-                    <Label>Payload Example</Label>
-                    <SourceCode>{JSON.stringify(templates?.payload_example, null, 4)}</SourceCode>
+                    <Label>{`${capitalCase(activeGroup)} Preview`}</Label>
+                    <VerticalGroup style={{ width: '100%' }}>
+                      {groups[activeGroup].map((template) => (
+                        <TemplatePreview
+                          active={template.name === activeTemplate?.name}
+                          key={template.name}
+                          templateName={template.name}
+                          templateBody={tempValues[template.name] ?? templates[template.name]}
+                          onEditClick={getTemplatePreviewEditClickHandler(template.name)}
+                          alertReceiveChannelId={alertReceiveChannelId}
+                          alertGroupId={alertGroupId}
+                        />
+                      ))}
+                    </VerticalGroup>
                   </VerticalGroup>
-                </div>
+                )}
+                <VerticalGroup>
+                  <Label>Payload Example</Label>
+                  <SourceCode>{JSON.stringify(templates?.payload_example, null, 4)}</SourceCode>
+                </VerticalGroup>
               </VerticalGroup>
             ) : (
               sendDemoAlertBlock

grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx

@@ -128,18 +128,20 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
               <Text type="secondary">Which team should this integration belong to?</Text>
             </div>
           </Label>
-          <GSelect
-            modelName="grafanaTeamStore"
-            displayField="name"
-            valueField="id"
-            showSearch
-            allowClear
-            placeholder="Select a team"
-            className={cx('team-select')}
-            onChange={handleChangeTeam}
-            value={teamId}
-            showError={showErrorOnTeamSelect}
-          />
+          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+            <GSelect
+              modelName="grafanaTeamStore"
+              displayField="name"
+              valueField="id"
+              showSearch
+              allowClear
+              placeholder="Select a team"
+              className={cx('team-select')}
+              onChange={handleChangeTeam}
+              value={teamId}
+              showError={showErrorOnTeamSelect}
+            />
+          </WithPermissionControlTooltip>
         </div>
         <div className={cx('border-container')}>
           <Label>
@@ -193,9 +195,11 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
           )}
         </div>
         <div className={cx('team-select-actionbuttons')}>
-          <Button variant="primary" onClick={handleSaveClick}>
-            Save changes
-          </Button>
+          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+            <Button variant="primary" onClick={handleSaveClick}>
+              Save changes
+            </Button>
+          </WithPermissionControlTooltip>
         </div>
       </Block>
       {showSaveConfirmationModal && (

grafana-plugin/src/pages/incident/Incident.tsx

@@ -493,14 +493,16 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
             onChange={(e: any) => this.setState({ resolutionNoteText: e.target.value })}
           />
         </Field>
-        <ToolbarButton
-          icon="plus"
-          variant="primary"
-          onClick={this.handleCreateResolutionNote}
-          disabled={isResolutionNoteTextEmpty}
-        >
-          Add resolution note
-        </ToolbarButton>
+        <WithPermissionControlTooltip userAction={UserActions.AlertGroupsWrite}>
+          <ToolbarButton
+            icon="plus"
+            variant="primary"
+            onClick={this.handleCreateResolutionNote}
+            disabled={isResolutionNoteTextEmpty}
+          >
+            Add resolution note
+          </ToolbarButton>
+        </WithPermissionControlTooltip>
       </div>
     );
   };

grafana-plugin/src/pages/schedule/Schedule.tsx

@@ -22,6 +22,7 @@ import ScheduleOverrides from 'containers/Rotations/ScheduleOverrides';
 import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
 import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
 import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Schedule, ScheduleType, Shift } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { PageProps, WithStoreProps } from 'state/types';
@@ -183,9 +184,11 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
                             </HorizontalGroup>
 
                             {(schedule?.type === ScheduleType.Ical || schedule?.type === ScheduleType.Calendar) && (
-                              <Button variant="secondary" onClick={this.handleReloadClick(scheduleId)}>
-                                Reload
-                              </Button>
+                              <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
+                                <Button variant="secondary" onClick={this.handleReloadClick(scheduleId)}>
+                                  Reload
+                                </Button>
+                              </WithPermissionControlTooltip>
                             )}
                           </HorizontalGroup>
                           <ToolbarButton