diff --git a/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.test.tsx b/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.test.tsx
index 024f9b613480..e840a0f92a13 100644
--- a/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.test.tsx
+++ b/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();
+
+ 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();
const user = userEvent.setup();
diff --git a/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.tsx b/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.tsx
index f70c5fba0e5c..667894284896 100644
--- a/packages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.tsx
+++ b/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,
}
);