You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2026/04/10 00:06:29 UTC
(superset) 01/02: fix(dataset-modal): fix UI alignment issues in Edit Dataset modal
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch dataset-modal-alignment
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 42f1af87bf82b3d9cbf1053e782267d103c94a21
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu Apr 9 16:18:58 2026 +0000
fix(dataset-modal): fix UI alignment issues in Edit Dataset modal
- Remove negative margin hack on .ant-tabs-top that caused tabs to overlap
with the warning alert, replace with tighter alert bottom margin
- Remove width calc(100%-34px) and marginTop:-16 hacks on Source tab's
table_name field that caused it to be misaligned with the database selector
- Align Columns tab search input and "Sync columns" button on the same row
using Flex for consistent layout
- Replace hardcoded inline style={{ marginBottom: 16, width: 300 }} on
search inputs with theme-token-based css props
- Remove leading whitespace in warning alert text
- Remove unused ColumnButtonWrapper and StyledButtonWrapper styled components
- Use css prop instead of inline style for Settings tab overflow wrapper
Co-Authored-By: Claude Opus 4.6 <no...@anthropic.com>
---
.../Datasource/DatasourceModal/index.tsx | 3 -
.../DatasourceEditor/DatasourceEditor.tsx | 112 ++++++++++-----------
2 files changed, 53 insertions(+), 62 deletions(-)
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx b/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
index 65744e543eb..c9749dc3f1e 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
@@ -66,9 +66,6 @@ const StyledDatasourceModal = styled(Modal)`
flex-direction: column;
}
- .ant-tabs-top {
- margin-top: -${({ theme }) => theme.sizeUnit * 4}px;
- }
`;
function buildExtraJsonObject(
diff --git a/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx b/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
index 5b6ccf91527..5c0e483310d 100644
--- a/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
+++ b/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
@@ -399,11 +399,6 @@ const EditLockContainer = styled.div`
}
`;
-const ColumnButtonWrapper = styled.div`
- text-align: right;
- ${({ theme }) => `margin-bottom: ${theme.sizeUnit * 2}px`}
-`;
-
const StyledLabelWrapper = styled.div`
display: flex;
align-items: center;
@@ -447,16 +442,6 @@ const FieldLabelWithTooltip = styled.div`
`}
`;
-const StyledButtonWrapper = styled.span`
- ${({ theme }) => `
- margin-top: ${theme.sizeUnit * 3}px;
- margin-left: ${theme.sizeUnit * 3}px;
- button>span>:first-of-type {
- margin-right: 0;
- }
- `}
-`;
-
const checkboxGenerator = (
d: boolean,
onChange: (value: boolean) => void,
@@ -1897,22 +1882,20 @@ class DatasourceEditor extends PureComponent<
</div>
}
/>
- <div css={{ width: 'calc(100% - 34px)', marginTop: -16 }}>
- <Field
- fieldKey="table_name"
- label={t('Name')}
- control={
- <TextControl
- controlId="table_name"
- onChange={table => {
- this.onDatasourcePropChange('table_name', table);
- }}
- placeholder={t('Dataset name')}
- disabled={!this.state.isEditMode}
- />
- }
- />
- </div>
+ <Field
+ fieldKey="table_name"
+ label={t('Name')}
+ control={
+ <TextControl
+ controlId="table_name"
+ onChange={table => {
+ this.onDatasourcePropChange('table_name', table);
+ }}
+ placeholder={t('Dataset name')}
+ disabled={!this.state.isEditMode}
+ />
+ }
+ />
</Col>
<Field
fieldKey="sql"
@@ -2152,7 +2135,10 @@ class DatasourceEditor extends PureComponent<
placeholder={t('Search metrics by key or label')}
value={metricSearchTerm}
onChange={e => this.setState({ metricSearchTerm: e.target.value })}
- style={{ marginBottom: 16, width: 300 }}
+ css={theme => ({
+ marginBottom: theme.sizeUnit * 4,
+ width: theme.sizeUnit * 75,
+ })}
allowClear
/>
<CollectionTable
@@ -2336,11 +2322,10 @@ class DatasourceEditor extends PureComponent<
<DatasourceContainer data-test="datasource-editor">
{this.renderErrors()}
<Alert
- css={theme => ({ marginBottom: theme.sizeUnit * 4 })}
+ css={theme => ({ marginBottom: theme.sizeUnit * 2 })}
type="warning"
message={
<>
- {' '}
<strong>{t('Be careful.')} </strong>
{t(
'Changing these settings will affect all charts using this dataset, including charts owned by other people.',
@@ -2380,29 +2365,35 @@ class DatasourceEditor extends PureComponent<
children: (
<StyledTableTabWrapper>
{this.renderDefaultColumnSettings()}
- <ColumnButtonWrapper>
- <StyledButtonWrapper>
- <Button
- buttonSize="small"
- buttonStyle="tertiary"
- onClick={this.syncMetadata}
- className="sync-from-source"
- disabled={this.state.isEditMode}
- >
- <Icons.DatabaseOutlined iconSize="m" />
- {t('Sync columns from source')}
- </Button>
- </StyledButtonWrapper>
- </ColumnButtonWrapper>
- <Input.Search
- placeholder={t('Search columns by name')}
- value={this.state.columnSearchTerm}
- onChange={e =>
- this.setState({ columnSearchTerm: e.target.value })
- }
- style={{ marginBottom: 16, width: 300 }}
- allowClear
- />
+ <Flex
+ justify="space-between"
+ align="center"
+ css={theme => ({
+ marginBottom: theme.sizeUnit * 4,
+ })}
+ >
+ <Input.Search
+ placeholder={t('Search columns by name')}
+ value={this.state.columnSearchTerm}
+ onChange={e =>
+ this.setState({ columnSearchTerm: e.target.value })
+ }
+ css={theme => ({
+ width: theme.sizeUnit * 75,
+ })}
+ allowClear
+ />
+ <Button
+ buttonSize="small"
+ buttonStyle="tertiary"
+ onClick={this.syncMetadata}
+ className="sync-from-source"
+ disabled={this.state.isEditMode}
+ >
+ <Icons.DatabaseOutlined iconSize="m" />
+ {t('Sync columns from source')}
+ </Button>
+ </Flex>
<ColumnCollectionTable
className="columns-table"
columns={this.state.databaseColumns}
@@ -2437,7 +2428,10 @@ class DatasourceEditor extends PureComponent<
calculatedColumnSearchTerm: e.target.value,
})
}
- style={{ marginBottom: 16, width: 300 }}
+ css={theme => ({
+ marginBottom: theme.sizeUnit * 4,
+ width: theme.sizeUnit * 75,
+ })}
allowClear
/>
<ColumnCollectionTable
@@ -2526,7 +2520,7 @@ class DatasourceEditor extends PureComponent<
key: TABS_KEYS.SETTINGS,
label: t('Settings'),
children: (
- <div style={{ overflowX: 'hidden' }}>
+ <div css={{ overflow: 'hidden' }}>
<Row gutter={16}>
<Col xs={24} md={12}>
<FormContainer>