Extract VisibilityToggler component from NativeQueryEditor (#18627)

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

@@ -29,25 +29,22 @@ import "./NativeQueryEditor.css";
 import { isEventOverElement } from "metabase/lib/dom";
 import { delay } from "metabase/lib/promise";
 import { SQLBehaviour } from "metabase/lib/ace/sql_behaviour";
-
-import Icon from "metabase/components/Icon";
 import ExplicitSize from "metabase/components/ExplicitSize";
-
 import Snippets from "metabase/entities/snippets";
 import SnippetCollections from "metabase/entities/snippet-collections";
-
 import Parameters from "metabase/parameters/components/Parameters/Parameters";
 import Question from "metabase-lib/lib/Question";
 import NativeQuery from "metabase-lib/lib/queries/NativeQuery";
-import NativeQueryEditorSidebar from "./NativeQueryEditor/NativeQueryEditorSidebar";
-import RightClickPopover from "./NativeQueryEditor/RightClickPopover";
-
 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 RightClickPopover from "./NativeQueryEditor/RightClickPopover";
+
 import type { DatasetQuery } from "metabase-types/types/Card";
 import type { DatabaseId } from "metabase-types/types/Database";
 import type { TableId } from "metabase-types/types/Table";
@@ -538,14 +535,6 @@ export default class NativeQueryEditor extends Component {
       );
     }
 
-    let toggleEditorText, toggleEditorIcon;
-    if (isNativeEditorOpen) {
-      toggleEditorText = null;
-      toggleEditorIcon = "contract";
-    } else {
-      toggleEditorText = t`Open Editor`;
-      toggleEditorIcon = "expand";
-    }
     const dragHandle = (
       <div className="NativeQueryEditorDragHandleWrapper">
         <div className="NativeQueryEditorDragHandle" />
@@ -567,23 +556,11 @@ export default class NativeQueryEditor extends Component {
             commitImmediately
           />
           {query.hasWritePermission() && (
-            <div
-              className="flex-align-right flex align-center text-medium"
-              style={{ paddingRight: 4 }}
-            >
-              <a
-                className={cx(
-                  "Query-label no-decoration flex align-center mx3 text-brand-hover transition-all",
-                  { hide: readOnly },
-                )}
-                onClick={this.toggleEditor}
-              >
-                <span className="mr1" style={{ minWidth: 70 }}>
-                  {toggleEditorText}
-                </span>
-                <Icon name={toggleEditorIcon} size={18} />
-              </a>
-            </div>
+            <VisibilityToggler
+              isOpen={isNativeEditorOpen}
+              readOnly={readOnly}
+              toggleEditor={this.toggleEditor}
+            />
           )}
         </div>
         <ResizableBox

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

+import React from "react";
+import PropTypes from "prop-types";
+import { t } from "ttag";
+import cx from "classnames";
+
+import Icon from "metabase/components/Icon";
+import { Container, Span } from "./VisibilityToggler.styled";
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  toggleEditor: PropTypes.func.isRequired,
+};
+
+const VisibilityToggler = ({ isOpen, readOnly, toggleEditor }) => {
+  const text = isOpen ? null : t`Open Editor`;
+  const icon = isOpen ? "contract" : "expand";
+
+  const className = cx(
+    "Query-label no-decoration flex align-center mx3 text-brand-hover transition-all",
+    { hide: readOnly },
+  );
+
+  return (
+    <Container>
+      <a className={className} onClick={toggleEditor}>
+        <Span>{text}</Span>
+        <Icon name={icon} size={18} />
+      </a>
+    </Container>
+  );
+};
+
+VisibilityToggler.propTypes = propTypes;
+
+export default VisibilityToggler;

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

+import styled from "styled-components";
+
+import { color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+export const Container = styled.div`
+  align-items: center;
+  color: ${color("text-medium")};
+  display: flex;
+  margin-left: auto;
+  padding-right: ${space(1)};
+`;
+
+export const Span = styled.span`
+  margin-right: ${space(1)};
+  min-width: 70px;
+`;

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

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