Fix : Bugs from Foreign key feature

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

@@ -38,6 +38,10 @@ const DropDownSelect = ({
  setReferencedColumnDetails,
  shouldShowForeignKeyIcon = false,
  cellColumnName,
+ tableName,
+ targetTable,
+ actions,
+ actionName,
  fetchTables,
  onTableClick,
 }) => {
@@ -171,6 +175,10 @@ const DropDownSelect = ({
  setTotalRecords={setTotalRecords}
  pageNumber={pageNumber}
  setPageNumber={setPageNumber}
+ tableName={tableName}
+ targetTable={targetTable}
+ actions={actions}
+ actionName={actionName}
  />
  </Popover>
  }

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

@@ -44,6 +44,10 @@ function DataSourceSelect({
  setTotalRecords,
  pageNumber,
  setPageNumber,
+ tableName,
+ targetTable,
+ actions,
+ actionName,
 }) {
  const [isLoadingFKDetails, setIsLoadingFKDetails] = useState(false);
  const [searchValue, setSearchValue] = useState('');
@@ -240,11 +244,11 @@ function DataSourceSelect({
  <div
  style={{
  display: 'flex',
- justifyContent: showRedirection || showDescription ? 'space-between' : 'flex-start',
+ justifyContent: showRedirection ? 'space-between' : 'flex-start',
  alignItems: 'center',
  cursor: foreignKeyAccess && props.data.isDisabled && 'not-allowed',
  }}
- className="dd-select-option"
+ className={`dd-select-option ${showDescription && 'h-100'}`}
  >
  {isMulti && (
  <div
@@ -283,9 +287,6 @@ function DataSourceSelect({
  })}
  >
  {children}
- {foreignKeyAccess && showDescription && (
- <span className="action-description">{props.data.label}</span>
- )}
  </span>
 
  {foreignKeyAccess && showRedirection && props.isFocused && (
@@ -329,23 +330,76 @@ function DataSourceSelect({
  },
  // }),
  MenuList: useCallback(
- (props) => (
- <MenuList
- {...props}
- onAdd={onAdd}
- addBtnLabel={addBtnLabel}
- emptyError={emptyError}
- foreignKeyAccess={foreignKeyAccess}
- columnInfoForTable={columnInfoForTable}
- showColumnInfo={showColumnInfo}
- foreignKeyAccessInRowForm={foreignKeyAccessInRowForm}
- scrollEventForColumnValus={scrollEventForColumnValus}
- scrollContainerRef={scrollContainerRef}
- foreignKeys={foreignKeys}
- cellColumnName={cellColumnName}
- isLoadingFKDetails={isLoadingFKDetails}
- />
- ),
+ (props) => {
+ const selectedOption =
+ props &&
+ props.children &&
+ Array.isArray(props.children) &&
+ props?.children?.reduce((accumulator, reactElement) => {
+ const props = reactElement?.props ?? {};
+ if (props?.isSelected) {
+ accumulator = { ...props?.data };
+ }
+ return accumulator;
+ }, {});
+ const focusedOption =
+ props &&
+ props.children &&
+ Array.isArray(props.children) &&
+ props?.children?.reduce((accumulator, reactElement) => {
+ const props = reactElement?.props ?? {};
+ if (props?.isFocused) {
+ accumulator = { ...props?.data };
+ }
+ return accumulator;
+ }, {});
+
+ return (
+ <React.Fragment>
+ <MenuList
+ {...props}
+ onAdd={onAdd}
+ addBtnLabel={addBtnLabel}
+ emptyError={emptyError}
+ foreignKeyAccess={foreignKeyAccess}
+ columnInfoForTable={columnInfoForTable}
+ showColumnInfo={showColumnInfo}
+ foreignKeyAccessInRowForm={foreignKeyAccessInRowForm}
+ scrollEventForColumnValus={scrollEventForColumnValus}
+ scrollContainerRef={scrollContainerRef}
+ foreignKeys={foreignKeys}
+ cellColumnName={cellColumnName}
+ isLoadingFKDetails={isLoadingFKDetails}
+ />
+ {foreignKeyAccess && showDescription && actions && (
+ <>
+ <div style={{ borderTop: '1px solid var(--slate5)' }}></div>
+ <div
+ style={{
+ minHeight: '140px',
+ height: 'fit-content',
+ padding: '8px 12px',
+ }}
+ >
+ <div className="tj-header-h8 tj-text">
+ {!isEmpty(focusedOption) ? focusedOption?.label : selectedOption?.label}
+ </div>
+ <span className="tj-text-xsm" style={{ color: 'var(--slate9)' }}>
+ {
+ <GenerateActionsDescription
+ targetTable={targetTable?.value || targetTable?.label || targetTable?.name}
+ sourceTable={tableName}
+ actionName={actionName}
+ label={!isEmpty(focusedOption) ? focusedOption?.label : selectedOption?.label}
+ />
+ }
+ </span>
+ </div>
+ </>
+ )}
+ </React.Fragment>
+ );
+ },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [onAdd, addBtnLabel, emptyError]
  ),
@@ -578,4 +632,116 @@ const CustomGroupHeading = (props) => {
  );
 };
 
+const GenerateActionsDescription = ({ targetTable, sourceTable, actionName = '', label }) => {
+ const isActionOnUpdate = actionName === 'On update';
+
+ const Description = Object.freeze({
+ noAction: isActionOnUpdate ? (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will not be permitted for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ) : (
+ <>
+ Deleting a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will not be permitted for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ),
+ cascade: isActionOnUpdate ? (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will also update any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ) : (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will also delete any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ),
+ restrict: isActionOnUpdate ? (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will not be permitted for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ <br />
+ It is similar to NO ACTION but NO ACTION allows the check to be deferred until later in the transaction, whereas
+ RESTRICT does not.
+ </>
+ ) : (
+ <>
+ Deleting a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will not be permitted for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table. <br />
+ It is similar to NO ACTION but NO ACTION allows the check to be deferred until later in the transaction, whereas
+ RESTRICT does not.
+ </>
+ ),
+ setNull: isActionOnUpdate ? (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will set the NULL value for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ) : (
+ <>
+ Deleting a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will set the NULL value for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ),
+ setDefault: isActionOnUpdate ? (
+ <>
+ Updating a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will set the default value for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ) : (
+ <>
+ Deleting a record from{' '}
+ <span className="action-description-highlighter">{targetTable ? targetTable : '< target table name >'}</span>{' '}
+ table will set the default value for any records that references it in{' '}
+ <span className="action-description-highlighter">{sourceTable ? sourceTable : '< source table name >'}</span>{' '}
+ table.
+ </>
+ ),
+ });
+
+ switch (label) {
+ case 'NO ACTION':
+ return Description.noAction;
+ case 'RESTRICT':
+ return Description.restrict;
+ case 'CASCADE':
+ return Description.cascade;
+ case 'SET NULL':
+ return Description.setNull;
+ case 'SET DEFAULT':
+ return Description.setDefault;
+ default:
+ break;
+ }
+};
+
 export default DataSourceSelect;

frontend/src/TooljetDatabase/Forms/ColumnForm.jsx

@@ -177,7 +177,7 @@ const ColumnForm = ({
 
  const handleCreateForeignKey = () => {
  setIsForeignKeyDraweOpen(false);
- toast.success(`Foreign key Added successfully for selected column`);
+ // toast.success(`Foreign key Added successfully for selected column`);
  };
 
  const referenceTableDetails = referencedColumnDetails?.map((item) => {
@@ -348,7 +348,9 @@ const ColumnForm = ({
  </ToolTip>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">Foreign Key relation</p>
- <p className="fw-400 secondary-text mb-2">Add foreign key to check referral integrity</p>
+ <p className="fw-400 secondary-text tj-text-xsm mb-2">
+ Adding a foreign key relation will link this column with a column in an existing table.
+ </p>
  {foreignKeyDetails?.length > 0 &&
  isForeignKey &&
  foreignKeyDetails?.map((detail, index) => (
@@ -368,6 +370,9 @@ const ColumnForm = ({
  </div>
  </div>
  ))}
+ {foreignKeyDetails?.length > 0 && (
+ <p className="fw-400 secondary-text tj-text-xsm mb-2">Create column to add foreign key relation</p>
+ )}
  </div>
  </div>
 
@@ -424,7 +429,7 @@ const ColumnForm = ({
  </div>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">{isNotNull ? 'NOT NULL' : 'NULL'}</p>
- <p className="fw-400 secondary-text">
+ <p className="fw-400 secondary-text tj-text-xsm mb-2">
  {isNotNull ? 'Not null constraint is added' : 'This field can accept NULL value'}
  </p>
  </div>
@@ -446,7 +451,7 @@ const ColumnForm = ({
  </div>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">{isUniqueConstraint ? 'UNIQUE' : 'NOT UNIQUE'}</p>
- <p className="fw-400 secondary-text">
+ <p className="fw-400 secondary-text tj-text-xsm">
  {isUniqueConstraint ? 'Unique value constraint is added' : 'Unique value constraint is not added'}
  </p>
  </div>
@@ -461,6 +466,7 @@ const ColumnForm = ({
  isEmpty(dataType) ||
  (isNotNull === true && rows.length > 0 && isEmpty(defaultValue) && dataType?.value !== 'serial')
  }
+ showToolTipForFkOnReadDocsSection={true}
  />
  <ConfirmDialog
  title={'Delete foreign key'}

frontend/src/TooljetDatabase/Forms/EditColumnForm.jsx

@@ -602,7 +602,9 @@ const ColumnForm = ({
  </ToolTip>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">Foreign Key relation</p>
- <p className="fw-400 secondary-text mb-2">Add foreign key to check referral integrity</p>
+ <p className="fw-400 secondary-text tj-text-xsm mb-2">
+ Adding a foreign key relation will link this column with a column in an existing table.
+ </p>
  {foreignKeyDetails?.length > 0 && isMatchingForeignKeyColumn(selectedColumn?.Header) && isForeignKey && (
  <div className="foreignKey-details mt-0">
  <span className="foreignKey-text">
@@ -707,7 +709,7 @@ const ColumnForm = ({
  </div>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">{isNotNull ? 'NOT NULL' : 'NULL'}</p>
- <p className="fw-400 secondary-text">
+ <p className="fw-400 secondary-text tj-text-xsm mb-2">
  {isNotNull ? 'Not null constraint is added' : 'This field can accept NULL value'}
  </p>
  </div>
@@ -753,7 +755,7 @@ const ColumnForm = ({
  </div>
  <div className="col d-flex flex-column">
  <p className="m-0 p-0 fw-500">{isUniqueConstraint ? 'UNIQUE' : 'NOT UNIQUE'}</p>
- <p className="fw-400 secondary-text">
+ <p className="fw-400 secondary-text tj-text-xsm">
  {isUniqueConstraint ? 'Unique value constraint is added' : 'Unique value constraint is not added'}
  </p>
  </div>
@@ -766,6 +768,7 @@ const ColumnForm = ({
  onClose={onClose}
  onEdit={handleEdit}
  shouldDisableCreateBtn={columnName === ''}
+ showToolTipForFkOnReadDocsSection={true}
  />
  </div>
  <ConfirmDialog