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. Disables search if error appeared.
oacore · May 27, 2020 · aed8a4a · aed8a4a
1 parent 3b5c7a1
commit aed8a4a
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 52 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
@@ -1,14 +1,17 @@
 import React from 'react'
+import { useObserver } from 'mobx-react-lite'
 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,21 +78,20 @@ class PublicationDateColumn extends Table.Column {
   }
 }
 
-const TableCard = ({ isExportDisabled, datesUrl, publicReleaseDatesPages }) => (
-  <Card
-    id="deposit-dates-card"
-    className={styles.browseTableCard}
-    tag="section"
-  >
-    <Card.Title tag="h2">Deposit dates</Card.Title>
-    <Card.Description>
-      Lists deposit dates discovered from your repository
-    </Card.Description>
+const DepositDatesTable = ({
+  isExportDisabled,
+  datesUrl,
+  publicReleaseDatesPages: pages,
+}) => {
+  const hasData = pages.data && pages.data.length > 0
+  const hasError = !!pages.error
+  return (
     <Table
-      pages={publicReleaseDatesPages}
+      pages={pages}
       className={styles.browseTable}
       defaultSize={15}
-      searchable
+      excludeFooter={!hasData || hasError}
+      searchable={!hasError}
     >
       <Table.Column
         id="oai"
@@ -133,7 +135,39 @@ const TableCard = ({ isExportDisabled, datesUrl, publicReleaseDatesPages }) => (
         </ExportButton>
       </Table.Action>
     </Table>
-  </Card>
-)
+  )
+}
+
+const TableCard = ({
+  isExportDisabled,
+  datesUrl,
+  publicReleaseDatesPages: pages,
+}) => {
+  const hasData = useObserver(() => pages.data && pages.data.length > 0)
+  const error = useObserver(() => pages.error)
+
+  return (
+    <Card
+      id="deposit-dates-card"
+      className={styles.browseTableCard}
+      tag="section"
+    >
+      <Card.Title tag="h2">Deposit dates</Card.Title>
+      <Card.Description>
+        Lists deposit dates discovered from your repository
+      </Card.Description>
+      <DepositDatesTable
+        publicReleaseDatesPages={pages}
+        isExportDisabled={isExportDisabled}
+        datesUrl={datesUrl}
+      />
+      {error instanceof PaymentRequiredError && (
+        <Card.Footer className={classNames.use(hasData && styles.backdrop)}>
+          <PaymentRequiredNote template={texts.paymentRequired} />
+        </Card.Footer>
+      )}
+    </Card>
+  )
+}
 
 export default TableCard
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,18 @@
 .matching-icon.partial {
   color: var(--warning);
 }
+
+.backdrop {
+  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
@@ -1,9 +1,13 @@
 import React from 'react'
+import { useObserver } from 'mobx-react-lite'
+import { classNames } from '@oacore/design/lib/utils'
 
 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) => {
@@ -21,32 +25,47 @@ const formatDOI = (entity) => {
   return originDoi
 }
 
-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.Column
-        id="repoDoi"
-        display={texts.table.columns.doi}
-        order="any"
-        className={styles.doiColumn}
-        getter={formatDOI}
-      />
-      <Table.Column
-        id="title"
-        display={texts.table.columns.title}
-        order="any"
-        className={styles.titleColumn}
-      />
-      <Table.Column
-        id="authors"
-        display={texts.table.columns.authors}
-        order="any"
-        className={styles.authorsColumn}
-        getter={(v) => v.authors && v.authors.map((a) => a.name).join(' ')}
-      />
-    </Table>
-  </Card>
-)
+const TableCard = ({ pages }) => {
+  const hasData = useObserver(() => pages.data && pages.data.length > 0)
+  const hasError = useObserver(() => !!pages.error)
+
+  return (
+    <Card className={styles.doiTableCard} tag="section">
+      <Card.Title tag="h2">Browse DOI records</Card.Title>
+      <Table
+        pages={pages}
+        className={styles.doiTable}
+        excludeFooter={hasError || !hasData}
+        searchable={!hasError}
+      >
+        <Table.Column
+          id="repoDoi"
+          display={texts.table.columns.doi}
+          order="any"
+          className={styles.doiColumn}
+          getter={formatDOI}
+        />
+        <Table.Column
+          id="title"
+          display={texts.table.columns.title}
+          order="any"
+          className={styles.titleColumn}
+        />
+        <Table.Column
+          id="authors"
+          display={texts.table.columns.authors}
+          order="any"
+          className={styles.authorsColumn}
+          getter={(v) => v.authors && v.authors.map((a) => a.name).join(' ')}
+        />
+      </Table>
+      {pages.error instanceof PaymentRequiredError && (
+        <Card.Footer className={classNames.use(hasData && styles.backdrop)}>
+          <PaymentRequiredNote template={texts.paymentRequired} />
+        </Card.Footer>
+      )}
+    </Card>
+  )
+}
 
 export default TableCard
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>

diff --git a/templates/doi/styles.module.css b/templates/doi/styles.module.css
@@ -76,3 +76,18 @@
 .new-icon {
   color: var(--primary);
 }
+
+.backdrop {
+  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);
+  }
+}