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>

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();

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

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', () => {

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,

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}
       />
     </>
   );