UIPQB-57 400 error should be reported in the UI (#64)

CHANGELOG.md

@@ -32,4 +32,5 @@
 * [UIPQB-48](https://issues.folio.org/browse/UIPQB-48) "Show columns" dropdown doesn't fit in the screen.
 * [UIPQB-47](https://issues.folio.org/browse/UIPQB-47) 400 error blocks save or further action in query builder.
 * [UIPQB-51](https://issues.folio.org/browse/UIPQB-51) Dropdown typeahead should use contains not starts with.
+* [UIPQB-57](https://issues.folio.org/browse/UIPQB-57) 400 error should be reported in the UI
 * [UIPQB-55](https://issues.folio.org/browse/UIPQB-55) Regular expressions are incorrect for contains and starts_with operators

src/QueryBuilder/QueryBuilder/QueryBuilderModal/QueryBuilderModal.js

@@ -8,7 +8,7 @@ import {
   Loading,
   Row,
 } from '@folio/stripes/components';
-
+import { useShowCallout } from '@folio/stripes-acq-components';
 import { useQueryClient } from '@tanstack/react-query';
 import css from './QueryBuilderModal.css';
 import { RepeatableFields } from './RepeatableFields/RepeatableFields';
@@ -42,6 +42,7 @@ export const QueryBuilderModal = ({
 }) => {
   const intl = useIntl();
   const queryClient = useQueryClient();
+  const showCallout = useShowCallout();
 
   const { entityType } = useEntityType({ entityTypeDataSource });
 
@@ -76,6 +77,13 @@ export const QueryBuilderModal = ({
     onQueryTestSuccess: () => {
       setIsQueryRetrieved(false);
     },
+    onQueryTestFail: () => {
+      showCallout({
+        message: <FormattedMessage id="ui-plugin-query-builder.error.sww" />,
+        type: 'error',
+      });
+      setIsQueryRetrieved(false);
+    },
   });
 
   const { runQuery, isRunQueryLoading } = useRunQuery({

translations/ui-plugin-query-builder/en.json

@@ -25,5 +25,7 @@
 
   "viewer.retrieving": "Retrieving...",
   "result.inProgress": "Query in progress",
-  "result.emptyMessage": "The list contains no items"
+  "result.emptyMessage": "The list contains no items",
+
+  "error.sww": "Something went wrong"
 }