feat : Query manager separated to different tabs (#9823)

* change toggle for query manager and revamp preview * feat : query manger body revamp * updates * fix : tranformation switch * preview integration * loader safari changes and overflow fix * fix * fix : settings tab QM * revert few changes to fix datasources page * revert header options change * zindex fix for query-pane * fix : events ui * fix :events widget manager * code optimised for this file * QM header fixes * dark mode changes * fix : info icon * open preview drawer on run query * fix : query manager query section icons update * update color * design feedbacks and make preview panel resizable * update toggle for preview result & increate draggable area * fix :review changes * merge fixes * Merge branch 'appbuilder-1.8' into feature/query-manager-body * fix : codehinter in disabled state * ui fix * code refactor * cleanup * fix fontsize in datasource selector popup * fix border issue in preview container and increase draggable area * fix : review fixes * fix: fixed text css formatting for safari support * Revert "code refactor" This reverts commit 4763dd1. * typo * fix : not able to select text in preview * fix : not able to view add params * fix selection issue in preview * fix : add scroll in query manager when preview is blocking view --------- Co-authored-by: Kartik Gupta <gupta.kartik18kg@gmail.com>
ToolJet · Jun 14, 2024 · 371b54c · 371b54c
1 parent c37c7b5
commit 371b54c
Show file tree

Hide file tree

Showing 40 changed files with 989 additions and 656 deletions.
diff --git a/frontend/assets/translations/en.json b/frontend/assets/translations/en.json
@@ -174,9 +174,9 @@
                 "goToAllDatasources": "Go to all Datasource",
                 "send": "Send"
             },
-            "runQueryOnApplicationLoad": "Run this query on application load?",
-            "confirmBeforeQueryRun": "Request confirmation before running query?",
-            "notificationOnSuccess": "Show notification on success?",
+            "runQueryOnApplicationLoad": "Run this query on application load",
+            "confirmBeforeQueryRun": "Request confirmation before running query",
+            "notificationOnSuccess": "Show notification on success",
             "successMessage": "Success Message",
             "queryRanSuccessfully": "Query ran successfully",
             "notificationDuration": "Notification duration (s)",
@@ -207,6 +207,7 @@
                 "pageIndex": "Page index",
                 "component": "Component",
                 "addHandler": "New event handler",
+                "addNewEvent": "Add new event",
                 "addEventHandler": "+ Add event handler",
                 "emptyMessage": "This {{componentName}} doesn't have any event handlers",
                 "page": "Page"
@@ -286,9 +287,9 @@
                         "createUpdateDelete": "Create/Update/Delete",
                         "folder": "Folder"
                     },
-                    "groupOptions":{
-                        "deleteGroup":"Delete Group",
-                        "duplicateGroup":"Duplicate Group"
+                    "groupOptions": {
+                        "deleteGroup": "Delete Group",
+                        "duplicateGroup": "Duplicate Group"
                     }
                 },
                 "manageSSO": {
@@ -496,7 +497,7 @@
             "properties": "Properties",
             "events": "Events",
             "layout": "Layout",
-            "devices":"Devices",
+            "devices": "Devices",
             "styles": "Styles",
             "general": "General",
             "validation": "Validation",
@@ -728,10 +729,10 @@
             "addColumn": "Add column",
             "addNewColumn": "Add new column",
             "noActionMessage": "This table doesn't have any action buttons",
-            "horizontalAlignment":"Horizontal alignment",
-            "textAlignment":"Text alignment",
-            "deciamalPlaces":"Decimal Places",
-            "imageFit":"Image fit"
+            "horizontalAlignment": "Horizontal alignment",
+            "textAlignment": "Text alignment",
+            "deciamalPlaces": "Decimal Places",
+            "imageFit": "Image fit"
         },
         "Button": {
             "displayName": "Button",
@@ -944,7 +945,7 @@
             "typeComment": "Type your comment here"
         },
         "Settings": {
-            "text": "Settings",
+            "text": "Triggers",
             "tip": "Global Settings",
             "hideHeader": "Hide header for launched apps",
             "maintenanceMode": "Maintenance mode",

diff --git a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
@@ -42,6 +42,8 @@ const MultiLineCodeEditor = (props) => {
     showPreview,
     paramLabel = '',
     delayOnChange = true, // Added this prop to immediately update the onBlurUpdate callback
+    readOnly = false,
+    editable = true,
   } = props;
 
   const [currentValue, setCurrentValue] = React.useState(() => initialValue);
@@ -252,6 +254,8 @@ const MultiLineCodeEditor = (props) => {
                 }}
                 className={`codehinter-multi-line-input`}
                 indentWithTab={true}
