feat(report): add/edit modal improvements (#12183)

* alert/report modal improvements

* update spec for alert report modal

superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx

@@ -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', () => {

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -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>

superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.tsx

@@ -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>
     </>
   );