fix(UI): schema upload dialog should not open if file upload dialog is open BED-8656

packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.test.tsx

@@ -26,6 +26,7 @@ const testFile = new File([JSON.stringify({ value: 'test' })], 'test.json', { ty
 
 const addNotificationMock = vi.fn();
 const checkPermissionMock = vi.fn().mockReturnValue(true);
+const showFileIngestDialogMock = { value: false };
 
 vi.mock('../../providers', async () => {
     const actual = await vi.importActual('../../providers');
@@ -48,6 +49,16 @@ vi.mock('../../hooks/usePermissions', async () => {
     };
 });
 
+vi.mock('../../hooks/useFileUploadDialogContext', async () => {
+    const actual = await vi.importActual('../../hooks');
+    return {
+        ...actual,
+        useFileUploadDialogContext: () => ({
+            showFileIngestDialog: showFileIngestDialogMock.value,
+        }),
+    };
+});
+
 const server = setupServer(
     rest.put('/api/v2/extensions', (req, res, ctx) => {
         return res(
@@ -87,6 +98,7 @@ afterEach(() => {
     server.resetHandlers();
     addNotificationMock.mockClear();
     checkPermissionMock.mockReturnValue(true);
+    showFileIngestDialogMock.value = false;
 });
 afterAll(() => {
     server.close();
@@ -120,6 +132,21 @@ describe('SchemaUploadDialog', () => {
         expect(screen.queryByRole('dialog', { name: 'Upload Schema Files' })).not.toBeInTheDocument();
     });
 
+    it('does not open the Schema Upload dialog via drag when the Quick Upload dialog is already open', async () => {
+        showFileIngestDialogMock.value = true;
+
+        const screen = render(<SchemaUploadDialog />);
+
+        const dragEvent = new Event('dragenter', { bubbles: true }) as any;
+        dragEvent.dataTransfer = {
+            types: ['Files'],
+            items: [{ kind: 'file', type: 'application/json' }],
+        };
+        document.dispatchEvent(dragEvent);
+
+        expect(screen.queryByRole('dialog', { name: 'Upload Schema Files' })).not.toBeInTheDocument();
+    });
+
     it('opens the dialog when the button is clicked', async () => {
         const screen = render(<SchemaUploadDialog />);
         const user = userEvent.setup();

packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.tsx

@@ -24,8 +24,8 @@ import {
     DialogTitle,
     DialogTrigger,
 } from 'doodle-ui';
-import { useState } from 'react';
-import { useExecuteOnFileDrag, usePermissions } from '../../hooks';
+import { useCallback, useState } from 'react';
+import { useExecuteOnFileDrag, useFileUploadDialogContext, usePermissions } from '../../hooks';
 import { Permission } from '../../utils';
 import { ConditionalTooltip } from '../ConditionalTooltip';
 import FileDrop from '../FileDrop';
@@ -39,15 +39,22 @@ export const SchemaUploadDialog = () => {
 
     const { checkPermission } = usePermissions();
     const hasUploadPermission = checkPermission(Permission.OPENGRAPH_WRITE);
+    const { showFileIngestDialog } = useFileUploadDialogContext();
+
+    const shouldRespondToDrag = useCallback(
+        () => hasUploadPermission && !showFileIngestDialog,
+        [hasUploadPermission, showFileIngestDialog]
+    );
 
     // Dragging a file into the window displays the dialog. The normal global file upload drag and drop behavior is
-    // disabled for the OpenGraph Management page
+    // disabled for the OpenGraph Management page, unless the user explicitly clicks on the Quick Upload button to open the Quick Upload Dialog
     useExecuteOnFileDrag(
         () => {
             if (hasUploadPermission) setDialogOpen(true);
         },
         {
             acceptedTypes: ['application/json'],
+            condition: shouldRespondToDrag,
         }
     );