From 71e92376118a4fe8da73b5da37f383c2dfe34889 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 23 May 2023 15:33:19 +0300
Subject: [PATCH] Templates tweaks (#1993)

# What this PR does


- Hide timeline numbering when `isDisabled` is being sent
- Fixed tooltips within expanded route for escalation chains actions
- Replaced GSelect with Select to allow refreshing list manually
---
 .../components/Timeline/Timeline.module.css   |  4 ++
 .../src/components/Timeline/TimelineItem.tsx  |  2 +-
 .../src/containers/AlertRules/parts/index.tsx |  5 +-
 .../src/containers/GSelect/GSelect.tsx        |  1 -
 .../ExpandedIntegrationRouteDisplay.tsx       | 57 +++++++++++--------
 5 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/grafana-plugin/src/components/Timeline/Timeline.module.css b/grafana-plugin/src/components/Timeline/Timeline.module.css
index b4ee44c7..c2f4e970 100644
--- a/grafana-plugin/src/components/Timeline/Timeline.module.css
+++ b/grafana-plugin/src/components/Timeline/Timeline.module.css
@@ -27,3 +27,7 @@
   word-break: break-word;
   flex-grow: 1;
 }
+
+.content--noMargin {
+  margin: 0;
+}
diff --git a/grafana-plugin/src/components/Timeline/TimelineItem.tsx b/grafana-plugin/src/components/Timeline/TimelineItem.tsx
index 1807cf28..077d1943 100644
--- a/grafana-plugin/src/components/Timeline/TimelineItem.tsx
+++ b/grafana-plugin/src/components/Timeline/TimelineItem.tsx
@@ -33,7 +33,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
           {number}
         </div>
       )}
-      <div className={cx('content', contentClassName)}>{children}</div>
+      <div className={cx('content', contentClassName, { 'content--noMargin': isDisabled })}>{children}</div>
     </li>
   );
 };
diff --git a/grafana-plugin/src/containers/AlertRules/parts/index.tsx b/grafana-plugin/src/containers/AlertRules/parts/index.tsx
index 8a49b500..13268e44 100644
--- a/grafana-plugin/src/containers/AlertRules/parts/index.tsx
+++ b/grafana-plugin/src/containers/AlertRules/parts/index.tsx
@@ -12,10 +12,11 @@ import { getVar } from 'utils/DOM';
 
 interface ChatOpsConnectorsProps {
   channelFilterId: ChannelFilter['id'];
+  showLineNumber?: boolean;
 }
 
 export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
-  const { channelFilterId } = props;
+  const { channelFilterId, showLineNumber = true } = props;
 
   const store = useStore();
   const { telegramChannelStore } = store;
@@ -29,7 +30,7 @@ export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
   }
 
   return (
-    <Timeline.Item number={0} backgroundColor={getVar('--tag-secondary')}>
+    <Timeline.Item number={0} backgroundColor={getVar('--tag-secondary')} isDisabled={!showLineNumber}>
       <VerticalGroup>
         {isSlackInstalled && <SlackConnector channelFilterId={channelFilterId} />}
         {isTelegramInstalled && <TelegramConnector channelFilterId={channelFilterId} />}
diff --git a/grafana-plugin/src/containers/GSelect/GSelect.tsx b/grafana-plugin/src/containers/GSelect/GSelect.tsx
index 1570c443..16fb6db1 100644
--- a/grafana-plugin/src/containers/GSelect/GSelect.tsx
+++ b/grafana-plugin/src/containers/GSelect/GSelect.tsx
@@ -146,7 +146,6 @@ const GSelect = observer((props: GSelectProps) => {
 
   return (
     <div className={cx('root', className)}>
-      {/*@ts-ignore*/}
       <Tag
         autoFocus={autoFocus}
         isSearchable={showSearch}
diff --git a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
index 41446dd7..9df21aee 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
@@ -1,7 +1,7 @@
-import React, { useReducer } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, ConfirmModal } from '@grafana/ui';
+import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, ConfirmModal, Select } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -13,13 +13,13 @@ import Text from 'components/Text/Text';
 import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
 import { ChatOpsConnectors } from 'containers/AlertRules/parts';
 import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
-import GSelect from 'containers/GSelect/GSelect';
 import styles from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss';
 import TeamName from 'containers/TeamName/TeamName';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
+import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
 import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config';
 import IntegrationHelper from 'pages/integration_2/Integration2.helper';
 import { AppFeature } from 'state/features';
@@ -71,6 +71,10 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
       }
     );
 
