do not create Message component on every text change (#854)

Signed-off-by: Amardeepsingh Siglani <[email protected]>
(cherry picked from commit 7cef11c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

public/pages/CreateTrigger/components/Action/Action.js

@@ -26,10 +26,14 @@ import {
 import { FormikFieldText, FormikComboBox } from '../../../../components/FormControls';
 import { isInvalid, hasError, validateActionName } from '../../../../utils/validate';
 import { validateDestination } from './utils/validate';
-import { DEFAULT_ACTION_TYPE, MANAGE_CHANNELS_PATH } from '../../utils/constants';
+import {
+  DEFAULT_ACTION_TYPE,
+  MANAGE_CHANNELS_PATH,
+  webhookNotificationActionMessageComponent,
+  defaultNotificationActionMessageComponent,
+} from '../../utils/constants';
 import NotificationsCallOut from '../NotificationsCallOut';
 import MinimalAccordion from '../../../../components/FeatureAnywhereContextMenu/MinimalAccordion';
-import Message from './actions';
 
 const Action = ({
   action,
@@ -63,9 +67,9 @@ const Action = ({
   let ActionComponent;
   const actionLabel = 'Notification';
   if (type === 'webhook') {
-    ActionComponent = (props) => <Message isSubjectDisabled {...props} />;
+    ActionComponent = webhookNotificationActionMessageComponent;
   } else {
-    ActionComponent = (props) => <Message {...props} />;
+    ActionComponent = defaultNotificationActionMessageComponent;
   }
 
   const manageChannelsUrl = httpClient.basePath.prepend(MANAGE_CHANNELS_PATH);

public/pages/CreateTrigger/utils/constants.js

@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import React from 'react';
+import Message from '../components/Action/actions';
+
 export const DEFAULT_MESSAGE_SOURCE = {
   BUCKET_LEVEL_MONITOR: `
   Monitor {{ctx.monitor.name}} just entered alert status. Please investigate the issue.
@@ -77,3 +80,8 @@ export const DEFAULT_TRIGGER_NAME = 'New trigger';
 export const DEFAULT_ACTION_TYPE = 'slack';
 
 export const MANAGE_CHANNELS_PATH = `/app/notifications-dashboards#/channels`;
+
+export const webhookNotificationActionMessageComponent = (props) => (
+  <Message isSubjectDisabled {...props} />
+);
+export const defaultNotificationActionMessageComponent = (props) => <Message {...props} />;