From 52b5d53b3b2fd763e8473557bf8c7c3f5f78cf33 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Mon, 5 Dec 2022 17:19:44 -0500
Subject: [PATCH] refacto experimental feature in their own component

---
 .../experimental_datastream_settings.tsx      | 170 ++++++++++++++++++
 .../package_policy_input_stream.tsx           | 168 +++--------------
 2 files changed, 192 insertions(+), 146 deletions(-)
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx
new file mode 100644
index 0000000000000..0a8ba34677499
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx
@@ -0,0 +1,170 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback } from 'react';
+
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSwitch,
+  EuiText,
+  EuiSpacer,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+
+import type {
+  ExperimentalDataStreamFeature,
+  RegistryStreamWithDataStream,
+} from '../../../../../../../../../common/types';
+import { getRegistryDataStreamAssetBaseName } from '../../../../../../../../../common/services';
+import type { ExperimentalIndexingFeature } from '../../../../../../../../../common/types/models/epm';
+
+interface Props {
+  registryDataStream: RegistryStreamWithDataStream['data_stream'];
+  experimentalDataFeatures?: ExperimentalDataStreamFeature[];
+  setNewExperimentalDataFeatures: (
+    experimentalDataFeatures: ExperimentalDataStreamFeature[]
+  ) => void;
+}
+
+export const ExperimentDatastreamSettings: React.FunctionComponent<Props> = ({
+  registryDataStream,
+  experimentalDataFeatures,
+  setNewExperimentalDataFeatures,
+}) => {
+  const getExperimentalFeatureValue = useCallback(
+    (feature: ExperimentalIndexingFeature) => {
+      return experimentalDataFeatures?.find(
+        ({ data_stream: dataStream, features }) =>
+          dataStream === getRegistryDataStreamAssetBaseName(registryDataStream) &&
+          typeof features[feature] !== 'undefined'
+      )?.features?.[feature];
+    },
+    [experimentalDataFeatures, registryDataStream]
+  );
+
+  const isSyntheticSourceEditable = registryDataStream.elasticsearch?.source_mode !== 'default';
+
+  const syntheticSourceExperimentalValue = getExperimentalFeatureValue('synthetic_source');
+  const isSyntheticSourceEnabledByDefault =
+    registryDataStream.elasticsearch?.source_mode === 'synthetic';
+
+  const newExperimentalIndexingFeature = {
+    synthetic_source:
+      typeof syntheticSourceExperimentalValue !== 'undefined'
+        ? syntheticSourceExperimentalValue
+        : isSyntheticSourceEnabledByDefault,
+    tsdb: getExperimentalFeatureValue('tsdb') ?? false,
+  };
+
+  const onIndexingSettingChange = (
+    features: Partial<Record<ExperimentalIndexingFeature, boolean>>
+  ) => {
+    const newExperimentalDataStreamFeatures = [...(experimentalDataFeatures ?? [])];
+
+    const dataStream = getRegistryDataStreamAssetBaseName(registryDataStream);
+
+    const existingSettingRecord = newExperimentalDataStreamFeatures.find(
+      (x) => x.data_stream === dataStream
+    );
+
+    if (existingSettingRecord) {
+      existingSettingRecord.features = {
+        ...existingSettingRecord.features,
+        ...features,
+      };
+    } else {
+      newExperimentalDataStreamFeatures.push({
+        data_stream: dataStream,
+        features: { ...newExperimentalIndexingFeature, ...features },
+      });
+    }
+
+    setNewExperimentalDataFeatures(newExperimentalDataStreamFeatures);
+  };
+
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xxxs">
+            <h5>
+              <FormattedMessage
+                id="xpack.fleet.packagePolicyEditor.experimentalSettings.title"
+                defaultMessage="Indexing settings (experimental)"
+              />
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.fleet.createPackagePolicy.stepConfigure.experimentalFeaturesDescription"
+              defaultMessage="Select data streams to configure indexing options. This is an {experimentalFeature} and may have effects on other properties."
+              values={{
+                experimentalFeature: (
+                  <strong>
+                    <FormattedMessage
+                      id="xpack.fleet.createPackagePolicy.experimentalFeatureText"
+                      defaultMessage="experimental feature"
+                    />
+                  </strong>
+                ),
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <EuiSwitch
+            checked={newExperimentalIndexingFeature.synthetic_source ?? false}
+            disabled={!isSyntheticSourceEditable}
+            label={
+              <FormattedMessage
+                id="xpack.fleet.createPackagePolicy.experimentalFeatures.syntheticSourceLabel"
+                defaultMessage="Synthetic source"
+              />
+            }
+            onChange={(e) => {
+              onIndexingSettingChange({
+                synthetic_source: e.target.checked,
+              });
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiToolTip
+            content={
+              <FormattedMessage
+                id="xpack.fleet.createPackagePolicy.experimentalFeatures.TSDBTooltip"
+                defaultMessage="Enabling this feature is irreversible"
+              />
+            }
+          >
+            <EuiSwitch
+              disabled={newExperimentalIndexingFeature.tsdb ?? false}
+              checked={newExperimentalIndexingFeature.tsdb ?? false}
+              label={
+                <FormattedMessage
+                  id="xpack.fleet.createPackagePolicy.experimentalFeatures.TSDBLabel"
+                  defaultMessage="Time-series indexing (TSDB)"
+                />
+              }
+              onChange={(e) => {
+                onIndexingSettingChange({
+                  tsdb: e.target.checked,
+                });
+              }}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
index 49cf3b3665029..7a9c991c686cc 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
@@ -17,15 +17,12 @@ import {
   EuiText,
   EuiSpacer,
   EuiButtonEmpty,
-  EuiTitle,
-  EuiToolTip,
 } from '@elastic/eui';
 import { useRouteMatch } from 'react-router-dom';
 
 import { mapPackageReleaseToIntegrationCardRelease } from '../../../../../../../../services/package_prerelease';
+import type { ExperimentalDataStreamFeature } from '../../../../../../../../../common/types/models/epm';
 
-import { getRegistryDataStreamAssetBaseName } from '../../../../../../../../../common/services';
-import type { ExperimentalIndexingFeature } from '../../../../../../../../../common/types/models/epm';
 import type {
   NewPackagePolicy,
   NewPackagePolicyInputStream,
@@ -39,6 +36,7 @@ import { isAdvancedVar, validationHasErrors } from '../../../services';
 import { PackagePolicyEditorDatastreamPipelines } from '../../datastream_pipelines';
 import { PackagePolicyEditorDatastreamMappings } from '../../datastream_mappings';
 
+import { ExperimentDatastreamSettings } from './experimental_datastream_settings';
 import { PackagePolicyInputVarField } from './package_policy_input_var_field';
 import { useDataStreamId } from './hooks';
 
@@ -119,74 +117,21 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
       [advancedVars, inputStreamValidationResults?.vars]
     );
 
-    const getExperimentalFeatureValue = useCallback(
-      (feature: ExperimentalIndexingFeature, defaultToFalse = true) => {
-        return packagePolicy.package?.experimental_data_stream_features?.find(
-          ({ data_stream: dataStream, features }) =>
-            dataStream ===
-              getRegistryDataStreamAssetBaseName(packagePolicyInputStream.data_stream) &&
-            typeof features[feature] !== 'undefined'
-        )?.features ?? defaultToFalse
-          ? false
-          : undefined;
-      },
-      [
-        packagePolicy.package?.experimental_data_stream_features,
-        packagePolicyInputStream.data_stream,
-      ]
-    );
-
-    const isSyntheticSourceEditable =
-      packageInputStream.data_stream.elasticsearch?.source_mode !== 'default';
-
-    const syntheticSourceExperimentalValue = getExperimentalFeatureValue('synthetic_source', false);
-    const isSyntheticSourceEnabledByDefault =
-      packageInputStream.data_stream.elasticsearch?.source_mode === 'synthetic';
-
-    const newExperimentalIndexingFeature = {
-      synthetic_source:
-        typeof syntheticSourceExperimentalValue !== 'undefined'
-          ? syntheticSourceExperimentalValue
-          : isSyntheticSourceEnabledByDefault,
-      tsdb: getExperimentalFeatureValue('tsdb') ?? false,
-    };
-
-    const onIndexingSettingChange = (
-      features: Partial<Record<ExperimentalIndexingFeature, boolean>>
-    ) => {
-      if (!packagePolicy.package) {
-        return;
-      }
+    const setNewExperimentalDataFeatures = useCallback(
+      (newFeatures: ExperimentalDataStreamFeature[]) => {
+        if (!packagePolicy.package) {
+          return;
+        }
 
-      const newExperimentalDataStreamFeatures = [
-        ...(packagePolicy.package.experimental_data_stream_features ?? []),
-      ];
-
-      const dataStream = getRegistryDataStreamAssetBaseName(packagePolicyInputStream.data_stream);
-
-      const existingSettingRecord = newExperimentalDataStreamFeatures.find(
-        (x) => x.data_stream === dataStream
-      );
-
-      if (existingSettingRecord) {
-        existingSettingRecord.features = {
-          ...existingSettingRecord.features,
-          ...features,
-        };
-      } else {
-        newExperimentalDataStreamFeatures.push({
-          data_stream: dataStream,
-          features: { ...newExperimentalIndexingFeature, ...features },
+        updatePackagePolicy({
+          package: {
+            ...packagePolicy.package,
+            experimental_data_stream_features: newFeatures,
+          },
         });
-      }
-
-      updatePackagePolicy({
-        package: {
-          ...packagePolicy.package,
-          experimental_data_stream_features: newExperimentalDataStreamFeatures,
-        },
-      });
-    };
+      },
+      [updatePackagePolicy, packagePolicy]
+    );
 
     return (
       <>
@@ -347,82 +292,13 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
                       </>
                     )}
                     {/* Experimental index/datastream settings e.g. synthetic source */}
-                    <EuiFlexItem>
-                      <EuiFlexGroup direction="column" gutterSize="xs">
-                        <EuiFlexItem grow={false}>
-                          <EuiTitle size="xxxs">
-                            <h5>
-                              <FormattedMessage
-                                id="xpack.fleet.packagePolicyEditor.experimentalSettings.title"
-                                defaultMessage="Indexing settings (experimental)"
-                              />
-                            </h5>
-                          </EuiTitle>
-                        </EuiFlexItem>
-                        <EuiFlexItem>
-                          <EuiText color="subdued" size="xs">
-                            <FormattedMessage
-                              id="xpack.fleet.createPackagePolicy.stepConfigure.experimentalFeaturesDescription"
-                              defaultMessage="Select data streams to configure indexing options. This is an {experimentalFeature} and may have effects on other properties."
-                              values={{
-                                experimentalFeature: (
-                                  <strong>
-                                    <FormattedMessage
-                                      id="xpack.fleet.createPackagePolicy.experimentalFeatureText"
-                                      defaultMessage="experimental feature"
-                                    />
-                                  </strong>
-                                ),
-                              }}
-                            />
-                          </EuiText>
-                        </EuiFlexItem>
-                        <EuiSpacer size="s" />
-                        <EuiFlexItem>
-                          <EuiSwitch
-                            checked={newExperimentalIndexingFeature.synthetic_source ?? false}
-                            disabled={!isSyntheticSourceEditable}
-                            label={
-                              <FormattedMessage
-                                id="xpack.fleet.createPackagePolicy.experimentalFeatures.syntheticSourceLabel"
-                                defaultMessage="Synthetic source"
-                              />
-                            }
-                            onChange={(e) => {
-                              onIndexingSettingChange({
-                                synthetic_source: e.target.checked,
-                              });
-                            }}
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem>
-                          <EuiToolTip
-                            content={
-                              <FormattedMessage
-                                id="xpack.fleet.createPackagePolicy.experimentalFeatures.TSDBTooltip"
-                                defaultMessage="Enabling this feature is irreversible"
-                              />
-                            }
-                          >
-                            <EuiSwitch
-                              disabled={newExperimentalIndexingFeature.tsdb ?? false}
-                              checked={newExperimentalIndexingFeature.tsdb ?? false}
-                              label={
-                                <FormattedMessage
-                                  id="xpack.fleet.createPackagePolicy.experimentalFeatures.TSDBLabel"
-                                  defaultMessage="Time-series indexing (TSDB)"
-                                />
-                              }
-                              onChange={(e) => {
-                                onIndexingSettingChange({
-                                  tsdb: e.target.checked,
-                                });
-                              }}
-                            />
-                          </EuiToolTip>
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </EuiFlexItem>
+                    <ExperimentDatastreamSettings
+                      registryDataStream={packageInputStream.data_stream}
+                      experimentalDataFeatures={
+                        packagePolicy.package?.experimental_data_stream_features
+                      }
+                      setNewExperimentalDataFeatures={setNewExperimentalDataFeatures}
+                    />
                   </>
                 ) : null}
               </Fragment>