This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 8767798 feat(alert/report): update content format radio buttons
(#14235)
8767798 is described below
commit 876779865c39586ef1a91a5deacc61213c051cd7
Author: Lily Kuang <[email protected]>
AuthorDate: Mon Apr 26 11:33:55 2021 -0700
feat(alert/report): update content format radio buttons (#14235)
* update content format selection ui
* translations
* update test
---
.../src/views/CRUD/alert/AlertReportModal.test.jsx | 4 +--
.../src/views/CRUD/alert/AlertReportModal.tsx | 32 ++++++++++++++--------
2 files changed, 23 insertions(+), 13 deletions(-)
diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx
b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx
index 7ea2740..25cdd29 100644
--- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx
+++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx
@@ -255,9 +255,9 @@ describe('AlertReportModal', () => {
expect(addWrapper.find('input[name="threshold"]')).toExist();
});
- it('renders four radio buttons', () => {
+ it('renders two radio buttons', () => {
expect(wrapper.find(Radio)).toExist();
- expect(wrapper.find(Radio)).toHaveLength(4);
+ expect(wrapper.find(Radio)).toHaveLength(2);
});
it('renders input element for working timeout', () => {
diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
index 6097e62..a9bf6bf 100644
--- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
+++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx
@@ -314,6 +314,15 @@ export const StyledInputContainer = styled.div`
}
`;
+const StyledRadio = styled(Radio)`
+ display: block;
+ line-height: ${({ theme }) => theme.gridUnit * 7}px;
+`;
+
+const StyledRadioGroup = styled(Radio.Group)`
+ margin-left: ${({ theme }) => theme.gridUnit * 5.5}px;
+`;
+
// Notification Method components
const StyledNotificationAddButton = styled.div`
color: ${({ theme }) => theme.colors.primary.dark1};
@@ -1224,18 +1233,19 @@ const AlertReportModal:
FunctionComponent<AlertReportModalProps> = ({
<h4>{t('Message content')}</h4>
<span className="required">*</span>
</StyledSectionTitle>
- <div className="inline-container add-margin">
- <Radio.Group onChange={onContentTypeChange} value={contentType}>
- <Radio value="dashboard">Dashboard</Radio>
- <Radio value="chart">Chart</Radio>
- </Radio.Group>
- </div>
+ <Radio.Group onChange={onContentTypeChange} value={contentType}>
+ <StyledRadio value="dashboard">{t('Dashboard')}</StyledRadio>
+ <StyledRadio value="chart">{t('Chart')}</StyledRadio>
+ </Radio.Group>
{formatOptionEnabled && (
- <div className="inline-container add-margin">
- <Radio.Group onChange={onFormatChange} value={reportFormat}>
- <Radio value="PNG">PNG</Radio>
- <Radio value="CSV">CSV</Radio>
- </Radio.Group>
+ <div className="inline-container">
+ <StyledRadioGroup
+ onChange={onFormatChange}
+ value={reportFormat}
+ >
+ <StyledRadio value="PNG">{t('Send as PNG')}</StyledRadio>
+ <StyledRadio value="CSV">{t('Send as CSV')}</StyledRadio>
+ </StyledRadioGroup>
</div>
)}
<AsyncSelect
