style: add warning msg to "Change Datasource" modal (#10379)

This commit is contained in:
Maxime Beauchemin
2020-07-21 10:07:58 -07:00
committed by GitHub
parent 85169f2f1c
commit dc4b1b1271
3 changed files with 41 additions and 15 deletions

View File

@@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'reactable-arc';
import { FormControl, Modal } from 'react-bootstrap';
import { Alert, FormControl, Modal } from 'react-bootstrap';
import { SupersetClient } from '@superset-ui/connection';
import { t } from '@superset-ui/translation';
@@ -43,6 +43,10 @@ const defaultProps = {
const TABLE_COLUMNS = ['name', 'type', 'schema', 'connection', 'creator'];
const TABLE_FILTERABLE = ['rawName', 'type', 'schema', 'connection', 'creator'];
const CHANGE_WARNING_MSG = t(
'Changing the datasource may break the chart if the chart relies ' +
'on columns or metadata that does not exist in the target datasource',
);
class ChangeDatasourceModal extends React.PureComponent {
constructor(props) {
@@ -136,6 +140,9 @@ class ChangeDatasourceModal extends React.PureComponent {
<Modal.Title>{t('Select a datasource')}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Alert bsStyle="warning" showIcon>
<strong>{t('Warning!')}</strong> {CHANGE_WARNING_MSG}
</Alert>
<div>
<FormControl
inputRef={ref => {

View File

@@ -491,21 +491,21 @@
//
// ## Define colors for form feedback states and, by default, alerts.
@state-success-text: darken(@brand-success, 20%);
@state-success-bg: lighten(@brand-success, 35%);
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-success-text: @success-dark2;
@state-success-bg: @success-light2;
@state-success-border: @success-light2;
@state-info-text: darken(@brand-info, 22%);
@state-info-bg: lighten(@brand-info, 20%);
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-info-text: @info-dark2;
@state-info-bg: @info-light2;
@state-info-border: @info-light2;
@state-warning-text: darken(@brand-warning, 30%);
@state-warning-bg: lighten(@brand-warning, 20%);
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-warning-text: @warning-dark2;
@state-warning-bg: @warning-light2;
@state-warning-border: @warning-light2;
@state-danger-text: darken(@brand-danger, 25%);
@state-danger-bg: lighten(@brand-danger, 22%);
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-danger-text: @danger-dark2;
@state-danger-bg: @danger-light2;
@state-danger-border: @danger-light2;
// == Tooltips
//

View File

@@ -60,10 +60,29 @@
@link-hover: darken(@link, @colorstop-one);
/***************************** status colors ****************************/
@success: #5ac189;
@info: #66bcfe;
@warning: #ff7f44;
@info-dark1: #4d8cbe;
@info-dark2: #315e7e;
@info-light1: #b3defe;
@info-light2: #eff8fe;
@danger: #e04355;
@danger-dark1: #a7323f;
@danger-dark2: #6f212a;
@danger-light1: #efa1aa;
@danger-light2: #faedee;
@success: #5ac189;
@success-dark1: #439066;
@success-dark2: #2b6144;
@success-light1: #ace1c4;
@success-light2: #eef8f3;
@warning: #fcc700;
@warning-dark1: #bc9501;
@warning-dark2: #7d6300;
@warning-light1: #fde380;
@warning-light2: #fef9e6;
/* general component effects */
@shadow-highlight: @primary-color;