From 46e6ad9fb6c3f0cf549c6c78865d5e27adaf4ba0 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 7 Mar 2022 15:46:57 +0100
Subject: [PATCH] change(ui) - help text for chart series

---
 .../CustomMetricForm/CustomMetricForm.tsx     |  5 +++--
 .../FilterSeries/SeriesName/SeriesName.tsx    |  2 +-
 .../app/components/ui/HelpText/HelpText.tsx   | 22 +++++++++++++++++++
 frontend/app/components/ui/HelpText/index.ts  |  1 +
 frontend/app/components/ui/index.js           |  1 +
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 frontend/app/components/ui/HelpText/HelpText.tsx
 create mode 100644 frontend/app/components/ui/HelpText/index.ts

diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
index 471bc9bbe..28a0cbc42 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Button, IconButton } from 'UI';
+import { Form, Button, IconButton, HelpText } from 'UI';
 import FilterSeries from '../FilterSeries';
 import { connect } from 'react-redux';
 import { edit as editMetric, save, addSeries, removeSeries, remove } from 'Duck/customMetrics';
@@ -169,8 +169,9 @@ function CustomMetricForm(props: Props) {
         </div>
 
         <div className="form-group">
-          <label className="font-medium">
+          <label className="font-medium flex items-center">
             {`${isTable ? 'Filter by' : 'Chart Series'}`}
+            {!isTable && <HelpText position="top left" text="Defines a series of data for the line in chart." className="pl-3" />}
           </label>
           {metric.series && metric.series.size > 0 && metric.series.take(isTable ? 1 : metric.series.size).map((series: any, index: number) => (
             <div className="mb-2">
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
index 5b5d5463c..5d25e9de9 100644
--- a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
@@ -7,7 +7,7 @@ interface Props {
   seriesIndex?: number;
 }
 function SeriesName(props: Props) {
-  const { seriesIndex } = props;
+  const { seriesIndex = 1 } = props;
   const [editing, setEditing] = useState(false)
   const [name, setName] = useState(props.name)
   const ref = useRef<any>(null)
diff --git a/frontend/app/components/ui/HelpText/HelpText.tsx b/frontend/app/components/ui/HelpText/HelpText.tsx
new file mode 100644
index 000000000..92a06a5d0
--- /dev/null
+++ b/frontend/app/components/ui/HelpText/HelpText.tsx
@@ -0,0 +1,22 @@
+
+import React from 'react'
+import { Icon, Popup } from 'UI'
+
+interface Props {
+    text: string,
+    className?: string,
+    position?: string,
+}
+export default function HelpText(props: Props) {
+    const { text, className = '', position = 'top center' } = props
+    return (
+        <div>
+            <Popup
+                trigger={<div className={className}><Icon name="question-circle" size={16} /></div>}
+                content={text}
+                inverted
+                position={position}
+            />
+        </div>
+    )
+}
diff --git a/frontend/app/components/ui/HelpText/index.ts b/frontend/app/components/ui/HelpText/index.ts
new file mode 100644
index 000000000..0868cbffd
--- /dev/null
+++ b/frontend/app/components/ui/HelpText/index.ts
@@ -0,0 +1 @@
+export { default } from './HelpText';
\ No newline at end of file
diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js
index 016a818de..1e0088720 100644
--- a/frontend/app/components/ui/index.js
+++ b/frontend/app/components/ui/index.js
@@ -54,5 +54,6 @@ export { default as CopyButton } from './CopyButton';
 export { default as HighlightCode } from './HighlightCode';
 export { default as NoPermission } from './NoPermission';
 export { default as NoSessionPermission } from './NoSessionPermission';
+export { default as HelpText } from './HelpText';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';