Cloudwatch: Refactor logs query field (#59503)

* Refactor LogsQueryField to function component (#59503)

.betterer.results

@@ -5350,9 +5350,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
     "public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -1,4 +1,3 @@
-import { css, cx } from '@emotion/css';
 import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import React, { ReactNode } from 'react';
 import { Node, Plugin } from 'slate';
@@ -9,16 +8,15 @@ import {
   BracesPlugin,
   QueryField,
   SlatePrism,
+  Themeable2,
   TypeaheadInput,
   TypeaheadOutput,
-  Themeable2,
   withTheme2,
-  clearButtonStyles,
 } from '@grafana/ui';
 import { ExploreId } from 'app/types';
+
 // Utils & Services
 // dom also includes Element polyfills
-
 import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchLanguageProvider } from '../language_provider';
 import syntax from '../syntax';
@@ -37,60 +35,33 @@ export interface CloudWatchLogsQueryFieldProps
   exploreId: ExploreId;
   query: CloudWatchLogsQuery;
 }
+const plugins: Array<Plugin<Editor>> = [
+  BracesPlugin(),
+  SlatePrism(
+    {
+      onlyIn: (node: Node) => node.object === 'block' && node.type === 'code_block',
+      getSyntax: (node: Node) => 'cloudwatch',
+    },
+    { ...(prismLanguages as LanguageMap), cloudwatch: syntax }
+  ),
+];
+export const CloudWatchLogsQueryField = (props: CloudWatchLogsQueryFieldProps) => {
+  const { query, datasource, onChange, onRunQuery, ExtraFieldElement, data } = props;
 
-const addPaddingToButton = css`
-  padding: 1px 4px;
-`;
-interface State {
-  hint:
-    | {
-        message: string;
-        fix: {
-          label: string;
-          action: () => void;
-        };
-      }
-    | undefined;
-}
+  const showError = data?.error?.refId === query.refId;
+  const cleanText = datasource.languageProvider.cleanText;
 
-class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogsQueryFieldProps, State> {
-  state: State = {
-    hint: undefined,
-  };
-
-  plugins: Array<Plugin<Editor>>;
-
-  constructor(props: CloudWatchLogsQueryFieldProps, context: React.Context<any>) {
-    super(props, context);
-
-    this.plugins = [
-      BracesPlugin(),
-      SlatePrism(
-        {
-          onlyIn: (node: Node) => node.object === 'block' && node.type === 'code_block',
-          getSyntax: (node: Node) => 'cloudwatch',
-        },
-        { ...(prismLanguages as LanguageMap), cloudwatch: syntax }
-      ),
-    ];
-  }
-
-  onChangeQuery = (value: string) => {
+  const onChangeQuery = (value: string) => {
     // Send text change to parent
-    const { query, onChange } = this.props;
-
-    if (onChange) {
-      const nextQuery = {
-        ...query,
-        expression: value,
-        statsGroups: getStatsGroups(value),
-      };
-      onChange(nextQuery);
-    }
+    const nextQuery = {
+      ...query,
+      expression: value,
+      statsGroups: getStatsGroups(value),
+    };
+    onChange(nextQuery);
   };
 
-  onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
-    const { datasource, query } = this.props;
+  const onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
     const { logGroupNames } = query;
 
     if (!datasource.languageProvider) {
@@ -98,7 +69,7 @@ class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogsQueryFi
     }
 
     const cloudwatchLanguageProvider = datasource.languageProvider as CloudWatchLanguageProvider;
-    const { history, absoluteRange } = this.props;
+    const { history, absoluteRange } = props;
     const { prefix, text, value, wrapperClasses, labelKey, editor } = typeahead;
 
     return await cloudwatchLanguageProvider.provideCompletionItems(
@@ -112,61 +83,38 @@ class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogsQueryFi
     );
   };
 
-  render() {
-    const { onRunQuery, onChange, ExtraFieldElement, data, query, datasource, theme } = this.props;
-    const { expression } = query;
-    const { hint } = this.state;
-
-    const showError = data && data.error && data.error.refId === query.refId;
-    const cleanText = datasource.languageProvider ? datasource.languageProvider.cleanText : undefined;
-
-    return (
-      <>
-        <QueryHeader
-          query={query}
-          onRunQuery={onRunQuery}
-          datasource={datasource}
-          onChange={onChange}
-          sqlCodeEditorIsDirty={false}
-        />
-        <LogGroupSelection datasource={datasource} query={query} onChange={onChange} onRunQuery={onRunQuery} />
-        <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
-          <div className="gf-form gf-form--grow flex-shrink-1">
-            <QueryField
-              additionalPlugins={this.plugins}
-              query={expression ?? ''}
-              onChange={this.onChangeQuery}
-              onRunQuery={this.props.onRunQuery}
-              onTypeahead={this.onTypeahead}
-              cleanText={cleanText}
-              placeholder="Enter a CloudWatch Logs Insights query (run with Shift+Enter)"
-              portalOrigin="cloudwatch"
-            />
-          </div>
-          {ExtraFieldElement}
+  return (
+    <>
+      <QueryHeader
+        query={query}
+        onRunQuery={onRunQuery}
+        datasource={datasource}
+        onChange={onChange}
+        sqlCodeEditorIsDirty={false}
+      />
+      <LogGroupSelection datasource={datasource} query={query} onChange={onChange} onRunQuery={onRunQuery} />
+      <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
+        <div className="gf-form gf-form--grow flex-shrink-1">
+          <QueryField
+            additionalPlugins={plugins}
+            query={query.expression ?? ''}
+            onChange={onChangeQuery}
+            onRunQuery={props.onRunQuery}
+            onTypeahead={onTypeahead}
+            cleanText={cleanText}
+            placeholder="Enter a CloudWatch Logs Insights query (run with Shift+Enter)"
+            portalOrigin="cloudwatch"
+          />
         </div>
-        {hint && (
-          <div className="query-row-break">
-            <div className="text-warning">
-              {hint.message}
-              <button
-                type="button"
-                className={cx(clearButtonStyles(theme), 'text-link', 'muted', addPaddingToButton)}
-                onClick={hint.fix.action}
-              >
-                {hint.fix.label}
-              </button>
-            </div>
-          </div>
-        )}
-        {showError ? (
-          <div className="query-row-break">
-            <div className="prom-query-field-info text-error">{data?.error?.message}</div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-}
+        {ExtraFieldElement}
+      </div>
+      {showError ? (
+        <div className="query-row-break">
+          <div className="prom-query-field-info text-error">{data?.error?.message}</div>
+        </div>
+      ) : null}
+    </>
+  );
+};
 
 export default withTheme2(CloudWatchLogsQueryField);