Disabled import button while no file is attached (#125180) (#125282)

(cherry picked from commit ea9255342e)

Co-authored-by: Christiane (Tina) Heiligers <christiane.heiligers@elastic.co>

src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap

@@ -378,6 +378,7 @@ exports[`Flyout should render import step 1`] = `
         <EuiButton
           data-test-subj="importSavedObjectsImportBtn"
           fill={true}
+          isDisabled={true}
           isLoading={false}
           onClick={[Function]}
           size="s"

src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx

@@ -92,6 +92,52 @@ describe('Flyout', () => {
     expect(component.state('file')).toBe(undefined);
   });
 
+  it('should only allow import once a file is selected', async () => {
+    const component = shallowRender(defaultProps);
+
+    // Ensure all promises resolve
+    await Promise.resolve();
+    // Ensure state changes are reflected
+    component.update();
+
+    expect(component.state('file')).toBe(undefined);
+    const importButton = await component.find(
+      'EuiButton[data-test-subj="importSavedObjectsImportBtn"]'
+    );
+    expect(importButton.prop('isDisabled')).toBe(true);
+    component.find('EuiFilePicker').simulate('change', [mockFile]);
+
+    // Ensure state changes are reflected
+    component.update();
+    const enabledImportButton = await component.find(
+      'EuiButton[data-test-subj="importSavedObjectsImportBtn"]'
+    );
+    expect(enabledImportButton.prop('isDisabled')).toBe(false);
+  });
+
+  it('should show "missing_file" error on import if import button is bypassed and no file is selected', async () => {
+    const component = shallowRender(defaultProps);
+
+    // Ensure all promises resolve
+    await new Promise((resolve) => process.nextTick(resolve));
+    // Ensure the state changes are reflected
+    component.update();
+
+    // Go through the import flow
+    await component.instance().import();
+    component.update();
+    // Ensure all promises resolve
+    await Promise.resolve();
+
+    expect(component.state('error')).toBe('missing_file');
+    expect(component.state('status')).toBe('error');
+
+    const callOutText = await component
+      .find('p[data-test-subj="importSavedObjectsErrorText"]')
+      .text();
+    expect(callOutText).toBe('missing_file');
+  });
+
   describe('conflicts', () => {
     beforeEach(() => {
       importFileMock.mockImplementation(() => ({

src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx

@@ -146,11 +146,18 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
   import = async () => {
     const { http } = this.props;
     const { file, importMode } = this.state;
+    if (file === undefined) {
+      this.setState({
+        status: 'error',
+        error: 'missing_file',
+      });
+      return;
+    }
     this.setState({ status: 'loading', error: undefined });
 
     // Import the file
     try {
-      const response = await importFile(http, file!, importMode);
+      const response = await importFile(http, file, importMode);
       this.setState(processImportResponse(response), () => {
         // Resolve import errors right away if there's no index patterns to match
         // This will ask about overwriting each object, etc
@@ -486,7 +493,7 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
   }
 
   renderFooter() {
-    const { status } = this.state;
+    const { status, file } = this.state;
     const { done, close } = this.props;
 
     let confirmButton;
@@ -521,6 +528,7 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
           onClick={this.import}
           size="s"
           fill
+          isDisabled={file === undefined}
           isLoading={status === 'loading'}
           data-test-subj="importSavedObjectsImportBtn"
         >

test/functional/apps/management/_import_objects.ts

@@ -207,6 +207,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const isSavedObjectImported = objects.includes('saved object imported with index pattern');
         expect(isSavedObjectImported).to.be(true);
       });
+
+      it('should not allow import without a file added', async function () {
+        const importActionDisabled = await PageObjects.savedObjects.importDisabled();
+        expect(importActionDisabled).to.eql('true');
+      });
     });
   });
 }

test/functional/page_objects/management/saved_objects_page.ts

@@ -58,6 +58,15 @@ export class SavedObjectsPageObject extends FtrService {
     await this.header.waitUntilLoadingHasFinished();
   }
 
+  async importDisabled() {
+    this.log.debug(`tryImport`);
+    this.log.debug(`Finding import action`);
+    await this.testSubjects.click('importObjects');
+    this.log.debug(`Finding import button`);
+    const importButton = await this.testSubjects.find('importSavedObjectsImportBtn');
+    return await importButton.getAttribute('disabled');
+  }
+
   async checkImportSucceeded() {
     await this.testSubjects.existOrFail('importSavedObjectsSuccess', { timeout: 20000 });
   }