Webhooks 2 - Add copy ID to clipboard buttons (#1753)

Add copy to clipboard buttons for integration, route, webhook IDs if
webhooks 2 is enabled.

![Screenshot from 2023-04-14
11-31-13](https://user-images.githubusercontent.com/28077050/232116596-98cef7e1-0727-4fdd-a6e4-ad1fab4c0e4f.png)

![Screenshot from 2023-04-14
11-20-13](https://user-images.githubusercontent.com/28077050/232116613-5b964ae6-ccf8-4cf0-9a39-faa8a92360fe.png)

Updated tooltip:

![Screenshot from 2023-04-14
12-00-08](https://user-images.githubusercontent.com/28077050/232122222-80c58837-f213-421f-85e0-3ff40e193dda.png)

engine/apps/api/views/features.py

@@ -5,6 +5,7 @@ from rest_framework.views import APIView
 
 from apps.auth_token.auth import PluginAuthentication
 from apps.base.utils import live_settings
+from apps.webhooks.utils import is_webhooks_enabled_for_organization
 
 FEATURE_SLACK = "slack"
 FEATURE_TELEGRAM = "telegram"
@@ -12,6 +13,7 @@ FEATURE_LIVE_SETTINGS = "live_settings"
 FEATURE_GRAFANA_CLOUD_NOTIFICATIONS = "grafana_cloud_notifications"
 FEATURE_GRAFANA_CLOUD_CONNECTION = "grafana_cloud_connection"
 FEATURE_WEB_SCHEDULES = "web_schedules"
+FEATURE_WEBHOOKS2 = "webhooks2"
 
 
 class FeaturesAPIView(APIView):
@@ -58,4 +60,7 @@ class FeaturesAPIView(APIView):
             if request.auth.organization.pk in enabled_web_schedules_orgs.json_value["org_ids"]:
                 enabled_features.append(FEATURE_WEB_SCHEDULES)
 
+        if is_webhooks_enabled_for_organization(request.auth.organization.pk):
+            enabled_features.append(FEATURE_WEBHOOKS2)
+
         return enabled_features

grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Badge, HorizontalGroup, Tooltip, VerticalGroup } from '@grafana/ui';
+import { Badge, HorizontalGroup, IconButton, Tooltip, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import Emoji from 'react-emoji-render';
 
 import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
@@ -11,6 +12,7 @@ import Text from 'components/Text/Text';
 import TeamName from 'containers/TeamName/TeamName';
 import { HeartGreenIcon, HeartRedIcon } from 'icons';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
+import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 
 import styles from './AlertReceiveChannelCard.module.scss';
@@ -63,6 +65,22 @@ const AlertReceiveChannelCard = observer((props: AlertReceiveChannelCardProps) =
             <Text type="primary" size="medium">
               <Emoji className={cx('title')} text={alertReceiveChannel.verbal_name} />
             </Text>
+            {store.hasFeature(AppFeature.Webhooks2) && (
+              <CopyToClipboard text={alertReceiveChannel.id}>
+                <IconButton
+                  variant="primary"
+                  tooltip={
+                    <div>
+                      ID {alertReceiveChannel.id}
+                      <br />
+                      (click to copy ID to clipboard)
+                    </div>
+                  }
+                  tooltipPlacement="top"
+                  name="info-circle"
+                />
+              </CopyToClipboard>
+            )}
             {alertReceiveChannelCounter && (
               <PluginLink
                 query={{ page: 'alert-groups', integration: alertReceiveChannel.id }}

grafana-plugin/src/containers/AlertRules/AlertRules.tsx

@@ -17,6 +17,7 @@ import {
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import Emoji from 'react-emoji-render';
 
 import Collapse from 'components/Collapse/Collapse';
@@ -39,6 +40,7 @@ import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
 import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
 import { EscalationPolicyOption } from 'models/escalation_policy/escalation_policy.types';
 import { MaintenanceType } from 'models/maintenance/maintenance.types';
+import { AppFeature } from 'state/features';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { openNotification } from 'utils';
@@ -683,6 +685,22 @@ class AlertRules extends React.Component<AlertRulesProps, AlertRulesState> {
             />
           </WithPermissionControlTooltip>
         )}
+        {store.hasFeature(AppFeature.Webhooks2) && (
+          <CopyToClipboard text={channelFilter.id}>
+            <IconButton
+              variant="primary"
+              tooltip={
+                <div>
+                  ID {channelFilter.id}
+                  <br />
+                  (click to copy ID to clipboard)
+                </div>
+              }
+              tooltipPlacement="top"
+              name="info-circle"
+            />
+          </CopyToClipboard>
+        )}
         <WithPermissionControlTooltip userAction={UserActions.IntegrationsTest}>
           <Button variant="secondary" size="sm" onClick={this.getSendDemoAlertToParticularRoute(channelFilterId)}>
             Send demo alert

grafana-plugin/src/pages/outgoing_webhooks_2/OutgoingWebhooks2.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, IconButton, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 import moment from 'moment-timezone';
 import LegacyNavHeading from 'navbar/LegacyNavHeading';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import GTable from 'components/GTable/GTable';
@@ -25,6 +26,7 @@ import { ActionDTO } from 'models/action';
 import { FiltersValues } from 'models/filters/filters.types';
 import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
 import { OutgoingWebhook2 } from 'models/outgoing_webhook_2/outgoing_webhook_2.types';
+import { AppFeature } from 'state/features';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { isUserActionAllowed, UserActions } from 'utils/authorization';
@@ -146,7 +148,7 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
       },
     ];
 
-    return (
+    return store.hasFeature(AppFeature.Webhooks2) ? (
       <PageErrorHandlingWrapper
         errorData={errorData}
         objectName="outgoing webhook 2"
@@ -209,6 +211,8 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
           </>
         )}
       </PageErrorHandlingWrapper>
+    ) : (
+      <Text>Outgoing webhooks 2 functionality is not enabled.</Text>
     );
   }
 
@@ -245,6 +249,20 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
   renderActionButtons = (record: ActionDTO) => {
     return (
       <HorizontalGroup justify="flex-end">
+        <CopyToClipboard text={record.id}>
+          <IconButton
+            variant="primary"
+            tooltip={
+              <div>
+                ID {record.id}
+                <br />
+                (click to copy ID to clipboard)
+              </div>
+            }
+            tooltipPlacement="top"
+            name="info-circle"
+          />
+        </CopyToClipboard>
         <WithPermissionControlTooltip key={'status_action'} userAction={UserActions.OutgoingWebhooksRead}>
           <Button onClick={() => this.onStatusClick(record.id)} fill="text">
             Status

grafana-plugin/src/state/features.ts

@@ -5,4 +5,5 @@ export enum AppFeature {
   CloudNotifications = 'grafana_cloud_notifications',
   CloudConnection = 'grafana_cloud_connection',
   WebSchedules = 'web_schedules',
+  Webhooks2 = 'webhooks2',
 }