[Actions] Update system action example (#180107)

## Summary

This PR enhances the system action example to a) demonstrate better the
connector adapter abilities and b) hide mustache variables from the UI

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/examples/triggers_actions_ui_example/public/connector_types/system_log_example/system_log_example_params.tsx

@@ -5,59 +5,54 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { ActionParamsProps } from '@kbn/triggers-actions-ui-plugin/public';
-import { TextAreaWithMessageVariables } from '@kbn/triggers-actions-ui-plugin/public';
+import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 import { SystemLogActionParams } from '../types';
 
 export const ServerLogParamsFields: React.FunctionComponent<
   ActionParamsProps<SystemLogActionParams>
-> = ({
-  actionParams,
-  editAction,
-  index,
-  errors,
-  messageVariables,
-  defaultMessage,
-  useDefaultMessage,
-}) => {
-  const { message } = actionParams;
+> = ({ actionParams, editAction, index, errors, messageVariables }) => {
+  const { message = 'Alerts have been triggered.' } = actionParams;
 
-  const [[isUsingDefault, defaultMessageUsed], setDefaultMessageUsage] = useState<
-    [boolean, string | undefined]
-  >([false, defaultMessage]);
   // This params component is derived primarily from server_log_params.tsx, see that file and its
   // corresponding unit tests for details on functionality
   useEffect(() => {
-    if (
-      useDefaultMessage ||
-      !actionParams?.message ||
-      (isUsingDefault &&
-        actionParams?.message === defaultMessageUsed &&
-        defaultMessageUsed !== defaultMessage)
-    ) {
-      setDefaultMessageUsage([true, defaultMessage]);
-      editAction('message', defaultMessage, index);
+    if (!actionParams?.message) {
+      editAction('message', message, index);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultMessage]);
+  }, [actionParams.message]);
 
   return (
-    <TextAreaWithMessageVariables
-      index={index}
-      editAction={editAction}
-      messageVariables={messageVariables}
-      paramsProperty={'message'}
-      inputTargetValue={message}
+    <EuiFormRow
+      fullWidth
+      error={errors.message as string[]}
+      isInvalid={errors.message.length > 0 && message !== undefined}
       label={i18n.translate(
         'xpack.stackConnectors.components.systemLogExample.logMessageFieldLabel',
         {
           defaultMessage: 'Message',
         }
       )}
-      errors={errors.message as string[]}
-    />
+    >
+      <EuiTextArea
+        fullWidth
+        isInvalid={errors.message.length > 0 && message !== undefined}
+        name={'message'}
+        value={message || ''}
+        data-test-subj={'messageTextArea'}
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+          editAction('message', e.target.value, index)
+        }
+        onBlur={() => {
+          if (!message) {
+            editAction('message', '', index);
+          }
+        }}
+      />
+    </EuiFormRow>
   );
 };
 

x-pack/examples/triggers_actions_ui_example/server/connector_types/system_log_example.ts

@@ -66,11 +66,13 @@ export function getConnectorType(): ServerLogConnectorType {
   };
 }
 
-export const connectorAdapter: ConnectorAdapter = {
+export const connectorAdapter: ConnectorAdapter<{ message: string }, { message: string }> = {
   connectorTypeId: ConnectorTypeId,
   ruleActionParamsSchema: ParamsSchema,
   buildActionParams: ({ alerts, rule, params, spaceId, ruleUrl }) => {
-    return { ...params };
+    const message = `The system has detected ${alerts.new.count} new, ${alerts.ongoing.count} ongoing, and ${alerts.recovered.count} recovered alerts.`;
+
+    return { ...params, message };
   },
 };
 
@@ -82,7 +84,7 @@ async function executor(
   const { actionId, params, logger } = execOptions;
   const sanitizedMessage = withoutControlCharacters(params.message);
   try {
-    logger.info<LogMeta>(`SYSTEM ACTION EXAMPLE Server log: ${sanitizedMessage}`);
+    logger.info<LogMeta>(`System action example: Server log: ${sanitizedMessage}`);
   } catch (err) {
     const message = i18n.translate('xpack.stackConnectors.serverLog.errorLoggingErrorMessage', {
       defaultMessage: 'error logging message',