diff --git a/packages/synapse-react-client/src/components/QueryWrapperErrorBoundary.tsx b/packages/synapse-react-client/src/components/QueryWrapperErrorBoundary.tsx index c9ee6c2c0b..f91fa921fd 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperErrorBoundary.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperErrorBoundary.tsx @@ -7,6 +7,7 @@ import { ErrorBoundary, ErrorBoundaryPropsWithComponent, } from 'react-error-boundary' +import SqlEditor from './SynapseTable/SqlEditor' /** * Error boundary that automatically pulls the error from QueryContext. If 403, shows entity actions required @@ -42,6 +43,7 @@ export function QueryWrapperErrorBoundary({ } return (
+
) diff --git a/packages/synapse-react-client/src/components/SynapseTable/SqlEditor.tsx b/packages/synapse-react-client/src/components/SynapseTable/SqlEditor.tsx index 0a3b573229..152647deda 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SqlEditor.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SqlEditor.tsx @@ -8,6 +8,8 @@ import IconSvg from '../IconSvg' export type SqlEditorProps = { helpMessage?: string helpUrl?: string + // SWC-7094: many errors occur due to experimenting with the query. Provide the SqlEditor (if shown) in the QueryWrapperErrorBoundary, and on search reset the error boundary. + resetErrorBoundary?: (...args: Array) => void } const helpMessageCopy = @@ -18,6 +20,7 @@ const helpLink = export const SqlEditor: React.FunctionComponent = ({ helpMessage = helpMessageCopy, helpUrl = helpLink, + resetErrorBoundary, }: SqlEditorProps) => { const { executeQueryRequest, getCurrentQueryRequest } = useQueryContext() const { showSqlEditor } = useQueryVisualizationContext() @@ -41,6 +44,9 @@ export const SqlEditor: React.FunctionComponent = ({ const search = (event: React.SyntheticEvent) => { event.preventDefault() + if (resetErrorBoundary) { + resetErrorBoundary() + } executeQueryRequest(request => { request.query.sql = sql request.query.offset = 0 diff --git a/packages/synapse-react-client/test/containers/SqlEditor.test.tsx b/packages/synapse-react-client/test/containers/SqlEditor.test.tsx index 84844c58b7..8ddff054b4 100644 --- a/packages/synapse-react-client/test/containers/SqlEditor.test.tsx +++ b/packages/synapse-react-client/test/containers/SqlEditor.test.tsx @@ -12,6 +12,7 @@ import { import SqlEditor from '../../src/components/SynapseTable/SqlEditor' import { createWrapper } from '../../src/testutils/TestingLibraryUtils' +const mockResetErrorBoundary = jest.fn() const renderComponent = ( queryContext: Partial, queryVisualizationContext: Partial, @@ -21,7 +22,7 @@ const renderComponent = ( - + , { @@ -74,6 +75,7 @@ describe('SqlEditor tests', () => { expect(mockExecuteQueryRequest).toHaveBeenCalled() const queryTransformFn = mockExecuteQueryRequest.mock.lastCall[0] expect(typeof queryTransformFn).toBe('function') + expect(mockResetErrorBoundary).toHaveBeenCalled() expect( queryTransformFn({ query: {},