From 9d1b6637c8484b6f6b295e3c21d1a6293f6bfcc8 Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <ekachxaidze2@gmail.com>
Date: Mon, 9 Sep 2024 17:29:35 +0400
Subject: [PATCH] CORE-4990: add error view

---
 .../[data-provider-id]/deduplication.jsx      |  1 +
 .../[data-provider-id]/indexing.jsx           |  1 +
 store/issues.js                               | 16 +++++--
 .../deduplication/cards/deduplicationInfo.jsx | 22 +++++++---
 templates/deduplication/index.jsx             |  7 ++-
 templates/deduplication/styles.module.css     | 14 ++++++
 .../harvesting/cards/harvesting-progress.jsx  | 44 ++++++++++++++-----
 .../cards/harvesting-status-card.jsx          | 15 ++++++-
 templates/harvesting/index.jsx                |  3 ++
 templates/harvesting/styles.module.css        | 15 +++++++
 10 files changed, 115 insertions(+), 23 deletions(-)

diff --git a/pages/data-providers/[data-provider-id]/deduplication.jsx b/pages/data-providers/[data-provider-id]/deduplication.jsx
index d7fc9606..fd23fa40 100644
--- a/pages/data-providers/[data-provider-id]/deduplication.jsx
+++ b/pages/data-providers/[data-provider-id]/deduplication.jsx
@@ -9,6 +9,7 @@ const DeduplicationPage = ({ store, ...props }) => (
     getDeduplicationData={store.dataProvider?.getDeduplicationData}
     duplicateDataLoading={store.dataProvider?.duplicateDataLoading}
     harvestingStatus={store.dataProvider?.issues?.harvestingStatus}
+    harvestingError={store.dataProvider?.issues?.harvestingError}
     duplicateList={store.dataProvider?.duplicateList}
     getDeduplicationInfo={store.dataProvider?.getDeduplicationInfo}
     duplicateListDetails={store.dataProvider?.duplicateListDetails}
diff --git a/pages/data-providers/[data-provider-id]/indexing.jsx b/pages/data-providers/[data-provider-id]/indexing.jsx
index 89d04396..c58e1ed7 100644
--- a/pages/data-providers/[data-provider-id]/indexing.jsx
+++ b/pages/data-providers/[data-provider-id]/indexing.jsx
@@ -6,6 +6,7 @@ import { withGlobalStore } from 'store'
 const HarvestingPage = ({ store, store: { dataProvider }, ...props }) => (
   <HarvestingPageTemplate
     harvestingStatus={dataProvider?.issues?.harvestingStatus}
+    harvestingError={store.dataProvider?.issues?.harvestingError}
     aggregation={dataProvider?.issues?.aggregation}
     issuesByType={dataProvider?.issues?.issuesByType}
     errorsCount={dataProvider?.issues?.aggregation?.errorsCount}
diff --git a/store/issues.js b/store/issues.js
index b34b416b..7f666c5a 100644
--- a/store/issues.js
+++ b/store/issues.js
@@ -1,3 +1,4 @@
+// store/issues.js
 import { action, observable } from 'mobx'
 
 import Store from './store'
@@ -6,6 +7,8 @@ import { Pages } from './helpers/pages'
 class Issues extends Store {
   @observable harvestingStatus = null
 
+  @observable harvestingError = false
+
   @observable aggregation = null
 
   @observable issuesByType = new Map()
@@ -26,12 +29,19 @@ class Issues extends Store {
 
       const options = refresh ? { cache: 'reload' } : {}
 
-      const { data } = await this.request(url, options)
-      this.harvestingStatus = data
-      return data
+      const response = await this.request(url, options)
+      if (response.status === 200) {
+        this.harvestingStatus = response.data
+        this.harvestingError = false
+      } else {
+        this.harvestingStatus = null
+        this.harvestingError = true
+      }
+      return response.data
     } catch (error) {
       console.error('Error fetching harvesting status:', error)
       this.harvestingStatus = null
+      this.harvestingError = true
       throw error
     }
   }
diff --git a/templates/deduplication/cards/deduplicationInfo.jsx b/templates/deduplication/cards/deduplicationInfo.jsx
index 94a95797..57c85a34 100644
--- a/templates/deduplication/cards/deduplicationInfo.jsx
+++ b/templates/deduplication/cards/deduplicationInfo.jsx
@@ -3,10 +3,11 @@ import React from 'react'
 import styles from '../styles.module.css'
 import texts from '../../../texts/deduplication/deduplication.yml'
 import { formatDate, valueOrDefault } from '../../../utils/helpers'
+import info from '../../../components/upload/assets/info.svg'
 
 import { Card } from 'design'
 
-const DeduplicationInfoCard = ({ harvestingStatus }) => (
+const DeduplicationInfoCard = ({ harvestingStatus, harvestingError }) => (
   <Card
     className={styles.deduplicationInfoCardWrapper}
     tag="section"
@@ -18,12 +19,19 @@ const DeduplicationInfoCard = ({ harvestingStatus }) => (
       </Card.Title>
     </div>
     <div className={styles.innerWrapper}>
-      <span className={styles.text}>
-        {valueOrDefault(
-          formatDate(harvestingStatus?.lastHarvestingDate),
-          'Loading...'
-        )}
-      </span>
+      {harvestingError ? (
+        <div className={styles.errorsWrapper}>
+          <img className={styles.infoIcon} src={info} alt="riox" />
+          <p className={styles.errorText}>This data is not available now. </p>
+        </div>
+      ) : (
+        <span className={styles.text}>
+          {valueOrDefault(
+            formatDate(harvestingStatus?.lastHarvestingDate),
+            'Loading...'
+          )}
+        </span>
+      )}
     </div>
     <Card.Description className={styles.cardDescription}>
       {texts.info.description}
diff --git a/templates/deduplication/index.jsx b/templates/deduplication/index.jsx
index f3ec6759..5518aa45 100644
--- a/templates/deduplication/index.jsx
+++ b/templates/deduplication/index.jsx
@@ -1,3 +1,4 @@
+// templates/deduplication/index.jsx
 import React, { useEffect, useState } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 import { useRouter } from 'next/router'
@@ -20,6 +21,7 @@ const DeduplicationPageTemplate = observer(
     getDeduplicationInfo,
     duplicateListDetails,
     harvestingStatus,
+    harvestingError,
     getOutputsData,
     outputData,
     getWorksData,
@@ -85,7 +87,10 @@ const DeduplicationPageTemplate = observer(
           }
         />
         <div className={styles.cardsWrapper}>
-          <DeduplicationInfoCard harvestingStatus={harvestingStatus} />
+          <DeduplicationInfoCard
+            harvestingError={harvestingError}
+            harvestingStatus={harvestingStatus}
+          />
           <DeduplicationStatistics
             duplicateList={duplicateList}
             duplicatesUrl={duplicatesUrl}
diff --git a/templates/deduplication/styles.module.css b/templates/deduplication/styles.module.css
index 5849d00e..3018bdc9 100644
--- a/templates/deduplication/styles.module.css
+++ b/templates/deduplication/styles.module.css
@@ -90,6 +90,20 @@
   margin-right: 55px;
 }
 
+.errors-wrapper {
+  background: #f5f5f5;
+  display: flex;
+  height: 48px;
+  padding: 12px 16px;
+  align-items: center;
+  gap: 10px;
+  width: max-content;
+}
+
+.error-text {
+  margin-top: unset;
+}
+
 .inner-sub-title {
   margin: 4px 0 12px;
   font-size: 14px;
diff --git a/templates/harvesting/cards/harvesting-progress.jsx b/templates/harvesting/cards/harvesting-progress.jsx
index af6ebbe4..dd0895dc 100644
--- a/templates/harvesting/cards/harvesting-progress.jsx
+++ b/templates/harvesting/cards/harvesting-progress.jsx
@@ -1,8 +1,9 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useEffect } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 import { Popover } from '@oacore/design'
 import { observer } from 'mobx-react-lite'
 
+import info from '../../../components/upload/assets/info.svg'
 import { GlobalContext } from '../../../store'
 import styles from '../styles.module.css'
 import { Button, ProgressSpinner } from '../../../design'
@@ -15,12 +16,14 @@ import { Card } from 'design'
 import texts from 'texts/issues'
 
 const HarvestingProgressCard = observer(
-  ({ harvestingStatus, sendHarvestingRequest }) => {
+  ({ harvestingStatus, sendHarvestingRequest, harvestingError }) => {
     const { ...globalStore } = useContext(GlobalContext)
     const [loading, setLoading] = useState(false)
     const [success, setSuccess] = useState(false)
     const [modalOpen, setModalOpen] = useState(false)
     const [errorMessage, setErrorMessage] = useState(null)
+    const [renderedContent, setRenderedContent] = useState(null)
+
     const dayInterval = (lastHarvestingDateString) => {
       const lastHarvestingDate = new Date(lastHarvestingDateString)
       const currentDate = new Date()
@@ -105,6 +108,32 @@ const HarvestingProgressCard = observer(
       }
     }
 
+    const getContent = () => {
+      if (harvestingError) {
+        return (
+          <div className={styles.errorsWrapper}>
+            <img className={styles.infoIcon} src={info} alt="riox" />
+            <p className={styles.errorText}>
+              Request reindexing is not available at the moment.
+            </p>
+          </div>
+        )
+      }
+      if (!harvestingStatus) {
+        return (
+          <div className={styles.dataSpinnerWrapper}>
+            <ProgressSpinner className={styles.spinner} />
+            <p className={styles.spinnerText}>Loading...</p>
+          </div>
+        )
+      }
+      return <div className={styles.buttonWrapper}>{renderView()}</div>
+    }
+
+    useEffect(() => {
+      setRenderedContent(getContent())
+    }, [harvestingError, harvestingStatus])
+
     return (
       <Card className={styles.progressWrapper}>
         <div
@@ -120,7 +149,7 @@ const HarvestingProgressCard = observer(
         <div className={styles.requestDateWrapper}>
           {modalOpen &&
             harvestingStatus?.scheduledState === 'IN_DOWNLOAD_METADATA_QUEUE' &&
-            !result(
+            !result && (
               <HarvestingModal
                 title={texts.modal.scheduled.title}
                 description={texts.modal.scheduled.description}
@@ -232,14 +261,7 @@ const HarvestingProgressCard = observer(
         <div className={styles.statusDescription}>
           {texts.progress.description}
         </div>
-        {!harvestingStatus ? (
-          <div className={styles.dataSpinnerWrapper}>
-            <ProgressSpinner className={styles.spinner} />
-            <p className={styles.spinnerText}>Loading</p>
-          </div>
-        ) : (
-          <div className={styles.buttonWrapper}>{renderView()}</div>
-        )}
+        {renderedContent}
       </Card>
     )
   }
diff --git a/templates/harvesting/cards/harvesting-status-card.jsx b/templates/harvesting/cards/harvesting-status-card.jsx
index 84f9ebd7..859a096f 100644
--- a/templates/harvesting/cards/harvesting-status-card.jsx
+++ b/templates/harvesting/cards/harvesting-status-card.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import styles from '../styles.module.css'
+import info from '../../../components/upload/assets/info.svg'
 
 import { Card } from 'design'
 import { valueOrDefault, formatDate, patchValueFull } from 'utils/helpers'
@@ -15,13 +16,25 @@ const HarvestingStatusCard = ({
   lastHarvestingDate,
   metadataCount,
   total,
+  harvestingError,
 }) => (
   <Card className={styles.harvestingCardWrapper}>
     <Card.Title tag="h2">{texts.genInfo.title}</Card.Title>
     <div className={styles.metadata}>
       <div className={styles.metadataItems}>
         <NumericValue
-          value={valueOrDefault(formatDate(lastHarvestingDate), 'Loading...')}
+          value={
+            harvestingError ? (
+              <div className={styles.errorsWrapper}>
+                <img className={styles.infoIcon} src={info} alt="riox" />
+                <p className={styles.errorText}>
+                  This data is not available now.{' '}
+                </p>
+              </div>
+            ) : (
+              valueOrDefault(formatDate(lastHarvestingDate), 'Loading...')
+            )
+          }
           title="Last successful updating"
           tag="div"
           bold
diff --git a/templates/harvesting/index.jsx b/templates/harvesting/index.jsx
index 9099d739..b3912298 100644
--- a/templates/harvesting/index.jsx
+++ b/templates/harvesting/index.jsx
@@ -32,6 +32,7 @@ const HarvestingPageTemplate = observer(
     issues,
     typesCount,
     responseData,
+    harvestingError,
     ...restProps
   }) => {
     const { ...globalStore } = useContext(GlobalContext)
@@ -60,6 +61,7 @@ const HarvestingPageTemplate = observer(
           )}
         <div className={styles.harvestingWrapper}>
           <HarvestingStatusCard
+            harvestingError={harvestingError}
             metadataCount={metadataCount}
             lastHarvestingDate={harvestingStatus?.lastHarvestingDate || 0}
             fullTextCount={fullTextCount}
@@ -70,6 +72,7 @@ const HarvestingPageTemplate = observer(
             harvestingStatus={harvestingStatus}
             sendHarvestingRequest={sendHarvestingRequest}
             responseData={responseData}
+            harvestingError={harvestingError}
           />
         </div>
         <Card className={styles.issuesCard}>
diff --git a/templates/harvesting/styles.module.css b/templates/harvesting/styles.module.css
index 26ce5404..dbe5b330 100644
--- a/templates/harvesting/styles.module.css
+++ b/templates/harvesting/styles.module.css
@@ -24,6 +24,21 @@
   width: 50%;
 }
 
+.errors-wrapper {
+  background: #f5f5f5;
+  display: flex;
+  height: 48px;
+  padding: 12px 16px;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  font-size: 14px;
+}
+
+.error-text {
+  margin-top: unset;
+}
+
 .chart {
   max-width: 12.5rem;
   background-color: var(--white);