From 7353dc66902fcff9e11ac88bc87be6244234a149 Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc@elastic.co>
Date: Thu, 10 Aug 2023 14:56:48 +0200
Subject: [PATCH] [Fleet] Add a banner to the top of the Kafka Output UI to say
 that Elastic Defend integration is not supported (#163579)

Closes https://github.com/elastic/security-team/issues/7309


![test](https://github.com/elastic/kibana/assets/29123534/8ce752d5-9340-4cdf-a4ec-7a9ae195a3d2)
---
 x-pack/plugins/fleet/cypress/screens/fleet.ts |  2 +
 .../fleet/cypress/screens/fleet_outputs.ts    |  1 +
 .../components/edit_output_flyout/index.tsx   | 57 ++++++++++++-------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/fleet/cypress/screens/fleet.ts b/x-pack/plugins/fleet/cypress/screens/fleet.ts
index e6b6ac1f47008..3b8ffcc63b6f6 100644
--- a/x-pack/plugins/fleet/cypress/screens/fleet.ts
+++ b/x-pack/plugins/fleet/cypress/screens/fleet.ts
@@ -121,6 +121,8 @@ export const SETTINGS_OUTPUTS = {
   NAME_INPUT: 'settingsOutputsFlyout.nameInput',
   TYPE_INPUT: 'settingsOutputsFlyout.typeInput',
   ADD_HOST_ROW_BTN: 'fleetServerHosts.multiRowInput.addRowButton',
+  WARNING_KAFKA_CALLOUT: 'settingsOutputsFlyout.kafkaOutputTypeCallout',
+  WARNING_ELASTICSEARCH_CALLOUT: 'settingsOutputsFlyout.elasticsearchOutputTypeCallout',
 };
 
 export const getSpecificSelectorId = (selector: string, id: number) => {
diff --git a/x-pack/plugins/fleet/cypress/screens/fleet_outputs.ts b/x-pack/plugins/fleet/cypress/screens/fleet_outputs.ts
index de6ef1097b74a..0e018cd301d1b 100644
--- a/x-pack/plugins/fleet/cypress/screens/fleet_outputs.ts
+++ b/x-pack/plugins/fleet/cypress/screens/fleet_outputs.ts
@@ -21,6 +21,7 @@ export const selectKafkaOutput = () => {
   visit('/app/fleet/settings');
   cy.getBySel(SETTINGS_OUTPUTS.ADD_BTN).click();
   cy.getBySel(SETTINGS_OUTPUTS.TYPE_INPUT).select('kafka');
+  cy.getBySel(SETTINGS_OUTPUTS.WARNING_KAFKA_CALLOUT);
   cy.getBySel(SETTINGS_OUTPUTS_KAFKA.AUTHENTICATION_USERNAME_PASSWORD_OPTION).click();
 };
 
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
index 3f2055e999914..e764e93527b34 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
@@ -73,7 +73,6 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
     [proxies]
   );
 
-  const isESOutput = inputs.typeInput.value === outputType.Elasticsearch;
   const { kafkaOutput: isKafkaOutputEnabled } = ExperimentalFeaturesService.get();
 
   const OUTPUT_TYPE_OPTIONS = [
@@ -249,6 +248,43 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
     }
   };
 
+  const renderTypeSpecificWarning = () => {
+    const isESOutput = inputs.typeInput.value === outputType.Elasticsearch;
+    const isKafkaOutput = inputs.typeInput.value === outputType.Kafka;
+    if (!isKafkaOutput && !isESOutput) {
+      return null;
+    }
+
+    const generateWarningMessage = () => {
+      switch (inputs.typeInput.value) {
+        case outputType.Kafka:
+          return i18n.translate('xpack.fleet.settings.editOutputFlyout.kafkaOutputTypeCallout', {
+            defaultMessage:
+              'Kafka output is currently not supported on Agents using the Elastic Defend integration.',
+          });
+        default:
+        case outputType.Elasticsearch:
+          return i18n.translate('xpack.fleet.settings.editOutputFlyout.esOutputTypeCallout', {
+            defaultMessage:
+              'This output type currently does not support connectivity to a remote Elasticsearch cluster.',
+          });
+      }
+    };
+    return (
+      <>
+        <EuiSpacer size="xs" />
+        <EuiCallOut
+          data-test-subj={`settingsOutputsFlyout.${inputs.typeInput.value}OutputTypeCallout`}
+          title={generateWarningMessage()}
+          iconType="alert"
+          color="warning"
+          size="s"
+          heading="p"
+        />
+      </>
+    );
+  };
+
   return (
     <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
       <EuiFlyoutHeader hasBorder={true}>
@@ -350,24 +386,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
                   }
                 )}
               />
-              {isESOutput && (
-                <>
-                  <EuiSpacer size="xs" />
-                  <EuiCallOut
-                    title={i18n.translate(
-                      'xpack.fleet.settings.editOutputFlyout.esOutputTypeCallout',
-                      {
-                        defaultMessage:
-                          'This output type currently does not support connectivity to a remote Elasticsearch cluster.',
-                      }
-                    )}
-                    iconType="alert"
-                    color="warning"
-                    size="s"
-                    heading="p"
-                  />
-                </>
-              )}
+              {renderTypeSpecificWarning()}
             </>
           </EuiFormRow>