diff --git a/superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx b/superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx index 8fc01d6548..d6198f4fb5 100644 --- a/superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx +++ b/superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx @@ -27,6 +27,7 @@ import { AsyncSelect } from 'src/components/Select'; import { Radio } from 'src/common/components/Radio'; import { GraySelect as Select } from 'src/common/components/Select'; import { Switch } from 'src/common/components/Switch'; +import TextAreaControl from 'src/explore/components/controls/TextAreaControl'; import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint'; import { styledMount as mount } from 'spec/helpers/theming'; @@ -169,8 +170,8 @@ describe('AlertReportModal', () => { const addWrapper = await mountAndWait(props); - expect(wrapper.find('textarea[name="sql"]')).toHaveLength(0); - expect(addWrapper.find('textarea[name="sql"]')).toExist(); + expect(wrapper.find(TextAreaControl)).toHaveLength(0); + expect(addWrapper.find(TextAreaControl)).toExist(); }); it('renders one select element when in report mode', () => { diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx index 23d5acbd31..36561079ec 100644 --- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx +++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx @@ -29,7 +29,7 @@ import { Radio } from 'src/common/components/Radio'; import { AsyncSelect } from 'src/components/Select'; import withToasts from 'src/messageToasts/enhancers/withToasts'; import Owner from 'src/types/Owner'; - +import TextAreaControl from 'src/explore/components/controls/TextAreaControl'; import { AlertReportCronScheduler } from './components/AlertReportCronScheduler'; import { AlertObject, Operator, Recipient, MetaObject } from './types'; @@ -196,6 +196,14 @@ export const StyledInputContainer = styled.div` margin: ${({ theme }) => theme.gridUnit * 2}px; margin-top: 0; + .helper { + display: block; + color: ${({ theme }) => theme.colors.grayscale.base}; + font-size: ${({ theme }) => theme.typography.sizes.s - 1}px; + padding: ${({ theme }) => theme.gridUnit}px 0; + text-align: left; + } + .required { margin-left: ${({ theme }) => theme.gridUnit / 2}px; color: ${({ theme }) => theme.colors.error.base}; @@ -451,6 +459,9 @@ const NotificationMethod: FunctionComponent = ({ onChange={onRecipientsChange} /> +
+ {t('Recipients are separated by "," or ";"')} +
) : null} @@ -795,6 +806,10 @@ const AlertReportModal: FunctionComponent = ({ updateAlertState(target.name, target.value); }; + const onSQLChange = (value: string) => { + updateAlertState('sql', value || ''); + }; + const onOwnersChange = (value: Array) => { updateAlertState('owners', value || []); }; @@ -1139,13 +1154,16 @@ const AlertReportModal: FunctionComponent = ({ {t('SQL Query')} * -
-