Extract HelpText from Expression Editor (#19729)

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorHelpText.tsx

+import React from "react";
+import { t } from "ttag";
+
+import MetabaseSettings from "metabase/lib/settings";
+import colors from "metabase/lib/colors";
+import ExternalLink from "metabase/components/ExternalLink";
+import Icon from "metabase/components/Icon";
+import Popover from "metabase/components/Popover";
+
+type Arg = {
+  name: string;
+  description: string;
+};
+
+type HelpText = {
+  args: Arg[];
+  description: string;
+  example: string;
+  structure: string;
+};
+
+interface HelpTextProps {
+  helpText: HelpText;
+  width: number;
+}
+
+const HelpText = ({ helpText, width }: HelpTextProps) =>
+  helpText ? (
+    <Popover
+      tetherOptions={{
+        attachment: "top left",
+        targetAttachment: "bottom left",
+      }}
+      style={{ width }}
+      isOpen
+    >
+      {/* Prevent stealing focus from input box causing the help text to be closed (metabase#17548) */}
+      <div onMouseDown={e => e.preventDefault()}>
+        <p
+          className="p2 m0 text-monospace text-bold"
+          style={{ background: colors["bg-yellow"] }}
+        >
+          {helpText.structure}
+        </p>
+        <div className="p2 border-top">
+          <p className="mt0 text-bold">{helpText.description}</p>
+          <p className="text-code m0 text-body">{helpText.example}</p>
+        </div>
+        <div className="p2 border-top">
+          {helpText.args.map(({ name, description }, index) => (
+            <div key={index}>
+              <h4 className="text-medium">{name}</h4>
+              <p className="mt1 text-bold">{description}</p>
+            </div>
+          ))}
+          <ExternalLink
+            className="link text-bold block my1"
+            target="_blank"
+            href={MetabaseSettings.docsUrl("users-guide/expressions")}
+          >
+            <Icon name="reference" size={12} className="mr1" />
+            {t`Learn more`}
+          </ExternalLink>
+        </div>
+      </div>
+    </Popover>
+  ) : null;
+
+export default HelpText;

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx

@@ -12,16 +12,11 @@ import { processSource } from "metabase/lib/expressions/process";
 import { diagnose } from "metabase/lib/expressions/diagnostics";
 import { tokenize } from "metabase/lib/expressions/tokenizer";
 
-import MetabaseSettings from "metabase/lib/settings";
-import colors from "metabase/lib/colors";
-
-import ExternalLink from "metabase/components/ExternalLink";
-import Icon from "metabase/components/Icon";
-import Popover from "metabase/components/Popover";
 import ExplicitSize from "metabase/components/ExplicitSize";
 
 import { isExpression } from "metabase/lib/expressions";
 
+import HelpText from "./ExpressionEditorHelpText";
 import ExpressionEditorSuggestions from "./ExpressionEditorSuggestions";
 import {
   EditorContainer,
@@ -36,48 +31,6 @@ import * as ace from "ace-builds/src-noconflict/ace";
 
 ace.config.set("basePath", "/assets/ui/");
 
-const HelpText = ({ helpText, width }) =>
-  helpText ? (
-    <Popover
-      tetherOptions={{
-        attachment: "top left",
-        targetAttachment: "bottom left",
-      }}
-      style={{ width }}
-      isOpen
-    >
-      {/* Prevent stealing focus from input box causing the help text to be closed (metabase#17548) */}
-      <div onMouseDown={e => e.preventDefault()}>
-        <p
-          className="p2 m0 text-monospace text-bold"
-          style={{ background: colors["bg-yellow"] }}
-        >
-          {helpText.structure}
-        </p>
-        <div className="p2 border-top">
-          <p className="mt0 text-bold">{helpText.description}</p>
-          <p className="text-code m0 text-body">{helpText.example}</p>
-        </div>
-        <div className="p2 border-top">
-          {helpText.args.map(({ name, description }, index) => (
-            <div key={index}>
-              <h4 className="text-medium">{name}</h4>
-              <p className="mt1 text-bold">{description}</p>
-            </div>
-          ))}
-          <ExternalLink
-            className="link text-bold block my1"
-            target="_blank"
-            href={MetabaseSettings.docsUrl("users-guide/expressions")}
-          >
-            <Icon name="reference" size={12} className="mr1" />
-            {t`Learn more`}
-          </ExternalLink>
-        </div>
-      </div>
-    </Popover>
-  ) : null;
-
 const ErrorMessage = ({ error }) => {
   return (
     <div>