From 32e2304f109052fec01fa350de0e263b7688ede1 Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konrad.lalik@grafana.com>
Date: Tue, 25 Jul 2023 12:26:53 +0200
Subject: [PATCH] Alerting: Improve alerts names visibility on narrow panels
 (#72104)

---
 .../panel/alertlist/UnifiedAlertList.tsx      |  9 +++++++++
 .../unified-alerting/UngroupedView.tsx        | 19 ++++++++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index 828cc77d5f2..5f8c608b484 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
@@ -104,6 +104,8 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
 
   const somePromRulesDispatched = isAsyncRequestMapSlicePartiallyDispatched(promRulesRequests);
 
+  const hideViewRuleLinkText = props.width < 320;
+
   // backwards compat for "Inactive" state filter
   useEffect(() => {
     if (props.options.stateFilter.inactive === true) {
@@ -222,6 +224,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
               options={parsedOptions}
               handleInstancesLimit={handleInstancesLimit}
               limitInstances={limitInstances}
+              hideViewRuleLinkText={hideViewRuleLinkText}
             />
           )}
         </section>
@@ -414,5 +417,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   link: css`
     word-break: break-all;
     color: ${theme.colors.primary.text};
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacing(1)};
+  `,
+  hidden: css`
+    display: none;
   `,
 });
diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
index 882b8c810e6..fee5fc8d59c 100644
--- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
+++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 import { useLocation } from 'react-use';
 
@@ -28,6 +28,7 @@ type Props = {
   options: UnifiedAlertListOptions;
   handleInstancesLimit?: (limit: boolean) => void;
   limitInstances: boolean;
+  hideViewRuleLinkText?: boolean;
 };
 
 function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState, number>>) {
@@ -36,7 +37,7 @@ function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState
     .reduce((total, currentTotal) => total + currentTotal, 0);
 }
 
-const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstances }: Props) => {
+const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstances, hideViewRuleLinkText }: Props) => {
   const styles = useStyles2(getStyles);
   const stateStyle = useStyles2(getStateTagStyles);
   const { href: returnTo } = useLocation();
@@ -89,11 +90,15 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
                       </div>
                       <Spacer />
                       {href && (
-                        <a href={href} target="__blank" className={styles.link} rel="noopener">
-                          <Stack alignItems="center" gap={1}>
-                            View alert rule
-                            <Icon name={'external-link-alt'} size="sm" />
-                          </Stack>
+                        <a
+                          href={href}
+                          target="__blank"
+                          className={styles.link}
+                          rel="noopener"
+                          aria-label="View alert rule"
+                        >
+                          <span className={cx({ [styles.hidden]: hideViewRuleLinkText })}>View alert rule</span>
+                          <Icon name={'external-link-alt'} size="sm" />
                         </a>
                       )}
                     </Stack>