Show alert sending time in alert form (#45062)

* Show alert sending time in alert form

* F

e2e/test/scenarios/sharing/alert/email-alert.cy.spec.js

@@ -40,15 +40,35 @@ describe("scenarios > alert > email_alert", { tags: "@external" }, () => {
   });
 
   it("should respect email alerts toggled off (metabase#12349)", () => {
+    cy.request("PUT", "/api/setting/report-timezone", {
+      value: "America/New_York",
+    });
+
     openAlertForQuestion(ORDERS_QUESTION_ID);
 
-    // Turn off email
-    toggleChannel("Email");
+    cy.findByTestId("alert-create").within(() => {
+      cy.findByText(/Emails will be sent at 12:00 AM ET/).should("exist");
 
-    // Turn on Slack
-    toggleChannel("Slack");
+      // Turn off email
+      toggleChannel("Email");
+      cy.findByText(/Emails will be sent/).should("not.exist");
+      cy.findByText(/Slack messages will be sent/).should("not.exist");
 
-    cy.button("Done").click();
+      // Turn on Slack
+      toggleChannel("Slack");
+
+      cy.findByText(/Slack messages will be sent at 12:00 AM ET/).should(
+        "exist",
+      );
+
+      toggleChannel("Email");
+      cy.findByText(
+        /Emails and Slack messages will be sent at 12:00 AM ET/,
+      ).should("exist");
+      toggleChannel("Email");
+
+      cy.button("Done").click();
+    });
 
     cy.wait("@savedAlert").then(({ response: { body } }) => {
       expect(body.channels).to.have.length(2);

frontend/src/metabase/query_builder/components/AlertModals/AlertModals.jsx

@@ -481,6 +481,7 @@ class AlertEditFormInner extends Component {
           onAlertChange={onAlertChange}
         />
         <AlertEditSchedule
+          alert={alert}
           alertType={alertType}
           schedule={schedule}
           onScheduleChange={this.onScheduleChange}
@@ -566,7 +567,29 @@ export const AlertSettingToggle = ({
   </div>
 );
 
-export function AlertEditSchedule({ alertType, schedule, onScheduleChange }) {
+function getSchedulePickerSendTimeText(alert) {
+  const channels = alert.channels.filter(channel => channel.enabled);
+  const [channel] = channels;
+  if (channels.length === 0) {
+    return;
+  }
+  if (channels.length === 2) {
+    return t`Emails and Slack messages will be sent at`;
+  }
+  if (channel.channel_type === "email") {
+    return t`Emails will be sent at`;
+  }
+  if (channel.channel_type === "slack") {
+    return t`Slack messages will be sent at`;
+  }
+}
+
+export function AlertEditSchedule({
+  alert,
+  alertType,
+  schedule,
+  onScheduleChange,
+}) {
   return (
     <div>
       <h3 className={cx(CS.mt4, CS.mb3, CS.textDark)}>
@@ -581,6 +604,7 @@ export function AlertEditSchedule({ alertType, schedule, onScheduleChange }) {
             scheduleOptions={["hourly", "daily", "weekly"]}
             onScheduleChange={onScheduleChange}
             textBeforeInterval={t`Check`}
+            textBeforeSendTime={getSchedulePickerSendTimeText(alert)}
           />
         </div>
       </div>