CORE-4972: add not harvested view (#694)

* CORE-4972: add not harvested view * CORE-4972: remove roat gard
oacore · Sep 5, 2024 · 54cab8a · 54cab8a
1 parent 1c85078
commit 54cab8a
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 51 deletions.
diff --git a/components/application/activity-select/index.jsx b/components/application/activity-select/index.jsx
@@ -21,6 +21,7 @@ const ActivitySelect = ({ children }) => (
 const ActivitySelectOption = ({
   children,
   value,
+  disabled,
   selected,
   subMenu,
   dataProviderId,
@@ -32,8 +33,10 @@ const ActivitySelectOption = ({
   const router = useRouter()
 
   const handleSubMenu = () => {
-    setShowSubMenu(!showSubMenu)
-    setSelectedSubMenu(null)
+    if (!disabled) {
+      setShowSubMenu(!showSubMenu)
+      setSelectedSubMenu(null)
+    }
   }
 
   const handleSubMenuClick = (item) => {
@@ -56,6 +59,7 @@ const ActivitySelectOption = ({
           <div
             className={classNames.use(styles.settingItemWrapper, {
               [styles.settingItemWrapperBorder]: value === 'settings',
+              [styles.disabled]: disabled,
             })}
           >
             {children || (
@@ -117,7 +121,9 @@ const ActivitySelectOption = ({
           passHref
         >
           <Drawer.Item
-            className={styles[value]}
+            className={classNames.use(styles[value], {
+              [styles.disabled]: disabled,
+            })}
             active={selected}
             title={navigation.tooltips[value]}
           >

diff --git a/components/application/activity-select/styles.module.css b/components/application/activity-select/styles.module.css
@@ -114,3 +114,10 @@
   padding-top: 10px;
   border-top: 1px solid var(--gray-300);
 }
+
+.disabled {
+  color: #616161;
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/components/application/index.jsx b/components/application/index.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
 import { DataProviderLogo } from '@oacore/design/lib/elements'
 import { useRouter } from 'next/router'
@@ -19,6 +19,7 @@ import restart from '../upload/assets/restart.svg'
 import notification from '../../templates/settings/assets/bell.svg'
 import NotificationPopUp from '../../templates/settings/cards/notificationPopUp'
 import { useNotification } from './useNotification'
+import { GlobalContext } from '../../store'
 
 const Application = observer(
   ({
@@ -113,6 +114,18 @@ const Application = observer(
       return `${str.substring(0, maxLength)}...`
     }
 
+    const { ...globalStore } = useContext(GlobalContext)
+
+    const disabledTabs = [
+      'indexing',
+      'deduplication',
+      'content',
+      'deposit-compliance',
+      'doi',
+      'rights-retention-strategy',
+      'settings',
+    ]
+
     return (
       <>
         <Head>
@@ -224,6 +237,11 @@ const Application = observer(
                         .map(({ path, test, children }) => (
                           <ActivitySelect.Option
                             key={path}
+                            disabled={
+                              !globalStore.dataProvider?.issues
+                                ?.harvestingStatus?.lastHarvestingDate &&
+                              disabledTabs.includes(path)
+                            }
                             value={path}
                             selected={test(pathname)}
                             dataProviderId={dataProvider.id}

diff --git a/components/upload/assets/placeholderChart.svg b/components/upload/assets/placeholderChart.svg
diff --git a/store/issues.js b/store/issues.js
@@ -14,7 +14,7 @@ class Issues extends Store {
     super(baseUrl, options)
 
     this.issuesUrl = `${baseUrl}/issues`
-    this.getHarvestingStatus(true)
+    this.getHarvestingStatus()
     this.getIssuesAggregation()
   }
 
@@ -28,9 +28,11 @@ class Issues extends Store {
 
       const { data } = await this.request(url, options)
       this.harvestingStatus = data
+      return data
     } catch (error) {
       console.error('Error fetching harvesting status:', error)
       this.harvestingStatus = null
+      throw error
     }
   }
 

diff --git a/templates/harvesting/cards/harvesting-progress.jsx b/templates/harvesting/cards/harvesting-progress.jsx
@@ -38,7 +38,7 @@ const HarvestingProgressCard = observer(
         setLoading(true)
         setModalOpen(false)
         await sendHarvestingRequest(requestText)
-        await globalStore.dataProvider.retrieve()
+        await globalStore.dataProvider.issues.getHarvestingStatus(true)
         setSuccess(true)
       } catch (error) {
         // eslint-disable-next-line no-console

diff --git a/templates/harvesting/index.jsx b/templates/harvesting/index.jsx
@@ -11,7 +11,7 @@ import { GlobalContext } from '../../store'
 import info from '../../components/upload/assets/infoLight.svg'
 
 import Title from 'components/title'
-import { Card, Button } from 'design'
+import { Button, Card } from 'design'
 import texts from 'texts/issues'
 
 const HarvestingPageTemplate = observer(

diff --git a/templates/overview/index.jsx b/templates/overview/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
@@ -8,6 +8,11 @@ import { DataStatisticsCard, DoiCard, DepositingCard, IrusCard } from './cards'
 import RioxxCard from './cards/rioxx-card'
 import DashboardGuide from '../../components/dashboard-tutorial/dashboardGuide'
 import NotificationGuide from '../settings/cards/notificationGuide'
+import { GlobalContext } from '../../store'
+import placeholder from '../../components/upload/assets/placeholderChart.svg'
+import { Button } from '../../design'
+
+import { Card } from 'design'
 
 const OverviewTemplate = observer(
   ({
@@ -43,6 +48,7 @@ const OverviewTemplate = observer(
     const [hasNotificationGuideBeenShown, setNotificationGuideShown] = useState(
       localStorage.getItem('notificationGuideShown') === 'true'
     )
+    const { ...globalStore } = useContext(GlobalContext)
 
     const handleButtonClick = async () => {
       setNotificationGuideShown(true)
@@ -100,50 +106,89 @@ const OverviewTemplate = observer(
         className={classNames.use(styles.container).join(className)}
         {...restProps}
       >
-        <DataStatisticsCard
-          metadatadaHistory={metadatadaHistory}
-          metadataCount={metadataCount}
-          fullTextCount={fullTextCount}
-          harvestingDate={harvestingDate}
-          errorCount={errorCount}
-          warningCount={warningCount}
-          dataProviderId={dataProviderId}
-          viewStatistics={viewStatistics}
-        />
-        {tutorial && tutorial.currentStep === 1 && (
-          <DashboardGuide
-            tutorial={tutorial}
-            dataProviderData={dataProviderData}
-            modal={modal}
-          />
-        )}
-        {!hasNotificationGuideBeenShown && (
-          <NotificationGuide
-            dataProviderData={dataProviderData}
-            notificationGuide={notificationGuide}
-            handleButtonClick={handleButtonClick}
-            handleButtonClose={handleButtonClose}
-          />
-        )}
-        <DepositingCard
-          chartData={timeLagData}
-          complianceLevel={complianceLevel}
-          dataProviderId={dataProviderId}
-          countryCode={countryCode}
-        />
+        {globalStore.dataProvider?.issues?.harvestingStatus
+          ?.lastHarvestingDate !== null ? (
+          <div>
+            <DataStatisticsCard
+              metadatadaHistory={metadatadaHistory}
+              metadataCount={metadataCount}
+              fullTextCount={fullTextCount}
+              harvestingDate={harvestingDate}
+              errorCount={errorCount}
+              warningCount={warningCount}
+              dataProviderId={dataProviderId}
+              viewStatistics={viewStatistics}
+            />
+            {tutorial && tutorial.currentStep === 1 && (
+              <DashboardGuide
+                tutorial={tutorial}
+                dataProviderData={dataProviderData}
+                modal={modal}
+              />
+            )}
+            {!hasNotificationGuideBeenShown && (
+              <NotificationGuide
+                dataProviderData={dataProviderData}
+                notificationGuide={notificationGuide}
+                handleButtonClick={handleButtonClick}
+                handleButtonClose={handleButtonClose}
+              />
+            )}
+            <DepositingCard
+              chartData={timeLagData}
+              complianceLevel={complianceLevel}
+              dataProviderId={dataProviderId}
+              countryCode={countryCode}
+            />
 
-        {rioxxCompliance != null && rioxxCompliance.totalCount > 0 && (
-          <RioxxCard compliance={rioxxCompliance} />
-        )}
-        {viewStatistics != null && <IrusCard statistics={viewStatistics} />}
-        {doiCount && (
-          <DoiCard
-            outputsCount={metadataCount}
-            doiCount={doiCount}
-            downloadUrl={doiDownloadUrl}
-            enrichmentSize={doiEnrichmentSize}
-            dataProviderId={dataProviderId}
-          />
+            {rioxxCompliance != null && rioxxCompliance.totalCount > 0 && (
+              <RioxxCard compliance={rioxxCompliance} />
+            )}
+            {viewStatistics != null && <IrusCard statistics={viewStatistics} />}
+            {doiCount && (
+              <DoiCard
+                outputsCount={metadataCount}
+                doiCount={doiCount}
+                downloadUrl={doiDownloadUrl}
+                enrichmentSize={doiEnrichmentSize}
+                dataProviderId={dataProviderId}
+              />
+            )}
+          </div>
+        ) : (
+          <Card className={styles.placeholderCard}>
+            <Card.Title tag="h2">General information</Card.Title>
+            <div className={styles.innerContent}>
+              <img
+                src={placeholder}
+                alt="placeholder"
+                className={styles.logo}
+              />
+              <h5 className={styles.placeholderTitle}>
+                You repository is still indexing.
+              </h5>
+              <p className={styles.placeholderDescription}>
+                This can take up to 3 weeks depending on the size of the data
+                provider and our workload. You will receive an email once this
+                has been done. In the meantime, find out more about how to
+                ensure your repository is indexed to maximum effect in the Data
+                Provider’s Guide.
+              </p>
+              <Button
+                className={styles.actionButton}
+                variant="contained"
+                tag="div"
+                onClick={() =>
+                  window.open(
+                    'https://core.ac.uk/documentation/membership-documentation',
+                    '_blank'
+                  )
+                }
+              >
+                Data Provider’s Guide
+              </Button>
+            </div>
+          </Card>
         )}
       </Tag>
     )

diff --git a/templates/overview/styles.module.css b/templates/overview/styles.module.css
@@ -261,3 +261,41 @@
   padding: 0.5rem 1rem;
   background-color: var(--gray-100);
 }
+
+.inner-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-title {
+  margin: 40px 0;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%;
+  color: #212121;
+  text-align: center;
+  letter-spacing: 0.029px;
+}
+
+.placeholder-description {
+  max-width: 575px;
+  margin: 0 0 24px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  color: #666;
+  text-align: center;
+  letter-spacing: 0.026px;
+}
+
+.placeholder-card {
+  margin-top: 16px;
+}
+
+.action-button {
+  margin-bottom: 64px;
+}