add find-replace search box to the native query editor (#25093)

* add find-replace search box to the native query editor

* mock

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

@@ -4,6 +4,7 @@ import React, { Component } from "react";
 import cx from "classnames";
 import "ace/ace";
 import "ace/ext-language_tools";
+import "ace/ext-searchbox";
 import "ace/mode-sql";
 import "ace/mode-mysql";
 import "ace/mode-pgsql";

frontend/src/metabase/query_builder/components/NativeQueryEditor.styled.tsx

@@ -8,6 +8,35 @@ export const NativeQueryEditorRoot = styled.div`
     color: ${color("text-dark")};
   }
 
+  .ace_search {
+    font-family: Lato;
+    background-color: ${color("bg-light")};
+    color: ${color("text-dark")};
+    border-color: ${color("border")};
+    padding-bottom: 2px;
+  }
+
+  .ace_search_field,
+  .ace_searchbtn,
+  .ace_button {
+    background-color: ${color("white")};
+    border-radius: 5px;
+    border: 1px solid ${color("border")};
+  }
+
+  .ace_nomatch {
+    border-radius: 5px;
+    outline: 1px solid ${color("error")};
+  }
+
+  .ace_searchbtn {
+    margin-left: 2px;
+  }
+
+  .ace_button {
+    padding: 2px 4px;
+  }
+
   .ace_editor .ace_keyword {
     color: ${color("saturated-purple")};
   }

frontend/test/__mocks__/aceSearchBoxExtMock.js

+module.exports = {};

jest.unit.conf.json

@@ -2,10 +2,16 @@
   "moduleNameMapper": {
     "\\.(css|less)$": "<rootDir>/frontend/test/__mocks__/styleMock.js",
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/frontend/test/__mocks__/fileMock.js",
-    "^promise-loader\\?global\\!metabase\\/lib\\/ga-metadata$": "<rootDir>/frontend/src/metabase/lib/ga-metadata.js"
+    "^promise-loader\\?global\\!metabase\\/lib\\/ga-metadata$": "<rootDir>/frontend/src/metabase/lib/ga-metadata.js",
+    "ace/ext-searchbox": "<rootDir>/frontend/test/__mocks__/aceSearchBoxExtMock.js"
   },
-  "testPathIgnorePatterns": ["<rootDir>/frontend/test/.*/.*.tz.unit.spec.{js,jsx,ts,tsx}"],
-  "testMatch": ["<rootDir>/**/*.unit.spec.js", "<rootDir>/**/*.unit.spec.{js,jsx,ts,tsx}"],
+  "testPathIgnorePatterns": [
+    "<rootDir>/frontend/test/.*/.*.tz.unit.spec.{js,jsx,ts,tsx}"
+  ],
+  "testMatch": [
+    "<rootDir>/**/*.unit.spec.js",
+    "<rootDir>/**/*.unit.spec.{js,jsx,ts,tsx}"
+  ],
   "modulePaths": [
     "<rootDir>/frontend/test",
     "<rootDir>/frontend/src",