From fd9ca5b8271288482e5e4218e6ec9757e4fa243e Mon Sep 17 00:00:00 2001
From: Ildar Iskhakov <Ildar.iskhakov@grafana.com>
Date: Fri, 14 Jul 2023 09:28:14 +0800
Subject: [PATCH] Fix markup bug and change text (#2515)

# What this PR does

## Which issue(s) this PR fixes

## 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)
---
 .../ManualAlertGroup/ManualAlertGroup.module.css  | 14 +-------------
 .../ManualAlertGroup/ManualAlertGroup.tsx         | 15 +++++++--------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.module.css b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.module.css
index a421dabc..57b3da4c 100644
--- a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.module.css
+++ b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.module.css
@@ -12,17 +12,5 @@
   margin-bottom: 20px;
   width: 100%;
   background: var(--background-secondary);
-
-  & > li .hover-button {
-    display: none;
-  }
-
-  & > li:hover .hover-button {
-    display: inline-flex;
-  }
-
-  & > li {
-    padding: 10px 12px;
-    width: 100%;
-  }
+  padding: 10px 12px;
 }
diff --git a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx
index 255f3ea8..0c4f2342 100644
--- a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx
+++ b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx
@@ -141,20 +141,19 @@ const ManualAlertGroup: FC<ManualAlertGroupProps> = (props) => {
                     <HorizontalGroup>
                       {chatOpsAvailableChannels && (
                         <>
-                          <Text type="secondary">ChatOps:</Text>{' '}
                           {chatOpsAvailableChannels.map(
                             (chatOpsChannel: { name: string; icon: IconName }, chatOpsIndex) => (
-                              <div
-                                key={`${chatOpsChannel.name}-${chatOpsIndex}`}
-                                className={cx({
-                                  'u-margin-right-xs': chatOpsIndex !== chatOpsAvailableChannels.length,
-                                })}
-                              >
-                                {chatOpsChannel.icon && <Icon name={chatOpsChannel.icon} className={cx('icon')} />}
+                              <div key={`${chatOpsChannel.name}-${chatOpsIndex}`}>
+                                {chatOpsChannel.icon && <Icon name={chatOpsChannel.icon} />}
                                 <Text type="primary">{chatOpsChannel.name || ''}</Text>
                               </div>
                             )
                           )}
+                          {chatOpsAvailableChannels && (
+                            <Tooltip content="Alert group will be posted to these chatops channels according to integration configuration">
+                              <Icon name="info-circle" />
+                            </Tooltip>
+                          )}
                         </>
                       )}
                     </HorizontalGroup>