Grouping templating chatops fix (#2307)

[css fixes, displaying chatops button visibility fix]

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 {

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">

grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css

@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+.message {
+  word-wrap: break-word;
+}
+
 .message ul {
   margin-left: 24px;
 }

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 = () => {

grafana-plugin/src/pages/incident/Incident.module.scss

@@ -31,6 +31,7 @@
 
 .message {
   margin-top: 16px;
+  word-wrap: break-word;
 }
 
 .message a {