UIPQB-160: Update the text in the query builder after 3 attempts resu…

…lt in 500 errors (#191)
folio-org · Nov 29, 2024 · fa26481 · fa26481
1 parent d9a481c
commit fa26481
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Change history for ui-plugin-query-builder
 
 * [UIPQB-159](https://folio-org.atlassian.net/browse/UIPQB-159) [Lists] Empty columns are displaying when the user duplicates the list and the refresh is in progress
+* [UIPQB-160](https://folio-org.atlassian.net/browse/UIPQB-160) [QB] Update the text in the query builder after 3 attempts result in 500 errors.
 
 ## [1.2.4](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.2.4) (2024-11-27)
 

diff --git a/src/QueryBuilder/ResultViewer/ResultViewer.js b/src/QueryBuilder/ResultViewer/ResultViewer.js
@@ -56,6 +56,7 @@ export const ResultViewer = ({
     status,
     formatter,
     columnWidths,
+    isErrorOccurred,
   } = useAsyncDataSource({
     entityTypeDataSource,
     contentDataSource,
@@ -97,27 +98,43 @@ export const ResultViewer = ({
     const localizedTotalRecords = intl.formatNumber(totalRecords);
     const localizedCurrentRecordsCount = intl.formatNumber(currentRecordsCount);
 
-    return (
-      <Row between="xs">
-        <Col xs={10}>
-          <Headline size="large" margin="none" tag="h3">
-            {isListLoading && !totalRecords ?
-              intl.formatMessage({ id: 'ui-plugin-query-builder.result.inProgress' })
-              :
-              headline?.({
-                totalRecords: localizedTotalRecords,
-                currentRecordsCount: localizedCurrentRecordsCount,
-                defaultLimit,
-                status,
-              })}
-          </Headline>
-        </Col>
-        {headlineEnd?.({
-          currentRecordsCount: localizedCurrentRecordsCount,
-          status,
-        })}
-      </Row>
-    );
+    const renderErrorMessage = () => {
+      return (
+        <Row between="xs">
+          <Col xs={10}>
+            <Headline size="large" margin="none" tag="h3">
+              {intl.formatMessage({ id: 'ui-plugin-query-builder.error.occurredMessage' })}
+            </Headline>
+          </Col>
+        </Row>
+      );
+    };
+
+    const renderSuccessMessage = () => {
+      return (
+        <Row between="xs">
+          <Col xs={10}>
+            <Headline size="large" margin="none" tag="h3">
+              {isListLoading && !totalRecords ?
+                intl.formatMessage({ id: 'ui-plugin-query-builder.result.inProgress' })
+                :
+                headline?.({
+                  totalRecords: localizedTotalRecords,
+                  currentRecordsCount: localizedCurrentRecordsCount,
+                  defaultLimit,
+                  status,
+                })}
+            </Headline>
+          </Col>
+          {headlineEnd?.({
+            currentRecordsCount: localizedCurrentRecordsCount,
+            status,
+          })}
+        </Row>
+      );
+    };
+
+    return isErrorOccurred ? renderErrorMessage() : renderSuccessMessage();
   };
 
   const emptyResultMessage = intl.formatMessage(

diff --git a/src/hooks/useAsyncDataSource.js b/src/hooks/useAsyncDataSource.js
@@ -49,6 +49,7 @@ export const useAsyncDataSource = ({
   const debouncedContentQueryKeys = useDebounce(contentQueryKeys, 500);
   const [retryCount, setRetryCount] = useState(0);
   const [hasShownError, setHasShownError] = useState(false);
+  const [isErrorOccurred, setIsErrorOccurred] = useState(false);
   const maxRetries = 3;
   const { refetchInterval = noop, completeExecution = noop, keepPreviousData = false } = contentQueryOptions;
 
@@ -87,6 +88,7 @@ export const useAsyncDataSource = ({
               timeout: DEFAULT_TIMEOUT,
             });
             setHasShownError(true);
+            setIsErrorOccurred(true);
           }
 
           return 0;
@@ -97,6 +99,7 @@ export const useAsyncDataSource = ({
       onSuccess: (data) => {
         setRetryCount(0);
         setHasShownError(false);
+        setIsErrorOccurred(false);
         onSuccess(data);
       },
       onError: () => {
@@ -132,5 +135,6 @@ export const useAsyncDataSource = ({
     refetch,
     formatter,
     columnWidths,
+    isErrorOccurred,
   };
 };
diff --git a/translations/ui-plugin-query-builder/en.json b/translations/ui-plugin-query-builder/en.json
@@ -33,6 +33,7 @@
   "result.emptyMessage": "The list contains no items",
 
   "error.sww": "Something went wrong",
+  "error.occurredMessage": "An error occurred.",
 
   "ariaLabel.columnFilter": "Column filter input"
 }