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)

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;
 }

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>