Update alert state tag to display Paused as its own "state"

public/app/features/alerting/unified/components/rules/AlertStateTag.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { AlertState } from '@grafana/data';
+import { Tag, Tooltip } from '@grafana/ui';
 import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
 import { alertStateToReadable, alertStateToState } from '../../utils/rules';
@@ -12,9 +13,18 @@ interface Props {
   muted?: boolean;
 }
 
-export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => (
-  <StateTag state={alertStateToState(state)} size={size} muted={muted}>
-    {alertStateToReadable(state)} {isPaused ? ' (Paused)' : ''}
-  </StateTag>
-));
+export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => {
+  if (isPaused) {
+    return (
+      <Tooltip content={'Alert evaluation is currently paused'} placement="top">
+        <Tag icon="pause" name="Paused" colorIndex={1} />
+      </Tooltip>
+    );
+  }
+  return (
+    <StateTag state={alertStateToState(state)} size={size} muted={muted}>
+      {alertStateToReadable(state)}
+    </StateTag>
+  );
+});
 AlertStateTag.displayName = 'AlertStateTag';