Merge pull request ToolJet#9792 from ToolJet/merge/main-develop

Chore: Merge main to develop
Avey777 · May 20, 2024 · dc267aa · dc267aa
2 parents 77e6390 + 200ccd4
commit dc267aa
Show file tree

Hide file tree

Showing 82 changed files with 7,874 additions and 1,467 deletions.
diff --git a/.version b/.version
@@ -1 +1 @@
-2.42.0
+2.43.0
diff --git a/frontend/.version b/frontend/.version
@@ -1 +1 @@
-2.42.0
+2.43.0
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
@@ -98,7 +98,7 @@ const RenderColumnOptions = ({
   darkMode,
   removeColumnOptionsPair,
 }) => {
-  const filteredColumns = columns.filter(({ isPrimaryKey }) => !isPrimaryKey);
+  const filteredColumns = columns.filter(({ column_default }) => !column_default?.startsWith('nextval('));
   const existingColumnOption = Object.values ? Object.values(columnOptions) : [];
   let displayColumns = filteredColumns.map(({ accessor }) => ({
     value: accessor,

diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
@@ -24,13 +24,38 @@ const DropDownSelect = ({
   showPlaceHolder = false,
   highlightSelected = true,
   buttonClasses = '',
+  foreignKeyAccess = false,
+  showRedirection = false,
+  columnInfoForTable,
+  showColumnInfo = false,
+  showDescription = false,
+  foreignKeyAccessInRowForm = false,
+  topPlaceHolder = '',
+  showPlaceHolderInForeignKeyDrawer = false,
+  isCellEdit = false,
+  scrollEventForColumnValus,
+  organizationId,
+  foreignKeys,
+  setReferencedColumnDetails,
+  shouldShowForeignKeyIcon = false,
+  cellColumnName,
+  tableName,
+  targetTable,
+  actions,
+  actionName,
+  fetchTables,
+  onTableClick,
+  referencedForeignKeyDetails = [],
 }) => {
   const popoverId = useRef(`dd-select-${uuidv4()}`);
   const popoverBtnId = useRef(`dd-select-btn-${uuidv4()}`);
   const [showMenu, setShowMenu] = useShowPopover(false, `#${popoverId.current}`, `#${popoverBtnId.current}`);
   const [selected, setSelected] = useState(value);
-  const selectRef = useRef();
   const [isOverflown, setIsOverflown] = useState(false);
+  // Applicable when drop down is used to list FK data
+  const [isInitialForeignKeyDataLoaded, setIsInitialForeignKeyDataLoaded] = useState(false);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
 
   useEffect(() => {
     if (showMenu) {
@@ -42,6 +67,7 @@ const DropDownSelect = ({
     if (Array.isArray(value) || selected?.value !== value?.value || selected?.label !== value?.label) {
       setSelected(value);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   useEffect(() => {
@@ -61,6 +87,7 @@ const DropDownSelect = ({
     if (isNewOverFlown !== isOverflown) {
       setIsOverflown(isNewOverFlown);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
 
   function checkElementPosition() {
@@ -70,14 +97,9 @@ const DropDownSelect = ({
     }
 
     const elementRect = selectControl.getBoundingClientRect();
-
     // Check proximity to top
     const halfScreenHeight = window.innerHeight / 2;
-
-    if (elementRect.top <= halfScreenHeight) {
-      return 'bottom-start';
-    }
-
+    if (elementRect.top <= halfScreenHeight) return 'bottom-start';
     return 'top-start';
   }
 
@@ -98,17 +120,26 @@ const DropDownSelect = ({
     <OverlayTrigger
       show={showMenu && !disabled}
       placement={checkElementPosition()}
-      // placement="auto"
-      // arrowOffsetTop={90}
-      // arrowOffsetLeft={90}
       overlay={
         <Popover
           key={'page.i'}
           id={popoverId.current}
           className={`${darkMode && 'popover-dark-themed dark-theme tj-dark-mode'}`}
           style={{
-            width: '244px',
-            maxWidth: '246px',
+            width: foreignKeyAccess
+              ? '403px'
+              : foreignKeyAccessInRowForm === true
+              ? '494px'
+              : isCellEdit
+              ? '266px'
+              : '244px',
+            maxWidth: foreignKeyAccess
+              ? '403px'
+              : foreignKeyAccessInRowForm === true
+              ? '494px'
+              : isCellEdit
+              ? '266px'
+              : '246px',
             overflow: 'hidden',
             boxShadow: '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)',
           }}
@@ -127,6 +158,30 @@ const DropDownSelect = ({
             addBtnLabel={addBtnLabel}
             emptyError={emptyError}
             highlightSelected={highlightSelected}
+            foreignKeyAccess={foreignKeyAccess}
+            showRedirection={showRedirection}
+            columnInfoForTable={columnInfoForTable}
+            showColumnInfo={showColumnInfo}
+            showDescription={showDescription}
+            foreignKeyAccessInRowForm={foreignKeyAccessInRowForm}
+            isCellEdit={isCellEdit}
+            scrollEventForColumnValus={scrollEventForColumnValus}
+            organizationId={organizationId}
+            foreignKeys={foreignKeys}
+            setReferencedColumnDetails={setReferencedColumnDetails}
+            shouldShowForeignKeyIcon={shouldShowForeignKeyIcon}
+            cellColumnName={cellColumnName}
+            isInitialForeignKeyDataLoaded={isInitialForeignKeyDataLoaded}
+            setIsInitialForeignKeyDataLoaded={setIsInitialForeignKeyDataLoaded}
+            totalRecords={totalRecords}
+            setTotalRecords={setTotalRecords}
+            pageNumber={pageNumber}
+            setPageNumber={setPageNumber}
+            tableName={tableName}
+            targetTable={targetTable}
+            actions={actions}
+            actionName={actionName}
+            referencedForeignKeyDetails={referencedForeignKeyDetails}
           />
         </Popover>
       }
@@ -142,16 +197,19 @@ const DropDownSelect = ({
               return;
             }
             setShowMenu((show) => !show);
+            if (onTableClick === true) {
+              fetchTables();
+            }
           }}
           className={cx(
             {
               'justify-content-start': !shouldCenterAlignText,
               'justify-content-centre': shouldCenterAlignText,
+              'border-1 tdb-dropdown-btn-foreignKeyAccess': foreignKeyAccess || foreignKeyAccessInRowForm,
+              'border-0 tdb-dropdown-btn': !foreignKeyAccess || !foreignKeyAccessInRowForm,
             },
-            'tdb-dropdown-btn',
             'gap-0',
             'w-100',
-            'border-0',
             'rounded-0',
             'position-relative',
             'font-weight-normal',
@@ -176,7 +234,9 @@ const DropDownSelect = ({
                 selected?.label
               )
             ) : showPlaceHolder ? (
-              <span style={{ color: '#9e9e9e' }}>Select..</span>
+              <span style={{ color: '#9e9e9e' }}>
+                {foreignKeyAccessInRowForm || showPlaceHolderInForeignKeyDrawer ? topPlaceHolder : 'Select...'}
+              </span>
             ) : (
               ''
             )}