From a07d2120f8f7c33628f71fdc9c64c7061cd4e981 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Mon, 22 Jan 2024 12:17:54 +0100
Subject: [PATCH] Alerting: Update text, link and aria-label in contact points
 link for simplified routing. (#80950)

Update link to contact points using TextLink component, and fix its alignment
---
 .../simplifiedRouting/AlertManagerRouting.tsx | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
index 61662f9ff82..acd91ad4865 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, CollapsableSection, Icon, Link, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Alert, CollapsableSection, LoadingPlaceholder, Stack, TextLink, useStyles2 } from '@grafana/ui';
 import { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource';
 import { createUrl } from 'app/features/alerting/unified/utils/url';
 
@@ -50,7 +50,9 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
           contactPoints={contactPoints}
           onSelectContactPoint={setSelectedContactPointWithMetadata}
         />
-        <LinkToContactPoints />
+        <div className={styles.contactPointsInfo}>
+          <LinkToContactPoints />
+        </div>
       </Stack>
       {selectedContactPointWithMetadata?.grafana_managed_receiver_configs && (
         <ContactPointDetails receivers={selectedContactPointWithMetadata.grafana_managed_receiver_configs} />
@@ -73,13 +75,9 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
 function LinkToContactPoints() {
   const hrefToContactPoints = '/alerting/notifications';
   return (
-    <Link target="_blank" href={createUrl(hrefToContactPoints)} rel="noopener" aria-label="View alert rule">
-      <Stack direction="row" gap={1} alignItems="center" justifyContent="center">
-        <Text color="secondary">To browse contact points and create new ones, go to</Text>
-        <Text color="link">Contact points</Text>
-        <Icon name={'external-link-alt'} size="sm" color="link" />
-      </Stack>
-    </Link>
+    <TextLink external href={createUrl(hrefToContactPoints)} aria-label="View or create contact points">
+      View or create contact points
+    </TextLink>
   );
 }
 
@@ -117,4 +115,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
     marginTop: theme.spacing(2),
   }),
+  contactPointsInfo: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(1),
+  }),
 });