From fa264816fce4ec131f3b5d7a942e73949ec310ff Mon Sep 17 00:00:00 2001
From: UladzislauKutarkin
 <72550466+UladzislauKutarkin@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:01:50 +0400
Subject: [PATCH] UIPQB-160: Update the text in the query builder after 3
 attempts result in 500 errors (#191)

---
 CHANGELOG.md                                  |  1 +
 src/QueryBuilder/ResultViewer/ResultViewer.js | 59 ++++++++++++-------
 src/hooks/useAsyncDataSource.js               |  4 ++
 translations/ui-plugin-query-builder/en.json  |  1 +
 4 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f1aea1e1..5248c29b 100644
--- 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
index a8912bfc..a1c0952a 100644
--- 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
index a232379f..bec4004e 100644
--- 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
index 0cf25362..e175289c 100644
--- 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"
 }