[Automatic Import] Fix bulk delete and done button (elastic#262686)

Disables bulk delete if any unapproved integrations are selected in the checklist.
Disables done button if no edits were made to the integration details form when in edit mode

Author: robester0403

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/forms/constants.ts

@@ -23,3 +23,5 @@ export const DEFAULT_INTEGRATION_VALUES = {
   logo: undefined,
   connectorId: '',
 };
+
+export const INTEGRATION_DETAILS_UNTRACKED_FIELDS = ['connectorId', 'integrationId'];

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/forms/integration_form.test.tsx

@@ -22,6 +22,7 @@ jest.mock('../../../common/lib/api', () => ({
       items: mockExistingPackageNames.map((id) => ({ id })),
     })
   ),
+  getAllIntegrations: jest.fn(() => Promise.resolve([])),
 }));
 
 const mockServices = coreMock.createStart();
@@ -30,7 +31,7 @@ const mockServices = coreMock.createStart();
 const FormTestConsumer: React.FC<{ onSubmitResult?: (data: IntegrationFormData) => void }> = ({
   onSubmitResult,
 }) => {
-  const { isValid, submit } = useIntegrationForm();
+  const { isValid, isFormModified, submit } = useIntegrationForm();
 
   const handleSubmit = async () => {
     const result = await submit();
@@ -69,6 +70,15 @@ const FormTestConsumer: React.FC<{ onSubmitResult?: (data: IntegrationFormData)
           />
         )}
       </UseField>
+      <UseField<string | undefined> path="logo">
+        {(field) => (
+          <input
+            data-test-subj="logoInput"
+            value={(field.value as string) || ''}
+            onChange={(e) => field.setValue(e.target.value || undefined)}
+          />
+        )}
+      </UseField>
       <UseField path="dataStreamTitle">
         {(field) => (
           <input
@@ -115,6 +125,7 @@ const FormTestConsumer: React.FC<{ onSubmitResult?: (data: IntegrationFormData)
         )}
       </UseField>
       <span data-test-subj="isValid">{String(isValid)}</span>
+      <span data-test-subj="isFormModified">{String(isFormModified)}</span>
       <button type="button" data-test-subj="submitButton" onClick={handleSubmit}>
         {'Submit'}
       </button>
@@ -225,6 +236,97 @@ describe('IntegrationFormProvider', () => {
     });
   });
 
