Add Error displaying for Deposit Compliance and DOIs (#336)

If there is no data, or an error happened: * exporting functionality gets disabled; * the table footer becomes hidden. If the happened error is a Payment Required kind, the note about payment is shown.
oacore · May 22, 2020 · 065ed6d · 065ed6d
1 parent 1fe612f
commit 065ed6d
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 61 deletions.
diff --git a/templates/deposit-compliance/cards/cross-repository-check-card.jsx b/templates/deposit-compliance/cards/cross-repository-check-card.jsx
@@ -1,25 +1,29 @@
 import React from 'react'
 
+import { PaymentRequiredError } from 'store/errors'
 import { Card } from 'design'
-import * as texts from 'texts/depositing'
-import { formatNumber } from 'utils/helpers'
 import ExportButton from 'components/export-button'
 import Markdown from 'components/markdown'
+import { PaymentRequiredNote } from 'modules/billing'
+import * as texts from 'texts/depositing'
+import { formatNumber } from 'utils/helpers'
 
 const Content = ({ nonCompliantCount, differentCount, exportUrl }) => {
-  const template =
-    texts.crossRepositoryCheck[differentCount ? 'success' : 'failure']
+  const templateName = differentCount > 0 ? 'success' : 'failure'
+  const template = texts.crossRepositoryCheck[templateName]
   const text = template.render({
-    nonCompliantCount: formatNumber(nonCompliantCount),
+    nonCompliantCount: nonCompliantCount ? formatNumber(nonCompliantCount) : '',
     recordsInAnotherRepository: formatNumber(differentCount),
   })
 
   return (
     <>
       <Markdown>{text}</Markdown>
-      <ExportButton href={exportUrl}>
-        {texts.crossRepositoryCheck.download}
-      </ExportButton>
+      {differentCount > 0 && (
+        <ExportButton href={exportUrl}>
+          {texts.crossRepositoryCheck.download}
+        </ExportButton>
+      )}
     </>
   )
 }
@@ -42,6 +46,11 @@ const CrossRepositoryCheckCard = ({
     ) : (
       'Loading data'
     )}
+    {crossDepositLag?.error instanceof PaymentRequiredError && (
+      <PaymentRequiredNote
+        template={texts.crossRepositoryCheck.paymentRequired}
+      />
+    )}
   </Card>
 )
 

diff --git a/templates/deposit-compliance/cards/table-card.jsx b/templates/deposit-compliance/cards/table-card.jsx
@@ -3,12 +3,14 @@ import { classNames } from '@oacore/design/lib/utils'
 
 import styles from '../styles.module.css'
 
-import { formatDate } from 'utils/helpers'
+import { PaymentRequiredError } from 'store/errors'
 import { Card, Icon } from 'design'
+import DocumentLink from 'components/document-link'
 import Table from 'components/table'
 import ExportButton from 'components/export-button'
+import { PaymentRequiredNote } from 'modules/billing'
 import * as texts from 'texts/depositing'
-import DocumentLink from 'components/document-link'
+import { formatDate } from 'utils/helpers'
 
 const SidebarContent = ({ context: { oai, originalId, authors, title } }) => {
   const { Header, Body, Footer } = Table.Sidebar
@@ -75,7 +77,67 @@ class PublicationDateColumn extends Table.Column {
   }
 }
 
