codeant-ai-for-open-source[bot] commented on code in PR #39009:
URL: https://github.com/apache/superset/pull/39009#discussion_r3022487273
##########
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx:
##########
@@ -2525,18 +2526,20 @@ class DatasourceEditor extends PureComponent<
key: TABS_KEYS.SETTINGS,
label: t('Settings'),
children: (
- <Row gutter={16}>
- <Col xs={24} md={12}>
- <FormContainer>
- {this.renderSettingsFieldset()}
- </FormContainer>
- </Col>
- <Col xs={24} md={12}>
- <FormContainer>
- {this.renderAdvancedFieldset()}
- </FormContainer>
- </Col>
- </Row>
+ <div style={{ overflow: 'hidden' }}>
Review Comment:
**Suggestion:** Using `overflow: 'hidden'` on the Settings tab container
clips child popups rendered inside the same DOM subtree. Superset
`Select`/`AsyncSelect` components default to `getPopupContainer={triggerNode =>
triggerNode.parentNode}`, so controls like the Owners selector can have their
dropdown menu cut off. Restrict the overflow fix to the horizontal axis only.
[possible bug]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Owners dropdown clipped in Dataset Editor Settings tab.
- ⚠️ Future popup-based Settings controls may render partially hidden.
```
</details>
```suggestion
<div style={{ overflowX: 'hidden' }}>
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. The dataset editor modal is implemented by `StyledDatasourceModal` in
`superset-frontend/src/components/Datasource/DatasourceModal/index.tsx:44-72`,
which
renders `<DatasourceEditor ... />` inside the Ant Design `Modal` body at
`index.tsx:90-99,
383-388`.
2. In the `DatasourceEditor` render method, the Settings tab item uses a
wrapper `<div
style={{ overflow: 'hidden' }}>` around its content at
`superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx:2527-2535`,
so this div becomes an ancestor with `overflow: hidden` for all Settings tab
children.
3. The Settings tab's left column renders `renderSettingsFieldset()`
(definition at
`DatasourceEditor.tsx:1546-1625`), which includes the `OwnersSelector`
component at
`DatasourceEditor.tsx:1625-1631`.
4. `OwnersSelector` renders an `AsyncSelect` without overriding
`getPopupContainer` at
`DatasourceEditor.tsx:7-11, 38-49`, so it inherits the default
`getPopupContainer={triggerNode => triggerNode.parentNode}` behavior from
`AsyncSelect`
(`packages/superset-ui-core/src/components/Select/AsyncSelect.tsx:193-247`).
The dropdown
menu is therefore rendered inside a parent element that is ultimately inside
the
`overflow: 'hidden'` Settings wrapper. When the Owners dropdown needs to
extend beyond the
wrapper's vertical bounds (e.g., in a shorter modal or smaller viewport),
the absolutely
positioned dropdown content overflows that wrapper and is clipped by
`overflow: hidden`,
making parts of the options list invisible. Changing the wrapper to
`overflowX: 'hidden'`
keeps the horizontal scroll fix while allowing vertical dropdown overflow to
remain
visible.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
**Line:** 2529:2529
**Comment:**
*Possible Bug: Using `overflow: 'hidden'` on the Settings tab container
clips child popups rendered inside the same DOM subtree. Superset
`Select`/`AsyncSelect` components default to `getPopupContainer={triggerNode =>
triggerNode.parentNode}`, so controls like the Owners selector can have their
dropdown menu cut off. Restrict the overflow fix to the horizontal axis only.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39009&comment_hash=e5701c7e98f3d3c80a595a4e029787b7d983c098af2f1635ad4489b9c52ca071&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39009&comment_hash=e5701c7e98f3d3c80a595a4e029787b7d983c098af2f1635ad4489b9c52ca071&reaction=dislike'>👎</a>
##########
superset-frontend/src/components/Datasource/DatasourceModal/index.tsx:
##########
@@ -367,7 +375,9 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
}
responsive
resizable
- resizableConfig={{ defaultSize: { width: 'auto', height: '900px' } }}
+ resizableConfig={{
+ defaultSize: { width: 'auto', height: `${MODAL_HEIGHT_VH}vh` },
Review Comment:
**Suggestion:** Passing a partial `resizableConfig` replaces the modal's
default resize constraints instead of extending them, so the modal can be
resized to unusable dimensions and lose the intended handle behavior. Include
the default min/max bounds and enabled edges when setting `defaultSize`. [logic
error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Dataset editor modal can resize beyond intended min/max bounds.
- ⚠️ Resize handle behavior diverges from Modal default configuration.
- ⚠️ Affects dataset editing from Explore and Dataset List flows.
```
</details>
```suggestion
maxHeight: '100vh',
maxWidth: '100vw',
minHeight: 500,
minWidth: 500,
enable: {
bottom: true,
bottomLeft: false,
bottomRight: true,
left: false,
top: false,
topLeft: false,
topRight: false,
right: true,
},
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open the Dataset List page
(`superset-frontend/src/pages/DatasetList/index.tsx`, lines
872–901) and click an "Edit dataset" action so that
`datasetCurrentlyEditing` is set and
`<DatasourceModal ... show />` is rendered (line 888).
2. This renders `DatasourceModal` which returns `<StyledDatasourceModal ...
resizable
resizableConfig={{ defaultSize: { width: 'auto', height:
`${MODAL_HEIGHT_VH}vh` } }} />`
(`superset-frontend/src/components/Datasource/DatasourceModal/index.tsx`,
lines 325–332
and 377–380).
3. The `Modal` implementation at
`packages/superset-ui-core/src/components/Modal/Modal.tsx` computes
`getResizableConfig`
(`Showing lines 260–519`, lines 37–42) which returns
`defaultResizableConfig(hideFooter)`
only when `Object.keys(resizableConfig).length === 0`; otherwise it returns
the provided
`resizableConfig` as-is, bypassing defaults defined in
`defaultResizableConfig` (lines
186–203: maxHeight `100vh`, maxWidth `100vw`, minHeight based on
header/footer, minWidth
`'380px'`, and the `enable` handle map).
4. Because `DatasourceModal` passes a non-empty `resizableConfig` object
that only sets
`defaultSize` and omits min/max and `enable`, the modal's `Resizable`
wrapper receives no
explicit min/max constraints or handle configuration from
`defaultResizableConfig`. When a
user drags the resize handle on the dataset editor modal (visible because
`resizable` is
true in the same JSX block), the outer resizable container can be shrunk or
expanded
beyond the screen-friendly bounds enforced for other modals (e.g., Drill By
at
`src/components/Chart/DrillBy/DrillByModal.tsx` lines 147–167 also overrides
defaults
similarly), allowing the dataset editor modal to reach very small or very
large dimensions
compared to the design defaults.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
**Line:** 379:379
**Comment:**
*Logic Error: Passing a partial `resizableConfig` replaces the modal's
default resize constraints instead of extending them, so the modal can be
resized to unusable dimensions and lose the intended handle behavior. Include
the default min/max bounds and enabled edges when setting `defaultSize`.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39009&comment_hash=563bfad7af57422fb1091c55f695a2e4d259b5e72670a955608a494e37f1c179&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39009&comment_hash=563bfad7af57422fb1091c55f695a2e4d259b5e72670a955608a494e37f1c179&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
