fix for #1273, added component for showing permission restricted acce… (

#1422) # What this PR does - Removed unused code - Added another component for displaying Error Messages based on permissions access (so that we do not duplicate this code everywhere it's needed) - Fix for #1273 ## Which issue(s) this PR fixes - #1273 ## Checklist - [ ] Tests updated - [ ] Documentation added - [ ] `CHANGELOG.md` updated
grafana · Mar 2, 2023 · d182e71 · d182e71
1 parent 2a311c6
commit d182e71
Show file tree

Hide file tree

Showing 51 changed files with 325 additions and 340 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Show permission error for accessing Telegram as Viewer ([1273](https://github.com/grafana/oncall/issues/1273))
+
 ## v1.1.32 (2023-03-01)
 
 ### Fixed

diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
@@ -13,7 +13,7 @@ import MonacoJinja2Editor from 'components/MonacoJinja2Editor/MonacoJinja2Editor
 import SourceCode from 'components/SourceCode/SourceCode';
 import Text from 'components/Text/Text';
 import TemplatePreview from 'containers/TemplatePreview/TemplatePreview';
-import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { makeRequest } from 'network';
@@ -153,11 +153,11 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
     <HorizontalGroup>
       <Text type="secondary">There are no alerts from this monitoring yet.</Text>
       {demoAlertEnabled ? (
-        <WithPermissionControl userAction={UserActions.IntegrationsTest}>
+        <WithPermissionControlTooltip userAction={UserActions.IntegrationsTest}>
           <Button className={cx('button')} variant="primary" onClick={handleSendDemoAlertClick} size="sm">
             Send demo alert
           </Button>
-        </WithPermissionControl>
+        </WithPermissionControlTooltip>
       ) : null}
     </HorizontalGroup>
   );
@@ -240,11 +240,11 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
               </div>
             ))}
             <HorizontalGroup spacing="sm">
-              <WithPermissionControl userAction={UserActions.IntegrationsWrite}>
+              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
                 <Button variant="primary" onClick={handleSubmit}>
                   Save Templates
                 </Button>
-              </WithPermissionControl>
+              </WithPermissionControlTooltip>
               <Button variant="destructive" onClick={handleReset}>
                 Reset Template
               </Button>

diff --git a/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.tsx b/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.tsx
@@ -6,7 +6,7 @@ import cn from 'classnames/bind';
 import Block from 'components/GBlock/Block';
 import Text from 'components/Text/Text';
 import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
-import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Schedule, ScheduleType } from 'models/schedule/schedule.types';
 import { UserActions } from 'utils/authorization';
 
