From 29dadcc07fca347f6eb1f88dd43b807cbebe40be Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Mon, 29 Jan 2024 17:15:56 +0300
Subject: [PATCH] Show warning when edit AM-based resolve templates (#3764)

# What this PR does

show autoresolve template for ALL integrations when autoresolve is ON
show modal on edit button click for alertmanager based integrations

<img width="557" alt="Screenshot 2024-01-29 at 13 37 08"
src="https://github.com/grafana/oncall/assets/20116910/64569912-4601-4be1-b51e-b040906a3ffb">


## Which issue(s) this PR fixes

Frontend part of https://github.com/grafana/oncall-private/issues/2260


## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

---------

Co-authored-by: Vadim Stepanov <vadimkerr@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../Integrations/IntegrationTemplateBlock.tsx | 27 +++++++---
 .../components/WithConfirm/WithConfirm.tsx    | 18 +++++--
 .../IntegrationTemplatesList.tsx              | 52 ++++++-------------
 4 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e981536f..bdf2b257 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Improved logging during plugin sync and install with Grafana @mderynck ([#3730](https://github.com/grafana/oncall/pull/3730))
+- Add a modal for autoresolve and grouping templates for Alertmanager-based integrations ([#3764](https://github.com/grafana/oncall/pull/3764))
 
 ### Fixed
 
diff --git a/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx b/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx
index 889eb9d2..ff77ac4f 100644
--- a/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx
+++ b/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Button, InlineLabel, LoadingPlaceholder, Tooltip } from '@grafana/ui';
+import { Button, InlineLabel, LoadingPlaceholder } from '@grafana/ui';
 import cn from 'classnames/bind';
 
+import WithConfirm from 'components/WithConfirm/WithConfirm';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { UserActions } from 'utils/authorization';
 
@@ -17,6 +18,7 @@ interface IntegrationTemplateBlockProps {
   renderInput: () => React.ReactNode;
   showHelp?: boolean;
   isLoading?: boolean;
+  warningOnEdit?: string;
 
   onEdit: (templateName) => void;
   onRemove?: () => void;
@@ -31,6 +33,7 @@ const IntegrationTemplateBlock: React.FC<IntegrationTemplateBlockProps> = ({
   onEdit,
   onRemove,
   isLoading,
+  warningOnEdit,
 }) => {
   let tooltip = labelTooltip;
   let inlineLabelProps = { tooltip };
@@ -48,14 +51,24 @@ const IntegrationTemplateBlock: React.FC<IntegrationTemplateBlockProps> = ({
         {isTemplateEditable && (
           <>
             <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-              <Tooltip content={'Edit'}>
-                <Button variant={'secondary'} icon={'edit'} tooltip="Edit" size={'md'} onClick={onEdit} />
-              </Tooltip>
+              <WithConfirm skip={!warningOnEdit} title="" body={warningOnEdit} confirmText="Edit">
+                <Button variant={'secondary'} icon="edit" tooltip="Edit" size="md" onClick={onEdit} />
+              </WithConfirm>
             </WithPermissionControlTooltip>
             <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-              <Tooltip content={'Reset template to default'}>
-                <Button variant={'secondary'} icon={'times'} size={'md'} onClick={onRemove} />
-              </Tooltip>
+              <WithConfirm
+                title=""
+                body={`Are you sure you want to reset the ${label} template to its default state?`}
+                confirmText="Reset"
+              >
+                <Button
+                  variant="secondary"
+                  icon="times"
+                  size="md"
+                  tooltip="Reset template to default"
+                  onClick={onRemove}
+                />
+              </WithConfirm>
             </WithPermissionControlTooltip>
           </>
         )}
diff --git a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx
index 569cee31..0a725150 100644
--- a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx
+++ b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx
@@ -5,6 +5,7 @@ import { ConfirmModal, ConfirmModalProps } from '@grafana/ui';
 type WithConfirmProps = Partial<ConfirmModalProps> & {
   children: ReactElement;
   disabled?: boolean;
+  skip?: boolean;
 };
 
 const WithConfirm: React.FC<WithConfirmProps> = ({
@@ -15,14 +16,23 @@ const WithConfirm: React.FC<WithConfirmProps> = ({
   confirmationText,
   children,
   disabled,
+  skip = false,
 }) => {
   const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
 
-  const onClickCallback = useCallback((event) => {
-    event.stopPropagation();
+  const onClickCallback = useCallback(
+    (event) => {
+      if (skip) {
+        children.props.onClick?.();
+        return;
+      }
 
-    setShowConfirmation(true);
-  }, []);
+      event.stopPropagation();
+
+      setShowConfirmation(true);
+    },
+    [skip]
+  );
 
   const onConfirmCallback = useCallback(() => {
     if (children.props.onClick) {
diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
index 9d3708c8..c40e49a9 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 
-import { ConfirmModal, InlineSwitch, Tooltip } from '@grafana/ui';
+import { InlineSwitch, Tooltip } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -39,7 +39,6 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
     const { alertReceiveChannelStore, features } = useStore();
     const [isRestoringTemplate, setIsRestoringTemplate] = useState<boolean>(false);
     const [templateRestoreName, setTemplateRestoreName] = useState<string>(undefined);
-    const [showConfirmModal, setShowConfirmModal] = useState(false);
     const [autoresolveValue, setAutoresolveValue] = useState<boolean>(alertReceiveChannelAllowSourceBasedResolving);
 
     const handleSaveClick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -57,19 +56,6 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
 
     return (
       <div className={cx('integration__templates')}>
-        {showConfirmModal && (
-          <ConfirmModal
-            isOpen={true}
-            title={undefined}
-            confirmText={'Reset'}
-            dismissText="Cancel"
-            body={'Are you sure you want to reset Slack Title template to default state?'}
-            description={undefined}
-            confirmationText={undefined}
-            onConfirm={() => onResetTemplate(templateRestoreName)}
-            onDismiss={() => onDismiss()}
-          />
-        )}
         {templatesToRender.map((template, key) => (
           <IntegrationBlockItem key={key}>
             <VerticalBlock>
@@ -78,10 +64,18 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
                 <IntegrationTemplateBlock
                   key={innerKey}
                   isLoading={isRestoringTemplate && templateRestoreName === contents.name}
-                  onRemove={() => onShowConfirmModal(contents.name)}
+                  onRemove={() => onResetTemplate(contents.name)}
                   label={contents.label}
                   labelTooltip={contents.labelTooltip}
-                  isTemplateEditable={isResolveConditionTemplateEditable(contents.name)}
+                  isTemplateEditable={isTemplateEditable(contents.name)}
+                  warningOnEdit={
+                    alertReceiveChannelIsBasedOnAlertManager &&
+                    (isGroupingIdTemplate(contents.name) || isResolveConditionTemplate(contents.name))
+                      ? 'Caution: Changing this template can lead to unexpected alert behavior, ' +
+                        'especially if grouping is enabled in AlertManager/Grafana Alerting. ' +
+                        'Please proceed only if you are completely sure of the modifications you are about to make.'
+                      : undefined
+                  }
                   renderInput={() => (
                     <>
                       {isResolveConditionTemplate(contents.name) && (
@@ -90,10 +84,11 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
                             value={autoresolveValue}
                             onChange={handleSaveClick}
                             className={cx('inline-switch')}
+                            transparent
                           />
                         </Tooltip>
                       )}
-                      {isResolveConditionTemplateEditable(contents.name) && (
+                      {isTemplateEditable(contents.name) && (
                         <div
                           className={cx('input', { 'input-with-toggle': isResolveConditionTemplate(contents.name) })}
                         >
@@ -121,25 +116,16 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
       </div>
     );
 
-    function isResolveConditionTemplateEditable(templateName: string) {
-      return (
-        !(alertReceiveChannelIsBasedOnAlertManager && isResolveConditionTemplate(templateName)) &&
-        (alertReceiveChannelAllowSourceBasedResolving || !isResolveConditionTemplate(templateName))
-      );
+    function isTemplateEditable(templateName: string) {
+      return alertReceiveChannelAllowSourceBasedResolving || !isResolveConditionTemplate(templateName);
     }
 
     function isResolveConditionTemplate(templateName: string) {
       return templateName === 'resolve_condition_template';
     }
 
-    function onShowConfirmModal(templateName: string) {
-      setTemplateRestoreName(templateName);
-      setShowConfirmModal(true);
-    }
-
-    function onDismiss() {
-      setTemplateRestoreName(undefined);
-      setShowConfirmModal(false);
+    function isGroupingIdTemplate(templateName: string) {
+      return templateName === 'grouping_id_template';
     }
 
     function onResetTemplate(templateName: string) {
@@ -157,10 +143,6 @@ const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer
           } else {
             openErrorNotification(err.message);
           }
-        })
-        .finally(() => {
-          setIsRestoringTemplate(false);
-          setShowConfirmModal(false);
         });
     }
   }