[Fleet] Default Integration Policy Configuration section is only shown if no UI extension is registered (#84534)

* Do not render out-of-box integration policy configuration step if a custom UI extension is registered
* Remove endpoint specific logic from fleet and move it to UI extension

Author: paul-tavares

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx

@@ -78,7 +78,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
   const [isLoadingSecondStep, setIsLoadingSecondStep] = useState<boolean>(false);
 
   // Retrieve agent count
-  const agentPolicyId = useMemo(() => agentPolicy?.id, [agentPolicy?.id]);
+  const agentPolicyId = agentPolicy?.id;
   useEffect(() => {
     const getAgentCount = async () => {
       const { data } = await sendGetAgentStatus({ policyId: agentPolicyId });
@@ -331,15 +331,20 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
             updatePackagePolicy={updatePackagePolicy}
             validationResults={validationResults!}
           />
-          <StepConfigurePackagePolicy
-            packageInfo={packageInfo}
-            packagePolicy={packagePolicy}
-            updatePackagePolicy={updatePackagePolicy}
-            validationResults={validationResults!}
-            submitAttempted={formState === 'INVALID'}
-          />
+
+          {/* Only show the out-of-box configuration step if a UI extension is NOT registered */}
+          {!ExtensionView && (
+            <StepConfigurePackagePolicy
+              packageInfo={packageInfo}
+              packagePolicy={packagePolicy}
+              updatePackagePolicy={updatePackagePolicy}
+              validationResults={validationResults!}
+              submitAttempted={formState === 'INVALID'}
+            />
+          )}
+
           {/* If an Agent Policy and a package has been selected, then show UI extension (if any) */}
-          {packagePolicy.policy_id && packagePolicy.package?.name && ExtensionView && (
+          {ExtensionView && packagePolicy.policy_id && packagePolicy.package?.name && (
             <ExtensionWrapper>
               <ExtensionView newPolicy={packagePolicy} onChange={handleExtensionViewOnChange} />
             </ExtensionWrapper>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_configure_package.tsx

@@ -22,7 +22,6 @@ import { Loading } from '../../../components';
 import { PackagePolicyValidationResults } from './services';
 import { PackagePolicyInputPanel } from './components';
 import { CreatePackagePolicyFrom } from './types';
-import { useUIExtension } from '../../../hooks/use_ui_extension';
 
 const findStreamsForInputType = (
   inputType: string,
@@ -63,12 +62,6 @@ export const StepConfigurePackagePolicy: React.FunctionComponent<{
   validationResults,
   submitAttempted,
 }) => {
-  const hasUiExtension =
-    useUIExtension(
-      packageInfo.name,
-      from === 'edit' ? 'package-policy-edit' : 'package-policy-create'
-    ) !== undefined;
-
   // Configure inputs (and their streams)
   // Assume packages only export one config template for now
   const renderConfigureInputs = () =>
@@ -112,7 +105,7 @@ export const StepConfigurePackagePolicy: React.FunctionComponent<{
           })}
         </EuiFlexGroup>
       </>
-    ) : hasUiExtension ? null : (
+    ) : (
       <EuiEmptyPrompt
         iconType="checkInCircleFilled"
         iconColor="secondary"

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_define_package_policy.tsx

@@ -47,17 +47,12 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
         .sort();
 
       updatePackagePolicy({
-        name:
-          // For Endpoint packages, the user must fill in the name, thus we don't attempt to generate
-          // a default one here.
-          // FIXME: Improve package policies name uniqueness - https://github.com/elastic/kibana/issues/72948
-          packageInfo.name !== 'endpoint'
-            ? `${packageInfo.name}-${
-                pkgPoliciesWithMatchingNames.length
-                  ? pkgPoliciesWithMatchingNames[pkgPoliciesWithMatchingNames.length - 1] + 1
-                  : 1
-              }`
-            : '',
+        // FIXME: Improve package policies name uniqueness - https://github.com/elastic/kibana/issues/72948
+        name: `${packageInfo.name}-${
+          pkgPoliciesWithMatchingNames.length
+            ? pkgPoliciesWithMatchingNames[pkgPoliciesWithMatchingNames.length - 1] + 1
+            : 1
+        }`,
         package: {
           name: packageInfo.name,
           title: packageInfo.title,

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx

@@ -305,20 +305,23 @@ export const EditPackagePolicyPage: React.FunctionComponent = () => {
             validationResults={validationResults!}
           />
 
-          <StepConfigurePackagePolicy
-            from={'edit'}
-            packageInfo={packageInfo}
-            packagePolicy={packagePolicy}
-            packagePolicyId={packagePolicyId}
-            updatePackagePolicy={updatePackagePolicy}
-            validationResults={validationResults!}
-            submitAttempted={formState === 'INVALID'}
-          />
+          {/* Only show the out-of-box configuration step if a UI extension is NOT registered */}
+          {!ExtensionView && (
+            <StepConfigurePackagePolicy
+              from={'edit'}
+              packageInfo={packageInfo}
+              packagePolicy={packagePolicy}
+              packagePolicyId={packagePolicyId}
+              updatePackagePolicy={updatePackagePolicy}
+              validationResults={validationResults!}
+              submitAttempted={formState === 'INVALID'}
+            />
+          )}
 
-          {packagePolicy.policy_id &&
+          {ExtensionView &&
+            packagePolicy.policy_id &&
             packagePolicy.package?.name &&
-            originalPackagePolicy &&
-            ExtensionView && (
+            originalPackagePolicy && (
               <ExtensionWrapper>
                 <ExtensionView
                   policy={originalPackagePolicy}

x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_extension.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { PackagePolicyCreateExtensionComponentProps } from '../../../../../../../fleet/public';
@@ -14,7 +14,21 @@ import { PackagePolicyCreateExtensionComponentProps } from '../../../../../../..
  * for use in the Ingest app create / edit package policy
  */
 export const EndpointPolicyCreateExtension = memo<PackagePolicyCreateExtensionComponentProps>(
-  () => {
+  ({ newPolicy, onChange }) => {
+    // Fleet will initialize the create form with a default name for the integratin policy, however,
+    // for endpoint security, we want the user to explicitely type in a name, so we blank it out
+    // only during 1st component render (thus why the eslint disabled rule below).
+    useEffect(() => {
+      onChange({
+        isValid: false,
+        updatedPolicy: {
+          ...newPolicy,
+          name: '',
+        },
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
       <>
         <EuiSpacer size="m" />