Added UI for pre-configured connectors.

x-pack/plugins/translations/translations/ja-JP.json

@@ -16110,7 +16110,6 @@
     "xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.userTextFieldLabel": "ユーザー名",
     "xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent": "{pluginName} はベータ段階で、変更される可能性があります。デザインとコードはオフィシャル GA 機能よりも完成度が低く、現状のまま保証なしで提供されています。ベータ機能にはオフィシャル GA 機能の SLA が適用されません。",
     "xpack.triggersActionsUI.sections.editConnectorForm.cancelButtonLabel": "キャンセル",
-    "xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle": "コネクターを編集",
     "xpack.triggersActionsUI.sections.editConnectorForm.saveButtonLabel": "保存",
     "xpack.triggersActionsUI.sections.editConnectorForm.updateErrorNotificationText": "コネクターを更新できません。",
     "xpack.triggersActionsUI.sections.editConnectorForm.updateSuccessNotificationText": "「{connectorName}」を更新しました",

x-pack/plugins/translations/translations/zh-CN.json

@@ -16115,7 +16115,6 @@
     "xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.userTextFieldLabel": "用户名",
     "xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent": "{pluginName} 为公测版，可能会进行更改。设计和代码相对于正式发行版功能还不够成熟，将按原样提供，且不提供任何保证。公测版功能不受正式发行版功能支持 SLA 的约束。",
     "xpack.triggersActionsUI.sections.editConnectorForm.cancelButtonLabel": "取消",
-    "xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle": "编辑连接器",
     "xpack.triggersActionsUI.sections.editConnectorForm.saveButtonLabel": "保存",
     "xpack.triggersActionsUI.sections.editConnectorForm.updateErrorNotificationText": "无法更新连接器。",
     "xpack.triggersActionsUI.sections.editConnectorForm.updateSuccessNotificationText": "已更新“{connectorName}”",

x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx

@@ -22,9 +22,10 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
   const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
 
   const getMessageVariables = () =>
