Alert isValid check only looks at configured channels (#48485)

* converting UpdateAlertModalContent and CreateAlertModalContent to functional

* lint stuff

* e2e adjustments:

* type and e2e adjustments

e2e/test/scenarios/question/saved.cy.spec.js

@@ -31,6 +31,7 @@ import {
   sidesheet,
   summarize,
   tableHeaderClick,
+  toggleAlertChannel,
   visitQuestion,
 } from "e2e/support/helpers";
 
@@ -497,10 +498,8 @@ describe(
       popover().findByText("Create alert").click();
       modal().button("Set up an alert").click();
       modal().within(() => {
-        getAlertChannel(secondWebhookName).scrollIntoView();
-        getAlertChannel(secondWebhookName)
-          .findByRole("checkbox")
-          .click({ force: true });
+        toggleAlertChannel("Email");
+        toggleAlertChannel(secondWebhookName);
         cy.button("Done").click();
       });
       cy.findByTestId("sharing-menu-button").click();

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

@@ -17,7 +17,18 @@ import {
   visitQuestion,
 } from "e2e/support/helpers";
 
-const channels = { slack: mockSlackConfigured, email: setupSMTP };
+const channels = {
+  slack: {
+    setup: mockSlackConfigured,
+    createAlert: () => {
+      toggleAlertChannel("Email");
+      toggleAlertChannel("Slack");
+      cy.findByPlaceholderText(/Pick a user or channel/).click();
+      popover().findByText("#work").click();
+    },
+  },
+  email: { setup: setupSMTP, createAlert: () => {} },
+};
 
 describe("scenarios > alert", () => {
   beforeEach(() => {
@@ -66,9 +77,9 @@ describe("scenarios > alert", () => {
     });
   });
 
-  Object.entries(channels).forEach(([channel, setup]) => {
+  Object.entries(channels).forEach(([channel, config]) => {
     describe(`with ${channel} set up`, { tags: "@external" }, () => {
-      beforeEach(setup);
+      beforeEach(config.setup);
 
       it("educational screen should show for the first alert, but not for the second", () => {
         cy.intercept("POST", "/api/alert").as("savedAlert");
@@ -94,6 +105,8 @@ describe("scenarios > alert", () => {
 
         // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
         cy.findByText("Set up an alert").click();
+
+        config.createAlert();
         // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
         cy.findByText("Done").click();
 

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

@@ -58,6 +58,7 @@ describe("scenarios > alert > email_alert", { tags: "@external" }, () => {
 
   it("should respect email alerts toggled off (metabase#12349)", () => {
     updateSetting("report-timezone", "America/New_York");
+    mockSlackConfigured();
 
     //For this test, we need to pretend that slack is set up
     mockSlackConfigured();

e2e/test/scenarios/sharing/sharing-reproductions.cy.spec.js

@@ -17,6 +17,7 @@ import {
   getDashboardCard,
   getFullName,
   getIframeBody,
+  mockSlackConfigured,
   modal,
   openAndAddEmailsToSubscriptions,
   openNewPublicLinkDropdown,
@@ -960,6 +961,7 @@ describe("issue 17547", () => {
   beforeEach(() => {
     restore();
     cy.signInAsAdmin();
+    mockSlackConfigured();
 
     cy.createQuestion(questionDetails).then(({ body: { id: questionId } }) => {
       setUpAlert(questionId);

frontend/src/metabase-lib/v1/Alert/Alert.ts

@@ -5,11 +5,11 @@ import type { User } from "metabase-types/api/user";
 import { ALERT_TYPE_ROWS } from "./constants";
 
 export const getDefaultAlert = (
-  question: Question,
-  user: User,
+  question: Question | undefined,
+  user: User | null,
   visualizationSettings: VisualizationSettings,
 ) => {
-  const alertType = question.alertType(visualizationSettings);
+  const alertType = question?.alertType(visualizationSettings);
   const typeDependentAlertFields =
     alertType === ALERT_TYPE_ROWS
       ? {
@@ -24,7 +24,7 @@ export const getDefaultAlert = (
 
   return {
     card: {
-      id: question.id(),
+      id: question?.id(),
       include_csv: false,
       include_xls: false,
     },

frontend/src/metabase/components/ModalContent/ModalContent.tsx

@@ -11,7 +11,7 @@ import type { CommonModalProps } from "./types";
 export interface ModalContentProps extends CommonModalProps {
   "data-testid"?: string;
   id?: string;
-  title: string;
+  title?: string;
   footer?: ReactNode;
   children: ReactNode;
 

frontend/src/metabase/lib/alert.js

@@ -22,7 +22,15 @@ export function channelIsEnabled(channel) {
   return channel.enabled;
 }
 
-export function alertIsValid(alert) {
+export function alertIsValid(alert, channelSpec) {
   const enabledChannels = alert.channels.filter(channelIsEnabled);
-  return enabledChannels.length > 0 && enabledChannels.every(channelIsValid);
+
+  return (
+    channelSpec.channels &&
+    enabledChannels.length > 0 &&
+    enabledChannels.every(channel => channelIsValid(channel)) &&
+    enabledChannels
+      .filter(c => c.enabled)
+      .every(c => channelSpec.channels[c.channel_type]?.configured)
+  );
 }

frontend/src/metabase/lib/pulse.ts

@@ -8,6 +8,7 @@ import {
 } from "metabase-lib/v1/parameters/utils/parameter-values";
 import type {
   Channel,
+  ChannelApiResponse,
   ChannelSpec,
   Pulse,
   PulseParameter,
@@ -214,3 +215,20 @@ export function getActivePulseParameters(
     (parameter: any) => parameter.value != null,
   );
 }
+
+export const getHasConfiguredAnyChannel = (
+  formInput: Partial<ChannelApiResponse>,
+) =>
+  (formInput.channels &&
+    _.some(Object.values(formInput.channels), c => c.configured)) ||
+  false;
+
+export const getHasConfiguredEmailChannel = (
+  formInput: Partial<ChannelApiResponse>,
+) =>
+  (formInput.channels &&
+    _.some(
+      Object.values(formInput.channels),
+      c => c.type === "email" && c.configured,
+    )) ||
+  false;

frontend/src/metabase/pulse/selectors.js

-import { createSelector } from "@reduxjs/toolkit";
 import _ from "underscore";
 
 export const getEditingPulse = state => state.pulse.editingPulse;
 
 export const getPulseFormInput = state => state.pulse?.formInput;
 
-export const hasLoadedChannelInfoSelector = createSelector(
-  [getPulseFormInput],
-  formInput => !!formInput.channels,
-);
-export const hasConfiguredAnyChannelSelector = createSelector(
-  [getPulseFormInput],
-  formInput =>
-    (formInput.channels &&
-      _.some(Object.values(formInput.channels), c => c.configured)) ||
-    false,
-);
-export const hasConfiguredEmailChannelSelector = createSelector(
-  [getPulseFormInput],
-  formInput =>
-    (formInput.channels &&
-      _.some(
-        Object.values(formInput.channels),
-        c => c.type === "email" && c.configured,
-      )) ||
-    false,
-);
-
 export const getPulseCardPreviews = state => state.pulse.cardPreviews;
 
 export const getPulseId = (state, props) =>

frontend/src/metabase/query_builder/components/AlertListPopoverContent/AlertPopover.tsx

@@ -85,11 +85,13 @@ export const AlertPopover = forwardRef(function _AlertPopover(
         isOpen={showingElement === "update-modal"}
         onClose={onClose}
       >
-        <UpdateAlertModalContent
-          alert={editingAlert}
-          onCancel={onClose}
-          onAlertUpdated={onClose}
-        />
+        {editingAlert && (
+          <UpdateAlertModalContent
+            alert={editingAlert}
+            onCancel={onClose}
+            onAlertUpdated={onClose}
+          />
+        )}
       </Modal>
     </>
   );

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

-/* eslint-disable react/prop-types */
-import cx from "classnames";
-import { Component } from "react";
-import { connect } from "react-redux";
-import { t } from "ttag";
-
-import { createAlert } from "metabase/alert/alert";
-import ButtonWithStatus from "metabase/components/ButtonWithStatus";
-import ChannelSetupModal from "metabase/components/ChannelSetupModal";
-import ModalContent from "metabase/components/ModalContent";
-import Button from "metabase/core/components/Button";
-import CS from "metabase/css/core/index.css";
-import { alertIsValid } from "metabase/lib/alert";
-import MetabaseCookies from "metabase/lib/cookies";
-import { fetchPulseFormInput } from "metabase/pulse/actions";
-import {
-  hasConfiguredAnyChannelSelector,
-  hasConfiguredEmailChannelSelector,
-  hasLoadedChannelInfoSelector,
-} from "metabase/pulse/selectors";
-import { apiUpdateQuestion, updateUrl } from "metabase/query_builder/actions";
-import {
-  getQuestion,
-  getVisualizationSettings,
-} from "metabase/query_builder/selectors";
-import { getUser, getUserIsAdmin } from "metabase/selectors/user";
-import { getDefaultAlert } from "metabase-lib/v1/Alert";
-
-import { AlertEditForm } from "./AlertEditForm";
-import { AlertEducationalScreen } from "./AlertEducationalScreen";
-import { AlertModalTitle } from "./AlertModalTitle";
-import { AlertModalFooter } from "./AlertModals.styled";
-
-class CreateAlertModalContentInner extends Component {
-  constructor(props) {
-    super();
-
-    const { question, user, visualizationSettings } = props;
-
-    this.state = {
-      hasSeenEducationalScreen: MetabaseCookies.getHasSeenAlertSplash(),
-      alert: getDefaultAlert(question, user, visualizationSettings),
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    // NOTE Atte Keinänen 11/6/17: Don't fill in the card information yet
-    // Because `onCreate` and `onSave` of QueryHeader mix Redux action dispatches and `setState` calls,
-    // we don't have up-to-date card information in the constructor yet
-    // TODO: Refactor QueryHeader so that `onCreate` and `onSave` only call Redux actions and don't modify the local state
-    if (this.props.question !== newProps.question) {
-      this.setState({
-        alert: {
-          ...this.state.alert,
-          card: { ...this.state.alert.card, id: newProps.question.id() },
-        },
-      });
-    }
-  }
-
-  UNSAFE_componentWillMount() {
-    // loads the channel information
-    this.props.fetchPulseFormInput();
-  }
-
-  onAlertChange = alert => this.setState({ alert });
-
-  onCreateAlert = async () => {
-    const { question, createAlert, updateUrl, onAlertCreated } = this.props;
-    const { alert } = this.state;
-
-    await createAlert(alert);
-    await updateUrl(question, { dirty: false });
-
-    onAlertCreated();
-  };
-
-  proceedFromEducationalScreen = () => {
-    MetabaseCookies.setHasSeenAlertSplash(true);
-    this.setState({ hasSeenEducationalScreen: true });
-  };
-
-  render() {
-    const {
-      question,
-      visualizationSettings,
-      onCancel,
-      hasConfiguredAnyChannel,
-      hasConfiguredEmailChannel,
-      isAdmin,
-      user,
-      hasLoadedChannelInfo,
-    } = this.props;
-    const { alert, hasSeenEducationalScreen } = this.state;
-
-    const channelRequirementsMet = isAdmin
-      ? hasConfiguredAnyChannel
-      : hasConfiguredEmailChannel;
-    const isValid = alertIsValid(alert);
-
-    if (hasLoadedChannelInfo && !channelRequirementsMet) {
-      return (
-        <ChannelSetupModal
-          user={user}
-          onClose={onCancel}
-          entityNamePlural={t`alerts`}
-          channels={isAdmin ? ["email", "Slack", "Webhook"] : ["email"]}
-        />
-      );
-    }
-    if (!hasSeenEducationalScreen) {
-      return (
-        <ModalContent onClose={onCancel} data-testid="alert-education-screen">
-          <AlertEducationalScreen
-            onProceed={this.proceedFromEducationalScreen}
-          />
-        </ModalContent>
-      );
-    }
-
-    // TODO: Remove PulseEdit css hack
-    return (
-      <ModalContent data-testid="alert-create" onClose={onCancel}>
-        <div
-          className={cx(CS.mlAuto, CS.mrAuto, CS.mb4)}
-          style={{ maxWidth: "550px" }}
-        >
-          <AlertModalTitle text={t`Let's set up your alert`} />
-          <AlertEditForm
-            alertType={question.alertType(visualizationSettings)}
-            alert={alert}
-            onAlertChange={this.onAlertChange}
-          />
-          <AlertModalFooter>
-            <Button onClick={onCancel} className={CS.mr2}>{t`Cancel`}</Button>
-            <ButtonWithStatus
-              titleForState={{ default: t`Done` }}
-              disabled={!isValid}
-              onClickOperation={this.onCreateAlert}
-            />
-          </AlertModalFooter>
-        </div>
-      </ModalContent>
-    );
-  }
-}
-
-export const CreateAlertModalContent = connect(
-  state => ({
-    question: getQuestion(state),
-    visualizationSettings: getVisualizationSettings(state),
-    isAdmin: getUserIsAdmin(state),
-    user: getUser(state),
-    hasLoadedChannelInfo: hasLoadedChannelInfoSelector(state),
-    hasConfiguredAnyChannel: hasConfiguredAnyChannelSelector(state),
-    hasConfiguredEmailChannel: hasConfiguredEmailChannelSelector(state),
-  }),
-  { createAlert, fetchPulseFormInput, apiUpdateQuestion, updateUrl },
-)(CreateAlertModalContentInner);

frontend/src/metabase/query_builder/components/AlertModals/CreateAlertModalContent.tsx

+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { t } from "ttag";
+
+import { createAlert } from "metabase/alert/alert";
+import { useGetChannelInfoQuery } from "metabase/api";
+import ButtonWithStatus from "metabase/components/ButtonWithStatus";
+import ChannelSetupModal from "metabase/components/ChannelSetupModal";
+import ModalContent from "metabase/components/ModalContent";
+import Button from "metabase/core/components/Button";
+import CS from "metabase/css/core/index.css";
+import { alertIsValid } from "metabase/lib/alert";
+import MetabaseCookies from "metabase/lib/cookies";
+import {
+  getHasConfiguredAnyChannel,
+  getHasConfiguredEmailChannel,
+} from "metabase/lib/pulse";
+import { useDispatch, useSelector } from "metabase/lib/redux";
+import { updateUrl } from "metabase/query_builder/actions";
+import {
+  getQuestion,
+  getVisualizationSettings,
+} from "metabase/query_builder/selectors";
+import { getUser, getUserIsAdmin } from "metabase/selectors/user";
+import { getDefaultAlert } from "metabase-lib/v1/Alert";
+import type { Alert } from "metabase-types/api";
+
+import { AlertEditForm } from "./AlertEditForm";
+import { AlertEducationalScreen } from "./AlertEducationalScreen";
+import { AlertModalTitle } from "./AlertModalTitle";
+import { AlertModalFooter } from "./AlertModals.styled";
+
+interface CreateAlertModalContentProps {
+  onAlertCreated: () => void;
+  onCancel: () => void;
+}
+
+export const CreateAlertModalContent = ({
+  onAlertCreated,
+  onCancel,
+}: CreateAlertModalContentProps) => {
+  const dispatch = useDispatch();
+  const question = useSelector(getQuestion);
+  const visualizationSettings = useSelector(getVisualizationSettings);
+  const isAdmin = useSelector(getUserIsAdmin);
+  const user = useSelector(getUser);
+
+  const { data: channelSpec = {}, isLoading: isLoadingChannelInfo } =
+    useGetChannelInfoQuery();
+
+  const hasConfiguredAnyChannel = getHasConfiguredAnyChannel(channelSpec);
+  const hasConfiguredEmailChannel = getHasConfiguredEmailChannel(channelSpec);
+
+  const [alert, setAlert] = useState<any>(
+    getDefaultAlert(question, user, visualizationSettings),
+  );
+
+  const [hasSeenEducationalScreen, setHasSeenEducationalScreen] = useState(
+    MetabaseCookies.getHasSeenAlertSplash(),
+  );
+
+  useEffect(() => {
+    // NOTE Atte Keinänen 11/6/17: Don't fill in the card information yet
+    // Because `onCreate` and `onSave` of QueryHeader mix Redux action dispatches and `setState` calls,
+    // we don't have up-to-date card information in the constructor yet
+    // TODO: Refactor QueryHeader so that `onCreate` and `onSave` only call Redux actions and don't modify the local state
+    setAlert((currentAlert: any) => ({
+      ...currentAlert,
+      card: { ...currentAlert.card, id: question?.id() },
+    }));
+  }, [question]);
+
+  const onAlertChange = (newAlert: Alert) => setAlert(newAlert);
+
+  const onCreateAlert = async () => {
+    await dispatch(createAlert(alert));
+    await dispatch(updateUrl(question, { dirty: false }));
+
+    onAlertCreated();
+  };
+
+  const proceedFromEducationalScreen = () => {
+    MetabaseCookies.setHasSeenAlertSplash(true);
+    setHasSeenEducationalScreen(true);
+  };
+
+  const channelRequirementsMet = isAdmin
+    ? hasConfiguredAnyChannel
+    : hasConfiguredEmailChannel;
+
+  const isValid = alertIsValid(alert, channelSpec);
+
+  if (!isLoadingChannelInfo && !channelRequirementsMet) {
+    return (
+      <ChannelSetupModal
+        user={user}
+        onClose={onCancel}
+        entityNamePlural={t`alerts`}
+        channels={isAdmin ? ["email", "Slack", "Webhook"] : ["email"]}
+      />
+    );
+  }
+  if (!hasSeenEducationalScreen) {
+    return (
+      <ModalContent onClose={onCancel} data-testid="alert-education-screen">
+        <AlertEducationalScreen onProceed={proceedFromEducationalScreen} />
+      </ModalContent>
+    );
+  }
+
+  // TODO: Remove PulseEdit css hack
+  return (
+    <ModalContent data-testid="alert-create" onClose={onCancel}>
+      <div
+        className={cx(CS.mlAuto, CS.mrAuto, CS.mb4)}
+        style={{ maxWidth: "550px" }}
+      >
+        <AlertModalTitle text={t`Let's set up your alert`} />
+        <AlertEditForm
+          alertType={question?.alertType(visualizationSettings)}
+          alert={alert}
+          onAlertChange={onAlertChange}
+        />
+        <AlertModalFooter>
+          <Button onClick={onCancel} className={CS.mr2}>{t`Cancel`}</Button>
+          <ButtonWithStatus
+            titleForState={{ default: t`Done` }}
+            disabled={!isValid}
+            onClickOperation={onCreateAlert}
+          />
+        </AlertModalFooter>
+      </div>
+    </ModalContent>
+  );
+};

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

-/* eslint-disable react/prop-types */
-import cx from "classnames";
-import { Component } from "react";
-import { connect } from "react-redux";
-import { t } from "ttag";
-
-import { deleteAlert, updateAlert } from "metabase/alert/alert";
-import ButtonWithStatus from "metabase/components/ButtonWithStatus";
-import ModalContent from "metabase/components/ModalContent";
-import Button from "metabase/core/components/Button";
-import CS from "metabase/css/core/index.css";
-import { alertIsValid } from "metabase/lib/alert";
-import { updateUrl } from "metabase/query_builder/actions";
-import {
-  getQuestion,
-  getVisualizationSettings,
-} from "metabase/query_builder/selectors";
-import { getUser, getUserIsAdmin } from "metabase/selectors/user";
-
-import { AlertEditForm } from "./AlertEditForm";
-import { AlertModalTitle } from "./AlertModalTitle";
-import { AlertModalFooter } from "./AlertModals.styled";
-import { DeleteAlertSection } from "./DeleteAlertSection";
-
-class UpdateAlertModalContentInner extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      modifiedAlert: props.alert,
-    };
-  }
-
-  onAlertChange = modifiedAlert => this.setState({ modifiedAlert });
-
-  onUpdateAlert = async () => {
-    const { question, updateAlert, updateUrl, onAlertUpdated } = this.props;
-    const { modifiedAlert } = this.state;
-
-    await updateAlert(modifiedAlert);
-    await updateUrl(question, { dirty: false });
-    onAlertUpdated();
-  };
-
-  onDeleteAlert = async () => {
-    const { alert, deleteAlert, onAlertUpdated } = this.props;
-    await deleteAlert(alert.id);
-    onAlertUpdated();
-  };
-
-  render() {
-    const { onCancel, question, visualizationSettings, alert, user, isAdmin } =
-      this.props;
-    const { modifiedAlert } = this.state;
-
-    const isCurrentUser = alert.creator.id === user.id;
-    const title = isCurrentUser ? t`Edit your alert` : t`Edit alert`;
-    const isValid = alertIsValid(alert);
-
-    // TODO: Remove PulseEdit css hack
-    return (
-      <ModalContent onClose={onCancel} data-testid="alert-edit">
-        <div
-          className={cx(CS.mlAuto, CS.mrAuto, CS.mb4)}
-          style={{ maxWidth: "550px" }}
-        >
-          <AlertModalTitle text={title} />
-          <AlertEditForm
-            alertType={question.alertType(visualizationSettings)}
-            alert={modifiedAlert}
-            onAlertChange={this.onAlertChange}
-          />
-          {isAdmin && (
-            <DeleteAlertSection
-              alert={alert}
-              onDeleteAlert={this.onDeleteAlert}
-            />
-          )}
-
-          <AlertModalFooter>
-            <Button onClick={onCancel} className={CS.mr2}>{t`Cancel`}</Button>
-            <ButtonWithStatus
-              titleForState={{ default: t`Save changes` }}
-              disabled={!isValid}
-              onClickOperation={this.onUpdateAlert}
-            />
-          </AlertModalFooter>
-        </div>
-      </ModalContent>
-    );
-  }
-}
-
-export const UpdateAlertModalContent = connect(
-  state => ({
-    user: getUser(state),
-    isAdmin: getUserIsAdmin(state),
-    question: getQuestion(state),
-    visualizationSettings: getVisualizationSettings(state),
-  }),
-  { updateAlert, deleteAlert, updateUrl },
-)(UpdateAlertModalContentInner);

frontend/src/metabase/query_builder/components/AlertModals/UpdateAlertModalContent.tsx

+import cx from "classnames";
+import { useState } from "react";
+import { t } from "ttag";
+
+import { deleteAlert, updateAlert } from "metabase/alert/alert";
+import { useGetChannelInfoQuery } from "metabase/api";
+import ButtonWithStatus from "metabase/components/ButtonWithStatus";
+import ModalContent from "metabase/components/ModalContent";
+import Button from "metabase/core/components/Button";
+import CS from "metabase/css/core/index.css";
+import { alertIsValid } from "metabase/lib/alert";
+import { useDispatch, useSelector } from "metabase/lib/redux";
+import { updateUrl } from "metabase/query_builder/actions";
+import {
+  getQuestion,
+  getVisualizationSettings,
+} from "metabase/query_builder/selectors";
+import { getUser, getUserIsAdmin } from "metabase/selectors/user";
+import type { Alert } from "metabase-types/api";
+
+import { AlertEditForm } from "./AlertEditForm";
+import { AlertModalTitle } from "./AlertModalTitle";
+import { AlertModalFooter } from "./AlertModals.styled";
+import { DeleteAlertSection } from "./DeleteAlertSection";
+
+interface UpdateAlertModalContentProps {
+  alert: Alert;
+  onAlertUpdated: () => void;
+  onCancel: () => void;
+}
+
+export const UpdateAlertModalContent = ({
+  alert,
+  onAlertUpdated,
+  onCancel,
+}: UpdateAlertModalContentProps) => {
+  const dispatch = useDispatch();
+
+  const user = useSelector(getUser);
+  const isAdmin = useSelector(getUserIsAdmin);
+  const question = useSelector(getQuestion);
+  const visualizationSettings = useSelector(getVisualizationSettings);
+
+  const [modifiedAlert, setModifiedAlert] = useState(alert);
+  const onAlertChange = (newModifiedAlert: Alert) =>
+    setModifiedAlert(newModifiedAlert);
+
+  const { data: channelSpec = {} } = useGetChannelInfoQuery();
+
+  const onUpdateAlert = async () => {
+    await dispatch(updateAlert(modifiedAlert));
+    await dispatch(updateUrl(question, { dirty: false }));
+    onAlertUpdated();
+  };
+
+  const onDeleteAlert = async () => {
+    await dispatch(deleteAlert(alert?.id));
+    onAlertUpdated();
+  };
+
+  const isCurrentUser = alert?.creator.id === user?.id;
+  const title = isCurrentUser ? t`Edit your alert` : t`Edit alert`;
+  const isValid = alertIsValid(modifiedAlert, channelSpec);
+
+  // TODO: Remove PulseEdit css hack
+  return (
+    <ModalContent onClose={onCancel} data-testid="alert-edit">
+      <div
+        className={cx(CS.mlAuto, CS.mrAuto, CS.mb4)}
+        style={{ maxWidth: "550px" }}
+      >
+        <AlertModalTitle text={title} />
+        <AlertEditForm
+          alertType={question?.alertType(visualizationSettings)}
+          alert={modifiedAlert}
+          onAlertChange={onAlertChange}
+        />
+        {isAdmin && (
+          <DeleteAlertSection alert={alert} onDeleteAlert={onDeleteAlert} />
+        )}
+
+        <AlertModalFooter>
+          <Button onClick={onCancel} className={CS.mr2}>{t`Cancel`}</Button>
+          <ButtonWithStatus
+            titleForState={{ default: t`Save changes` }}
+            disabled={!isValid}
+            onClickOperation={onUpdateAlert}
+          />
+        </AlertModalFooter>
+      </div>
+    </ModalContent>
+  );
+};