-const TableCard = ({ isExportDisabled, datesUrl, publicReleaseDatesPages }) => (
+const DepositDatesTable = ({
+  isExportDisabled,
+  datesUrl,
+  publicReleaseDatesPages,
+}) => (
+  <Table
+    pages={publicReleaseDatesPages}
+    className={styles.browseTable}
+    defaultSize={15}
+    excludeFooter={publicReleaseDatesPages.data.length === 0}
+    searchable
+  >
+    <Table.Column
+      id="oai"
+      display="OAI"
+      order="any"
+      getter={(v) => v.oai.split(':').pop()}
+      className={styles.oaiColumn}
+    />
+    <Table.Column
+      id="title"
+      display="Title"
+      order="any"
+      className={styles.titleColumn}
+    />
+    <Table.Column
+      id="authors"
+      display="Authors"
+      order="any"
+      className={styles.authorsColumn}
+      getter={(v) => v.authors && v.authors.map((a) => a.name).join(' ')}
+    />
+    <PublicationDateColumn
+      id="publicationDate"
+      display="Publication date"
+      order="any"
+      className={styles.depositDateColumn}
+    />
+    <Table.Column
+      id="publicReleaseDate"
+      display="Deposit date"
+      order="desc"
+      className={styles.depositDateColumn}
+      getter={(v) => formatDate(v.publicReleaseDate)}
+    />
+    <Table.Sidebar>
+      <SidebarContent />
+    </Table.Sidebar>
+    <Table.Action>
+      <ExportButton href={datesUrl} disabled={isExportDisabled}>
+        {texts.exporting.download}
+      </ExportButton>
+    </Table.Action>
+  </Table>
+)
+
+const TableCard = ({
+  isExportDisabled,
+  datesUrl,
+  publicReleaseDatesPages: pages,
+}) => (
   <Card
     id="deposit-dates-card"
     className={styles.browseTableCard}
@@ -85,54 +147,16 @@ const TableCard = ({ isExportDisabled, datesUrl, publicReleaseDatesPages }) => (
     <Card.Description>
       Lists deposit dates discovered from your repository
     </Card.Description>
-    <Table
-      pages={publicReleaseDatesPages}
-      className={styles.browseTable}
-      defaultSize={15}
-      searchable
-    >
-      <Table.Column
-        id="oai"
-        display="OAI"
-        order="any"
-        getter={(v) => v.oai.split(':').pop()}
-        className={styles.oaiColumn}
-      />
-      <Table.Column
-        id="title"
-        display="Title"
-        order="any"
-        className={styles.titleColumn}
-      />
-      <Table.Column
-        id="authors"
-        display="Authors"
-        order="any"
-        className={styles.authorsColumn}
-        getter={(v) => v.authors && v.authors.map((a) => a.name).join(' ')}
-      />
-      <PublicationDateColumn
-        id="publicationDate"
-        display="Publication date"
-        order="any"
-        className={styles.depositDateColumn}
-      />
-      <Table.Column
-        id="publicReleaseDate"
-        display="Deposit date"
-        order="desc"
-        className={styles.depositDateColumn}
-        getter={(v) => formatDate(v.publicReleaseDate)}
-      />
-      <Table.Sidebar>
-        <SidebarContent />
-      </Table.Sidebar>
-      <Table.Action>
-        <ExportButton href={datesUrl} disabled={isExportDisabled}>
-          {texts.exporting.download}
-        </ExportButton>
-      </Table.Action>
-    </Table>
+    <DepositDatesTable
+      publicReleaseDatesPages={pages}
+      isExportDisabled={isExportDisabled}
+      datesUrl={datesUrl}
+    />
+    {pages.error instanceof PaymentRequiredError && (
+      <Card.Footer className={styles.fade}>
+        <PaymentRequiredNote template={texts.paymentRequired} />
+      </Card.Footer>
+    )}
   </Card>
 )
 

diff --git a/templates/deposit-compliance/index.jsx b/templates/deposit-compliance/index.jsx
@@ -35,6 +35,7 @@ const DepositComplianceTemplate = ({
     />
     <CrossRepositoryCheckRedirectCard
       possibleBonusCount={crossDepositLag?.possibleBonusCount}
+      error={crossDepositLag?.error}
     />
     <DepositTimeLagCard
       timeLagData={timeLagData}

diff --git a/templates/deposit-compliance/styles.module.css b/templates/deposit-compliance/styles.module.css
@@ -112,3 +112,23 @@
 .matching-icon.partial {
   color: var(--warning);
 }
+
+/* Should be moved */
+.preview tfoot {
+  display: none;
+}
+
+.fade {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 5rem;
+    content: '';
+    background: linear-gradient(to top, var(--background, #fff), transparent);
+  }
+}
diff --git a/templates/doi/cards/table-card.jsx b/templates/doi/cards/table-card.jsx
@@ -2,8 +2,10 @@ import React from 'react'
 
 import styles from '../styles.module.css'
 
+import { PaymentRequiredError } from 'store/errors'
 import { Card, Icon } from 'design'
 import Table from 'components/table'
+import { PaymentRequiredNote } from 'modules/billing'
 import * as texts from 'texts/doi'
 
 const formatDOI = (entity) => {
@@ -24,7 +26,12 @@ const formatDOI = (entity) => {
 const TableCard = ({ pages }) => (
   <Card className={styles.doiTableCard} tag="section">
     <Card.Title tag="h2">Browse DOI records</Card.Title>
-    <Table pages={pages} className={styles.doiTable} searchable>
+    <Table
+      pages={pages}
+      className={styles.doiTable}
+      excludeFooter={pages.data.length === 0}
+      searchable
+    >
       <Table.Column
         id="repoDoi"
         display={texts.table.columns.doi}
@@ -46,6 +53,11 @@ const TableCard = ({ pages }) => (
         getter={(v) => v.authors && v.authors.map((a) => a.name).join(' ')}
       />
     </Table>
+    {pages.error instanceof PaymentRequiredError && (
+      <Card.Footer className={styles.fade}>
+        <PaymentRequiredNote template={texts.paymentRequired} />
+      </Card.Footer>
+    )}
   </Card>
 )
 

diff --git a/templates/doi/index.jsx b/templates/doi/index.jsx
@@ -27,7 +27,11 @@ const DoiTemplate = ({
     <ExportCard
       enrichmentSize={enrichmentSize}
       doiUrl={doiUrl}
-      isExportDisabled={isExportDisabled}
+      isExportDisabled={
+        isExportDisabled ||
+        doiRecords.error != null ||
+        doiRecords.data.length === 0
+      }
     />
     <TableCard pages={doiRecords} />
   </Tag>