Merge pull request #1267 from jay-hodgson/SWC-7094

SWC-7094
Sage-Bionetworks · Oct 14, 2024 · e54a1f8 · e54a1f8
2 parents 94d2481 + 9dd166b
commit e54a1f8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git 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 (
           <div className={`ErrorBannerWrapper`}>
+            <SqlEditor resetErrorBoundary={props.resetErrorBoundary} />
             <ErrorBanner {...props} />
           </div>
         )

diff --git 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<unknown>) => void
 }
 
 const helpMessageCopy =
@@ -18,6 +20,7 @@ const helpLink =
 export const SqlEditor: React.FunctionComponent<SqlEditorProps> = ({
   helpMessage = helpMessageCopy,
   helpUrl = helpLink,
+  resetErrorBoundary,
 }: SqlEditorProps) => {
   const { executeQueryRequest, getCurrentQueryRequest } = useQueryContext()
   const { showSqlEditor } = useQueryVisualizationContext()
@@ -41,6 +44,9 @@ export const SqlEditor: React.FunctionComponent<SqlEditorProps> = ({
 
   const search = (event: React.SyntheticEvent<HTMLFormElement>) => {
     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
@@ -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<QueryContextType>,
   queryVisualizationContext: Partial<QueryVisualizationContextType>,
@@ -21,7 +22,7 @@ const renderComponent = (
       <QueryVisualizationContextProvider
         queryVisualizationContext={queryVisualizationContext}
       >
-        <SqlEditor />
+        <SqlEditor resetErrorBoundary={mockResetErrorBoundary} />
       </QueryVisualizationContextProvider>
     </QueryContextProvider>,
     {
@@ -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: {},