From 32b96a586f150daa20a9c765ee1304da228d847d Mon Sep 17 00:00:00 2001
From: Shirley <4163034+fridgepoet@users.noreply.github.com>
Date: Thu, 9 Feb 2023 17:50:29 +0100
Subject: [PATCH] CloudWatch: Add deprecation tooltip to Alias field (#63115)

* CloudWatch: Add deprecation tooltip to Alias field

* Add target blank

* Add noopener noreferrer
---
 .../components/MetricsQueryEditor/Alias.tsx   | 28 +++++++++++++++++--
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |  7 +----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx
index 044f1416af0..0dbb2f83d89 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx
@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import React, { FunctionComponent, useState } from 'react';
 
-import { Input } from '@grafana/ui';
+import { IconButton, Input, Tooltip } from '@grafana/ui';
 
 export interface Props {
   onChange: (alias: any) => void;
@@ -19,5 +19,29 @@ export const Alias: FunctionComponent<Props> = ({ value = '', onChange, id }) =>
     propagateOnChange(e.target.value);
   };
 
-  return <Input id={id} type="text" value={alias} onChange={onChange} aria-label="Optional alias" />;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Input id={id} type="text" value={alias} onChange={onChange} aria-label="Optional alias" />
+      <Tooltip
+        content={
+          <span>
+            Alias pattern will be deprecated in Grafana 10. See{' '}
+            <a
+              target="__blank"
+              rel="noopener noreferrer"
+              href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/query-editor/#common-query-editor-fields"
+            >
+              documentation
+            </a>{' '}
+            for how to use dynamic labels.
+          </span>
+        }
+        interactive
+        theme="error"
+        placement="right"
+      >
+        <IconButton name="exclamation-triangle" variant="destructive" style={{ marginLeft: 4 }} />
+      </Tooltip>
+    </div>
+  );
 };
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index eb4b90524aa..3f53bd51c42 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -196,12 +196,7 @@ export const MetricsQueryEditor = (props: Props) => {
             ></DynamicLabelsField>
           </EditorField>
         ) : (
-          <EditorField
-            label="Alias"
-            width={26}
-            optional
-            tooltip="Change time series legend name using this field. See documentation for replacement variable formats."
-          >
+          <EditorField label="Alias" width={26} optional tooltip="Change time series legend name using this field.">
             <Alias
               id={`${query.refId}-cloudwatch-metric-query-editor-alias`}
               value={migratedQuery.alias ?? ''}