+                readOnly={readOnly}
+                editable={editable} //for transformations in query manager
               />
             </div>
             {showPreview && (

diff --git a/frontend/src/Editor/Components/text.scss b/frontend/src/Editor/Components/text.scss
@@ -1,25 +1,34 @@
-
-
 .reactMarkdown {
-  p,h1,h2,h3,h4,h5,h6 {
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-bottom: 0px;
   }
 }
 
 .text-widget-section {
   scrollbar-color: transparent transparent;
   scrollbar-width: thin;
-  &::-webkit-scrollbar {
+
+  & ::-webkit-scrollbar {
     background-color: transparent;
     width: 6px;
   }
-  &::-webkit-scrollbar-track {
+
+  & ::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  &::-webkit-scrollbar-thumb {
+
+  & ::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
-  &:hover{
+
+  & :hover {
     scrollbar-color: #a0a6ae transparent;
   }
 }
diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -1021,7 +1021,7 @@ class DataSourceManagerComponent extends React.Component {
           <ConfirmDialog
             title={'Add datasource'}
             show={dataSourceConfirmModalProps.isOpen}
-            message={`Do you want to add ${dataSourceConfirmModalProps?.dataSource?.name}?`}
+            message={`Do you want to add ${dataSourceConfirmModalProps?.dataSource?.name}`}
             onConfirm={() => createSelectedDataSource(dataSourceConfirmModalProps.dataSource)}
             onCancel={this.resetDataSourceConfirmModal}
             confirmButtonText={'Add datasource'}

diff --git a/frontend/src/Editor/Inspector/Components/Table/NoListItem.jsx b/frontend/src/Editor/Inspector/Components/Table/NoListItem.jsx
@@ -11,7 +11,6 @@ const NoListItem = ({ text, dataCy = '' }) => {
         borderRadius: '6px',
         border: '1px dashed var(--slate5)',
         color: 'var(--slate8)',
-        marginBottom: '8px',
       }}
     >
       <span className="d-flex align-items-center" style={{ marginRight: '2px' }}>

diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -1040,7 +1040,7 @@ export const EventManager = ({
 
   const renderAddHandlerBtn = () => {
     return (
-      <AddNewButton onClick={addHandler} dataCy="add-event-handler" className="mt-0" isLoading={eventsCreatedLoader}>
+      <AddNewButton onClick={addHandler} dataCy="add-event-handler" isLoading={eventsCreatedLoader}>
         {t('editor.inspector.eventManager.addHandler', 'New event handler')}
       </AddNewButton>
     );
@@ -1050,7 +1050,7 @@ export const EventManager = ({
     return (
       <>
         {!hideEmptyEventsAlert && <NoListItem text={'No event handlers'} />}
-        {renderAddHandlerBtn()}
+        <div className="d-flex">{renderAddHandlerBtn()}</div>
       </>
     );
   }
@@ -1059,7 +1059,7 @@ export const EventManager = ({
 
   if (events.length === 0) {
     return (
-      <>
+      <div className="d-flex">
         {renderAddHandlerBtn()}
         {!hideEmptyEventsAlert ? (
           <div className="text-left">
@@ -1074,7 +1074,7 @@ export const EventManager = ({
             </small>
           </div>
         ) : null}
-      </>
+      </div>
     );
   }
 

diff --git a/frontend/src/Editor/Inspector/ManageEventButton.jsx b/frontend/src/Editor/Inspector/ManageEventButton.jsx
@@ -17,7 +17,7 @@ const ManageEventButton = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   return (
-    <div style={{ marginBottom: '8px' }}>
+    <div style={{ marginBottom: '4px' }}>
       <div
         className="manage-event-btn border-0"
         onMouseEnter={() => setIsHovered(true)}

diff --git a/frontend/src/Editor/Inspector/manageEventButton.scss b/frontend/src/Editor/Inspector/manageEventButton.scss
@@ -1,29 +1,40 @@
+.query-manager {
+  .manage-event-btn {
+    width: 330px;
+  }
+}
+
 .manage-event-btn {
-    border-radius: 6px;
-    background-color: var(--slate3);
-    &:hover {
-        background-color: var(--slate4);
-    }
-    .event-handler-text {
-     font-size: 12px;
-     line-height: 20px;
-     color: var(--slate12);
-     font-weight: 500;
-    }
-    .event-name-text {
-      font-size: 12px;
-      line-height: 20px;
-      color: var(--slate11);
-      font-weight: 400;
-      display: flex;
-      align-items: center;
-    }
-    .event-action {
+  border-radius: 6px;
+  background-color: var(--interactive-default);
+
+  &:hover {
+    background-color: var(--interactive-hover);
+  }
+
+  .event-handler-text {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--text-default);
+    font-weight: 500;
+  }
+
+  .event-name-text {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--text-default);
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+  }
+
+  .event-action {
     margin-right: 4px;
-    }
+    color: var(--text-placeholder);
+  }
+
+  .list-menu-option-btn {
+    margin-left: 20px;
+  }
 
-    .list-menu-option-btn {
-      margin-left: 20px;
-    }
-
 }
diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx
@@ -294,7 +294,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
 
       <ConfirmDialog
         show={showLeaveDialog}
-        message={'The unsaved changes will be lost if you leave the editor, do you want to leave?'}
+        message={'The unsaved changes will be lost if you leave the editor, do you want to leave'}
         onConfirm={() => router.push('/')}
         onCancel={() => setShowLeaveDialog(false)}
         darkMode={darkMode}

diff --git a/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx b/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx
@@ -34,7 +34,7 @@ export const CustomToggleSwitch = ({
         <label htmlFor={action} className="slider round"></label>
       </label>
       {label && (
-        <span className={`${darkMode ? 'color-white' : 'color-light-slate-12'}`} data-cy={`${dataCy}-toggle-label`}>
+        <span className={`text-default`} data-cy={`${dataCy}-toggle-label`}>
           {label}
         </span>
       )}

diff --git a/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx b/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
@@ -77,14 +77,17 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
                 </div>
               )}
               <DataSourceIcon source={sources?.[0]} height={16} />
-              <span className="ms-1 small">{dataSourcesKinds.find((dsk) => dsk.kind === kind)?.name || kind}</span>
+              <span className="ms-1 small" style={{ fontSize: '13px' }}>
+                {dataSourcesKinds.find((dsk) => dsk.kind === kind)?.name || kind}
+              </span>
             </div>
           ),
           options: sources.map((source) => ({
             label: (
               <div
                 key={source.id}
                 className="py-2 px-2 rounded option-nested-datasource-selector small text-truncate"
+                style={{ fontSize: '13px' }}
                 data-tooltip-id="tooltip-for-add-query-dd-option"
                 data-tooltip-content={decodeEntities(source.name)}
                 data-cy={`ds-${source.name.toLowerCase()}`}
@@ -116,7 +119,7 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
           label: (
             <div>
               <DataSourceIcon source={source} height={16} />{' '}
-              <span data-cy={`ds-${source.name.toLowerCase()}`} className="ms-1 small">
+              <span data-cy={`ds-${source.name.toLowerCase()}`} className="ms-1 small" style={{ fontSize: '13px' }}>
                 {source.name}
               </span>
             </div>

diff --git a/frontend/src/Editor/QueryManager/Components/ParameterDetails.jsx b/frontend/src/Editor/QueryManager/Components/ParameterDetails.jsx
@@ -82,14 +82,15 @@ const ParameterDetails = ({ darkMode, onSubmit, isEdit, name, defaultValue, onRe
         ) : (
           <button
             onClick={() => setShowModal((show) => !show)}
-            className="ms-2"
+            className=""
             id="runjs-param-add-btn"
-            data-cy="runjs-add-param-button"
-            style={{ background: 'none' }}
+            data-cy={`runjs-add-param-button`}
+            style={{ background: 'none', border: 'none' }}
           >
-            <span className="m-0">
-              <PlusRectangle fill={darkMode ? '#9BA1A6' : '#687076'} width={15} />
-            </span>
+            <p className="m-0 text-default">
+              <PlusRectangle fill={'var(--icons-default)'} width={15} />
+              <span style={{ marginLeft: '6px' }}>Add</span>
+            </p>
           </button>
         )}
       </span>
@@ -101,7 +102,7 @@ export const PillButton = ({ name, onClick, onRemove, marginBottom, className, s
   <ButtonGroup
     aria-label="Parameter"
     className={cx({ 'mb-2': marginBottom, ...(className && { [className]: true }) })}
-    style={{ borderRadius: '6px', marginLeft: '6px', height: '24px', background: '#A1A7AE1F' }}
+    style={{ borderRadius: '6px', marginRight: '6px', height: '24px', background: 'var(--interactive-default)' }}
   >
     <Button
       size="sm"

diff --git a/frontend/src/Editor/QueryManager/Components/ParameterList.jsx b/frontend/src/Editor/QueryManager/Components/ParameterList.jsx
@@ -54,8 +54,13 @@ const ParameterList = ({
   }, [showMore]);
 
   return (
-    <div className="card-header">
-      <p style={{ marginRight: '4px', margin: '0px' }}>Parameters</p>
+    <div className="d-flex">
+      <p
+        className="text-placeholder font-weight-medium"
+        style={{ marginRight: '16px', marginBottom: '0px', width: '140px' }}
+      >
+        Parameters
+      </p>
       {formattedParameters
         .filter((param) => param.isVisible)
         .map((parameter) => {