+    useEffect(() => {
+      escalationChainStore.updateItems();
+    }, []);
+
     const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId];
     const channelFiltersTotal = Object.keys(alertReceiveChannelStore.channelFilters);
     if (!channelFilter) {
@@ -152,7 +156,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
                 <IntegrationBlockItem>
                   <VerticalGroup spacing="md">
                     <Text type="primary">Publish to ChatOps</Text>
-                    <ChatOpsConnectors channelFilterId={channelFilterId} />
+                    <ChatOpsConnectors channelFilterId={channelFilterId} showLineNumber={false} />
                   </VerticalGroup>
                 </IntegrationBlockItem>
               )}
@@ -162,18 +166,21 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
                   <HorizontalGroup spacing={'xs'}>
                     <InlineLabel width={20}>Escalation chain</InlineLabel>
                     <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                      <GSelect
-                        showSearch
-                        modelName="escalationChainStore"
-                        isLoading={isRefreshingEscalationChains}
-                        displayField="name"
-                        placeholder="Select Escalation Chain"
-                        className={cx('select', 'control')}
-                        value={channelFilter.escalation_chain}
-                        onChange={onEscalationChainChange}
-                        showWarningIfEmptyValue={true}
+                      <Select
+                        isSearchable
                         width={'auto'}
-                        icon={'list-ul'}
+                        menuShouldPortal
+                        className={cx('select', 'control')}
+                        placeholder="Select escalation chain"
+                        isLoading={isRefreshingEscalationChains}
+                        onChange={onEscalationChainChange}
+                        options={Object.keys(escalationChainStore.items).map(
+                          (eschalationChainId: EscalationChain['id']) => ({
+                            value: escalationChainStore.items[eschalationChainId].id,
+                            label: escalationChainStore.items[eschalationChainId].name,
+                          })
+                        )}
+                        value={channelFilter.escalation_chain}
                         getOptionLabel={(item: SelectableValue) => {
                           return (
                             <>
@@ -185,18 +192,20 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
                             </>
                           );
                         }}
-                      />
+                      ></Select>
                     </WithPermissionControlTooltip>
 
-                    <Button variant={'secondary'} icon={'sync'} size={'md'} onClick={onEscalationChainsRefresh} />
+                    <Tooltip content={'Reload escalation chains list'} placement={'top'}>
+                      <Button variant={'secondary'} icon={'sync'} size={'md'} onClick={onEscalationChainsRefresh} />
+                    </Tooltip>
 
                     <PluginLink className={cx('hover-button')} target="_blank" query={escalationChainRedirectObj}>
-                      <Button
-                        variant={'secondary'}
-                        tooltip={channelFilter.escalation_chain ? 'Edit escalation chain' : 'Add escalation chain'}
-                        icon={'external-link-alt'}
-                        size={'md'}
-                      />
+                      <Tooltip
+                        placement={'top'}
+                        content={channelFilter.escalation_chain ? 'Edit escalation chain' : 'Add an escalation chain'}
+                      >
+                        <Button variant={'secondary'} icon={'external-link-alt'} size={'md'} />
+                      </Tooltip>
                     </PluginLink>
 
                     {channelFilter.escalation_chain && (
@@ -240,7 +249,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
       await alertReceiveChannelStore.deleteChannelFilter(routeIdForDeletion);
     }
 
-    function onEscalationChainChange(value: string) {
+    function onEscalationChainChange({ value }) {
       alertReceiveChannelStore
         .saveChannelFilter(channelFilterId, {
           escalation_chain: value,