feat : Foreign key feature in ToolJet database

frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx

@@ -24,13 +24,37 @@ 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,
 }) => {
   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 +66,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 +86,7 @@ const DropDownSelect = ({
     if (isNewOverFlown !== isOverflown) {
       setIsOverflown(isNewOverFlown);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
 
   function checkElementPosition() {
@@ -70,14 +96,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 +119,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 +157,29 @@ 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}
           />
         </Popover>
       }
@@ -142,16 +195,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 +232,9 @@ const DropDownSelect = ({
                 selected?.label
               )
             ) : showPlaceHolder ? (
-              <span style={{ color: '#9e9e9e' }}>Select..</span>
+              <span style={{ color: '#9e9e9e' }}>
+                {foreignKeyAccessInRowForm || showPlaceHolderInForeignKeyDrawer ? topPlaceHolder : 'Select...'}
+              </span>
             ) : (
               ''
             )}

frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx

@@ -15,7 +15,8 @@ import { useNavigate } from 'react-router-dom';
 import useConfirm from './Confirm';
 
 const JoinConstraint = ({ darkMode, index, onRemove, onChange, data }) => {
-  const { selectedTableId, tables, joinOptions, findTableDetails } = useContext(TooljetDatabaseContext);
+  const { selectedTableId, tables, joinOptions, findTableDetails, tableForeignKeyInfo } =
+    useContext(TooljetDatabaseContext);
   const joinType = data?.joinType;
   const baseTableDetails = (selectedTableId && findTableDetails(selectedTableId)) || {};
   const conditionsList = isEmpty(data?.conditions?.conditionsList) ? [{}] : data?.conditions?.conditionsList;
@@ -45,19 +46,150 @@ const JoinConstraint = ({ darkMode, index, onRemove, onChange, data }) => {
     });
   tableSet.add(selectedTableId);
 
-  const leftTableList = [...tableSet]
+  // In Joins-Query, the table on the LHS should be the ones which we already selected for base table or the tables which we selected on RHS
+  const leftTableList = [];
+  [...tableSet]
     .filter((table) => table !== rightFieldTable)
-    .map((t) => {
+    .forEach((t) => {
       const tableDetails = findTableDetails(t);
-      return { label: tableDetails?.table_name ?? '', value: t };
+      const targetTableFKListWithAdjacentTable = checkIfAdjacentTableHasForeignKey(true, t?.table_id);
+      if (targetTableFKListWithAdjacentTable.length) {
+        leftTableList.unshift({
+          label: tableDetails?.table_name ?? '',
+          value: t,
+          isTargetTable: !!targetTableFKListWithAdjacentTable.length,
+        });
+      } else {
+        leftTableList.push({
+          label: tableDetails?.table_name ?? '',
+          value: t,
+          isTargetTable: !!targetTableFKListWithAdjacentTable.length,
+        });
+      }
     });
 
-  const tableList = tables
+  // Tables to list on Right-Hand-Side of Join operation, Omits already selected table
+  const tableList = [];
+  tables
     .filter((table) => ![...tableSet, leftFieldTable].includes(table.table_id))
-    .map((t) => {
-      return { label: t?.table_name ?? '', value: t.table_id };
+    .forEach((t) => {
+      const targetTableFKListWithAdjacentTable = checkIfAdjacentTableHasForeignKey(false, t?.table_id);
+      if (targetTableFKListWithAdjacentTable.length) {
+        tableList.unshift({
+          label: t?.table_name ?? '',
+          value: t?.table_id,
+          isTargetTable: !!targetTableFKListWithAdjacentTable.length,
+        });
+      } else {
+        tableList.push({
+          label: t?.table_name ?? '',
+          value: t?.table_id,
+          isTargetTable: !!targetTableFKListWithAdjacentTable.length,
+        });
+      }
     });
 
+  // OnSelecting LHS ro RHS table on Join Operation, Checking if Adjacent table has FK relation and Auto Fill the column values
+  function checkIfAdjacentTableHasForeignKey(isChoosingLHStable, tableId) {
+    if (isChoosingLHStable && rightFieldTable) {
+      const rightFieldTableDetails = findTableDetails(rightFieldTable);
+      if (rightFieldTableDetails?.table_name && tableForeignKeyInfo[rightFieldTableDetails.table_name]) {
+        return tableForeignKeyInfo[rightFieldTableDetails.table_name].filter(
+          (foreignKeyDetail) => foreignKeyDetail.referenced_table_id === tableId
+        );
+      }
+    }
+
+    if (!isChoosingLHStable && leftFieldTable) {
+      const leftFieldTableTableDetails = findTableDetails(leftFieldTable);
+      if (leftFieldTableTableDetails?.table_name && tableForeignKeyInfo[leftFieldTableTableDetails.table_name]) {
+        return tableForeignKeyInfo[leftFieldTableTableDetails.table_name].filter(
+          (foreignKeyDetail) => foreignKeyDetail.referenced_table_id === tableId
+        );
+      }
+    }
+
+    return [];
+  }
+
+  function autoFillColumnIfForeignKeyExists(tableId, isChoosingLHStable) {
+    const adjacentTableForeignKeyDetails = checkIfAdjacentTableHasForeignKey(isChoosingLHStable, tableId);
+    if (isChoosingLHStable) {
+      if (adjacentTableForeignKeyDetails.length) {
+        const newData = cloneDeep({ ...data });
+        const newConditionsList = adjacentTableForeignKeyDetails.map((adjacentTableForeignKey) => {
+          const { referenced_column_names = [], column_names = [] } = adjacentTableForeignKey;
+          const newCondition = {
+            leftField: {
+              table: tableId,
+              type: 'Column',
+              ...(referenced_column_names[0] && { columnName: referenced_column_names[0] }),
+            },
+            operator: '=',
+            rightField: {
+              table: rightFieldTable,
+              type: 'Column',
+              ...(column_names[0] && { columnName: column_names[0] }),
+            },
+          };
+
+          return newCondition;
+        });
+        set(newData, 'conditions.conditionsList', newConditionsList);
+        onChange(newData);
+      } else {
+        const newData = cloneDeep({ ...data });
+        const { conditionsList = [{}] } = newData?.conditions || {};
+        const newConditionsList = conditionsList.map((condition) => {
+          const newCondition = { ...condition };
+          set(newCondition, 'leftField.table', tableId);
+          set(newCondition, 'operator', '='); //should we removed when we have more options
+          return newCondition;
+        });
+        set(newData, 'conditions.conditionsList', newConditionsList);
+        // set(newData, 'table', value?.value);
+        onChange(newData);
+      }
+    } else {
+      if (adjacentTableForeignKeyDetails.length) {
+        const newData = cloneDeep({ ...data });
+        const newConditionsList = adjacentTableForeignKeyDetails.map((adjacentTableForeignKey) => {
+          const { referenced_column_names = [], column_names = [] } = adjacentTableForeignKey;
+          const newCondition = {
+            leftField: {
+              table: leftFieldTable,
+              type: 'Column',
+              ...(column_names[0] && { columnName: column_names[0] }),
+            },
+            operator: '=',
+            rightField: {
+              table: tableId,
+              type: 'Column',
+              ...(referenced_column_names[0] && { columnName: referenced_column_names[0] }),
+            },
+          };
+
+          return newCondition;
+        });
+        set(newData, 'conditions.conditionsList', newConditionsList);
+        set(newData, 'table', tableId);
+        onChange(newData);
+      } else {
+        const newData = cloneDeep({ ...data });
+        const { conditionsList = [] } = newData?.conditions || {};
+        const newConditionsList = conditionsList.map((condition) => {
+          const newCondition = { ...condition };
+          set(newCondition, 'rightField.table', tableId);
+          set(newCondition, 'operator', '='); //should we removed when we have more options
+          return newCondition;
+        });
+        set(newData, 'conditions.conditionsList', newConditionsList);
+        set(newData, 'table', tableId);
+        onChange(newData);
+      }
+    }
+  }
+
   return (
     <Container fluid className="p-0">
       <Row className={`mx-0 ${index === 0 && 'pb-2'}`}>
@@ -118,23 +250,12 @@ const JoinConstraint = ({ darkMode, index, onRemove, onChange, data }) => {
                   result = true;
                 }
 
-                if (result) {
-                  const newData = cloneDeep({ ...data });
-                  const { conditionsList = [{}] } = newData?.conditions || {};
-                  const newConditionsList = conditionsList.map((condition) => {
-                    const newCondition = { ...condition };
-                    set(newCondition, 'leftField.table', value?.value);
-                    set(newCondition, 'operator', '='); //should we removed when we have more options
-                    return newCondition;
-                  });
-                  set(newData, 'conditions.conditionsList', newConditionsList);
-                  // set(newData, 'table', value?.value);
-                  onChange(newData);
-                }
+                if (result) autoFillColumnIfForeignKeyExists(value?.value, true);
               }}
               onAdd={() => navigate(getPrivateRoute('database'))}
               addBtnLabel={'Add new table'}
               value={leftTableList.find((val) => val?.value === leftFieldTable)}
+              shouldShowForeignKeyIcon
             />
           ) : (
             <div
@@ -182,23 +303,12 @@ const JoinConstraint = ({ darkMode, index, onRemove, onChange, data }) => {
                 );
               }
 
-              if (result) {
-                const newData = cloneDeep({ ...data });
-                const { conditionsList = [] } = newData?.conditions || {};
-                const newConditionsList = conditionsList.map((condition) => {
-                  const newCondition = { ...condition };
-                  set(newCondition, 'rightField.table', value?.value);
-                  set(newCondition, 'operator', '='); //should we removed when we have more options
-                  return newCondition;
-                });
-                set(newData, 'conditions.conditionsList', newConditionsList);
-                set(newData, 'table', value?.value);
-                onChange(newData);
-              }
+              if (result) autoFillColumnIfForeignKeyExists(value?.value, false);
             }}
             onAdd={() => navigate(getPrivateRoute('database'))}
             addBtnLabel={'Add new table'}
             value={tableList.find((val) => val?.value === rightFieldTable)}
+            shouldShowForeignKeyIcon
           />
         </Col>
       </Row>