From f97fba7cc941bc13414201d72b013483a6d5721a Mon Sep 17 00:00:00 2001
From: Julien Pivotto <roidelapluie@inuits.eu>
Date: Thu, 12 Nov 2020 11:48:48 +0100
Subject: [PATCH] React UI: Change "metrics autocomplete" with "autocomplete"
 (#8174)

- First, it is currently not only removing "metric" autocomplete, but
also "query history autocomplete", so the checkbox is confusing.
- Then, in the future, we will want also "functions" autocomplete.

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
---
 .../src/pages/graph/ExpressionInput.test.tsx   |  8 ++++----
 .../src/pages/graph/ExpressionInput.tsx        |  4 ++--
 .../react-app/src/pages/graph/Panel.test.tsx   |  2 +-
 web/ui/react-app/src/pages/graph/Panel.tsx     |  4 ++--
 web/ui/react-app/src/pages/graph/PanelList.tsx | 18 +++++++++---------
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx b/web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx
index 8dc20be61..d532101a3 100644
--- a/web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx
+++ b/web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx
@@ -30,7 +30,7 @@ describe('ExpressionInput', () => {
       // Do nothing.
     },
     loading: false,
-    enableMetricAutocomplete: true,
+    enableAutocomplete: true,
   };
 
   let expressionInput: ReactWrapper;
@@ -175,12 +175,12 @@ describe('ExpressionInput', () => {
       instance.createAutocompleteSection({ closeMenu: spyCloseMenu });
       setTimeout(() => expect(spyCloseMenu).toHaveBeenCalled());
     });
-    it('should not render list if enableMetricAutocomplete is false', () => {
+    it('should not render list if enableAutocomplete is false', () => {
       const input = mount(
         <ExpressionInput
           autocompleteSections={{ title: ['foo', 'bar', 'baz'] }}
           {...({} as any)}
-          enableMetricAutocomplete={false}
+          enableAutocomplete={false}
         />
       );
       const instance: any = input.instance();
@@ -193,7 +193,7 @@ describe('ExpressionInput', () => {
         <ExpressionInput
           autocompleteSections={{ title: ['foo', 'bar', 'baz'] }}
           {...({} as any)}
-          enableMetricAutocomplete={true}
+          enableAutocomplete={true}
         />
       );
       const instance: any = input.instance();
diff --git a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
index 3a5d10e30..6bce6c2d2 100644
--- a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
+++ b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
@@ -14,7 +14,7 @@ interface ExpressionInputProps {
   autocompleteSections: { [key: string]: string[] };
   executeQuery: () => void;
   loading: boolean;
-  enableMetricAutocomplete: boolean;
+  enableAutocomplete: boolean;
 }
 
 interface ExpressionInputState {
@@ -78,7 +78,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { autocompleteSections } = this.props;
     let index = 0;
     const sections =
-      inputValue!.length && this.props.enableMetricAutocomplete
+      inputValue!.length && this.props.enableAutocomplete
         ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
             const matches = this.getSearchMatches(inputValue!, items);
             return !matches.length
diff --git a/web/ui/react-app/src/pages/graph/Panel.test.tsx b/web/ui/react-app/src/pages/graph/Panel.test.tsx
index a0b78d51d..0849e456f 100644
--- a/web/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -32,7 +32,7 @@ const defaultProps = {
   onExecuteQuery: (): void => {
     // Do nothing.
   },
-  enableMetricAutocomplete: true,
+  enableAutocomplete: true,
 };
 
 describe('Panel', () => {
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 2da5c7051..db11af916 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -22,7 +22,7 @@ interface PanelProps {
   removePanel: () => void;
   onExecuteQuery: (query: string) => void;
   pathPrefix: string;
-  enableMetricAutocomplete: boolean;
+  enableAutocomplete: boolean;
 }
 
 interface PanelState {
@@ -234,7 +234,7 @@ class Panel extends Component<PanelProps, PanelState> {
               onExpressionChange={this.handleExpressionChange}
               executeQuery={this.executeQuery}
               loading={this.state.loading}
-              enableMetricAutocomplete={this.props.enableMetricAutocomplete}
+              enableAutocomplete={this.props.enableAutocomplete}
               autocompleteSections={{
                 'Query History': pastQueries,
                 'Metric Names': metricNames,
diff --git a/web/ui/react-app/src/pages/graph/PanelList.tsx b/web/ui/react-app/src/pages/graph/PanelList.tsx
index c3f4c277a..4e0758790 100644
--- a/web/ui/react-app/src/pages/graph/PanelList.tsx
+++ b/web/ui/react-app/src/pages/graph/PanelList.tsx
@@ -22,14 +22,14 @@ interface PanelListProps extends RouteComponentProps {
   metrics: string[];
   useLocalTime: boolean;
   queryHistoryEnabled: boolean;
-  enableMetricAutocomplete: boolean;
+  enableAutocomplete: boolean;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
   metrics = [],
   useLocalTime,
   queryHistoryEnabled,
-  enableMetricAutocomplete,
+  enableAutocomplete,
   ...rest
 }) => {
   const [panels, setPanels] = useState(rest.panels);
@@ -102,7 +102,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           useLocalTime={useLocalTime}
           metricNames={metrics}
           pastQueries={queryHistoryEnabled ? historyItems : []}
-          enableMetricAutocomplete={enableMetricAutocomplete}
+          enableAutocomplete={enableAutocomplete}
         />
       ))}
       <Button className="d-block mb-3" color="primary" onClick={addPanel}>
@@ -116,7 +116,7 @@ const PanelList: FC<RouteComponentProps> = () => {
   const [delta, setDelta] = useState(0);
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
   const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
-  const [enableMetricAutocomplete, setEnableMetricAutocomplete] = useLocalStorage('enable-metric-autocomplete', true);
+  const [enableAutocomplete, setEnableAutocomplete] = useLocalStorage('enable-metric-autocomplete', true);
 
   const pathPrefix = usePathPrefix();
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/${API_PATH}/label/__name__/values`);
@@ -159,11 +159,11 @@ const PanelList: FC<RouteComponentProps> = () => {
       </Checkbox>
       <Checkbox
         wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
-        id="metric-autocomplete"
-        onChange={({ target }) => setEnableMetricAutocomplete(target.checked)}
-        defaultChecked={enableMetricAutocomplete}
+        id="autocomplete"
+        onChange={({ target }) => setEnableAutocomplete(target.checked)}
+        defaultChecked={enableAutocomplete}
       >
-        Enable metric autocomplete
+        Enable autocomplete
       </Checkbox>
       {(delta > 30 || timeErr) && (
         <Alert color="danger">
@@ -184,7 +184,7 @@ const PanelList: FC<RouteComponentProps> = () => {
         useLocalTime={useLocalTime}
         metrics={metricsRes.data}
         queryHistoryEnabled={enableQueryHistory}
-        enableMetricAutocomplete={enableMetricAutocomplete}
+        enableAutocomplete={enableAutocomplete}
       />
     </>
   );