Fixed alert Edit flyout shows the error message when one of this actions has a preconfigured action type

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

@@ -106,10 +106,6 @@ export const ActionForm = ({
           index[actionTypeItem.id] = actionTypeItem;
         }
         setActionTypesIndex(index);
-        const hasActionsDisabled = actions.some(action => !index[action.actionTypeId].enabled);
-        if (setHasActionsDisabled) {
-          setHasActionsDisabled(hasActionsDisabled);
-        }
       } catch (e) {
         toastNotifications.addDanger({
           title: i18n.translate(
@@ -129,7 +125,8 @@ export const ActionForm = ({
     (async () => {
       try {
         setIsLoadingConnectors(true);
-        setConnectors(await loadConnectors({ http }));
+        const loadedConnectors = await loadConnectors({ http });
+        setConnectors(loadedConnectors);
       } catch (e) {
         toastNotifications.addDanger({
           title: i18n.translate(
@@ -146,6 +143,27 @@ export const ActionForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  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',
     {

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx

@@ -32,7 +32,8 @@ export const AlertInstancesRoute: React.FunctionComponent<WithAlertStateProps> =
 
   useEffect(() => {
     getAlertState(alert.id, loadAlertState, setAlertState, toastNotifications);
-  }, [alert, loadAlertState, toastNotifications]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [alert]);
 
   return alertState ? (
     <AlertInstances requestRefresh={requestRefresh} alert={alert} alertState={alertState} />

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx

@@ -145,6 +145,7 @@ export const AlertEdit = ({
                   size="s"
                   color="danger"
                   iconType="alert"
+                  data-test-subj="hasActionsDisabled"
                   title={i18n.translate(
                     'xpack.triggersActionsUI.sections.alertEdit.disabledActionsWarningTitle',
                     { defaultMessage: 'This alert has actions that are disabled' }

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts

@@ -168,7 +168,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         const alert = await alerting.alerts.createAlertWithActions(
           testRunUuid,
           '.index-threshold',
-          params
+          params,
+          [
+            {
+              group: 'threshold met',
+              id: 'my-server-log',
+              params: { level: 'info', message: ' {{context.message}}' },
+            },
+          ]
         );
         // refresh to see alert
         await browser.refresh();
@@ -183,6 +190,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
         const editButton = await testSubjects.find('openEditAlertFlyoutButton');
         await editButton.click();
+        expect(await testSubjects.exists('hasActionsDisabled')).to.eql(false);
 
         const updatedAlertName = `Changed Alert Name ${uuid.v4()}`;
         await testSubjects.setValue('alertNameInput', updatedAlertName, {

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(

x-pack/test/functional_with_es_ssl/config.ts

@@ -10,6 +10,21 @@ import { FtrConfigProviderContext } from '@kbn/test/types/ftr';
 import { services } from './services';
 import { pageObjects } from './page_objects';
 
+// .server-log is specifically not enabled
+const enabledActionTypes = [
+  '.email',
+  '.index',
+  '.pagerduty',
+  '.servicenow',
+  '.slack',
+  '.webhook',
+  'test.authorization',
+  'test.failing',
+  'test.index-record',
+  'test.noop',
+  'test.rate-limit',
+];
+
 // eslint-disable-next-line import/no-default-export
 export default async function({ readConfigFile }: FtrConfigProviderContext) {
   const xpackFunctionalConfig = await readConfigFile(require.resolve('../functional/config.js'));
@@ -50,6 +65,7 @@ export default async function({ readConfigFile }: FtrConfigProviderContext) {
         `--elasticsearch.hosts=https://${servers.elasticsearch.hostname}:${servers.elasticsearch.port}`,
         `--elasticsearch.ssl.certificateAuthorities=${CA_CERT_PATH}`,
         `--plugin-path=${join(__dirname, 'fixtures', 'plugins', 'alerts')}`,
+        `--xpack.actions.enabledActionTypes=${JSON.stringify(enabledActionTypes)}`,
         `--xpack.actions.preconfigured=${JSON.stringify([
           {
             id: 'my-slack1',
@@ -59,6 +75,11 @@ export default async function({ readConfigFile }: FtrConfigProviderContext) {
               webhookUrl: 'https://hooks.slack.com/services/abcd/efgh/ijklmnopqrstuvwxyz',
             },
           },
+          {
+            id: 'my-server-log',
+            actionTypeId: '.server-log',
+            name: 'Serverlog#xyz',
+          },
         ])}`,
       ],
     },