Loki: Refactor editor and syntax hooks (#21687)

public/app/plugins/datasource/loki/components/LokiQueryField.tsx

@@ -1,18 +1,23 @@
 import React, { FunctionComponent } from 'react';
 import { LokiQueryFieldForm, LokiQueryFieldFormProps } from './LokiQueryFieldForm';
-import { useLokiSyntax } from './useLokiSyntax';
+import { useLokiSyntaxAndLabels } from './useLokiSyntaxAndLabels';
 import LokiLanguageProvider from '../language_provider';
 
-export const LokiQueryField: FunctionComponent<LokiQueryFieldFormProps> = ({ datasource, ...otherProps }) => {
-  const { isSyntaxReady, setActiveOption, refreshLabels, ...syntaxProps } = useLokiSyntax(
+type LokiQueryFieldProps = Omit<
+  LokiQueryFieldFormProps,
+  'syntax' | 'syntaxLoaded' | 'onLoadOptions' | 'onLabelsRefresh' | 'logLabelOptions'
+>;
+
+export const LokiQueryField: FunctionComponent<LokiQueryFieldProps> = props => {
+  const { datasource, absoluteRange, ...otherProps } = props;
+  const { isSyntaxReady, setActiveOption, refreshLabels, syntax, logLabelOptions } = useLokiSyntaxAndLabels(
     datasource.languageProvider as LokiLanguageProvider,
-    otherProps.absoluteRange
+    absoluteRange
   );
 
   return (
     <LokiQueryFieldForm
       datasource={datasource}
-      syntaxLoaded={isSyntaxReady}
       /**
        * setActiveOption name is intentional. Because of the way rc-cascader requests additional data
        * https://github.com/react-component/cascader/blob/master/src/Cascader.jsx#L165
@@ -21,7 +26,10 @@ export const LokiQueryField: FunctionComponent<LokiQueryFieldFormProps> = ({ dat
        */
       onLoadOptions={setActiveOption}
       onLabelsRefresh={refreshLabels}
-      {...syntaxProps}
+      absoluteRange={absoluteRange}
+      syntax={syntax}
+      syntaxLoaded={isSyntaxReady}
+      logLabelOptions={logLabelOptions}
       {...otherProps}
     />
   );