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 89d37c4d00a11..2cd200bc5deec 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
@@ -11,6 +11,10 @@ import { act } from 'react-dom/test-utils';
 import { actionTypeRegistryMock } from '../../action_type_registry.mock';
 import { ValidationResult, Alert, AlertAction } from '../../../types';
 import { ActionForm } from './action_form';
+jest.mock('../../lib/action_connector_api', () => ({
+  loadAllActions: jest.fn(),
+  loadActionTypes: jest.fn(),
+}));
 const actionTypeRegistry = actionTypeRegistryMock.create();
 describe('action_form', () => {
   let deps: any;
@@ -73,6 +77,16 @@ describe('action_form', () => {
     let wrapper: ReactWrapper<any>;
 
     async function setup() {
+      const { loadAllActions } = jest.requireMock('../../lib/action_connector_api');
+      loadAllActions.mockResolvedValueOnce([
+        {
+          secrets: {},
+          id: 'test',
+          actionTypeId: actionType.id,
+          name: 'Test connector',
+          config: {},
+        },
+      ]);
       const mockes = coreMock.createSetup();
       deps = {
         toastNotifications: mockes.notifications.toasts,
@@ -85,6 +99,7 @@ describe('action_form', () => {
         disabledByLicenseActionType,
       ]);
       actionTypeRegistry.has.mockReturnValue(true);
+      actionTypeRegistry.get.mockReturnValue(actionType);
 
       const initialAlert = ({
         name: 'test',
@@ -191,6 +206,24 @@ 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 ",
+        },
+      ]
+      `);
+    });
+
     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 4a9bd2677fd88..c0f7235e4a612 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
@@ -157,6 +157,7 @@ export const ActionForm = ({
         label: val.name,
         value: val.name,
         id: actionItemId,
+        'data-test-subj': 'itemActionConnector',
       },
     ];
   };
@@ -170,13 +171,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,
       }));
@@ -224,6 +221,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);
@@ -439,6 +438,7 @@ export const ActionForm = ({
     const actionTypeConnectors = connectors.filter(
       field => field.actionTypeId === actionTypeModel.id
     );
+
     if (actionTypeConnectors.length > 0) {
       actions.push({
         id: '',