Extract getDataSelectors function from NativeQueryEditor (#18628)

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -2,48 +2,39 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import cx from "classnames";
-
 import "ace/ace";
 import "ace/ext-language_tools";
-
 import "ace/mode-sql";
 import "ace/mode-mysql";
 import "ace/mode-pgsql";
 import "ace/mode-sqlserver";
 import "ace/mode-json";
-
 import "ace/snippets/text";
 import "ace/snippets/sql";
 import "ace/snippets/mysql";
 import "ace/snippets/pgsql";
 import "ace/snippets/sqlserver";
 import "ace/snippets/json";
-
-import { t } from "ttag";
 import _ from "underscore";
-
 import { ResizableBox } from "react-resizable";
 
-import "./NativeQueryEditor.css";
-
 import { isEventOverElement } from "metabase/lib/dom";
 import { delay } from "metabase/lib/promise";
 import { SQLBehaviour } from "metabase/lib/ace/sql_behaviour";
 import ExplicitSize from "metabase/components/ExplicitSize";
+
 import Snippets from "metabase/entities/snippets";
 import SnippetCollections from "metabase/entities/snippet-collections";
+import SnippetModal from "metabase/query_builder/components/template_tags/SnippetModal";
 import Parameters from "metabase/parameters/components/Parameters/Parameters";
 import Question from "metabase-lib/lib/Question";
 import NativeQuery from "metabase-lib/lib/queries/NativeQuery";
-import {
-  DatabaseDataSelector,
-  SchemaAndTableDataSelector,
-} from "metabase/query_builder/components/DataSelector";
-import SnippetModal from "metabase/query_builder/components/template_tags/SnippetModal";
-
-import VisibilityToggler from "./NativeQueryEditor/VisibilityToggler";
 import NativeQueryEditorSidebar from "./NativeQueryEditor/NativeQueryEditorSidebar";
+import VisibilityToggler from "./NativeQueryEditor/VisibilityToggler";
 import RightClickPopover from "./NativeQueryEditor/RightClickPopover";
+import DataSourceSelectors from "./NativeQueryEditor/DataSourceSelectors";
+
+import "./NativeQueryEditor.css";
 
 import type { DatasetQuery } from "metabase-types/types/Card";
 import type { DatabaseId } from "metabase-types/types/Database";
@@ -479,62 +470,8 @@ export default class NativeQueryEditor extends Component {
       openSnippetModalWithSelectedText,
     } = this.props;
 
-    const database = query.database();
-    const databases = query.metadata().databasesList({ savedQuestions: false });
     const parameters = query.question().parameters();
 
-    let dataSelectors = [];
-    if (isNativeEditorOpen && databases.length > 0) {
-      // we only render a db selector if there are actually multiple to choose from
-      if (
-        database == null ||
-        (databases.length > 1 && databases.some(db => db.id === database.id))
-      ) {
-        dataSelectors.push(
-          <div
-            key="db_selector"
-            className="GuiBuilder-section GuiBuilder-data flex align-center ml2"
-          >
-            <DatabaseDataSelector
-              databases={databases}
-              selectedDatabaseId={database?.id}
-              setDatabaseFn={this.setDatabaseId}
-              isInitiallyOpen={database == null}
-              readOnly={this.props.readOnly}
-            />
-          </div>,
-        );
-      } else if (database) {
-        dataSelectors.push(
-          <span key="db" className="p2 text-bold text-grey">
-            {database.name}
-          </span>,
-        );
-      }
-      if (query.requiresTable()) {
-        const selectedTable = query.table();
-        dataSelectors.push(
-          <div
-            key="table_selector"
-            className="GuiBuilder-section GuiBuilder-data flex align-center ml2"
-          >
-            <SchemaAndTableDataSelector
-              selectedTableId={selectedTable?.id || null}
-              selectedDatabaseId={database?.id}
-              databases={[database]}
-              setSourceTableFn={this.setTableId}
-              isInitiallyOpen={false}
-              readOnly={this.props.readOnly}
-            />
-          </div>,
-        );
-      }
-    } else {
-      dataSelectors = (
-        <span className="ml2 p2 text-medium">{t`This question is written in ${query.nativeQueryLanguage()}.`}</span>
-      );
-    }
-
     const dragHandle = (
       <div className="NativeQueryEditorDragHandleWrapper">
         <div className="NativeQueryEditorDragHandle" />
@@ -544,7 +481,13 @@ export default class NativeQueryEditor extends Component {
     return (
       <div className="NativeQueryEditor bg-light full">
         <div className="flex align-center" style={{ minHeight: 55 }}>
-          {dataSelectors}
+          <DataSourceSelectors
+            isNativeEditorOpen={isNativeEditorOpen}
+            query={query}
+            readOnly={readOnly}
+            setDatabaseId={this.setDatabaseId}
+            setTableId={this.setTableId}
+          />
           <Parameters
             parameters={parameters}
             query={location.query}

frontend/src/metabase/query_builder/components/NativeQueryEditor/DataSourceSelectors/DataSourceSelectors.jsx

+import React from "react";
+import PropTypes from "prop-types";
+import { t } from "ttag";
+
+import {
+  DatabaseDataSelector,
+  SchemaAndTableDataSelector,
+} from "metabase/query_builder/components/DataSelector";
+
+const DataSourceSelectorsPropTypes = {
+  isNativeEditorOpen: PropTypes.bool.isRequired,
+  query: PropTypes.object,
+  readOnly: PropTypes.bool,
+  setDatabaseId: PropTypes.func,
+  setTableId: PropTypes.func,
+};
+
+const PopulatedDataSourceSelectorsPropTypes = {
+  database: PropTypes.object,
+  databases: PropTypes.array,
+  isNativeEditorOpen: PropTypes.bool.isRequired,
+  query: PropTypes.object,
+  readOnly: PropTypes.bool,
+  setDatabaseId: PropTypes.func,
+  setTableId: PropTypes.func,
+};
+
+const DatabaseSelectorPropTypes = {
+  database: PropTypes.object,
+  databases: PropTypes.array,
+  readOnly: PropTypes.bool,
+  setDatabaseId: PropTypes.func,
+};
+
+const DatabaseNameSpanPropTypes = {
+  database: PropTypes.object,
+};
+
+const TableSelectorPropTypes = {
+  database: PropTypes.object,
+  readOnly: PropTypes.bool,
+  selectedTable: PropTypes.object,
+  setTableId: PropTypes.func,
+};
+
+const PlaceholderPropTypes = {
+  query: PropTypes.object,
+};
+
+const DataSourceSelectors = ({
+  isNativeEditorOpen,
+  query,
+  readOnly,
+  setDatabaseId,
+  setTableId,
+}) => {
+  const database = query.database();
+  const databases = query.metadata().databasesList({ savedQuestions: false });
+
+  if (!isNativeEditorOpen || databases.length === 0) {
+    return <Placeholder query={query} />;
+  }
+
+  return (
+    <PopulatedDataSourceSelectors
+      database={database}
+      databases={databases}
+      query={query}
+      readOnly={readOnly}
+      setDatabaseId={setDatabaseId}
+      setTableId={setTableId}
+    />
+  );
+};
+
+DataSourceSelectors.propTypes = DataSourceSelectorsPropTypes;
+
+const PopulatedDataSourceSelectors = ({
+  database,
+  databases,
+  query,
+  readOnly,
+  setDatabaseId,
+  setTableId,
+}) => {
+  const dataSourceSelectors = [];
+
+  const areThereMultipleDatabases = checkIfThereAreMultipleDatabases(
+    database,
+    databases,
+  );
+
+  if (areThereMultipleDatabases) {
+    dataSourceSelectors.push(
+      <DatabaseSelector
+        database={database}
+        databases={databases}
+        key="db_selector"
+        readOnly={readOnly}
+        setDatabaseId={setDatabaseId}
+      />,
+    );
+  } else if (database) {
+    dataSourceSelectors.push(<DatabaseNameSpan key="db" database={database} />);
+  }
+
+  if (query.requiresTable()) {
+    dataSourceSelectors.push(
+      <TableSelector
+        database={database}
+        key="table_selector"
+        readOnly={readOnly}
+        selectedTable={query.table()}
+        setTableId={setTableId}
+      />,
+    );
+  }
+
+  return dataSourceSelectors;
+};
+
+PopulatedDataSourceSelectors.propTypes = PopulatedDataSourceSelectorsPropTypes;
+
+const checkIfThereAreMultipleDatabases = (database, databases) =>
+  database == null ||
+  (databases.length > 1 && databases.some(db => db.id === database.id));
+
+const DatabaseSelector = ({ database, databases, readOnly, setDatabaseId }) => (
+  <div className="GuiBuilder-section GuiBuilder-data flex align-center ml2">
+    <DatabaseDataSelector
+      databases={databases}
+      selectedDatabaseId={database?.id}
+      setDatabaseFn={setDatabaseId}
+      isInitiallyOpen={database == null}
+      readOnly={readOnly}
+    />
+  </div>
+);
+
+DatabaseSelector.propTypes = DatabaseSelectorPropTypes;
+
+const DatabaseNameSpan = ({ database }) => (
+  <span className="p2 text-bold text-grey">{database.name}</span>
+);
+
+DatabaseNameSpan.propTypes = DatabaseNameSpanPropTypes;
+
+const TableSelector = ({ database, readOnly, selectedTable, setTableId }) => (
+  <div className="GuiBuilder-section GuiBuilder-data flex align-center ml2">
+    <SchemaAndTableDataSelector
+      selectedTableId={selectedTable?.id || null}
+      selectedDatabaseId={database?.id}
+      databases={[database]}
+      setSourceTableFn={setTableId}
+      isInitiallyOpen={false}
+      readOnly={readOnly}
+    />
+  </div>
+);
+
+TableSelector.propTypes = TableSelectorPropTypes;
+
+const Placeholder = ({ query }) => (
+  <span className="ml2 p2 text-medium">
+    {t`This question is written in ${query.nativeQueryLanguage()}.`}
+  </span>
+);
+
+Placeholder.propTypes = PlaceholderPropTypes;
+
+export default DataSourceSelectors;

frontend/src/metabase/query_builder/components/NativeQueryEditor/DataSourceSelectors/index.js

+export { default } from "./DataSourceSelectors";