From 3c68cd6f5a6c3b2fe390e5570b5afc7795ea99fb Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Mon, 3 Mar 2025 02:39:32 +0530 Subject: [PATCH 1/5] Code hinter issue fix --- .../src/AppBuilder/CodeEditor/PreviewBox.jsx | 16 ++- .../CodeEditor/SingleLineCodeEditor.jsx | 120 +++++++++++------- .../src/AppBuilder/CodeEditor/styles.scss | 5 + frontend/src/_styles/theme.scss | 7 +- 4 files changed, 99 insertions(+), 49 deletions(-) diff --git a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx index 2429973c25..ce12c1b250 100644 --- a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx +++ b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx @@ -294,13 +294,9 @@ const PreviewContainer = ({ ...restProps }) => { const { validationSchema, isWorkspaceVariable, errorStateActive, previewPlacement, validationFn } = restProps; - const [errorMessage, setErrorMessage] = useState(''); - const typeofError = getCurrentNodeType(errorMessage); - const errorMsg = typeofError === 'Array' ? errorMessage[0] : errorMessage; - const darkMode = localStorage.getItem('darkMode') === 'true'; const popover = ( { + // Force position update on first render + // This is done to avoid scroll issue + if (state.elements.popper) { + state.elements.popper.style.position = 'fixed'; + } + }, }} > {(props) => React.cloneElement(popover, props)} diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx index 1243f26f43..98325df3a8 100644 --- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx +++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx @@ -1,5 +1,5 @@ /* eslint-disable import/no-unresolved */ -import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { PreviewBox } from './PreviewBox'; import { ToolTip } from '@/Editor/Inspector/Elements/Components/ToolTip'; import { useTranslation } from 'react-i18next'; @@ -31,6 +31,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r const [currentValue, setCurrentValue] = useState(''); const [errorStateActive, setErrorStateActive] = useState(false); const [cursorInsidePreview, setCursorInsidePreview] = useState(false); + const [showSuggestions, setShowSuggestions] = useState(true); const validationFn = restProps?.validationFn; const componentDefinition = useStore((state) => state.getComponentDefinition(componentId), shallow); const parentId = componentDefinition?.component?.parent; @@ -38,6 +39,30 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r const customVariables = customResolvables?.[parentId]?.[0] || {}; + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.intersectionRatio < 1) { + setShowPreview(false); + setShowSuggestions(false); + } else { + setShowSuggestions(true); + } + }, + { root: null, threshold: [1] } // Fires when any part of the element is out of view + ); + + if (wrapperRef.current) { + observer.observe(wrapperRef.current); + } + + return () => { + if (wrapperRef.current) { + observer.unobserve(wrapperRef.current); + } + }; + }, []); + const isPreviewFocused = useRef(false); const wrapperRef = useRef(null); @@ -136,6 +161,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r componentName={componentName} setShowPreview={setShowPreview} showPreview={showPreview} + showSuggestions={showSuggestions} {...restProps} /> @@ -168,6 +194,7 @@ const EditorInput = ({ previewRef, setShowPreview, onInputChange, + showSuggestions, }) => { const getSuggestions = useStore((state) => state.getSuggestions, shallow); function autoCompleteExtensionConfig(context) { @@ -223,7 +250,7 @@ const EditorInput = ({ defaultKeymap: true, positionInfo: () => { return { - class: 'cm-completionInfo-top cm-custom-completion-info', + class: 'cm-completionInfo-top cm-custom-completion-info cm-custom-singleline-completion-info', }; }, maxRenderedOptions: 10, @@ -339,15 +366,6 @@ const EditorInput = ({ data-cy={`${cyLabel}-input-field`} > {/* sticky element to position the preview box correctly on top without flowing out of container */} -
{usePortalEditor && ( - { - setFirstTimeFocus(false); - handleOnChange(val); - onInputChange && onInputChange(val); +
handleFocus()} - onBlur={() => handleOnBlur()} - className={customClassNames} - theme={theme} - indentWithTab={false} - readOnly={disabled} - /> + className="check-here" + ref={previewRef} + > + { + setFirstTimeFocus(false); + handleOnChange(val); + onInputChange && onInputChange(val); + }} + basicSetup={{ + lineNumbers: showLineNumbers, + syntaxHighlighting: true, + bracketMatching: true, + foldGutter: false, + highlightActiveLine: false, + autocompletion: showSuggestions, + completionKeymap: true, + searchKeymap: false, + }} + onMouseDown={() => handleFocus()} + onBlur={() => handleOnBlur()} + className={customClassNames} + theme={theme} + indentWithTab={false} + readOnly={disabled} + /> +
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss index c646fd30b1..73ba4ac36e 100644 --- a/frontend/src/AppBuilder/CodeEditor/styles.scss +++ b/frontend/src/AppBuilder/CodeEditor/styles.scss @@ -651,4 +651,9 @@ .cm-searchMatch.cm-searchMatch-selected { background-color: #F28F2D; +} + + +.cm-custom-singleline-completion-info { + display: none; } \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index c999eaa525..84b1d6dc80 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -1544,7 +1544,7 @@ button { .tab-content { overflow-y: auto; // TAB HEADER HEIGHT + FOOTER HEIGHT + Extra padding = 120px - height: calc(100vh - 7.5rem); + height: calc(100vh - 10.4rem); // Hide scrollbar -ms-overflow-style: none; /* IE and Edge */ @@ -18562,4 +18562,9 @@ section.ai-message-prompt-input-wrapper { margin-left: 8px; flex-grow: 1; } +} + + +.cm-tooltip { + z-index: 9999 !important; } \ No newline at end of file From faeb817c99d381dd75e51bafaea75e31e8e2aed8 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 18 Mar 2025 12:45:55 +0530 Subject: [PATCH 2/5] Table suggestions getting cropped & previewPlacement fix --- frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx | 2 +- .../RightSideBar/Inspector/Components/Table/Table.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx index ce12c1b250..6c28bdbb21 100644 --- a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx +++ b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx @@ -419,7 +419,7 @@ const PreviewContainer = ({ <> {!isPortalOpen && ( From ac09c2cfd6af61fd5a36fd89422d1ccef310983e Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Thu, 27 Feb 2025 02:44:31 +0530 Subject: [PATCH 3/5] Automatically resizing codehinter input based on content --- .../QueryEditors/Restapi/TabContent.jsx | 4 ++-- .../TooljetDatabase/DropDownSelect.jsx | 4 +++- .../TooljetDatabase/JoinConstraint.jsx | 3 +-- .../TooljetDatabase/JoinSelect.jsx | 5 +---- .../QueryEditors/TooljetDatabase/JoinSort.jsx | 5 +---- .../TooljetDatabase/JoinTable.jsx | 3 +-- .../TooljetDatabase/RenderColumnUI.jsx | 5 +---- .../TooljetDatabase/RenderFilterSectionUI.jsx | 5 +---- .../TooljetDatabase/RenderSortUI.jsx | 5 +---- frontend/src/_styles/queryManager.scss | 21 +++++++++++++++++-- frontend/src/_styles/theme.scss | 1 + 11 files changed, 32 insertions(+), 29 deletions(-) diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx index cf47ded427..ee55937b1c 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx @@ -30,7 +30,7 @@ export default ({ return ( <>
-
+
) : ( -
+
{index > 0 && ( diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx index 4734addb26..863c826b8a 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx @@ -340,10 +340,7 @@ const JsonBfieldsForSelect = ({ selectedJsonbColumns, handleJSonChange, table }) handleRemove(colDetails.id, colDetails.name, colDetails.table)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx index 2d5a2de518..9e129e9eb4 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx @@ -164,10 +164,7 @@ export default function JoinSort({ darkMode }) { setJoinOrderByOptions(joinOrderByOptions.filter((opt, idx) => idx !== i))} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx index eba36f37a3..cf14448967 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx @@ -535,12 +535,11 @@ const RenderFilterSection = ({ darkMode }) => { removeFilterConditionEntry(index)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx index 1766691d66..89323c1c3c 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx @@ -54,10 +54,7 @@ const RenderColumnUI = ({ removeColumnOptionsPair(id)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx index 983019697a..cd7f94abf3 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx @@ -117,10 +117,7 @@ const RenderFilterSectionUI = ({ removeFilterConditionPair(id)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx index b5021974ba..a349b9e5ed 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx @@ -86,10 +86,7 @@ const RenderSortUI = ({ removeSortConditionPair(id)} > diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss index 7b256c3812..1c63a111e9 100644 --- a/frontend/src/_styles/queryManager.scss +++ b/frontend/src/_styles/queryManager.scss @@ -1856,8 +1856,9 @@ $border-radius: 4px; .tjdb-codhinter-wrapper{ .codehinter-input{ .cm-editor{ - height: 30px !important; + // height: 30px !important; min-height: 30px !important; + max-height:100px !important; border-radius: 0 !important; border-right: 0 ; } @@ -1865,8 +1866,9 @@ $border-radius: 4px; } .tjdb-limit-offset-codehinter{ .cm-editor{ - height: 30px !important; + // height: 30px !important; min-height: 30px !important; + max-height:100px !important; } } @@ -1904,4 +1906,19 @@ $border-radius: 4px; line-height: 18px; } } +} + + +.qm-delete-btn { + min-height: 30px; + height: 100% !important; + align-items: flex-start !important; + padding-top: 6px; +} + +.restapi-key-value { + .code-hinter-wrapper, .code-editor-basic-wrapper, .codehinter-container, .cm-codehinter, .code-editor-query-panel{ + height:100%; + max-height: 100px; + } } \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index ff2e935de6..886d0a64c2 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -15824,6 +15824,7 @@ tbody { } .rest-api-options-codehinter { + height: 100%; .cm-content>.cm-line { // max-width: 357px !important; } From 86a871109b2a482cade5f57af08edec95f14ac96 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 18 Mar 2025 13:40:18 +0530 Subject: [PATCH 4/5] Max height fix --- frontend/src/_styles/theme.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 886d0a64c2..2f86a4c280 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -18632,3 +18632,10 @@ section.ai-message-prompt-input-wrapper { } } } + + +.single-line-codehinter-input { + .cm-editor { + max-height: 100px !important; + } +} \ No newline at end of file From 12febbd7163e58a2d5c15d2a9ea18e36f7a74d0d Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 18 Mar 2025 14:42:48 +0530 Subject: [PATCH 5/5] Max height fix --- frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx index 98325df3a8..cad5556eea 100644 --- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx +++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx @@ -313,7 +313,7 @@ const EditorInput = ({ const isInsideQueryPane = !!currentEditorHeightRef?.current?.closest('.query-details'); const showLineNumbers = lang == 'jsx' || type === 'extendedSingleLine' || false; - const customClassNames = cx('codehinter-input', { + const customClassNames = cx('codehinter-input single-line-codehinter-input', { 'border-danger': error, focused: isFocused, 'focus-box-shadow-active': firstTimeFocus,