Fix: Ensure Notification types loaded before loading notification channel (#28115)

public/app/features/alerting/EditNotificationChannelPage.tsx

@@ -6,12 +6,7 @@ import { Form, Spinner } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import Page from 'app/core/components/Page/Page';
 import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp';
 import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp';
 import { NotificationChannelForm } from './components/NotificationChannelForm';
 import { NotificationChannelForm } from './components/NotificationChannelForm';
-import {
-  loadNotificationChannel,
-  loadNotificationTypes,
-  testNotificationChannel,
-  updateNotificationChannel,
-} from './state/actions';
+import { loadNotificationChannel, testNotificationChannel, updateNotificationChannel } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 import { getRouteParamsId } from 'app/core/selectors/location';
 import { mapChannelsToSelectableValue, transformSubmitData, transformTestData } from './utils/notificationChannels';
 import { mapChannelsToSelectableValue, transformSubmitData, transformTestData } from './utils/notificationChannels';
@@ -28,7 +23,6 @@ interface ConnectedProps {
 }
 }
 
 
 interface DispatchProps {
 interface DispatchProps {
-  loadNotificationTypes: typeof loadNotificationTypes;
   loadNotificationChannel: typeof loadNotificationChannel;
   loadNotificationChannel: typeof loadNotificationChannel;
   testNotificationChannel: typeof testNotificationChannel;
   testNotificationChannel: typeof testNotificationChannel;
   updateNotificationChannel: typeof updateNotificationChannel;
   updateNotificationChannel: typeof updateNotificationChannel;
@@ -41,7 +35,6 @@ export class EditNotificationChannelPage extends PureComponent<Props> {
   componentDidMount() {
   componentDidMount() {
     const { channelId } = this.props;
     const { channelId } = this.props;
 
 
-    this.props.loadNotificationTypes();
     this.props.loadNotificationChannel(channelId);
     this.props.loadNotificationChannel(channelId);
   }
   }
 
 
@@ -136,7 +129,6 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = s
 };
 };
 
 
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  loadNotificationTypes,
   loadNotificationChannel,
   loadNotificationChannel,
   testNotificationChannel,
   testNotificationChannel,
   updateNotificationChannel,
   updateNotificationChannel,

public/app/features/alerting/state/actions.ts

@@ -69,6 +69,7 @@ export function loadNotificationTypes(): ThunkResult<void> {
 
 
 export function loadNotificationChannel(id: number): ThunkResult<void> {
 export function loadNotificationChannel(id: number): ThunkResult<void> {
   return async dispatch => {
   return async dispatch => {
+    await dispatch(loadNotificationTypes());
     const notificationChannel = await getBackendSrv().get(`/api/alert-notifications/${id}`);
     const notificationChannel = await getBackendSrv().get(`/api/alert-notifications/${id}`);
     dispatch(notificationChannelLoaded(notificationChannel));
     dispatch(notificationChannelLoaded(notificationChannel));
   };
   };