[Fleet] Modal to allow user to force install an unverified package

x-pack/plugins/fleet/common/types/rest_spec/package_policy.ts

@@ -33,7 +33,7 @@ export interface GetOnePackagePolicyResponse {
 }
 
 export interface CreatePackagePolicyRequest {
-  body: NewPackagePolicy;
+  body: NewPackagePolicy & { force?: boolean };
 }
 
 export interface CreatePackagePolicyResponse {

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx

@@ -12,6 +12,10 @@ import { safeLoad } from 'js-yaml';
 
 import { i18n } from '@kbn/i18n';
 
+import { useConfirmForceInstall } from '../../../../../../../integrations/hooks';
+
+import { isVerificationError } from '../../../../../../../../services';
+
 import type { MultiPageStepLayoutProps } from '../../types';
 import type { PackagePolicyFormState } from '../../../types';
 import type { NewPackagePolicy } from '../../../../../../types';
@@ -83,7 +87,7 @@ export const AddIntegrationPageStep: React.FC<MultiPageStepLayoutProps> = (props
   const { notifications } = useStartServices();
   const [formState, setFormState] = useState<PackagePolicyFormState>('VALID');
   const [validationResults, setValidationResults] = useState<PackagePolicyValidationResults>();
-
+  const confirmForceInstall = useConfirmForceInstall();
   const [packagePolicy, setPackagePolicy] = useState<NewPackagePolicy>({
     name: '',
     description: '',
@@ -136,32 +140,59 @@ export const AddIntegrationPageStep: React.FC<MultiPageStepLayoutProps> = (props
   );
 
   // Save package policy
-  const savePackagePolicy = async (pkgPolicy: NewPackagePolicy) => {
+  const savePackagePolicy = async ({
+    newPackagePolicy,
+    force,
+  }: {
+    newPackagePolicy: NewPackagePolicy;
+    force?: boolean;
+  }) => {
     setFormState('LOADING');
-    const result = await sendCreatePackagePolicy(pkgPolicy);
+    const result = await sendCreatePackagePolicy({ ...newPackagePolicy, force });
     setFormState('SUBMITTED');
     return result;
   };
 
-  const onSubmit = useCallback(async () => {
-    const hasErrors = validationResults ? validationHasErrors(validationResults) : false;
+  const onSubmit = useCallback(
+    async ({ force = false }: { force?: boolean } = {}) => {
+      const hasErrors = validationResults ? validationHasErrors(validationResults) : false;
 
-    if (formState === 'VALID' && hasErrors) {
-      setFormState('INVALID');
-      return;
-    }
-    setFormState('LOADING');
+      if (formState === 'VALID' && hasErrors) {
+        setFormState('INVALID');
+        return;
+      }
+      setFormState('LOADING');
 
-    const { error } = await savePackagePolicy(packagePolicy);
-    if (error) {
-      notifications.toasts.addError(error, {
-        title: 'Error',
-      });
-      setFormState('VALID');
-    } else {
-      onNext();
-    }
-  }, [validationResults, formState, packagePolicy, notifications.toasts, onNext]);
+      const { error } = await savePackagePolicy({ newPackagePolicy: packagePolicy, force });
+      if (error) {
+        if (isVerificationError(error)) {
+          const forceInstall = await confirmForceInstall(packageInfo);
+
+          if (forceInstall) {
+            onSubmit({ force: true });
+          } else {
+            setFormState('VALID');
+          }
+          return;
+        }
+        notifications.toasts.addError(error, {
+          title: 'Error',
+        });
+        setFormState('VALID');
+      } else {
+        onNext();
+      }
+    },
+    [
+      validationResults,
+      formState,
+      packagePolicy,
+      notifications.toasts,
+      confirmForceInstall,
+      packageInfo,
+      onNext,
+    ]
+  );
 
   useEffect(() => {
     const getBasePolicy = async () => {

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

@@ -24,7 +24,10 @@ import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 import { safeLoad } from 'js-yaml';
 
 import { useCancelAddPackagePolicy, useOnSaveNavigate } from '../hooks';
+import type { CreatePackagePolicyRequest } from '../../../../../../../common';
+
 import { dataTypes, FLEET_SYSTEM_PACKAGE, splitPkgKey } from '../../../../../../../common';
+import { useConfirmForceInstall } from '../../../../../integrations/hooks';
 import type {
   AgentPolicy,
   NewAgentPolicy,
@@ -44,7 +47,7 @@ import { Loading, Error, ExtensionWrapper } from '../../../../components';
 import { agentPolicyFormValidation, ConfirmDeployAgentPolicyModal } from '../../components';
 import { useUIExtension } from '../../../../hooks';
 import type { PackagePolicyEditExtensionComponentProps } from '../../../../types';
-import { pkgKeyFromPackageInfo } from '../../../../services';
+import { pkgKeyFromPackageInfo, isVerificationError } from '../../../../services';
 
 import type {
   PackagePolicyFormState,
@@ -152,6 +155,9 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
 
   const navigateAddAgentHelp = (policy?: PackagePolicy) =>
     onSaveNavigate(policy, ['showAddAgentHelp']);
+
+  const confirmForceInstall = useConfirmForceInstall();
+
   // Validation state
   const [validationResults, setValidationResults] = useState<PackagePolicyValidationResults>();
   const [hasAgentPolicyError, setHasAgentPolicyError] = useState<boolean>(false);
@@ -297,7 +303,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
 
   // Save package policy
   const savePackagePolicy = useCallback(
-    async (pkgPolicy: NewPackagePolicy) => {
+    async (pkgPolicy: CreatePackagePolicyRequest['body']) => {
       setFormState('LOADING');
       const result = await sendCreatePackagePolicy(pkgPolicy);
       setFormState(agentCount ? 'SUBMITTED' : 'SUBMITTED_NO_AGENTS');
@@ -306,101 +312,119 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
     [agentCount]
   );
 
-  const createAgentPolicy = useCallback(async (): Promise<string | undefined> => {
-    let policyId;
-    setFormState('LOADING');
-    // do not create agent policy with system integration if package policy already is for system package
-    const packagePolicyIsSystem = packagePolicy?.package?.name === FLEET_SYSTEM_PACKAGE;
-    const resp = await sendCreateAgentPolicy(newAgentPolicy, {
-      withSysMonitoring: withSysMonitoring && !packagePolicyIsSystem,
-    });
-    if (resp.error) {
-      setFormState('VALID');
-      throw resp.error;
-    }
-    if (resp.data) {
-      policyId = resp.data.item.id;
-      setAgentPolicy(resp.data.item);
-
-      updatePackagePolicy({ policy_id: policyId });
-    }
-    return policyId;
-  }, [newAgentPolicy, updatePackagePolicy, withSysMonitoring, packagePolicy]);
+  const createAgentPolicy = useCallback(
+    async ({ force }: { force?: boolean } = {}): Promise<string | undefined> => {
+      let policyId;
+      setFormState('LOADING');
+      // do not create agent policy with system integration if package policy already is for system package
+      const packagePolicyIsSystem = packagePolicy?.package?.name === FLEET_SYSTEM_PACKAGE;
+      const resp = await sendCreateAgentPolicy(newAgentPolicy, {
+        withSysMonitoring: withSysMonitoring && !packagePolicyIsSystem,
+      });
+      if (resp.error) {
+        setFormState('VALID');
+        throw resp.error;
+      }
+      if (resp.data) {
+        policyId = resp.data.item.id;
+        setAgentPolicy(resp.data.item);
+        setSelectedPolicyTab(SelectedPolicyTab.EXISTING);
+        updatePackagePolicy({ policy_id: policyId });
+      }
+      return policyId;
+    },
+    [newAgentPolicy, updatePackagePolicy, withSysMonitoring, packagePolicy]
+  );
 
-  const onSubmit = useCallback(async () => {
-    if (formState === 'VALID' && hasErrors) {
-      setFormState('INVALID');
-      return;
-    }
-    if (agentCount !== 0 && formState !== 'CONFIRM') {
-      setFormState('CONFIRM');
-      return;
-    }
-    let policyId;
-    if (selectedPolicyTab === SelectedPolicyTab.NEW) {
-      try {
-        policyId = await createAgentPolicy();
-      } catch (e) {
-        notifications.toasts.addError(e, {
-          title: i18n.translate('xpack.fleet.createAgentPolicy.errorNotificationTitle', {
-            defaultMessage: 'Unable to create agent policy',
-          }),
-        });
+  const onSubmit = useCallback(
+    async ({ force }: { force?: boolean } = {}) => {
+      if (formState === 'VALID' && hasErrors) {
+        setFormState('INVALID');
         return;
       }
-    }
-
-    setFormState('LOADING');
-    // passing pkgPolicy with policy_id here as setPackagePolicy doesn't propagate immediately
-    const { error, data } = await savePackagePolicy({
-      ...packagePolicy,
-      policy_id: policyId ?? packagePolicy.policy_id,
-    });
-    if (!error) {
-      setSavedPackagePolicy(data!.item);
-
-      const hasAgentsAssigned = agentCount && agentPolicy;
-      if (!hasAgentsAssigned) {
-        setFormState('SUBMITTED_NO_AGENTS');
+      if (agentCount !== 0 && formState !== 'CONFIRM') {
+        setFormState('CONFIRM');
         return;
       }
-      onSaveNavigate(data!.item);
-
-      notifications.toasts.addSuccess({
-        title: i18n.translate('xpack.fleet.createPackagePolicy.addedNotificationTitle', {
-          defaultMessage: `'{packagePolicyName}' integration added.`,
-          values: {
-            packagePolicyName: packagePolicy.name,
-          },
-        }),
-        text: hasAgentsAssigned
-          ? i18n.translate('xpack.fleet.createPackagePolicy.addedNotificationMessage', {
-              defaultMessage: `Fleet will deploy updates to all agents that use the '{agentPolicyName}' policy.`,
-              values: {
-                agentPolicyName: agentPolicy!.name,
-              },
-            })
-          : undefined,
-        'data-test-subj': 'packagePolicyCreateSuccessToast',
-      });
-    } else {
-      notifications.toasts.addError(error, {
-        title: 'Error',
+      let policyId;
+      if (selectedPolicyTab === SelectedPolicyTab.NEW) {
+        try {
+          policyId = await createAgentPolicy({ force });
+        } catch (e) {
+          notifications.toasts.addError(e, {
+            title: i18n.translate('xpack.fleet.createAgentPolicy.errorNotificationTitle', {
+              defaultMessage: 'Unable to create agent policy',
+            }),
+          });
+          return;
+        }
+      }
+
+      setFormState('LOADING');
+      // passing pkgPolicy with policy_id here as setPackagePolicy doesn't propagate immediately
+      const { error, data } = await savePackagePolicy({
+        ...packagePolicy,
+        policy_id: policyId ?? packagePolicy.policy_id,
+        force,
       });
-      setFormState('VALID');
-    }
-  }, [
-    formState,
-    hasErrors,
-    agentCount,
-    savePackagePolicy,
-    onSaveNavigate,
-    agentPolicy,
-    notifications.toasts,
-    packagePolicy,
-    selectedPolicyTab,
-    createAgentPolicy,
-  ]);
+      if (!error) {
+        setSavedPackagePolicy(data!.item);
+
+        const hasAgentsAssigned = agentCount && agentPolicy;
+        if (!hasAgentsAssigned) {
+          setFormState('SUBMITTED_NO_AGENTS');
+          return;
+        }
+        onSaveNavigate(data!.item);
+
+        notifications.toasts.addSuccess({
+          title: i18n.translate('xpack.fleet.createPackagePolicy.addedNotificationTitle', {
+            defaultMessage: `'{packagePolicyName}' integration added.`,
+            values: {
+              packagePolicyName: packagePolicy.name,
+            },
+          }),
+          text: hasAgentsAssigned
+            ? i18n.translate('xpack.fleet.createPackagePolicy.addedNotificationMessage', {
+                defaultMessage: `Fleet will deploy updates to all agents that use the '{agentPolicyName}' policy.`,
+                values: {
+                  agentPolicyName: agentPolicy!.name,
+                },
+              })
+            : undefined,
+          'data-test-subj': 'packagePolicyCreateSuccessToast',
+        });
+      } else {
+        if (isVerificationError(error)) {
+          const forceInstall = await confirmForceInstall(packagePolicy.package!);
+
+          if (forceInstall) {
+            onSubmit({ force: true });
+          } else {
+            setFormState('VALID');
+          }
+          return;
+        }
+        notifications.toasts.addError(error, {
+          title: 'Error',
+        });
+        setFormState('VALID');
+      }
+    },
+    [
+      formState,
+      hasErrors,
+      agentCount,
+      selectedPolicyTab,
+      savePackagePolicy,
+      packagePolicy,
+      createAgentPolicy,
+      notifications.toasts,
+      agentPolicy,
+      onSaveNavigate,
+      confirmForceInstall,
+    ]
+  );
 
   const integrationInfo = useMemo(
     () =>
@@ -597,7 +621,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    onClick={onSubmit}
+                    onClick={() => onSubmit()}
                     isLoading={formState === 'LOADING'}
                     disabled={formState !== 'VALID' || hasAgentPolicyError || !validationResults}
                     iconType="save"

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

@@ -131,6 +131,7 @@ jest.mock('../../../../integrations/hooks', () => {
   return {
     ...jest.requireActual('../../../../integrations/hooks'),
     useGetOnePackagePolicy: jest.fn(),
+    useConfirmForceInstall: jest.fn(),
   };
 });
 

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.test.tsx

@@ -16,6 +16,9 @@ import { sendGetAgents, sendGetAgentStatus } from '../../../hooks';
 
 import { AgentListPage } from '.';
 
+jest.mock('../../../../integrations/hooks/use_confirm_force_install', () => ({
+  useConfirmForceInstall: () => <>confirmForceInstall</>,
+}));
 jest.mock('../../../hooks', () => ({
   ...jest.requireActual('../../../hooks'),
   sendGetAgents: jest.fn(),

x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/integration_debugger.tsx

@@ -110,7 +110,7 @@ export const IntegrationDebugger: React.FunctionComponent = () => {
     const installResponse = await sendInstallPackage(integration.name, integration.version);
 
     if (installResponse.error) {
-      notifications.toasts.addError(installResponse.error, {
+      notifications.toasts.addError(new Error(installResponse.error.message), {
         title: i18n.translate('xpack.fleet.debug.integrationDebugger.reinstall.error', {
           defaultMessage: 'Error reinstalling {integrationTitle}',
           values: { integrationTitle: integration.title },

x-pack/plugins/fleet/public/applications/integrations/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './use_local_search';
 export * from './use_package_install';
 export * from './use_agent_policy_context';
 export * from './use_integrations_state';
+export * from './use_confirm_force_install';