Skip to content

Commit

Permalink
feat(report): add/edit modal improvements (#12183)
Browse files Browse the repository at this point in the history
* alert/report modal improvements

* update spec for alert report modal
Lily Kuang authored Jan 4, 2021
1 parent a3bbbf8 commit ff0fe43
Showing 3 changed files with 47 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -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', () => {
34 changes: 26 additions & 8 deletions superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
Original file line number Diff line number Diff line change
@@ -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<NotificationMethodProps> = ({
onChange={onRecipientsChange}
/>
</div>
<div className="helper">
{t('Recipients are separated by "," or ";"')}
</div>
</StyledInputContainer>
) : null}
</StyledNotificationMethod>
@@ -795,6 +806,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
updateAlertState(target.name, target.value);
};

const onSQLChange = (value: string) => {
updateAlertState('sql', value || '');
};

const onOwnersChange = (value: Array<Owner>) => {
updateAlertState('owners', value || []);
};
@@ -1139,13 +1154,16 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
{t('SQL Query')}
<span className="required">*</span>
</div>
<div className="input-container">
<textarea
name="sql"
value={currentAlert ? currentAlert.sql || '' : ''}
onChange={onTextChange}
/>
</div>
<TextAreaControl
name="sql"
language="sql"
offerEditInModal={false}
minLines={15}
maxLines={15}
onChange={onSQLChange}
readOnly={false}
value={currentAlert ? currentAlert.sql : ''}
/>
</StyledInputContainer>
<div className="inline-container wrap">
<StyledInputContainer>
Original file line number Diff line number Diff line change
@@ -17,13 +17,19 @@
* under the License.
*/
import React, { useState, useCallback, useRef, FunctionComponent } from 'react';
import { t, useTheme } from '@superset-ui/core';
import { styled, t, useTheme } from '@superset-ui/core';

import { Input, AntdInput } from 'src/common/components';
import { Radio } from 'src/common/components/Radio';
import { CronPicker, CronError } from 'src/common/components/CronPicker';
import { StyledInputContainer } from '../AlertReportModal';

const HelperText = styled.div`
display: block;
color: ${({ theme }) => theme.colors.grayscale.base};
font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
text-align: left;
`;
interface AlertReportCronSchedulerProps {
value: string;
onChange: (change: string) => any;
@@ -86,6 +92,17 @@ export const AlertReportCronScheduler: FunctionComponent<AlertReportCronSchedule
</div>
</StyledInputContainer>
</div>
<HelperText>
{t('Refer to the ')}
<a
href="https://crontab.guru/"
target="_blank"
rel="noopener noreferrer"
>
{t('crontab guru')}
</a>
{t(' for more information on how to structure your CRON schedule.')}
</HelperText>
</Radio.Group>
</>
);

0 comments on commit ff0fe43

Please sign in to comment.