add timezone selector to alerts and reports (#15920)

superset-frontend/src/components/CronPicker/CronPicker.tsx

@@ -31,7 +31,7 @@ export const LOCALE: Locale = {
   emptyWeekDays: t('every day of the week'),
   emptyWeekDaysShort: t('day of the week'),
   emptyHours: t('every hour'),
-  emptyMinutes: t('every minute UTC'),
+  emptyMinutes: t('every minute'),
   emptyMinutesForHourPeriod: t('every'),
   yearOption: t('year'),
   monthOption: t('month'),
@@ -48,7 +48,7 @@ export const LOCALE: Locale = {
   prefixHours: t('at'),
   prefixMinutes: t(':'),
   prefixMinutesForHourPeriod: t('at'),
-  suffixMinutesForHourPeriod: t('minute(s) UTC'),
+  suffixMinutesForHourPeriod: t('minute(s)'),
   errorInvalidCron: t('Invalid cron expression'),
   clearButtonText: t('Clear'),
   weekDays: [

superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx

@@ -226,12 +226,12 @@ describe('AlertReportModal', () => {
     expect(input.props().value).toEqual('SELECT NaN');
   });
 
-  it('renders one select element when in report mode', () => {
+  it('renders two select element when in report mode', () => {
     expect(wrapper.find(Select)).toExist();
-    expect(wrapper.find(Select)).toHaveLength(1);
+    expect(wrapper.find(Select)).toHaveLength(2);
   });
 
-  it('renders two select elements when in alert mode', async () => {
+  it('renders three select elements when in alert mode', async () => {
     const props = {
       ...mockedProps,
       isReport: false,
@@ -240,7 +240,7 @@ describe('AlertReportModal', () => {
     const addWrapper = await mountAndWait(props);
 
     expect(addWrapper.find(Select)).toExist();
-    expect(addWrapper.find(Select)).toHaveLength(2);
+    expect(addWrapper.find(Select)).toHaveLength(3);
   });
 
   it('renders value input element when in alert mode', async () => {

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

@@ -30,6 +30,7 @@ import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import Icons from 'src/components/Icons';
 import { Switch } from 'src/components/Switch';
 import Modal from 'src/components/Modal';
+import TimezoneSelector from 'src/components/TimezoneSelector';
 import { Radio } from 'src/components/Radio';
 import { AsyncSelect, NativeGraySelect as Select } from 'src/components/Select';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
@@ -314,6 +315,7 @@ export const StyledInputContainer = styled.div`
     border-style: none;
     border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
     border-radius: ${({ theme }) => theme.gridUnit}px;
+    width: 425px;
 
     .ant-select-selection-placeholder,
     .ant-select-selection-item {
@@ -358,6 +360,10 @@ const StyledNotificationAddButton = styled.div`
   }
 `;
 
+const timezoneHeaderStyle = (theme: SupersetTheme) => css`
+  margin: ${theme.gridUnit * 3}px 0;
+`;
+
 type NotificationAddStatus = 'active' | 'disabled' | 'hidden';
 
 interface NotificationMethodAddProps {
@@ -821,6 +827,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     updateAlertState('log_retention', retention);
   };
 
+  const onTimezoneChange = (timezone: string) => {
+    updateAlertState('timezone', timezone);
+  };
+
   const onContentTypeChange = (event: any) => {
     const { target } = event;
 
@@ -883,10 +893,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   useEffect(() => {
     if (
       isEditMode &&
-      (!currentAlert ||
-        !currentAlert.id ||
-        (alert && alert.id !== currentAlert.id) ||
-        (isHidden && show))
+      (!currentAlert?.id || alert?.id !== currentAlert.id || (isHidden && show))
     ) {
       if (alert && alert.id !== null && !loading && !fetchError) {
         const id = alert.id || 0;
@@ -1104,7 +1111,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                   <AsyncSelect
                     name="source"
                     value={
-                      currentAlert && currentAlert.database
+                      currentAlert?.database
                         ? {
                             value: currentAlert.database.value,
                             label: currentAlert.database.label,
@@ -1195,11 +1202,19 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               <span className="required">*</span>
             </StyledSectionTitle>
             <AlertReportCronScheduler
-              value={
-                (currentAlert && currentAlert.crontab) || DEFAULT_CRON_VALUE
-              }
+              value={currentAlert?.crontab || DEFAULT_CRON_VALUE}
               onChange={newVal => updateAlertState('crontab', newVal)}
             />
+            <div className="control-label">{t('Timezone')}</div>
+            <div
+              className="input-container"
+              css={(theme: SupersetTheme) => timezoneHeaderStyle(theme)}
+            >
+              <TimezoneSelector
+                onTimezoneChange={onTimezoneChange}
+                timezone={currentAlert?.timezone}
+              />
+            </div>
             <StyledSectionTitle>
               <h4>{t('Schedule settings')}</h4>
             </StyledSectionTitle>

superset-frontend/src/views/CRUD/alert/types.ts

@@ -74,6 +74,7 @@ export type AlertObject = {
   name?: string;
   owners?: Array<Owner | MetaObject>;
   sql?: string;
+  timezone?: string;
   recipients?: Array<Recipient>;
   report_format?: 'PNG' | 'CSV' | 'TEXT';
   type?: string;