Fix the bugs in visual UI for legacy notification

public/pages/VisualCreatePolicy/components/UIActions/NotificationUIAction.tsx

@@ -21,18 +21,12 @@ interface NotifUIState {}
 interface NotifUIProps {
   action: NotificationAction;
   clone: (action: NotificationAction) => NotificationUIAction;
-  onChangeAction: (action: UIAction<NotificationAction>) => void;
+  onChange: (value: string) => void;
   isInvalid: boolean;
 }
 class NotifUI extends React.Component<NotifUIProps, NotifUIState> {
   onChangeNotificationJsonString = (str: string) => {
-    const { action, clone, onChangeAction } = this.props;
-    onChangeAction(
-      clone({
-        ...action,
-        notificationJsonString: str,
-      })
-    );
+    this.props.onChange(str);
   };
 
   render() {
@@ -63,6 +57,10 @@ export default class NotificationUIAction implements UIAction<NotificationAction
 
   clone = (action: NotificationAction) => new NotificationUIAction(action, this.id);
 
+  updateNotificationMessage = (value: string) => {
+    this.action.notificationJsonString = value;
+  };
+
   isValid = () => {
     try {
       JSON.parse(this.action.notificationJsonString);
@@ -73,17 +71,17 @@ export default class NotificationUIAction implements UIAction<NotificationAction
     }
   };
 
-  render = (action: UIAction<NotificationAction>, onChangeAction: (action: UIAction<NotificationAction>) => void) => {
+  render() {
     return (
       <ServicesConsumer>
         {(services: BrowserServices | null) =>
-          services && <NotifUI onChangeAction={onChangeAction} action={this.action} clone={this.clone} isInvalid={!this.isValid()} />
+          services && <NotifUI onChange={this.updateNotificationMessage} action={this.action} clone={this.clone} isInvalid={!this.isValid()} />
         }
       </ServicesConsumer>
     );
   };
 
-  toAction = () => {
+  toAction() {
     const newAction = { ...this.action };
     const notification = JSON.parse(newAction.notificationJsonString);
     // delete json strng key and return the action