@@ -49,11 +49,11 @@ const NewScheduleSelector: FC<NewScheduleSelectorProps> = (props) => {
                     <Text type="secondary">Configure rotations and shifts directly in Grafana On-Call</Text>
                   </VerticalGroup>
                 </HorizontalGroup>
-                <WithPermissionControl userAction={UserActions.SchedulesWrite}>
+                <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
                   <Button variant="primary" icon="plus" onClick={getCreateScheduleClickHandler(ScheduleType.API)}>
                     Create
                   </Button>
-                </WithPermissionControl>
+                </WithPermissionControlTooltip>
               </HorizontalGroup>
             </Block>
             <Block bordered withBackground className={cx('block')}>

diff --git a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
@@ -12,7 +12,7 @@ import TimeRange from 'components/TimeRange/TimeRange';
 import Timeline from 'components/Timeline/Timeline';
 import GSelect from 'containers/GSelect/GSelect';
 import UserTooltip from 'containers/UserTooltip/UserTooltip';
-import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { prepareEscalationPolicy } from 'models/escalation_policy/escalation_policy.helpers';
 import {
   EscalationPolicy as EscalationPolicyType,
@@ -53,14 +53,14 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
 
     return (
       <Timeline.Item key={id} contentClassName={cx('root')} number={number} color={color}>
-        <WithPermissionControl disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+        <WithPermissionControlTooltip disableByPaywall userAction={UserActions.EscalationChainsWrite}>
           <DragHandle />
-        </WithPermissionControl>
+        </WithPermissionControlTooltip>
         {escalationOption &&
           reactStringReplace(escalationOption.display_name, /\{\{([^}]+)\}\}/g, this.replacePlaceholder)}
         {this._renderNote()}
         {is_final ? null : (
-          <WithPermissionControl className={cx('delete')} userAction={UserActions.EscalationChainsWrite}>
+          <WithPermissionControlTooltip className={cx('delete')} userAction={UserActions.EscalationChainsWrite}>
             <IconButton
               name="trash-alt"
               className={cx('delete', 'control')}
@@ -69,7 +69,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
               tooltip="Delete"
               tooltipPlacement="top"
             />
-          </WithPermissionControl>
+          </WithPermissionControlTooltip>
         )}
       </Timeline.Item>
     );
@@ -134,7 +134,11 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { notify_to_users_queue } = data;
 
     return (
-      <WithPermissionControl key="users-multiple" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip
+        key="users-multiple"
+        disableByPaywall
+        userAction={UserActions.EscalationChainsWrite}
+      >
         <GSelect
           isMulti
           showSearch
@@ -148,7 +152,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
           onChange={this._getOnChangeHandler('notify_to_users_queue')}
           getOptionLabel={({ value }: SelectableValue) => <UserTooltip id={value} />}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -157,7 +161,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { important } = data;
 
     return (
-      <WithPermissionControl key="importance" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip key="importance" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
         <Select
           menuShouldPortal
           className={cx('select', 'control')}
@@ -169,22 +173,22 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
             { value: 1, label: 'Important', description: 'Manage "Important notifications" in personal settings' },
           ]}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
   private renderTimeRange() {
     const { data } = this.props;
 
     return (
-      <WithPermissionControl key="time-range" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip key="time-range" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
         <TimeRange
           from={data.from_time}
           to={data.to_time}
           onChange={this._getOnTimeRangeChangeHandler()}
           className={cx('select', 'control')}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -193,7 +197,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { wait_delay } = data;
 
     return (
-      <WithPermissionControl key="wait-delay" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip key="wait-delay" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
         <Select
           menuShouldPortal
           placeholder="Select Wait Delay"
@@ -206,7 +210,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
             label: waitDelay.display_name,
           }))}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -215,7 +219,11 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { num_alerts_in_window } = data;
 
     return (
-      <WithPermissionControl key="num_alerts_in_window" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip
+        key="num_alerts_in_window"
+        disableByPaywall
+        userAction={UserActions.EscalationChainsWrite}
+      >
         <Input
           placeholder="Count"
           className={cx('control')}
@@ -228,7 +236,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
             }
           }}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -237,7 +245,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { num_minutes_in_window } = data;
 
     return (
-      <WithPermissionControl
+      <WithPermissionControlTooltip
         key="num_minutes_in_window"
         disableByPaywall
         userAction={UserActions.EscalationChainsWrite}
@@ -254,7 +262,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
             label: waitDelay.display_name,
           }))}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -263,7 +271,11 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { notify_schedule } = data;
 
     return (
-      <WithPermissionControl key="notify_schedule" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip
+        key="notify_schedule"
+        disableByPaywall
+        userAction={UserActions.EscalationChainsWrite}
+      >
         <GSelect
           showSearch
           allowClear
@@ -276,7 +288,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
           onChange={this._getOnChangeHandler('notify_schedule')}
           fromOrganization
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -285,7 +297,11 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { notify_to_group } = data;
 
     return (
-      <WithPermissionControl key="notify_to_group" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip
+        key="notify_to_group"
+        disableByPaywall
+        userAction={UserActions.EscalationChainsWrite}
+      >
         <GSelect
           modelName="userGroupStore"
           displayField="name"
@@ -295,7 +311,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
           value={notify_to_group}
           onChange={this._getOnChangeHandler('notify_to_group')}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -304,7 +320,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
     const { custom_button_trigger } = data;
 
     return (
-      <WithPermissionControl key="custom-button" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
+      <WithPermissionControlTooltip key="custom-button" disableByPaywall userAction={UserActions.EscalationChainsWrite}>
         <GSelect
           modelName="outgoingWebhookStore"
           displayField="name"
@@ -315,7 +331,7 @@ export class EscalationPolicy extends React.Component<EscalationPolicyProps, any
           onChange={this._getOnChangeHandler('custom_button_trigger')}
           fromOrganization
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 

diff --git a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx
@@ -7,7 +7,7 @@ import { SortableElement } from 'react-sortable-hoc';
 
 import PluginLink from 'components/PluginLink/PluginLink';
 import Timeline from 'components/Timeline/Timeline';
-import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Channel } from 'models/channel';
 import { NotificationPolicyType, prepareNotificationPolicy } from 'models/notification_policy';
 import { NotifyBy } from 'models/notify_by';
@@ -51,26 +51,26 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
     return (
       <Timeline.Item className={cx('root')} number={number} color={color}>
         <div className={cx('step')}>
-          <WithPermissionControl disableByPaywall userAction={userAction}>
+          <WithPermissionControlTooltip disableByPaywall userAction={userAction}>
             <DragHandle />
-          </WithPermissionControl>
-          <WithPermissionControl disableByPaywall userAction={userAction}>
+          </WithPermissionControlTooltip>
+          <WithPermissionControlTooltip disableByPaywall userAction={userAction}>
             <Select
               className={cx('select', 'control')}
               onChange={this._getOnChangeHandler('step')}
               value={step}
               options={notificationChoices.map((option: any) => ({ label: option.display_name, value: option.value }))}
             />
-          </WithPermissionControl>
+          </WithPermissionControlTooltip>
           {this._renderControls()}
-          <WithPermissionControl userAction={userAction}>
+          <WithPermissionControlTooltip userAction={userAction}>
             <IconButton
               className={cx('control')}
               name="trash-alt"
               onClick={this._getDeleteClickHandler(id)}
               variant="secondary"
             />
-          </WithPermissionControl>
+          </WithPermissionControlTooltip>
           {this._renderNote()}
         </div>
       </Timeline.Item>
@@ -163,7 +163,7 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
     const { wait_delay } = data;
 
     return (
-      <WithPermissionControl userAction={userAction} disableByPaywall>
+      <WithPermissionControlTooltip userAction={userAction} disableByPaywall>
         <Select
           key="wait-delay"
           placeholder="Wait Delay"
@@ -176,7 +176,7 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
             value: waitDelay.value,
           }))}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }
 
@@ -185,7 +185,7 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
     const { notify_by } = data;
 
     return (
-      <WithPermissionControl userAction={userAction} disableByPaywall>
+      <WithPermissionControlTooltip userAction={userAction} disableByPaywall>
         <Select
           key="notify_by"
           placeholder="Notify by"
@@ -198,7 +198,7 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
             value: notifyByOption.value,
           }))}
         />
-      </WithPermissionControl>
+      </WithPermissionControlTooltip>
     );
   }