feat(alert/report): update content format radio buttons (#14235)

* update content format selection ui * translations * update test
apache · Apr 26, 2021 · 8767798 · 8767798
1 parent d7fc203
commit 8767798
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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