Migration: Edit notification channel (#25980)

* implement edit page

* connectWithCleanup

* remove angular related code

* use loadingindicator

* use the correct loading component

* handle secureFields

* fixed implementation of secure fields

* Keep secureFields after rerendering the form

* CollapsableSection and Page refactor

* use checkbox instead of switch

* fix comment

* add cursor to section

* Fixed issues after PR review

* Fix issue with some settings being undefined

* new reducer and start with test

* algorithm to migrate secure fields

* UX: Minor UI Tweaks

* Added field around checkboxes, and missing required field

* fixed test

* tests for util

* minor tweaks and changes

* define as records

* fix typ error

* forward invalid to textarea and inputcontrol

* merge formdata and redux data in test

* fix issue with creating channel

* do not figure out securefields in migration

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/types/alerting.ts

@@ -58,34 +58,40 @@ export type NotifierType =
 export interface NotifierDTO {
   name: string;
   description: string;
-  optionsTemplate: string;
   type: NotifierType;
   heading: string;
-  options: Option[];
+  options: NotificationChannelOption[];
   info?: string;
+  secure?: boolean;
 }
 
-export interface NotificationChannel {
+export interface NotificationChannelType {
   value: string;
   label: string;
   description: string;
   type: NotifierType;
   heading: string;
-  options: Option[];
+  options: NotificationChannelOption[];
   info?: string;
 }
 
 export interface NotificationChannelDTO {
-  [key: string]: string | boolean | SelectableValue<string>;
+  [key: string]: string | boolean | number | SelectableValue<string>;
+  id: number;
   name: string;
   type: SelectableValue<string>;
   sendReminder: boolean;
   disableResolveMessage: boolean;
   frequency: string;
   settings: ChannelTypeSettings;
+  secureSettings: NotificationChannelSecureSettings;
+  secureFields: NotificationChannelSecureFields;
   isDefault: boolean;
 }
 
+export type NotificationChannelSecureSettings = Record<string, string | number>;
+export type NotificationChannelSecureFields = Record<string, boolean>;
+
 export interface ChannelTypeSettings {
   [key: string]: any;
   autoResolve: true;
@@ -94,24 +100,30 @@ export interface ChannelTypeSettings {
   uploadImage: boolean;
 }
 
-export interface Option {
-  element: 'input' | 'select' | 'switch' | 'textarea';
+export interface NotificationChannelOption {
+  element: 'input' | 'select' | 'checkbox' | 'textarea';
   inputType: string;
   label: string;
   description: string;
   placeholder: string;
   propertyName: string;
-  selectOptions: Array<SelectableValue<string>>;
-  showWhen: { field: string; is: string };
   required: boolean;
+  secure: boolean;
+  selectOptions?: Array<SelectableValue<string>>;
+  showWhen: { field: string; is: string };
   validationRule: string;
 }
 
+export interface NotificationChannelState {
+  notificationChannelTypes: NotificationChannelType[];
+  notifiers: NotifierDTO[];
+  notificationChannel: any;
+}
+
 export interface AlertRulesState {
   items: AlertRule[];
   searchQuery: string;
   isLoading: boolean;
-  notificationChannels: NotificationChannel[];
 }
 
 export interface AlertNotification {

public/app/types/store.ts

@@ -3,7 +3,7 @@ import { PayloadAction } from '@reduxjs/toolkit';
 import { NavIndex } from '@grafana/data';
 
 import { LocationState } from './location';
-import { AlertRulesState } from './alerting';
+import { AlertRulesState, NotificationChannelState } from './alerting';
 import { TeamsState, TeamState } from './teams';
 import { FolderState } from './folders';
 import { DashboardState } from './dashboard';
@@ -44,6 +44,7 @@ export interface StoreState {
   userListAdmin: UserListAdminState;
   templating: TemplatingState;
   importDashboard: ImportDashboardState;
+  notificationChannel: NotificationChannelState;
 }
 
 /*