Alerting: Replace Strong component (#88186)

public/app/features/alerting/unified/components/Strong.tsx

@@ -1,13 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import { Text } from '@grafana/ui';
-
-interface Props {
-  children: NonNullable<ReactNode>;
-}
-
-const Strong = ({ children }: Props) => {
-  return <Text weight="bold">{children}</Text>;
-};
-
-export { Strong };

public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx

@@ -2,13 +2,13 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Stack } from '@grafana/ui';
+import { useStyles2, Stack, TextLink } from '@grafana/ui';
 import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
 
+import { createContactPointLink } from '../../utils/misc';
 import { AlertLabels } from '../AlertLabels';
 import { CollapseToggle } from '../CollapseToggle';
 import { MetaText } from '../MetaText';
-import { Strong } from '../Strong';
 
 import { AlertGroupAlertsTable } from './AlertGroupAlertsTable';
 import { AlertGroupHeader } from './AlertGroupHeader';
@@ -21,8 +21,11 @@ interface Props {
 export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
   const styles = useStyles2(getStyles);
+
   // When group is grouped, receiver.name is 'NONE' as it can contain multiple receivers
   const receiverInGroup = group.receiver.name !== 'NONE';
+  const contactPoint = group.receiver.name;
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
@@ -39,7 +42,15 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
 
               {receiverInGroup && (
                 <MetaText icon="at">
-                  Delivered to <Strong>{group.receiver.name}</Strong>
+                  Delivered to{' '}
+                  <TextLink
+                    href={createContactPointLink(contactPoint, alertManagerSourceName)}
+                    variant="bodySmall"
+                    color="primary"
+                    inline={false}
+                  >
+                    {group.receiver.name}
+                  </TextLink>
                 </MetaText>
               )}
             </Stack>

public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx

@@ -239,7 +239,7 @@ describe('contact points', () => {
         wrapper,
       });
 
-      expect(screen.getByRole('link', { name: 'is used by 1 notification policy' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: /1 notification policy/ })).toBeInTheDocument();
 
       const moreActions = screen.getByRole('button', { name: /More/ });
       await userEvent.click(moreActions);

public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx

@@ -4,7 +4,6 @@ import { SerializedError } from '@reduxjs/toolkit';
 import { groupBy, size, uniq, upperFirst } from 'lodash';
 import pluralize from 'pluralize';
 import React, { Fragment, ReactNode, useCallback, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { useToggle } from 'react-use';
 
 import { dateTime, GrafanaTheme2 } from '@grafana/data';
@@ -22,6 +21,7 @@ import {
   TabContent,
   TabsBar,
   Text,
+  TextLink,
   Tooltip,
   useStyles2,
 } from '@grafana/ui';
@@ -42,7 +42,6 @@ import { MetaText } from '../MetaText';
 import MoreButton from '../MoreButton';
 import { ProvisioningBadge } from '../Provisioning';
 import { Spacer } from '../Spacer';
-import { Strong } from '../Strong';
 import { GrafanaReceiverExporter } from '../export/GrafanaReceiverExporter';
 import { GrafanaReceiversExporter } from '../export/GrafanaReceiversExporter';
 import { ReceiverMetadataBadge } from '../receivers/grafanaAppReceivers/ReceiverMetadataBadge';
@@ -444,11 +443,17 @@ const ContactPointHeader = (props: ContactPointHeaderProps) => {
           </Text>
         </Stack>
         {isReferencedByAnyPolicy && (
-          <MetaText>
-            <Link to={createUrl('/alerting/routes', { contactPoint: name })}>
-              is used by <Strong>{numberOfPolicies}</Strong> {pluralize('notification policy', numberOfPolicies)}
-            </Link>
-          </MetaText>
+          <Text variant="bodySmall" color="secondary">
+            is used by{' '}
+            <TextLink
+              href={createUrl('/alerting/routes', { contactPoint: name })}
+              variant="bodySmall"
+              color="primary"
+              inline={false}
+            >
+              {`${numberOfPolicies} ${pluralize('notification policy', numberOfPolicies)}`}
+            </TextLink>
+          </Text>
         )}
         {provisioned && <ProvisioningBadge />}
         {!isReferencedByAnyPolicy && <UnusedContactPointBadge />}
@@ -612,12 +617,12 @@ const ContactPointReceiverMetadataRow = ({ diagnostics, sendingResolved }: Conta
                   Last delivery attempt{' '}
                   <Tooltip content={lastDeliveryAttempt.toLocaleString()}>
                     <span>
-                      <Strong>{lastDeliveryAttempt.locale('en').fromNow()}</Strong>
+                      <Text color="primary">{lastDeliveryAttempt.locale('en').fromNow()}</Text>
                     </span>
                   </Tooltip>
                 </MetaText>
                 <MetaText icon="stopwatch">
-                  took <Strong>{lastDeliveryAttemptDuration}</Strong>
+                  took <Text color="primary">{lastDeliveryAttemptDuration}</Text>
                 </MetaText>
               </>
             )}
@@ -626,7 +631,7 @@ const ContactPointReceiverMetadataRow = ({ diagnostics, sendingResolved }: Conta
             {/* this is only shown for contact points that only want "firing" updates */}
             {!sendingResolved && (
               <MetaText icon="info-circle">
-                Delivering <Strong>only firing</Strong> notifications
+                Delivering <Text color="primary">only firing</Text> notifications
               </MetaText>
             )}
           </>

public/app/features/alerting/unified/components/notification-policies/Policy.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/css';
 import { defaults, groupBy, isArray, sumBy, uniqueId, upperFirst } from 'lodash';
 import pluralize from 'pluralize';
 import React, { FC, Fragment, ReactNode, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -16,6 +15,7 @@ import {
   Menu,
   Stack,
   Text,
+  TextLink,
   Tooltip,
   getTagColorsFromName,
   useStyles2,
@@ -44,7 +44,6 @@ import { Label } from '../Label';
 import { MetaText } from '../MetaText';
 import { ProvisioningBadge } from '../Provisioning';
 import { Spacer } from '../Spacer';
-import { Strong } from '../Strong';
 import { GrafanaPoliciesExporter } from '../export/GrafanaPoliciesExporter';
 
 import { Matchers } from './Matchers';
@@ -447,7 +446,7 @@ function MetadataRow({
             }}
             data-testid="matching-instances"
           >
-            <Strong>{numberOfAlertInstances ?? '-'}</Strong>
+            <Text color="primary">{numberOfAlertInstances ?? '-'}</Text>
             <span>{pluralize('instance', numberOfAlertInstances)}</span>
           </MetaText>
         )}
@@ -466,7 +465,7 @@ function MetadataRow({
             {customGrouping && (
               <MetaText icon="layer-group" data-testid="grouping">
                 <span>Grouped by</span>
-                <Strong>{groupBy.join(', ')}</Strong>
+                <Text color="primary">{groupBy.join(', ')}</Text>
               </MetaText>
             )}
             {singleGroup && (
@@ -670,19 +669,13 @@ const InheritedProperties: FC<{ properties: InheritableProperties }> = ({ proper
             return null;
           }
 
-          return (
-            <Label
-              key={key}
-              label={routePropertyToLabel(key)}
-              value={<Strong>{routePropertyToValue(key, value)}</Strong>}
-            />
-          );
+          return <Label key={key} label={routePropertyToLabel(key)} value={routePropertyToValue(key, value)} />;
         })}
       </Stack>
     }
   >
     <div>
-      <Strong>{pluralize('property', Object.keys(properties).length, true)}</Strong>
+      <Text color="primary">{pluralize('property', Object.keys(properties).length, true)}</Text>
     </div>
   </HoverCard>
 );
@@ -711,13 +704,17 @@ const MuteTimings: FC<{ timings: string[]; alertManagerSourceName: string }> = (
   */
   return (
     <div>
-      <Strong>
-        {timings.map((timing) => (
-          <Link key={timing} to={createMuteTimingLink(timing, alertManagerSourceName)}>
-            {timing}
-          </Link>
-        ))}
-      </Strong>
+      {timings.map((timing) => (
+        <TextLink
+          key={timing}
+          href={createMuteTimingLink(timing, alertManagerSourceName)}
+          color="primary"
+          variant="bodySmall"
+          inline={false}
+        >
+          {timing}
+        </TextLink>
+      ))}
     </div>
   );
 };
@@ -741,7 +738,7 @@ const TimingOptionsMeta: FC<{ timingOptions: TimingOptions }> = ({ timingOptions
           content="How long to initially wait to send a notification for a group of alert instances."
         >
           <span>
-            <Strong>{groupWait}</Strong> <span>to group instances</span>
+            <Text color="primary">{groupWait}</Text> to group instances
             {groupWait && groupInterval && ','}
           </span>
         </Tooltip>
@@ -752,7 +749,7 @@ const TimingOptionsMeta: FC<{ timingOptions: TimingOptions }> = ({ timingOptions
           content="How long to wait before sending a notification about new alerts that are added to a group of alerts for which an initial notification has already been sent."
         >
           <span>
-            <Strong>{groupInterval}</Strong> <span>before sending updates</span>
+            <Text color="primary">{groupInterval}</Text> before sending updates
           </span>
         </Tooltip>
       )}
@@ -775,18 +772,28 @@ const ContactPointsHoverDetails: FC<ContactPointDetailsProps> = ({
   const details = receivers.find((receiver) => receiver.name === contactPoint);
   if (!details) {
     return (
-      <Link to={createContactPointLink(contactPoint, alertManagerSourceName)}>
-        <Strong>{contactPoint}</Strong>
-      </Link>
+      <TextLink
+        href={createContactPointLink(contactPoint, alertManagerSourceName)}
+        color="primary"
+        variant="bodySmall"
+        inline={false}
+      >
+        {contactPoint}
+      </TextLink>
     );
   }
 
   const integrations = details.grafana_managed_receiver_configs;
   if (!integrations) {
     return (
-      <Link to={createContactPointLink(contactPoint, alertManagerSourceName)}>
-        <Strong>{contactPoint}</Strong>
-      </Link>
+      <TextLink
+        href={createContactPointLink(contactPoint, alertManagerSourceName)}
+        color="primary"
+        variant="bodySmall"
+        inline={false}
+      >
+        {contactPoint}
+      </TextLink>
     );
   }
 
@@ -799,7 +806,7 @@ const ContactPointsHoverDetails: FC<ContactPointDetailsProps> = ({
       header={
         <MetaText icon="at">
           <div>Contact Point</div>
-          <Strong>{contactPoint}</Strong>
+          <Text color="primary">{contactPoint}</Text>
         </MetaText>
       }
       key={uniqueId()}
@@ -817,9 +824,14 @@ const ContactPointsHoverDetails: FC<ContactPointDetailsProps> = ({
         </Stack>
       }
     >
-      <Link to={createContactPointLink(contactPoint, alertManagerSourceName)}>
-        <Strong>{contactPoint}</Strong>
-      </Link>
+      <TextLink
+        href={createContactPointLink(contactPoint, alertManagerSourceName)}
+        color="primary"
+        variant="bodySmall"
+        inline={false}
+      >
+        {contactPoint}
+      </TextLink>
     </HoverCard>
   );
 };

public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx

@@ -46,7 +46,14 @@ export function AlertmanagerCard({
       <Card.Heading>
         <Stack alignItems="center" gap={1}>
           {href ? (
-            <WithReturnButton title="Alerting settings" component={<TextLink href={href}>{name}</TextLink>} />
+            <WithReturnButton
+              title="Alerting settings"
+              component={
+                <TextLink href={href} inline={false}>
+                  {name}
+                </TextLink>
+              }
+            />
           ) : (
             name
           )}