From 22c045f36edb0ba4ace9202aaf0e5a6ddea29928 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <jo.naumenko@gmail.com>
Date: Thu, 16 Apr 2020 11:31:33 -0700
Subject: [PATCH] [Alerting] Fixed issue when connectors dropdown not showing
 all available connectors (#63636) (#63718)

---
 .../action_form.test.tsx                      | 32 +++++++++++++++++++
 .../action_connector_form/action_form.tsx     | 14 ++++----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx
index 41564146bb84d..488db42f4e843 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx
@@ -87,6 +87,14 @@ describe('action_form', () => {
           config: {},
           isPreconfigured: false,
         },
+        {
+          secrets: {},
+          id: 'test2',
+          actionTypeId: actionType.id,
+          name: 'Test connector 2',
+          config: {},
+          isPreconfigured: true,
+        },
       ]);
       const mockes = coreMock.createSetup();
       deps = {
@@ -100,6 +108,7 @@ describe('action_form', () => {
         disabledByLicenseActionType,
       ]);
       actionTypeRegistry.has.mockReturnValue(true);
+      actionTypeRegistry.get.mockReturnValue(actionType);
 
       const initialAlert = ({
         name: 'test',
@@ -206,6 +215,29 @@ describe('action_form', () => {
       expect(actionOption.exists()).toBeFalsy();
     });
 
+    it(`renders available connectors for the selected action type`, async () => {
+      await setup();
+      const actionOption = wrapper.find(
+        `[data-test-subj="${actionType.id}-ActionTypeSelectOption"]`
+      );
+      actionOption.first().simulate('click');
+      const combobox = wrapper.find(`[data-test-subj="selectActionConnector"]`);
+      expect((combobox.first().props() as any).options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": "test",
+          "key": "test",
+          "label": "Test connector ",
+        },
+        Object {
+          "id": "test2",
+          "key": "test2",
+          "label": "Test connector 2 (pre-configured)",
+        },
+      ]
+      `);
+    });
+
     it('renders action types disabled by license', async () => {
       await setup();
       const actionOption = wrapper.find(
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
index f0c922bb3a1e1..3f964cc167c25 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
@@ -164,6 +164,7 @@ export const ActionForm = ({
         label: optionTitle,
         value: optionTitle,
         id: actionItemId,
+        'data-test-subj': 'itemActionConnector',
       },
     ];
   };
@@ -177,13 +178,9 @@ export const ActionForm = ({
     index: number
   ) => {
     const optionsList = connectors
-      .filter(
-        connectorItem =>
-          connectorItem.actionTypeId === actionItem.actionTypeId &&
-          connectorItem.id === actionItem.id
-      )
-      .map(({ name, id }) => ({
-        label: name,
+      .filter(connectorItem => connectorItem.actionTypeId === actionItem.actionTypeId)
+      .map(({ name, id, isPreconfigured }) => ({
+        label: `${name} ${isPreconfigured ? preconfiguredMessage : ''}`,
         key: id,
         id,
       }));
@@ -231,6 +228,8 @@ export const ActionForm = ({
                 fullWidth
                 singleSelection={{ asPlainText: true }}
                 options={optionsList}
+                id={`selectActionConnector-${actionItem.id}`}
+                data-test-subj="selectActionConnector"
                 selectedOptions={getSelectedOptions(actionItem.id)}
                 onChange={selectedOptions => {
                   setActionIdByIndex(selectedOptions[0].id ?? '', index);
@@ -448,6 +447,7 @@ export const ActionForm = ({
     const actionTypeConnectors = connectors.filter(
       field => field.actionTypeId === actionTypeModel.id
     );
+
     if (actionTypeConnectors.length > 0) {
       actions.push({
         id: '',