Fix Audit logging not showing ad-hoc native queries (#18044)

* Fix test's describe block

* Mention #16845 repro

* Assert native query text is displayed in Audit

* Enable the repro test

* Fix ad-hoc native query not displayed in Audit correctly

* Don't display native query sidebar in read-only mode

enterprise/frontend/src/metabase-enterprise/audit_app/pages/AuditQueryDetail.jsx

@@ -64,6 +64,7 @@ import { getMetadata } from "metabase/selectors/metadata";
 
 import NativeQuery from "metabase-lib/lib/queries/NativeQuery";
 
+import ExplicitSize from "metabase/components/ExplicitSize";
 import { loadMetadataForCard } from "metabase/query_builder/actions";
 
 const mapStateToProps = state => ({ metadata: getMetadata(state) });
@@ -73,13 +74,23 @@ const mapDispatchToProps = { loadMetadataForCard };
   mapStateToProps,
   mapDispatchToProps,
 )
+@ExplicitSize()
 class QueryBuilderReadOnly extends React.Component {
+  state = {
+    isNativeEditorOpen: false,
+  };
+
+  setIsNativeEditorOpen = open => {
+    this.setState({ isNativeEditorOpen: open });
+  };
+
   componentDidMount() {
     const { card, loadMetadataForCard } = this.props;
     loadMetadataForCard(card);
   }
+
   render() {
-    const { card, metadata } = this.props;
+    const { card, metadata, height } = this.props;
     const question = new Question(card, metadata);
 
     const query = question.query();
@@ -91,6 +102,9 @@ class QueryBuilderReadOnly extends React.Component {
           query={query}
           location={{ query: {} }}
           readOnly
+          viewHeight={height}
+          isNativeEditorOpen={this.state.isNativeEditorOpen}
+          setIsNativeEditorOpen={this.setIsNativeEditorOpen}
         />
       );
     } else {

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

@@ -648,43 +648,45 @@ export default class NativeQueryEditor extends Component {
               closeModal={this.props.closeSnippetModal}
             />
           )}
-          <div className="flex flex-column align-center">
-            <DataReferenceButton
-              {...this.props}
-              size={ICON_SIZE}
-              className="mt3"
-            />
-            <NativeVariablesButton
-              {...this.props}
-              size={ICON_SIZE}
-              className="mt3"
-            />
-            {showSnippetSidebarButton && (
-              <SnippetSidebarButton
+          {!readOnly && (
+            <div className="flex flex-column align-center">
+              <DataReferenceButton
                 {...this.props}
                 size={ICON_SIZE}
                 className="mt3"
               />
-            )}
-            <RunButtonWithTooltip
-              disabled={!isRunnable}
-              isRunning={isRunning}
-              isDirty={isResultDirty}
-              isPreviewing={isPreviewing}
-              onRun={this.runQuery}
-              onCancel={() => cancelQuery()}
-              compact
-              className="mx2 mb2 mt-auto"
-              style={{ width: 40, height: 40 }}
-              getTooltip={() =>
-                (this.props.nativeEditorSelectedText
-                  ? t`Run selected text`
-                  : t`Run query`) +
-                " " +
-                (isMac() ? t`(⌘ + enter)` : t`(Ctrl + enter)`)
-              }
-            />
-          </div>
+              <NativeVariablesButton
+                {...this.props}
+                size={ICON_SIZE}
+                className="mt3"
+              />
+              {showSnippetSidebarButton && (
+                <SnippetSidebarButton
+                  {...this.props}
+                  size={ICON_SIZE}
+                  className="mt3"
+                />
+              )}
+              <RunButtonWithTooltip
+                disabled={!isRunnable}
+                isRunning={isRunning}
+                isDirty={isResultDirty}
+                isPreviewing={isPreviewing}
+                onRun={this.runQuery}
+                onCancel={() => cancelQuery()}
+                compact
+                className="mx2 mb2 mt-auto"
+                style={{ width: 40, height: 40 }}
+                getTooltip={() =>
+                  (this.props.nativeEditorSelectedText
+                    ? t`Run selected text`
+                    : t`Run query`) +
+                  " " +
+                  (isMac() ? t`(⌘ + enter)` : t`(Ctrl + enter)`)
+                }
+              />
+            </div>
+          )}
         </ResizableBox>
       </div>
     );

frontend/test/metabase/scenarios/admin/audit/ad-hoc.cy.spec.js

@@ -5,7 +5,7 @@ import {
 } from "__support__/e2e/cypress";
 
 describeWithToken("audit > ad-hoc", () => {
-  describe("native query with JOIN", () => {
+  describe("native query", () => {
     beforeEach(() => {
       restore();
 
@@ -24,7 +24,7 @@ describeWithToken("audit > ad-hoc", () => {
       cy.signInAsAdmin();
     });
 
-    it.skip("should appear in audit log (metabase-enterprise#486)", () => {
+    it("should appear in audit log (metabase#16845 metabase-enterprise#486)", () => {
       cy.visit("/admin/audit/members/log");
 
       cy.findByText("Native")
@@ -38,6 +38,7 @@ describeWithToken("audit > ad-hoc", () => {
 
       cy.get(".PageTitle").contains("Query");
       cy.findByText("Open in Metabase");
+      cy.get(".ace_content").contains("SELECT 123");
     });
   });
 });