-    messageVariables?.map((variable: string) => (
+    messageVariables?.map((variable: string, i: number) => (
       <EuiContextMenuItem
         key={variable}
+        data-test-subj={`variableMenuButton-${i}`}
         icon="empty"
         onClick={() => {
           onSelectEventHandler(variable);

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx

@@ -141,15 +141,22 @@ export const ActionForm = ({
       });
     }
   }
+  const preconfiguredMessage = i18n.translate(
+    'xpack.triggersActionsUI.sections.actionForm.preconfiguredTitleMessage',
+    {
+      defaultMessage: '(pre-configured)',
+    }
+  );
   const getSelectedOptions = (actionItemId: string) => {
     const val = connectors.find(connector => connector.id === actionItemId);
     if (!val) {
       return [];
     }
+    const optionTitle = `${val.name} ${val.isPreconfigured ? preconfiguredMessage : ''}`;
     return [
       {
-        label: val.name,
-        value: val.name,
+        label: optionTitle,
+        value: optionTitle,
         id: actionItemId,
       },
     ];
@@ -264,7 +271,9 @@ export const ActionForm = ({
                         defaultMessage="{actionConnectorName}"
                         id="xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeEditTitle"
                         values={{
-                          actionConnectorName: actionConnector.name,
+                          actionConnectorName: `${actionConnector.name} ${
+                            actionConnector.isPreconfigured ? preconfiguredMessage : ''
+                          }`,
                         }}
                       />
                     </EuiFlexItem>

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx

@@ -95,4 +95,60 @@ describe('connector_edit_flyout', () => {
     expect(connectorNameField.exists()).toBeTruthy();
     expect(connectorNameField.first().prop('value')).toBe('action-connector');
   });
+
+  test('if pre-configured connector rendered correct in the edit form', () => {
+    const connector = {
+      secrets: {},
+      id: 'test',
+      actionTypeId: 'test-action-type-id',
+      actionType: 'test-action-type-name',
+      name: 'pre-configured-connector',
+      isPreconfigured: true,
+      referencedByCount: 0,
+      config: {},
+    };
+
+    const actionType = {
+      id: 'test-action-type-id',
+      iconClass: 'test',
+      selectMessage: 'test',
+      validateConnector: (): ValidationResult => {
+        return { errors: {} };
+      },
+      validateParams: (): ValidationResult => {
+        const validationResult = { errors: {} };
+        return validationResult;
+      },
+      actionConnectorFields: null,
+      actionParamsFields: null,
+    };
+    actionTypeRegistry.get.mockReturnValue(actionType);
+    actionTypeRegistry.has.mockReturnValue(true);
+
+    const wrapper = mountWithIntl(
+      <AppContextProvider appDeps={deps}>
+        <ActionsConnectorsContextProvider
+          value={{
+            http: deps.http,
+            toastNotifications: deps.toastNotifications,
+            capabilities: deps.capabilities,
+            actionTypeRegistry: deps.actionTypeRegistry,
+            reloadConnectors: () => {
+              return new Promise<void>(() => {});
+            },
+          }}
+        >
+          <ConnectorEditFlyout
+            initialConnector={connector}
+            editFlyoutVisible={true}
+            setEditFlyoutVisibility={state => {}}
+          />
+        </ActionsConnectorsContextProvider>
+      </AppContextProvider>
+    );
+
+    const preconfiguredBadge = wrapper.find('[data-test-subj="preconfiguredBadge"]');
+    expect(preconfiguredBadge.exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="saveEditedActionButton"]').exists()).toBeFalsy();
+  });
 });

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useCallback, useReducer, useState } from 'react';
+import React, { useCallback, useReducer, useState, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiTitle,
@@ -17,6 +17,8 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiBetaBadge,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionConnectorForm, validateBaseProperties } from './action_connector_form';
@@ -91,50 +93,115 @@ export const ConnectorEditFlyout = ({
         return undefined;
       });
 
+  const flyoutTitle = connector.isPreconfigured ? (
+    <Fragment>
+      <EuiTitle size="s">
+        <h3 id="flyoutTitle">
+          <FormattedMessage
+            defaultMessage="{connectorName}"
+            id="xpack.triggersActionsUI.sections.preconfiguredConnectorForm.flyoutTitle"
+            values={{ connectorName: initialConnector.name }}
+          />
+          &emsp;
+          <EuiBetaBadge
+            label="Pre-configured"
+            data-test-subj="preconfiguredBadge"
+            tooltipContent={i18n.translate(
+              'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.tooltipContent',
+              {
+                defaultMessage: 'This connector is preconfigured and cannot be edited',
+              }
+            )}
+          />
+          &emsp;
+          <EuiBetaBadge
+            label="Beta"
+            tooltipContent={i18n.translate(
+              'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.betaBadgeTooltipContent',
+              {
+                defaultMessage:
+                  '{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
+                values: {
+                  pluginName: PLUGIN.getI18nName(i18n),
+                },
+              }
+            )}
+          />
+        </h3>
+      </EuiTitle>
+      <EuiText size="s">
+        <FormattedMessage
+          defaultMessage="{actionDescription}"
+          id="xpack.triggersActionsUI.sections.editConnectorForm.actionTypeDescription"
+          values={{ actionDescription: actionTypeModel.selectMessage }}
+        />
+      </EuiText>
+    </Fragment>
+  ) : (
+    <EuiTitle size="s">
+      <h3 id="flyoutTitle">
+        <FormattedMessage
+          defaultMessage="Edit connector"
+          id="xpack.triggersActionsUI.sections.editConnectorForm.flyoutPreconfiguredTitle"
+        />
+        &emsp;
+        <EuiBetaBadge
+          label="Beta"
+          tooltipContent={i18n.translate(
+            'xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent',
+            {
+              defaultMessage:
+                '{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
+              values: {
+                pluginName: PLUGIN.getI18nName(i18n),
+              },
+            }
+          )}
+        />
+      </h3>
+    </EuiTitle>
+  );
+
   return (
-    <EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutActionAddTitle" size="m">
+    <EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutActionEditTitle" size="m">
       <EuiFlyoutHeader hasBorder>
         <EuiFlexGroup gutterSize="s" alignItems="center">
           {actionTypeModel ? (
             <EuiFlexItem grow={false}>
               <EuiIcon type={actionTypeModel.iconClass} size="m" />
             </EuiFlexItem>
           ) : null}
-          <EuiFlexItem>
-            <EuiTitle size="s">
-              <h3 id="flyoutTitle">
-                <FormattedMessage
-                  defaultMessage="Edit connector"
-                  id="xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle"
-                />
-                &emsp;
-                <EuiBetaBadge
-                  label="Beta"
-                  tooltipContent={i18n.translate(
-                    'xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent',
-                    {
-                      defaultMessage:
-                        '{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
-                      values: {
-                        pluginName: PLUGIN.getI18nName(i18n),
-                      },
-                    }
-                  )}
-                />
-              </h3>
-            </EuiTitle>
-          </EuiFlexItem>
+          <EuiFlexItem>{flyoutTitle}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <ActionConnectorForm
-          connector={connector}
-          errors={errors}
-          actionTypeName={connector.actionType}
-          dispatch={dispatch}
-          actionTypeRegistry={actionTypeRegistry}
-          http={http}
-        />
+        {!connector.isPreconfigured ? (
+          <ActionConnectorForm
+            connector={connector}
+            errors={errors}
+            actionTypeName={connector.actionType}
+            dispatch={dispatch}
+            actionTypeRegistry={actionTypeRegistry}
+            http={http}
+          />
+        ) : (
+          <Fragment>
+            <EuiText>
+              {i18n.translate(
+                'xpack.triggersActionsUI.sections.editConnectorForm.descriptionText',
+                {
+                  defaultMessage: 'This connector is readonly.',
+                }
+              )}
+            </EuiText>
+            <EuiLink href="https://www.elastic.co/guide" target="_blank">
+              <FormattedMessage
+                id="xpack.triggersActionsUI.sections.editConnectorForm.preconfiguredHelpLabel"
+                defaultMessage="Learn more about pre-configured connectors."
+              />
+            </EuiLink>
+          </Fragment>
+        )}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
@@ -148,7 +215,7 @@ export const ConnectorEditFlyout = ({
               )}
             </EuiButtonEmpty>
           </EuiFlexItem>
-          {canSave && actionTypeModel ? (
+          {canSave && actionTypeModel && !connector.isPreconfigured ? (
             <EuiFlexItem grow={false}>
               <EuiButton
                 fill

x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx

@@ -111,6 +111,7 @@ describe('actions_connectors_list component with items', () => {
         id: '1',
         actionTypeId: 'test',
         description: 'My test',
+        isPreconfigured: false,
         referencedByCount: 1,
         config: {},
       },
@@ -119,6 +120,15 @@ describe('actions_connectors_list component with items', () => {
         actionTypeId: 'test2',
         description: 'My test 2',
         referencedByCount: 1,
+        isPreconfigured: false,
+        config: {},
+      },
+      {
+        id: '3',
+        actionTypeId: 'test2',
+        description: 'My preconfigured test 2',
+        referencedByCount: 1,
+        isPreconfigured: true,
         config: {},
       },
     ]);
@@ -185,7 +195,11 @@ describe('actions_connectors_list component with items', () => {
 
   it('renders table of connectors', () => {
     expect(wrapper.find('EuiInMemoryTable')).toHaveLength(1);
-    expect(wrapper.find('EuiTableRow')).toHaveLength(2);
+    expect(wrapper.find('EuiTableRow')).toHaveLength(3);
+  });
+
+  it('renders table with preconfigured connectors', () => {
+    expect(wrapper.find('[data-test-subj="preConfiguredTitleMessage"]')).toHaveLength(2);
   });
 
   test('if select item for edit should render ConnectorEditFlyout', () => {