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 22714472f4680..7d3e4903f7f85 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
@@ -127,9 +127,6 @@ export const ActionForm = ({
         setIsLoadingConnectors(true);
         const loadedConnectors = await loadConnectors({ http });
         setConnectors(loadedConnectors);
-        setActionTypesAvalilability(
-          loadedConnectors.filter(connector => connector.isPreconfigured)
-        );
       } catch (e) {
         toastNotifications.addDanger({
           title: i18n.translate(
@@ -146,20 +143,26 @@ export const ActionForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const setActionTypesAvalilability = (preconfiguredConnectors: ActionConnector[]) => {
-    const hasActionsDisabled = actions.some(
-      action =>
-        actionTypesIndex &&
-        !actionTypesIndex[action.actionTypeId].enabled &&
-        !checkActionFormActionTypeEnabled(
-          actionTypesIndex[action.actionTypeId],
-          preconfiguredConnectors
-        ).isEnabled
-    );
-    if (setHasActionsDisabled) {
-      setHasActionsDisabled(hasActionsDisabled);
+  useEffect(() => {
+    const setActionTypesAvalilability = () => {
+      const preconfiguredConnectors = connectors.filter(connector => connector.isPreconfigured);
+      const hasActionsDisabled = actions.some(
+        action =>
+          !actionTypesIndex[action.actionTypeId].enabled &&
+          !checkActionFormActionTypeEnabled(
+            actionTypesIndex[action.actionTypeId],
+            preconfiguredConnectors
+          ).isEnabled
+      );
+      if (setHasActionsDisabled) {
+        setHasActionsDisabled(hasActionsDisabled);
+      }
+    };
+    if (connectors.length > 0 && actionTypesIndex) {
+      setActionTypesAvalilability();
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectors, actionTypesIndex]);
 
   const preconfiguredMessage = i18n.translate(
     'xpack.triggersActionsUI.sections.actionForm.preconfiguredTitleMessage',
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
index f049406b639c7..2edab1b164a1b 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
@@ -59,10 +59,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       it('navigates to an alert details page', async () => {
         const action = await alerting.actions.createAction({
-          name: `server-log-${Date.now()}`,
-          actionTypeId: '.server-log',
+          name: `Slack-${Date.now()}`,
+          actionTypeId: '.slack',
           config: {},
-          secrets: {},
+          secrets: {
+            webhookUrl: 'https://test',
+          },
         });
 
         const alert = await alerting.alerts.createAlwaysFiringWithAction(