From ad8ec64e34793896a9526560a2f861cf16c7919e Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 20 Mar 2023 14:11:48 +0200
Subject: [PATCH] UI Tweaks on schedules (#1538)

# What this PR does

Adds a few display tweaks to schedules score quality display
---
 .../ScheduleCounter.module.css                | 31 ----------------
 .../ScheduleCounter.module.scss               | 35 +++++++++++++++++++
 .../ScheduleCounter/ScheduleCounter.tsx       | 16 ++++++---
 .../ScheduleQuality.module.scss               |  4 ---
 .../ScheduleQuality/ScheduleQuality.tsx       |  2 +-
 .../src/pages/schedule/Schedule.module.css    |  1 +
 .../src/pages/schedules/Schedules.tsx         |  5 ++-
 grafana-plugin/src/style/utils.css            |  4 +++
 8 files changed, 54 insertions(+), 44 deletions(-)
 delete mode 100644 grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css
 create mode 100644 grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.scss

diff --git a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css
deleted file mode 100644
index 6dc02ce6..00000000
--- a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.root {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 3px 4px;
-}
-
-.root__type_link {
-  background: rgba(27, 133, 94, 0.15);
-  border: 1px solid var(--tag-border-success);
-  border-radius: 2px;
-}
-
-.root__type_warning {
-  background: rgba(245, 183, 61, 0.18);
-  border: 1px solid var(--tag-border-warning);
-  border-radius: 2px;
-}
-
-.text__type_link,
-.icon__type_link {
-  color: var(--tag-text-success);
-}
-
-.text__type_warning,
-.icon__type_warning {
-  color: var(--tag-text-warning);
-}
-
-.tooltip {
-  width: auto;
-}
diff --git a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.scss b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.scss
new file mode 100644
index 00000000..2958c9f6
--- /dev/null
+++ b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.scss
@@ -0,0 +1,35 @@
+.element {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 3px 4px;
+
+  &--link {
+    background: rgba(27, 133, 94, 0.15);
+    border: 1px solid var(--tag-border-success);
+    border-radius: 2px;
+  }
+
+  &--warning {
+    background: rgba(245, 183, 61, 0.18);
+    border: 1px solid var(--tag-border-warning);
+    border-radius: 2px;
+  }
+
+  &--padding {
+    padding: 3px 10px;
+  }
+}
+
+.element__text--link,
+.element__icon--link {
+  color: var(--tag-text-success);
+}
+
+.element__text--warning,
+.element__icon--warning {
+  color: var(--tag-text-warning);
+}
+
+.tooltip {
+  width: auto;
+}
diff --git a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
index 4762d5f8..e9688769 100644
--- a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
+++ b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
@@ -5,7 +5,7 @@ import cn from 'classnames/bind';
 
 import Text, { TextType } from 'components/Text/Text';
 
-import styles from './ScheduleCounter.module.css';
+import styles from './ScheduleCounter.module.scss';
 
 interface ScheduleCounterProps {
   type: Partial<TextType>;
@@ -31,7 +31,7 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
       placement="bottom-start"
       interactive
       content={
-        <div className={cx('tooltip', { [`tooltip__type_${type}`]: true })}>
+        <div className={cx('tooltip')}>
           <VerticalGroup>
             <Text type="secondary">{tooltipTitle}</Text>
             <Text type="secondary">{tooltipContent}</Text>
@@ -39,10 +39,16 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
         </div>
       }
     >
-      <div className={cx('root', { [`root__type_${type}`]: true }, { padding: addPadding })} onMouseEnter={onHover}>
+      <div
+        className={cx('root', 'element', { [`element--${type}`]: true }, { 'element--padding': addPadding })}
+        onMouseEnter={onHover}
+      >
         <HorizontalGroup spacing="xs">
-          <Icon className={cx('icon', { [`icon__type_${type}`]: true })} name={typeToIcon[type] as IconName} />
-          <Text className={cx('text', { [`text__type_${type}`]: true })}>{count}</Text>
+          <Icon
+            className={cx('element__icon', { [`element__icon--${type}`]: true })}
+            name={typeToIcon[type] as IconName}
+          />
+          <Text className={cx('element__text', { [`element__text--${type}`]: true })}>{count}</Text>
         </HorizontalGroup>
       </div>
     </Tooltip>
diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss
index 1ca938e9..1cfd657b 100644
--- a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss
+++ b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss
@@ -13,10 +13,6 @@ $score-danger: rgba(209, 14, 92, 0.15);
   line-height: 16px;
 }
 
-.link {
-  text-decoration: none !important;
-}
-
 .tag {
   font-size: 12px;
   padding: 4px 10px 3px 10px;
diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
index 6deecb69..59fa3759 100644
--- a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
+++ b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
@@ -49,7 +49,7 @@ const ScheduleQuality: FC<ScheduleQualityProps> = ({ schedule, lastUpdated }) =>
               <VerticalGroup spacing="sm">
                 {relatedEscalationChains.map((escalationChain) => (
                   <div key={escalationChain.pk}>
-                    <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className={cx('link')}>
+                    <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className="link">
                       <Text type="link">{escalationChain.name}</Text>
                     </PluginLink>
                   </div>
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
index e0f302b5..351819f4 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ b/grafana-plugin/src/pages/schedule/Schedule.module.css
@@ -10,6 +10,7 @@
   column-gap: 8px;
   row-gap: 8px;
   min-width: 250px;
+  align-items: center;
 }
 
 .header {
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 4bb1a91c..9df09559 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -303,8 +303,8 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
                   relatedEscalationChains.length ? (
                     relatedEscalationChains.map((escalationChain) => (
                       <div key={escalationChain.pk}>
-                        <PluginLink query={{ page: 'escalations', id: escalationChain.pk }}>
-                          {escalationChain.name}
+                        <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className="link">
+                          <Text type="link">{escalationChain.name}</Text>
                         </PluginLink>
                       </div>
                     ))
@@ -323,7 +323,6 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
         {item.warnings?.length > 0 && (
           <ScheduleCounter
             type="warning"
-            addPadding
             count={item.warnings.length}
             tooltipTitle="Warnings"
             tooltipContent={
diff --git a/grafana-plugin/src/style/utils.css b/grafana-plugin/src/style/utils.css
index 246e01d3..24502880 100644
--- a/grafana-plugin/src/style/utils.css
+++ b/grafana-plugin/src/style/utils.css
@@ -1,3 +1,7 @@
+.link {
+  text-decoration: none !important;
+}
+
 .u-position-relative {
   position: relative;
 }