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, } );