Skip to content

Commit

Permalink
Style headers, add margin const, tidy
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtexelm
rtexelm committed Nov 28, 2023
1 parent 8a5ebe4 commit 45a3436
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 40 deletions.
79 changes: 39 additions & 40 deletions superset-frontend/src/features/alerts/AlertReportModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
SupersetClient,
SupersetTheme,
t,
supersetTheme,
} from '@superset-ui/core';
import rison from 'rison';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -1192,17 +1215,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
required
validateCheckStatus={false}
/>
// <div>
// <h4>{t('General Information')}</h4>
// <p className="helper">
// {t(
// 'Set up basic alert details, such as name and description.',
// )}
// </p>
// </div>
}
key="1"
style={{ borderBottom: 'none' }}
style={panelBorder}
>
<div className="header-section">
<StyledInputContainer>
Expand Down Expand Up @@ -1258,7 +1273,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
type="text"
name="description"
value={currentAlert ? currentAlert.description || '' : ''}
placeholder={TRANSLATIONS.DESCRIPTION_PLACEHOLDER}
placeholder={
isReport
? TRANSLATIONS.REPORT_DESCRIPTION_PLACEHOLDER
: TRANSLATIONS.ALERT_DESCRIPTION_PLACEHOLDER
}
onChange={onInputChange}
/>
</div>
Expand All @@ -1268,7 +1287,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
onChange={onActiveSwitch}
checked={currentAlert ? currentAlert.active : true}
/>
<div className="switch-label">{TRANSLATIONS.ACTIVE_TEXT}</div>
<div className="switch-label">
{isReport
? TRANSLATIONS.ACTIVE_REPORT_TEXT
: TRANSLATIONS.ACTIVE_ALERT_TEXT}
</div>
</StyledSwitchContainer>
</div>
</StyledPanel>
Expand All @@ -1281,14 +1304,6 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
required={false}
validateCheckStatus
/>
// <div>
// <h4>{TRANSLATIONS.ALERT_CONDITION_TEXT}</h4>
// <p className="helper">
// {t(
// 'Define the database, SQL query, and triggering conditions for alerts.',
// )}
// </p>
// </div>
}
key="2"
style={{ borderBottom: 'none' }}
Expand Down Expand Up @@ -1336,7 +1351,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
/>
</StyledInputContainer>
<div className="inline-container wrap">
<StyledInputContainer>
<StyledInputContainer css={no_margin_bottom}>
<div className="control-label" css={inputSpacer}>
{TRANSLATIONS.TRIGGER_ALERT_IF_TEXT}
<span className="required">*</span>
Expand All @@ -1354,7 +1369,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
/>
</div>
</StyledInputContainer>
<StyledInputContainer>
<StyledInputContainer css={no_margin_bottom}>
<div className="control-label">
{TRANSLATIONS.VALUE_TEXT}{' '}
<InfoTooltipWithTrigger
Expand Down Expand Up @@ -1395,14 +1410,6 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
style={{ borderBottom: 'none' }}
>
<div className="column schedule">
<StyledSectionTitle>
<h4>
{isReport
? TRANSLATIONS.REPORT_SCHEDULE_TEXT
: TRANSLATIONS.ALERT_CONDITION_SCHEDULE_TEXT}
</h4>
<span className="required">*</span>
</StyledSectionTitle>
<AlertReportCronScheduler
value={
currentAlert?.crontab || ALERT_REPORTS_DEFAULT_CRON_VALUE
Expand Down Expand Up @@ -1463,7 +1470,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
</div>
</StyledInputContainer>
{!isReport && (
<StyledInputContainer>
<StyledInputContainer css={no_margin_bottom}>
<div className="control-label">
{TRANSLATIONS.GRACE_PERIOD_TEXT}
</div>
Expand Down Expand Up @@ -1497,10 +1504,6 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
style={{ borderBottom: 'none' }}
>
<div className="column message">
<StyledSectionTitle>
<h4>{TRANSLATIONS.MESSAGE_CONTENT_TEXT}</h4>
<span className="required">*</span>
</StyledSectionTitle>
<Radio.Group onChange={onContentTypeChange} value={contentType}>
<StyledRadio value="dashboard">
{TRANSLATIONS.DASHBOARD_TEXT}
Expand Down Expand Up @@ -1610,10 +1613,6 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
style={{ borderBottom: 'none' }}
>
<div>
<StyledSectionTitle>
<h4>{TRANSLATIONS.NOTIFICATION_METHOD_TEXT}</h4>
<span className="required">*</span>
</StyledSectionTitle>
{notificationSettings.map((notificationSetting, i) => (
<StyledNotificationMethodWrapper>
<NotificationMethod
Expand Down
6 changes: 6 additions & 0 deletions superset-frontend/src/features/alerts/components/StyledPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const antdPanelStyles = (theme: SupersetTheme) => 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;
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 45a3436

Please sign in to comment.