Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix: Disable boolean datatype selection for foreign key on create and edit table in TJDB #9817

Merged
merged 16 commits into from
Jun 4, 2024
Merged

Fix: Disable boolean datatype selection for foreign key on create and edit table in TJDB #9817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d967ca2
Prevent boolean datatype from being selected as a foreign key
parthy007 May 22, 2024
c2989f7
Change placeholder text
parthy007 May 24, 2024
338ec99
Restrict foreign key relation for boolean datatype from edit/create c…
parthy007 May 24, 2024
3bbb980
Place disabled options together at the top
parthy007 May 24, 2024
7febec5
Disable boolean datatype from dropdown
parthy007 May 24, 2024
93a91e2
Remove placeholder text and make it appear on hover
parthy007 May 24, 2024
40b747f
Correct source-description text
parthy007 May 24, 2024
f5e1b1a
Correct the tooltip text for boolean data type
parthy007 May 24, 2024
6a4454c
Remove background colour from disabled options
parthy007 May 24, 2024
f736335
Change the tooltip text for boolean type in tableschema
parthy007 May 24, 2024
94735de
Disable cursor for disabled options
parthy007 May 24, 2024
0ac2f59
Shows hover tooltip text on disabled options
parthy007 May 24, 2024
4d90bcc
Change tooltip and placeholder text
parthy007 May 24, 2024
1c06dcb
Merge branch 'release/database-1.1.1' into fix/disable-boolean-foreig…
parthy007 May 28, 2024
296f345
Merge branch 'release/database-1.1.1' into fix/disable-boolean-foreig…
parthy007 Jun 4, 2024
5227514
Merge branch 'release/database-1.1.1' into fix/disable-boolean-foreig…
parthy007 Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 108 additions & 100 deletions frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,12 @@ function DataSourceSelect({
e.stopPropagation();
};

const modifiedOptions = [...options].sort((a, b) => {
if (a.isDisabled && !b.isDisabled) return -1;
if (!a.isDisabled && b.isDisabled) return 1;
return 0;
});

return (
<div onKeyDown={handleFKMenuKeyDown} onClick={(e) => e.stopPropagation()}>
<Select
Expand Down Expand Up @@ -263,110 +269,112 @@ function DataSourceSelect({
Option: ({ children, ...props }) => {
return (
<components.Option {...props}>
<div
style={{
display: 'flex',
justifyContent: showRedirection || actions ? 'space-between' : 'flex-start',
alignItems: 'center',
cursor: foreignKeyAccess && props.data.isDisabled && 'not-allowed',
}}
className={`dd-select-option ${showDescription && 'h-100'}`}
<ToolTip
message={`Foreign key relation cannot be created for ${props?.data?.dataType} type column`}
placement="top"
tooltipClassName="tootip-table"
show={(foreignKeyAccess && props.data.dataType === 'serial') || props.data.dataType === 'boolean'}
>
{isMulti && (
<div
style={{
display: 'flex',
alignItems: 'center',
// width: '20px',
}}
<div
style={{
display: 'flex',
justifyContent: showRedirection || actions ? 'space-between' : 'flex-start',
alignItems: 'center',
cursor: foreignKeyAccess && props.data.isDisabled && 'not-allowed',
}}
className={`dd-select-option ${showDescription && 'h-100'}`}
>
{isMulti && (
<div
style={{
display: 'flex',
alignItems: 'center',
// width: '20px',
}}
>
<Form.Check // prettier-ignore
type={'checkbox'}
id={props.value}
className="me-1"
checked={props.isSelected}
// label={`default ${type}`}
/>
</div>
)}
{props?.data?.icon &&
(isValidElement(props.data.icon) ? (
props.data.icon
) : (
<SolidIcon
name={props.data.icon}
style={{ height: 16, width: 16 }}
width={20}
height={17}
viewBox=""
/>
))}

<span
className={cx({
'ms-1 ': props?.data?.icon,
'flex-grow-1': !showDescription,
})}
>
<Form.Check // prettier-ignore
type={'checkbox'}
id={props.value}
className="me-1"
checked={props.isSelected}
// label={`default ${type}`}
{children}
</span>

{foreignKeyAccess && showRedirection && props.isFocused && (
<Maximize
width={16}
style={{
...(props.isSelected &&
highlightSelected && {
marginRight: '10px',
marginTop: '3px',
}),
}}
onClick={() => {
const data = { id: props.data.id, table_name: props.data.value };
localStorage.setItem('tableDetails', JSON.stringify(data));
window.open(getPrivateRoute('database'), '_blank');
}}
/>
</div>
)}
{props?.data?.icon &&
(isValidElement(props.data.icon) ? (
props.data.icon
) : (
)}
{props.isSelected && highlightSelected && (
<SolidIcon
name={props.data.icon}
style={{ height: 16, width: 16 }}
width={20}
height={17}
viewBox=""
fill="var(--indigo9)"
name="tick"
style={{ height: 16, width: 16, marginTop: '-4px' }}
viewBox="0 0 20 20"
className="mx-1"
/>
))}

<span
className={cx({
'ms-1 ': props?.data?.icon,
'flex-grow-1': !showDescription,
})}
>
{children}
</span>

{foreignKeyAccess && showRedirection && props.isFocused && (
<Maximize
width={16}
style={{
...(props.isSelected &&
highlightSelected && {
marginRight: '10px',
marginTop: '3px',
}),
}}
onClick={() => {
const data = { id: props.data.id, table_name: props.data.value };
localStorage.setItem('tableDetails', JSON.stringify(data));
window.open(getPrivateRoute('database'), '_blank');
}}
/>
)}
{props.isSelected && highlightSelected && (
<SolidIcon
fill="var(--indigo9)"
name="tick"
style={{ height: 16, width: 16, marginTop: '-4px' }}
viewBox="0 0 20 20"
className="mx-1"
/>
)}

{shouldShowForeignKeyIcon && props?.data?.isTargetTable && (
<ToolTip
message={referencedForeignKeyDetails?.map(
(item, index) =>
item?.referenced_table_id === props?.data?.value && (
<div key={item?.referenced_table_id}>
<span>Foreign key relation</span>
<div className="d-flex align-item-center justify-content-between mt-2 custom-tooltip-style">
<span>{item?.column_names[0]}</span>
<ArrowRight />
<span>{`${item?.referenced_table_name}.${item?.referenced_column_names[0]}`}</span>
)}

{shouldShowForeignKeyIcon && props?.data?.isTargetTable && (
<ToolTip
message={referencedForeignKeyDetails?.map(
(item, index) =>
item?.referenced_table_id === props?.data?.value && (
<div key={item?.referenced_table_id}>
<span>Foreign key relation</span>
<div className="d-flex align-item-center justify-content-between mt-2 custom-tooltip-style">
<span>{item?.column_names[0]}</span>
<ArrowRight />
<span>{`${item?.referenced_table_name}.${item?.referenced_column_names[0]}`}</span>
</div>
</div>
</div>
)
)}
placement="top"
tooltipClassName="tjdb-table-tooltip"
>
<div>
<SolidIcon name="foreignkey" height={'14'} width={'24'} />
</div>
</ToolTip>
)}
</div>
{foreignKeyAccess && props.data.isDisabled && (
<div style={{ fontSize: '12px', color: '#889096', cursor: 'not-allowed' }}>
Foreign key relation cannot be created for serial type column
)
)}
placement="top"
tooltipClassName="tjdb-table-tooltip"
>
<div>
<SolidIcon name="foreignkey" height={'14'} width={'24'} />
</div>
</ToolTip>
)}
</div>
)}
</ToolTip>
</components.Option>
);
},
Expand Down Expand Up @@ -502,15 +510,15 @@ function DataSourceSelect({
}),
option: (style, { data: { isNested }, isFocused, isDisabled, isSelected }) => ({
...style,
cursor: 'pointer',
cursor: isDisabled ? 'not-allowed' : 'pointer',
color: isDisabled ? 'var(--slate8, #c1c8cd)' : 'inherit',
backgroundColor:
isSelected && highlightSelected
? 'var(--indigo3, #F0F4FF)'
: isFocused && !isNested
? 'var(--slate4)'
: isDisabled
? 'var(--slate3, #f1f3f5)'
? 'transparent'
: isDisabled && isFocused
? 'var(--slate3, #f1f3f5)'
: 'transparent',
Expand Down Expand Up @@ -546,7 +554,7 @@ function DataSourceSelect({
}),
}}
placeholder="Search"
options={scrollEventForColumnValus && searchValue ? searchResults : options}
options={scrollEventForColumnValus && searchValue ? searchResults : modifiedOptions}
isDisabled={isDisabled}
isClearable={false}
isMulti={isMulti}
Expand Down
13 changes: 11 additions & 2 deletions frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,11 +340,15 @@ const ColumnForm = ({
message={
dataType?.value === 'serial'
? 'Foreign key relation cannot be created for serial type column'
: dataType?.value === 'boolean'
? 'Foreign key relation cannot be created for boolean type column'
: 'Fill in column details to create a foreign key relation'
}
placement="top"
tooltipClassName="tootip-table"
show={isEmpty(dataType) || isEmpty(columnName) || dataType?.value === 'serial'}
show={
isEmpty(dataType) || isEmpty(columnName) || dataType?.value === 'serial' || dataType?.value === 'boolean'
}
>
<div className="col-1">
<label className={`form-switch`}>
Expand All @@ -361,7 +365,12 @@ const ColumnForm = ({
setIsForeignKeyDraweOpen(e.target.checked);
}
}}
disabled={isEmpty(dataType) || isEmpty(columnName) || dataType?.value === 'serial'}
disabled={
isEmpty(dataType) ||
isEmpty(columnName) ||
dataType?.value === 'serial' ||
dataType?.value === 'boolean'
}
/>
</label>
</div>
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/TooljetDatabase/Forms/EditColumnForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,11 +597,13 @@ const ColumnForm = ({
message={
dataType === 'serial'
? 'Foreign key relation cannot be created for serial type column'
: dataType === 'boolean'
? 'Foreign key relation cannot be created for boolean type column'
: 'Fill in column details to create a foreign key relation'
}
placement="top"
tooltipClassName="tootip-table"
show={dataType === 'serial' || isEmpty(dataType) || isEmpty(columnName)}
show={dataType === 'serial' || isEmpty(dataType) || isEmpty(columnName) || dataType === 'boolean'}
>
<div className="col-1">
<label className={`form-switch`}>
Expand All @@ -620,7 +622,11 @@ const ColumnForm = ({
}
}}
disabled={
dataType?.value === 'serial' || dataType === 'serial' || isEmpty(dataType) || isEmpty(columnName)
dataType?.value === 'serial' ||
dataType === 'serial' ||
isEmpty(dataType) ||
isEmpty(columnName) ||
dataType === 'boolean'
}
/>
</label>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/TooljetDatabase/Forms/TableDetailsDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function TableDetailsDropdown({
: targetColumn
}
foreignKeyAccess={true}
topPlaceHolder={!actions && 'Select columns..'}
topPlaceHolder={!actions && 'Select column..'}
showPlaceHolderInForeignKeyDrawer={true}
onChange={(value) => {
if (source) {
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/TooljetDatabase/Forms/TableKeyRelations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function SourceKeyRelation({
icon: columns?.dataTypeDetails?.icon ?? columns?.dataTypeDetails[0]?.icon,
value: columns?.column_name,
dataType: columns?.data_type,
isDisabled: columns?.data_type === 'serial' ? true : false,
isDisabled: columns?.data_type === 'serial' || columns?.data_type === 'boolean' ? true : false,
},
]
: Object.values(columns).map((item) => {
Expand All @@ -79,7 +79,7 @@ function SourceKeyRelation({
icon: item?.dataTypeDetails?.icon ?? item?.dataTypeDetails?.[0]?.icon,
value: item?.column_name,
dataType: item?.data_type,
isDisabled: item?.data_type === 'serial' ? true : false,
isDisabled: item?.data_type === 'serial' || item?.data_type === 'boolean' ? true : false,
};
});

Expand Down Expand Up @@ -245,7 +245,7 @@ function SourceKeyRelation({
<Source width={18} height={18} />
<p className="mb-0 source-title">SOURCE</p>
</div>
<span className="source-description">The current table on which foreign Key constraint is being added</span>
<span className="source-description">The current table on which foreign key constraint is being added</span>
</div>
<TableDetailsDropdown
firstColumnName={'Table'}
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/TooljetDatabase/Forms/TableSchema.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,10 @@ function TableSchema({
}`}</span>
</div>
</div>
) : columnDetails[index]?.data_type === 'boolean' ? (
'Foreign key relation cannot be created for boolean type column'
) : columnDetails[index]?.data_type === 'serial' ? (
'Foreign key relation cannot be created for serial type column'
) : (
'No foreign key relation'
)
Expand Down Expand Up @@ -389,7 +393,7 @@ function TableSchema({
<ToolTip
message={
columnDetails[index]?.data_type === 'boolean'
? 'Boolean data type cannot be a primary key'
? 'Boolean type column cannot be a primary key'
: 'There must be atleast one Primary key'
}
placement="top"
Expand Down
Loading