Merge branch 'appbuilder/sprint-12' of https://github.com/ToolJet/ToolJet into appbuilder/sprint-12

frontend/src/AppBuilder/CodeEditor/CodehinterOverlayTriggers.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { openSearchPanel } from '@codemirror/search';
+import './SearchBox.scss';
+import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
+
+export const CodeHinterBtns = ({ view, isPanelOpen, renderCopilot }) => {
+  return (
+    <div
+      className="d-flex tw-flex-col align-items-end tw-gap-[2.5px] w-100 position-absolute tw-pt-[4px] tw-pr-[4px]"
+      style={{ top: isPanelOpen ? '44px' : 0 }}
+    >
+      {!isPanelOpen && (
+        <ButtonComponent
+          iconOnly
+          trailingIcon="search01"
+          size="small"
+          variant="outline"
+          ariaLabel="Open search panel"
+          className="codehinter-search-btn"
+          onClick={() => openSearchPanel(view)}
+        />
+      )}
+      {renderCopilot && renderCopilot()}
+    </div>
+  );
+};

frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx

@@ -21,9 +21,10 @@ import { removeNestedDoubleCurlyBraces } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import { search, searchKeymap, searchPanelOpen } from '@codemirror/search';
-import { handleSearchPanel, SearchBtn } from './SearchBox';
+import { handleSearchPanel } from './SearchBox';
 import { useQueryPanelKeyHooks } from './useQueryPanelKeyHooks';
 import { isInsideParent } from './utils';
+import { CodeHinterBtns } from './CodehinterOverlayTriggers';
 
 const langSupport = Object.freeze({
   javascript: javascript(),
@@ -74,6 +75,7 @@ const MultiLineCodeEditor = (props) => {
 
   const [editorView, setEditorView] = React.useState(null);
 
+  const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(false);
   const { queryPanelKeybindings } = useQueryPanelKeyHooks(onChange, currentValueRef, 'multiline');
 
   const handleOnBlur = () => {
@@ -258,7 +260,7 @@ const MultiLineCodeEditor = (props) => {
       ref={wrapperRef}
     >
       <div className={`${className} ${darkMode && 'cm-codehinter-dark-themed'}`}>
-        <SearchBtn view={editorView} />
+        <CodeHinterBtns view={editorView} isPanelOpen={isSearchPanelOpen} renderCopilot={renderCopilot} />
         <CodeHinter.PopupIcon
           callback={handleTogglePopupExapand}
           icon="portal-open"
@@ -266,7 +268,6 @@ const MultiLineCodeEditor = (props) => {
           isMultiEditor={true}
           isQueryManager={isInsideQueryPane}
         />
-        {renderCopilot && renderCopilot()}
 
         <CodeHinter.Portal
           isCopilotEnabled={false}
@@ -326,12 +327,7 @@ const MultiLineCodeEditor = (props) => {
                 readOnly={readOnly}
                 editable={editable} //for transformations in query manager
                 onCreateEditor={(view) => setEditorView(view)}
-                onUpdate={(view) => {
-                  const icon = document.querySelector('.codehinter-search-btn');
-                  if (searchPanelOpen(view.state)) {
-                    icon.style.display = 'none';
-                  } else icon.style.display = 'block';
-                }}
+                onUpdate={(view) => setIsSearchPanelOpen(searchPanelOpen(view.state))}
               />
             </div>
             {showPreview && (

frontend/src/AppBuilder/CodeEditor/SearchBox.jsx

@@ -9,7 +9,6 @@ import {
   findPrevious,
   replaceNext,
   replaceAll,
-  openSearchPanel,
 } from '@codemirror/search';
 import './SearchBox.scss';
 import InputComponent from '@/components/ui/Input/Index.jsx';
@@ -162,22 +161,3 @@ function SearchPanel({ view }) {
     </div>
   );
 }
-
-export const SearchBtn = ({ view }) => {
-  return (
-    <div
-      className="d-flex justify-content-end w-100 position-absolute tw-pt-[3px] tw-pr-[4px] codehinter-search-btn-wrapper"
-      style={{ top: 0 }}
-    >
-      <ButtonComponent
-        iconOnly
-        trailingIcon="search01"
-        size="small"
-        variant="outline"
-        ariaLabel="Open search panel"
-        className="codehinter-search-btn"
-        onClick={() => openSearchPanel(view)}
-      />
-    </div>
-  );
-};

frontend/src/AppBuilder/CodeEditor/SearchBox.scss

@@ -44,7 +44,5 @@
 }
 
 .code-hinter-wrapper .codehinter-search-btn {
-    display: block;
-    padding-top: 1px;
-    z-index: 10000;
+    z-index: 1000;
 }

frontend/src/_styles/theme.scss

@@ -18381,6 +18381,10 @@ section.ai-message-prompt-input-wrapper {
   }
 }
 
+.codehinter-copilot-btn {
+  z-index: 1000;
+}
+
 #copilot-menu {
   width: 440px;
   max-width: 440px;

frontend/src/components/ui/Input/Input.jsx

@@ -33,7 +33,7 @@ const Input = React.forwardRef(({ className, size, type, multiline, response, ro
           type={isPasswordField && isPasswordVisible ? 'text' : type}
           className={cn(
             inputVariants({ size }),
-            `tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+            `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
             className
           )}
           ref={ref}