[Fleet] Add a banner to the top of the Kafka Output UI to say that El…

…astic Defend integration is not supported (#163579) Closes elastic/security-team#7309 ![test](https://github.com/elastic/kibana/assets/29123534/8ce752d5-9340-4cdf-a4ec-7a9ae195a3d2)
elastic · Aug 10, 2023 · 7353dc6 · 7353dc6
1 parent 94432d8
commit 7353dc6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 19 deletions.
diff --git 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
@@ -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/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...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>