This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 4cdd680f399 fix: increase dataset edit modal size (#38215) (#39257)
4cdd680f399 is described below
commit 4cdd680f39918012bdfe254bc7ca938aa4cd6939
Author: Vikash Kumar <[email protected]>
AuthorDate: Thu Oct 1 10:03:05 2026 +0530
fix: increase dataset edit modal size (#38215) (#39257)
Co-authored-by: codeant-ai-for-open-source[bot]
<244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
Co-authored-by: rusackas <[email protected]>
Co-authored-by: Claude Sonnet 5 <[email protected]>
Co-authored-by: Evan Rusackas <[email protected]>
---
.../Datasource/DatasourceModal/index.tsx | 19 +++-
.../DatasourceEditor/DatasourceEditor.tsx | 115 ++++++++++++++-------
2 files changed, 95 insertions(+), 39 deletions(-)
diff --git
a/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
b/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
index d70a1ad2c34..7f2b1e8a983 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
@@ -50,6 +50,8 @@ const DatasourceEditor = AsyncEsmComponent(
);
const MODAL_HEIGHT_VH = 90;
+const MODAL_WIDTH_VW = 90;
+const MODAL_MAX_WIDTH = 1600;
const TOP_MARGIN_VH = (100 - MODAL_HEIGHT_VH) / 2;
const StyledDatasourceModal = styled(Modal)`
@@ -57,15 +59,20 @@ const StyledDatasourceModal = styled(Modal)`
padding-bottom: 0;
&& .ant-modal-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
max-height: ${MODAL_HEIGHT_VH}vh;
margin-top: 0;
margin-bottom: 0;
- min-height: 500px;
- min-width: 500px;
+ min-height: min(500px, ${MODAL_HEIGHT_VH}vh);
+ min-width: min(500px, ${MODAL_WIDTH_VW}vw);
}
&& .ant-modal-body {
flex: 1 1 auto;
+ min-height: 0;
+ overflow: auto;
display: flex;
flex-direction: column;
}
@@ -400,6 +407,8 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
<StyledDatasourceModal
show={show}
onHide={onHide}
+ width={`${MODAL_WIDTH_VW}vw`}
+ maxWidth={`${MODAL_MAX_WIDTH}px`}
title={
<span>
<Icons.EditOutlined
@@ -452,7 +461,11 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
responsive
resizable
resizableConfig={{
- defaultSize: { width: 'auto', height: `${MODAL_HEIGHT_VH}vh` },
+ defaultSize: {
+ width: `${MODAL_WIDTH_VW}vw`,
+ height: `${MODAL_HEIGHT_VH}vh`,
+ },
+ maxWidth: `${MODAL_MAX_WIDTH}px`,
maxHeight: `${MODAL_HEIGHT_VH}vh`,
}}
draggable
diff --git
a/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
b/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
index ba148714d03..546cde8f1fa 100644
---
a/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
+++
b/superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
@@ -449,6 +449,27 @@ const StyledTableTabWrapper = styled.div`
vertical-align: middle;
}
+ &.wide-sql-layout {
+ .datasource-key-cell {
+ width: 30%;
+ }
+
+ .datasource-label-cell {
+ width: 20%;
+ }
+
+ .datasource-sql-cell {
+ width: 50%;
+ min-width: 480px;
+ }
+
+ .datasource-sql-expression {
+ width: 100%;
+ min-width: 460px;
+ max-width: none;
+ }
+ }
+
.ant-tag {
margin-top: ${({ theme }) => theme.sizeUnit}px;
}
@@ -490,9 +511,16 @@ const StyledButtonWrapper = styled.span`
`;
const checkboxGenerator = (
- d: boolean,
- onChange: (value: boolean) => void,
-): ReactNode => <CheckboxControl value={d} onChange={onChange} />;
+ d: unknown,
+ onChange: (value: unknown) => void,
+): ReactNode => (
+ <CheckboxControl
+ value={Boolean(d)}
+ onChange={value => {
+ onChange(value);
+ }}
+ />
+);
const DATA_TYPES = [
{ value: 'STRING', label: t('STRING') },
{ value: 'NUMERIC', label: t('NUMERIC') },
@@ -561,32 +589,38 @@ function ColumnCollectionTable({
filterTerm,
filterFields,
}: ColumnCollectionTableProps): JSX.Element {
+ const tableColumns = [
+ 'column_name',
+ ...(showExpression ? ['expression'] : []),
+ ...(isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
+ ? ['advanced_data_type']
+ : []),
+ 'type',
+ 'is_dttm',
+ 'filterable',
+ 'groupby',
+ ];
+
+ const renderExpressionCell = (
+ v: unknown,
+ onChange: (value: unknown) => void,
+ ): ReactNode => (
+ <TextAreaControl
+ initialValue={v as string}
+ onChange={onChange}
+ className="datasource-sql-expression"
+ language="sql"
+ offerEditInModal={false}
+ minLines={5}
+ textAreaStyles={{ minWidth: '100%', maxWidth: 'none' }}
+ resize="both"
+ />
+ );
+
return (
<CollectionTable
- tableColumns={
- isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
- ? [
- 'column_name',
- 'advanced_data_type',
- 'type',
- 'is_dttm',
- 'filterable',
- 'groupby',
- ]
- : ['column_name', 'type', 'is_dttm', 'filterable', 'groupby']
- }
- sortColumns={
- isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
- ? [
- 'column_name',
- 'advanced_data_type',
- 'type',
- 'is_dttm',
- 'filterable',
- 'groupby',
- ]
- : ['column_name', 'type', 'is_dttm', 'filterable', 'groupby']
- }
+ tableColumns={tableColumns}
+ sortColumns={tableColumns}
allowDeletes
allowAddItem={allowAddItem}
itemGenerator={itemGenerator}
@@ -723,6 +757,7 @@ function ColumnCollectionTable({
isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
? {
column_name: t('Column'),
+ expression: t('SQL expression'),
advanced_data_type: t('Advanced data type'),
type: t('Data type'),
groupby: t('Is dimension'),
@@ -731,6 +766,7 @@ function ColumnCollectionTable({
}
: {
column_name: t('Column'),
+ expression: t('SQL expression'),
type: t('Data type'),
groupby: t('Is dimension'),
is_dttm: t('Is temporal'),
@@ -738,6 +774,10 @@ function ColumnCollectionTable({
}
}
onChange={onColumnsChange}
+ itemCellProps={{
+ column_name: () => ({ className: 'datasource-key-cell' }),
+ expression: () => ({ className: 'datasource-sql-cell' }),
+ }}
itemRenderers={
isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
? {
@@ -769,6 +809,7 @@ function ColumnCollectionTable({
),
type: d => (d ? <Label>{String(d)}</Label> : null),
advanced_data_type: d => <Label>{d as string}</Label>,
+ expression: renderExpressionCell,
is_dttm: checkboxGenerator,
filterable: checkboxGenerator,
groupby: checkboxGenerator,
@@ -797,6 +838,7 @@ function ColumnCollectionTable({
</StyledLabelWrapper>
),
type: d => (d ? <Label>{String(d)}</Label> : null),
+ expression: renderExpressionCell,
is_dttm: checkboxGenerator,
filterable: checkboxGenerator,
groupby: checkboxGenerator,
@@ -2406,12 +2448,9 @@ function DatasourceEditor({
expression: '',
})}
itemCellProps={{
- expression: () => ({
- style: {
- maxWidth: '240px',
- overflow: 'hidden',
- },
- }),
+ metric_name: () => ({ className: 'datasource-key-cell' }),
+ verbose_name: () => ({ className: 'datasource-label-cell' }),
+ expression: () => ({ className: 'datasource-sql-cell' }),
}}
itemRenderers={{
metric_name: (v, onItemChange, _, record) => (
@@ -2540,7 +2579,11 @@ function DatasourceEditor({
label: (
<CollectionTabTitle collection={sortedMetrics} title={t('Metrics')}
/>
),
- children: renderMetricCollection(),
+ children: (
+ <StyledTableTabWrapper className="wide-sql-layout">
+ {renderMetricCollection()}
+ </StyledTableTabWrapper>
+ ),
},
{
key: TABS_KEYS.COLUMNS,
@@ -2551,7 +2594,7 @@ function DatasourceEditor({
/>
),
children: (
- <StyledTableTabWrapper>
+ <StyledTableTabWrapper className="wide-sql-layout">
{renderDefaultColumnSettings()}
<DefaultColumnSettingsTitle>
{t('Column Settings')}
@@ -2597,7 +2640,7 @@ function DatasourceEditor({
/>
),
children: (
- <StyledTableTabWrapper>
+ <StyledTableTabWrapper className="wide-sql-layout">
{renderDefaultColumnSettings()}
<DefaultColumnSettingsTitle>
{t('Column Settings')}
