-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat : Query manager separated to different tabs #9823
Conversation
…feature/query-manager-body
…feature/query-manager-body
…feature/query-manager-body
…feature/query-manager-body
This reverts commit 4763dd1.
/review |
Code Review Agent Run #46c012
Code Review Overview
High-level FeedbackConsider moving inline styles to CSS classes for better maintainability, ensure parent containers have defined heights to avoid layout issues, and validate new props to prevent unexpected behavior. Additionally, optimize useEffect dependencies to ensure consistent behavior and remove redundant props to simplify component logic.Detailed Feedback
📄 frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
Issues: Total- 1, High importance- 1
📄 frontend/src/_styles/colors.scss
Issues: Total- 2, High importance- 2
📄 frontend/src/_styles/queryManager.scss
Issues: Total- 1, High importance- 1
📄 frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
Issues: Total- 1, High importance- 1
📄 frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx
Issues: Total- 1, High importance- 1
📄 frontend/src/_helpers/appUtils.js
Issues: Total- 1, High importance- 1
📄 frontend/src/_ui/Icon/solidIcons/ArrowDownTriangle.jsx
Issues: Total- 1, High importance- 1
📄 frontend/src/Editor/QueryManager/Components/Preview.jsx
Issues: Total- 1, High importance- 1
📄 frontend/src/Editor/QueryManager/QueryManager.jsx
Issues: Total- 1, High importance- 1
|
selectedDataSource?.kind === 'tooljetdb' ? 'tooljetdb-query-details' : '' | ||
}`} | ||
className={`query-details ${selectedDataSource?.kind === 'tooljetdb' ? 'tooljetdb-query-details' : ''}`} | ||
style={{ height: `calc(100% - ${previewHeight + 40}px )`, overflowY: 'auto' }} //40px in preview header height |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -341,7 +341,7 @@
className={'query-details ${selectedDataSource?.kind === 'tooljetdb' ? 'tooljetdb-query-details' : ''}'}
- style={{ height: 'calc(100% - ${previewHeight + 40}px )', overflowY: 'auto' }} //40px in preview header height
+ className={'query-details ${selectedDataSource?.kind === 'tooljetdb' ? 'tooljetdb-query-details' : ''} custom-query-details'}
>
$color-light-indigo-03: #F0F4FF; | ||
$color-dark-indigo-03: #192140; | ||
$color-light-indigo-04: #E6EDFE; | ||
; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -42,7 +42,6 @@
$color-light-indigo-04: #E6EDFE;
-;
$color-dark-indigo-04: #1C274F;
} | ||
|
||
.text-default { | ||
color: var(--text-default) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -222,7 +222,7 @@
.text-default {
color: var(--text-default);
}
@@ -251,6 +305,8 @@ $border-radius: 4px; | |||
} | |||
|
|||
.query-definition-pane { | |||
height: 100%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -307,7 +307,7 @@
.query-definition-pane {
- height: 100%;
+ flex: 1;
@@ -252,6 +254,8 @@ const MultiLineCodeEditor = (props) => { | |||
}} | |||
className={`codehinter-multi-line-input`} | |||
indentWithTab={true} | |||
readOnly={readOnly} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -42,8 +42,7 @@ const MultiLineCodeEditor = (props) => { showPreview, paramLabel = '', delayOnChange = true, // Added this prop to immediately update the onBlurUpdate callback - readOnly = false, - editable = true, + readOnly = false, } = props;
const [currentValue, setCurrentValue] = React.useState(() => initialValue);
@@ -254,8 +253,7 @@ const MultiLineCodeEditor = (props) => {
overflowY: 'auto',
}}
className={'codehinter-multi-line-input'}
indentWithTab={true}
readOnly={readOnly}
editable={editable} //for transformations in query manager
readOnly={readOnly} /> </div> {showPreview && (
const tabs = [ | ||
{ id: 1, label: 'Setup' }, | ||
{ | ||
id: 2, | ||
label: 'Transformation', | ||
condition: selectedQuery?.kind !== 'runpy' && selectedQuery?.kind !== 'runjs', | ||
}, | ||
{ id: 3, label: 'Settings' }, | ||
]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -93,6 +93,15 @@ };
+const tabs = [
- { id: 1, label: 'Setup' },
- {
- id: 2,
- label: 'Transformation',
- condition: selectedQuery?.kind !== 'runpy' && selectedQuery?.kind !== 'runjs',
- },
- { id: 3, label: 'Settings' },
+];
const QueryManagerHeader = forwardRef(({ darkMode, options, editorRef, selectedQuery, queries, runQuery, previewButtonOnClick, buttonLoadingState, isInDraft, executeQueryNameUpdation, queryName, isVersionReleased, showCreateQuery }, ref) => {
const renderRunButton = () => {
if (shouldSetPreviewData) { | ||
setPreviewPanelExpanded(true); | ||
setPreviewLoading(true); | ||
queryPreviewData && setPreviewData(''); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -1143,11 +1143,6 @@
- if (shouldSetPreviewData) {
- setPreviewPanelExpanded(true);
- setPreviewLoading(true);
- queryPreviewData && setPreviewData('');
- }
if (query) {
dataQuery = JSON.parse(JSON.stringify(query));
- if (shouldSetPreviewData) {
-
setPreviewPanelExpanded(true);
-
setPreviewLoading(true);
-
queryPreviewData && setPreviewData('');
}
} else {
toast.error('No query has been associated with the action.');
return;
@@ -1,13 +1,14 @@ | |||
import React from 'react'; | |||
|
|||
const ArrowDownTriangle = ({ fill = '#C1C8CD', width = '24', className = '', viewBox = '0 0 24 24' }) => ( | |||
const ArrowDownTriangle = ({ fill = '#C1C8CD', width = '24', className = '', viewBox = '0 0 24 24', style = {} }) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -1,13 +1,14 @@
+import PropTypes from 'prop-types';
const ArrowDownTriangle = ({ fill = '#C1C8CD', width = '24', className = '', viewBox = '0 0 24 24', style = {} }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={width}
viewBox={viewBox}
fill="none"
className={className}
style={style}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.20923 10.7525C9.00495 10.4589 8.94384 10.0173 9.05439 9.63373C9.16495 9.25012 9.4254 9 9.7143 9H18.2857C18.5746 9 18.835 9.25012 18.9456 9.63373C19.0562 10.0173 18.995 10.4589 18.7907 10.7525L14.7576 16.5491C14.3392 17.1503 13.6608 17.1503 13.2424 16.5491L9.20923 10.7525Z"
fill={fill}
/>
</svg>
);
+ArrowDownTriangle.propTypes = {
+ fill: PropTypes.string,
+ width: PropTypes.string,
+ className: PropTypes.string,
+ viewBox: PropTypes.string,
+ style: PropTypes.object,
+};
export default ArrowDownTriangle;
const previewPanelRef = useRef(); | ||
const queryPanelHeight = usePanelHeight(); | ||
|
||
useEffect(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -33,7 +33,7 @@
useEffect(() => {
calculatePreviewHeight(height, previewPanelExpanded);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [height, previewPanelExpanded]);
useEffect(() => { | ||
if (selectedQuery?.kind == 'runjs' || selectedQuery?.kind == 'runpy') { | ||
setActiveTab(1); | ||
} | ||
}, [selectedQuery?.id]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bito Code Review Agent Run #46c012 - 06/14/2024, 11:19 am
Code suggestion
@@ -32,7 +32,7 @@ const QueryManager = ({ mode, appId, darkMode, apps, allComponents, appDefinitio
}, [selectedQuery?.id, selectedQuery?.kind]);
closes #9438