From 2cdab7e804e811fd23ba3499f910dcae40829ec0 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 22 Jun 2023 12:01:11 +0200
Subject: [PATCH] Grouping templating chatops fix (#2307)

[css fixes, displaying chatops button visibility fix]
---
 .../IntegrationTemplate.module.scss           |  1 -
 .../IntegrationTemplate.tsx                   | 24 +++++++++++++++----
 .../TemplatePreview.module.css                |  4 ++++
 .../TemplatesAlertGroupsList.tsx              | 10 ++++----
 .../src/pages/incident/Incident.module.scss   |  1 +
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
index 6f0e5431..1b8a6bde 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
@@ -14,7 +14,6 @@
   max-height: 100%;
   width: 100%;
   border: var(--border-strong);
-  padding-left: 16px;
 }
 
 .template-block-title {
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
index dc329267..880eb40d 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@@ -51,6 +51,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
   const [changedTemplateBody, setChangedTemplateBody] = useState<string>(templateBody);
   const [resultError, setResultError] = useState<string>(undefined);
   const [editorHeight, setEditorHeight] = useState<string>(undefined);
+  const [isRecentAlertGroupExisting, setIsRecentAlertGroupExisting] = useState<boolean>(false);
 
   useEffect(() => {
     const locationParams: any = { template: template.name };
@@ -109,6 +110,10 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
     }
   }, []);
 
+  const onLoadAlertGroupsList = useCallback((isAlertGroup: boolean) => {
+    setIsRecentAlertGroupExisting(isAlertGroup);
+  }, []);
+
   const onSaveAndFollowLink = useCallback(
     (link: string) => {
       onUpdateTemplates({ [template.name]: changedTemplateBody });
@@ -187,6 +192,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
             onEditPayload={onEditPayload}
             onSelectAlertGroup={onSelectAlertGroup}
             templates={templates}
+            onLoadAlertGroupsList={onLoadAlertGroupsList}
           />
           {isCheatSheetVisible ? (
             <CheatSheet
@@ -222,7 +228,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
             alertReceiveChannelId={id}
             template={template}
             templateBody={changedTemplateBody}
-            alertGroup={undefined}
+            isAlertGroupExisting={isRecentAlertGroupExisting}
             chatOpsPermalink={chatOpsPermalink}
             payload={alertGroupPayload}
             error={resultError}
@@ -239,7 +245,7 @@ interface ResultProps {
   // templateName: string;
   templateBody: string;
   template: TemplateForEdit;
-  alertGroup?: Alert;
+  isAlertGroupExisting?: boolean;
   chatOpsPermalink?: string;
   payload?: JSON;
   error?: string;
@@ -248,8 +254,16 @@ interface ResultProps {
 }
 
 const Result = (props: ResultProps) => {
-  const { alertReceiveChannelId, template, templateBody, chatOpsPermalink, payload, error, onSaveAndFollowLink } =
-    props;
+  const {
+    alertReceiveChannelId,
+    template,
+    templateBody,
+    chatOpsPermalink,
+    payload,
+    error,
+    isAlertGroupExisting,
+    onSaveAndFollowLink,
+  } = props;
 
   return (
     <div className={cx('template-block-result')}>
@@ -283,7 +297,7 @@ const Result = (props: ResultProps) => {
               <Text type="secondary">{template?.additionalData.additionalDescription}</Text>
             )}
 
-            {template?.additionalData?.chatOpsName && (
+            {template?.additionalData?.chatOpsName && isAlertGroupExisting && (
               <VerticalGroup>
                 <Button onClick={() => onSaveAndFollowLink(chatOpsPermalink)}>
                   <HorizontalGroup spacing="xs" align="center">
diff --git a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
index ad1530f6..e88192b9 100644
--- a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
+++ b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+.message {
+  word-wrap: break-word;
+}
+
 .message ul {
   margin-left: 24px;
 }
diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
index ff074389..f1088116 100644
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
@@ -24,10 +24,11 @@ interface TemplatesAlertGroupsListProps {
   alertReceiveChannelId: AlertReceiveChannel['id'];
   onSelectAlertGroup?: (alertGroup: Alert) => void;
   onEditPayload?: (payload: string) => void;
+  onLoadAlertGroupsList?: (isRecentAlertExising: boolean) => void;
 }
 
 const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
-  const { alertReceiveChannelId, templates, onEditPayload, onSelectAlertGroup } = props;
+  const { alertReceiveChannelId, templates, onEditPayload, onSelectAlertGroup, onLoadAlertGroupsList } = props;
   const store = useStore();
   const [alertGroupsList, setAlertGroupsList] = useState(undefined);
   const [selectedAlertPayload, setSelectedAlertPayload] = useState<string>(undefined);
@@ -35,9 +36,10 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
   const [isEditMode, setIsEditMode] = useState(false);
 
   useEffect(() => {
-    store.alertGroupStore
-      .getAlertGroupsForIntegration(alertReceiveChannelId)
-      .then((result) => setAlertGroupsList(result.slice(0, 30)));
+    store.alertGroupStore.getAlertGroupsForIntegration(alertReceiveChannelId).then((result) => {
+      setAlertGroupsList(result.slice(0, 30));
+      onLoadAlertGroupsList(result.length > 0);
+    });
   }, []);
 
   const getCodeEditorHeight = () => {
diff --git a/grafana-plugin/src/pages/incident/Incident.module.scss b/grafana-plugin/src/pages/incident/Incident.module.scss
index ad3491de..56fc1eb9 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.scss
+++ b/grafana-plugin/src/pages/incident/Incident.module.scss
@@ -31,6 +31,7 @@
 
 .message {
   margin-top: 16px;
+  word-wrap: break-word;
 }
 
 .message a {