justinpark commented on code in PR #34509:
URL: https://github.com/apache/superset/pull/34509#discussion_r2249041558
##########
superset-frontend/src/components/Datasource/DatasourceModal.tsx:
##########
@@ -228,34 +236,82 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
setErrors(err);
};
- const renderSaveDialog = () => (
- <div>
- <Alert
- css={theme => ({
- marginTop: theme.gridUnit * 4,
- marginBottom: theme.gridUnit * 4,
- })}
- type="warning"
- showIcon
- message={t(`The dataset configuration exposed here
+ const getSaveDialog = useCallback(
+ () => (
+ <div>
+ <Alert
+ css={theme => ({
+ marginTop: theme.gridUnit * 4,
+ marginBottom: theme.gridUnit * 4,
+ })}
+ type="warning"
+ showIcon={false}
+ message={t(`The dataset configuration exposed here
affects all the charts using this dataset.
Be mindful that changing settings
here may affect other charts
in undesirable ways.`)}
- />
- {t('Are you sure you want to save and apply changes?')}
- </div>
+ />
+ {datasource.sql !== currentDatasource.sql && (
+ <>
+ <Alert
+ css={theme => ({
+ marginTop: theme.gridUnit * 4,
+ marginBottom: theme.gridUnit * 4,
+ })}
+ type="info"
+ showIcon={false}
+ message={t(`The dataset columns will be automatically synced
+ based on the changes in your SQL query. If your changes don't
+ impact the column definitions, you might want to skip this
step.`)}
+ />
+ <Checkbox
+ checked={syncColumnsRef.current}
+ onChange={() => {
+ syncColumnsRef.current = !syncColumnsRef.current;
+ if (confirmModal) {
+ confirmModal.update({
+ content: getSaveDialog(),
+ });
+ }
+ }}
+ />
+ <span className="m-l-5">{t('Automatically sync columns')}</span>
+ <br />
+ <br />
+ </>
+ )}
+ {t('Are you sure you want to save and apply changes?')}
+ </div>
+ ),
+ [currentDatasource.sql, datasource.sql, confirmModal],
);
+ useEffect(() => {
+ if (confirmModal) {
+ confirmModal.update({
+ content: getSaveDialog(),
+ });
+ }
+ }, [confirmModal, getSaveDialog]);
+
+ useEffect(() => {
+ if (datasource.sql !== currentDatasource.sql) {
+ syncColumnsRef.current = true;
+ }
+ }, [datasource.sql, currentDatasource.sql]);
+
const onClickSave = () => {
- dialog.current = modal.confirm({
+ const modalInstance = modal.confirm({
Review Comment:
oh. I think you followed the below example.
```
const modal = Modal.info();
modal.update({
title: 'Updated title',
content: 'Updated content',
});
// on 4.8.0 or above, you can pass a function to update modal
modal.update((prevConfig) => ({
...prevConfig,
title: `${prevConfig.title} (New)`,
}));
```
But you should double check this function since you use `modal.confirm()`.
Here is the example of await operation with useModal
```
<Button
onClick={async () => {
const confirmed = await modal.confirm(config);
console.log('Confirmed: ', confirmed);
}}
>
Confirm
</Button>
```
--
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]
