diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx index 7f594b2464539..719d432518be2 100644 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@ -31,6 +31,7 @@ import { SupersetClient, SupersetTheme, t, + supersetTheme, } from '@superset-ui/core'; import rison from 'rison'; import { useSingleViewResource } from 'src/views/CRUD/hooks'; @@ -146,9 +147,27 @@ const RETENTION_OPTIONS = [ }, ]; +// Style Constants const MODAL_BODY_HEIGHT = 180.5; +// Apply to collapse panels as 'style' prop value +const panelBorder = { + borderBottom: 'none', +}; + +// Apply to final text input components of each collapse panel +const no_margin_bottom = css` + margin-bottom: 0; +`; + +// Styled Components + +/* Height of modal body defined here, total width defined at component invocation as antd prop + */ const StyledModal = styled(Modal)` + .ant-modal-header { + border-bottom: none; + } .ant-modal-body { height: ${({ theme }) => theme.gridUnit * MODAL_BODY_HEIGHT}px; } @@ -390,8 +409,12 @@ export const TRANSLATIONS = { OWNERS_TEXT: t('Owners'), OWNERS_PLACEHOLDER: t('Select owners'), DESCRIPTION_TEXT: t('Description'), - DESCRIPTION_PLACEHOLDER: t('Include description to be sent with your report'), - ACTIVE_TEXT: t('Active'), + REPORT_DESCRIPTION_PLACEHOLDER: t( + 'Include description to be sent with report', + ), + ALERT_DESCRIPTION_PLACEHOLDER: t('Include description to be sent with alert'), + ACTIVE_REPORT_TEXT: t('Report is active'), + ACTIVE_ALERT_TEXT: t('Alert is active'), ALERT_CONDITION_TEXT: t('Alert condition'), DATABASE_TEXT: t('Database'), DATABASE_PLACEHOLDER: t('Select database'), @@ -1192,17 +1215,9 @@ const AlertReportModal: FunctionComponent = ({ required validateCheckStatus={false} /> - //
- //

{t('General Information')}

- //

- // {t( - // 'Set up basic alert details, such as name and description.', - // )} - //

- //
} key="1" - style={{ borderBottom: 'none' }} + style={panelBorder} >
@@ -1258,7 +1273,11 @@ const AlertReportModal: FunctionComponent = ({ type="text" name="description" value={currentAlert ? currentAlert.description || '' : ''} - placeholder={TRANSLATIONS.DESCRIPTION_PLACEHOLDER} + placeholder={ + isReport + ? TRANSLATIONS.REPORT_DESCRIPTION_PLACEHOLDER + : TRANSLATIONS.ALERT_DESCRIPTION_PLACEHOLDER + } onChange={onInputChange} />
@@ -1268,7 +1287,11 @@ const AlertReportModal: FunctionComponent = ({ onChange={onActiveSwitch} checked={currentAlert ? currentAlert.active : true} /> -
{TRANSLATIONS.ACTIVE_TEXT}
+
+ {isReport + ? TRANSLATIONS.ACTIVE_REPORT_TEXT + : TRANSLATIONS.ACTIVE_ALERT_TEXT} +
@@ -1281,14 +1304,6 @@ const AlertReportModal: FunctionComponent = ({ required={false} validateCheckStatus /> - //
- //

{TRANSLATIONS.ALERT_CONDITION_TEXT}

- //

- // {t( - // 'Define the database, SQL query, and triggering conditions for alerts.', - // )} - //

- //
} key="2" style={{ borderBottom: 'none' }} @@ -1336,7 +1351,7 @@ const AlertReportModal: FunctionComponent = ({ />
- +
{TRANSLATIONS.TRIGGER_ALERT_IF_TEXT} * @@ -1354,7 +1369,7 @@ const AlertReportModal: FunctionComponent = ({ />
- +
{TRANSLATIONS.VALUE_TEXT}{' '} = ({ style={{ borderBottom: 'none' }} >
- -

- {isReport - ? TRANSLATIONS.REPORT_SCHEDULE_TEXT - : TRANSLATIONS.ALERT_CONDITION_SCHEDULE_TEXT} -

- * -
= ({
{!isReport && ( - +
{TRANSLATIONS.GRACE_PERIOD_TEXT}
@@ -1497,10 +1504,6 @@ const AlertReportModal: FunctionComponent = ({ style={{ borderBottom: 'none' }} >
- -

{TRANSLATIONS.MESSAGE_CONTENT_TEXT}

- * -
{TRANSLATIONS.DASHBOARD_TEXT} @@ -1610,10 +1613,6 @@ const AlertReportModal: FunctionComponent = ({ style={{ borderBottom: 'none' }} >
- -

{TRANSLATIONS.NOTIFICATION_METHOD_TEXT}

- * -
{notificationSettings.map((notificationSetting, i) => ( css` justify-content: center; align-items: flex-start; padding: 0px ${theme.gridUnit * 4}px; + background-color: ${theme.colors.grayscale.light4}; + border-bottom: 1px solid ${theme.colors.grayscale.light2}; .anticon.anticon-right.ant-collapse-arrow { padding: 0; @@ -42,6 +44,10 @@ const antdPanelStyles = (theme: SupersetTheme) => css` color: ${theme.colors.success.base}; } } + + .ant-collapse-content-box { + padding-top: ${theme.gridUnit * 2}px; + } `; export interface PanelProps extends CollapsePanelProps {