+  describe('useIntegrationForm hook - isFormModified state', () => {
+    it('should return isFormModified=false when no fields have changed from initial values', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: { title: 'My Integration', description: 'My Description' },
+      });
+
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('false');
+    });
+
+    it('should return isFormModified=true when title is changed', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: { title: 'My Integration', description: 'My Description' },
+      });
+
+      await act(async () => {
+        fireEvent.change(getByTestId('titleInput'), { target: { value: 'Updated Title' } });
+      });
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('true');
+    });
+
+    it('should return isFormModified=true when description is changed', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: { title: 'My Integration', description: 'My Description' },
+      });
+
+      await act(async () => {
+        fireEvent.change(getByTestId('descriptionInput'), {
+          target: { value: 'Updated Description' },
+        });
+      });
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('true');
+    });
+
+    it('should return isFormModified=true when logo is changed', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: { title: 'My Integration', description: 'My Description' },
+      });
+
+      await act(async () => {
+        fireEvent.change(getByTestId('logoInput'), { target: { value: 'base64logodata' } });
+      });
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('true');
+    });
+
+    it('should return isFormModified=false when title is changed back to initial value', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: { title: 'My Integration', description: 'My Description' },
+      });
+
+      await act(async () => {
+        fireEvent.change(getByTestId('titleInput'), { target: { value: 'Updated Title' } });
+      });
+      await advancePastDebounce();
+      expect(getByTestId('isFormModified').textContent).toBe('true');
+
+      await act(async () => {
+        fireEvent.change(getByTestId('titleInput'), { target: { value: 'My Integration' } });
+      });
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('false');
+    });
+
+    it('should return isFormModified=false when only connectorId is changed', async () => {
+      const { getByTestId } = renderForm({
+        initialValue: {
+          title: 'My Integration',
+          description: 'My Description',
+          connectorId: 'connector-original',
+        },
+      });
+
+      await act(async () => {
+        fireEvent.change(getByTestId('connectorIdInput'), {
+          target: { value: 'connector-updated' },
+        });
+      });
+      await advancePastDebounce();
+
+      expect(getByTestId('isFormModified').textContent).toBe('false');
+    });
+  });
+
   describe('form submission', () => {
     it('should call onSubmit with form data when all required fields are filled', async () => {
       const onSubmit = jest.fn().mockResolvedValue(undefined);

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/forms/integration_form.tsx

@@ -9,6 +9,7 @@ import {
   useForm,
   useFormContext,
   useFormData,
+  useFormIsModified,
   Form,
   type FormConfig,
   type FormHook,
@@ -17,7 +18,11 @@ import { createFormSchema, REQUIRED_FIELDS } from './integration_form_validation
 import type { IntegrationFormData } from './types';
 import { useKibana, getInstalledPackages, getAllIntegrations } from '../../../common';
 import * as i18n from './translations';
-import { DEFAULT_DATA_STREAM_VALUES, DEFAULT_INTEGRATION_VALUES } from './constants';
+import {
+  DEFAULT_DATA_STREAM_VALUES,
+  DEFAULT_INTEGRATION_VALUES,
+  INTEGRATION_DETAILS_UNTRACKED_FIELDS,
+} from './constants';
 import { normalizeTitleName } from '../../../common/lib/helper_functions';
 
 export interface IntegrationFormProviderProps {
@@ -132,6 +137,7 @@ export const IntegrationFormProvider: React.FC<IntegrationFormProviderProps> = (
 export const useIntegrationForm = () => {
   const form = useFormContext<IntegrationFormData>();
   const [formData] = useFormData<IntegrationFormData>();
+  const isFormModified = useFormIsModified({ discard: INTEGRATION_DETAILS_UNTRACKED_FIELDS });
 
   // Check if all required fields for the current context are filled
   const isValid = useMemo(() => {
@@ -161,6 +167,7 @@ export const useIntegrationForm = () => {
     form: form as FormHook<IntegrationFormData>,
     formData,
     isValid,
+    isFormModified,
     submit: () => form.submit(),
     reset: () => form.reset(),
     validate: () => form.validate(),

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/integration_management.test.tsx

@@ -97,7 +97,7 @@ jest.mock('../../common/components/connector_selector', () => ({
 
 jest.mock('./forms/integration_form', () => ({
   IntegrationFormProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  useIntegrationForm: () => ({ formData: {}, form: {}, submit: mockSubmit }),
+  useIntegrationForm: () => ({ formData: {}, form: {}, submit: mockSubmit, isFormModified: true }),
 }));
 
 jest.mock('../../common/components/button_footer', () => ({

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/integration_management.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useCallback, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import useObservable from 'react-use/lib/useObservable';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import {
@@ -44,9 +44,11 @@ const IntegrationManagementContents: React.FC<IntegrationManagementContentsProps
   navigateToManage,
 }) => {
   const { integrationId } = useParams<{ integrationId?: string }>();
+  const { state: locationState } = useLocation<{ isNew?: boolean }>();
+  const isNewlyCreated = locationState?.isNew === true;
   const { integration } = useGetIntegrationById(integrationId);
   const { deleteIntegrationMutation } = useDeleteIntegration();
-  const { submit } = useIntegrationForm();
+  const { submit, isFormModified } = useIntegrationForm();
   const hasDataStreams = (integration?.dataStreams?.length ?? 0) > 0;
   const isDeletingDataStream =
     integration?.dataStreams?.some((ds) => ds.status === 'deleting') ?? false;
@@ -107,7 +109,11 @@ const IntegrationManagementContents: React.FC<IntegrationManagementContentsProps
       </KibanaPageTemplate>
       <ButtonsFooter
         onAction={handleDone}
-        isActionDisabled={!hasDataStreams || isDeletingDataStream}
+        isActionDisabled={
+          !hasDataStreams ||
+          isDeletingDataStream ||
+          (Boolean(integrationId) && !isNewlyCreated && !isFormModified)
+        }
         isCancelDisabled={isDeletingDataStream}
         onCancel={handleCancel}
       />

x-pack/platform/plugins/shared/automatic_import/public/components/integration_management/management_contents/data_streams/create_data_stream_flyout.tsx

@@ -501,7 +501,10 @@ export const CreateDataStreamFlyout: React.FC<CreateDataStreamFlyoutProps> = ({
       onClose();
 
       if (!currentIntegrationId && result.integration_id) {
-        application.navigateToApp(PLUGIN_ID, { path: `/edit/${result.integration_id}` });
+        application.navigateToApp(PLUGIN_ID, {
+          path: `/edit/${result.integration_id}`,
+          state: { isNew: true },
+        });
       }
     } catch (error) {
       notifications.toasts.addError(error instanceof Error ? error : new Error('Unknown error'), {

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/manage_integrations_table.tsx

@@ -22,6 +22,7 @@ import {
   EuiSelectable,
   EuiInMemoryTable,
   EuiText,
+  EuiToolTip,
   useEuiTheme,
   EuiCallOut,
 } from '@elastic/eui';
@@ -422,7 +423,7 @@ export const ManageIntegrationsTable: React.FC<{
     }
   }, [selectedItems, installToCluster, installedPackageVersions]);
 
-  const hasApprovedSelected = selectedItems.some((item) => item.status === 'approved');
+  const canBulkInstall = selectedItems.every((item) => item.status === 'approved');
 
   const columns = useMemo<Array<EuiBasicTableColumn<CreatedIntegrationRow>>>(
     () => [
@@ -816,22 +817,37 @@ export const ManageIntegrationsTable: React.FC<{
               />
             </EuiButton>
           </EuiFlexItem>
-          {hasApprovedSelected && (
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                size="s"
-                iconType="exportAction"
-                isLoading={isBulkInstalling}
-                onClick={handleBulkInstall}
-                data-test-subj="manageIntegrationsBulkInstallBtn"
-              >
-                <FormattedMessage
-                  id="xpack.fleet.epmList.manageIntegrations.bulkInstall"
-                  defaultMessage="Install"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          )}
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              content={
+                !canBulkInstall
+                  ? i18n.translate(
+                      'xpack.fleet.epmList.manageIntegrations.bulkInstallDisabledTooltip',
+                      {
+                        defaultMessage:
+                          'Not all selected integrations are approved. Deselect unapproved integrations to install.',
+                      }
+                    )
+                  : undefined
+              }
+            >
+              <span>
+                <EuiButton
+                  size="s"
+                  iconType="exportAction"
+                  isLoading={isBulkInstalling}
+                  isDisabled={!canBulkInstall}
+                  onClick={handleBulkInstall}
+                  data-test-subj="manageIntegrationsBulkInstallBtn"
+                >
+                  <FormattedMessage
+                    id="xpack.fleet.epmList.manageIntegrations.bulkInstall"
+                    defaultMessage="Install"
+                  />
+                </EuiButton>
+              </span>
+            </EuiToolTip>
+          </EuiFlexItem>
         </EuiFlexGroup>
       ) : (
         <EuiText size="s">