Bootstrap 5 upgrade (#399)

* updated doi pages * updated organization pages to Bootstrap 5 * updated person pages to Bootstrap 5 * updated repository pages to Bootstrap 5 * removed Bootstrap 4 * fixed facet number alignment * fixed padding issues * fixed padding in title and nav tabs * fixed tooltips not showing * fixed after merge * fixed alignment * fixed alignment * added spacing in sidebar * fixed merge conflicts
datacite · Oct 22, 2024 · fd08200 · fd08200
1 parent 35e8fc6
commit fd08200
Show file tree

Hide file tree

Showing 63 changed files with 379 additions and 429 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@types/react-content-loader": "^4.0.0",
     "@types/testing-library__cypress": "^5.0.5",
     "@zeit/next-source-maps": "0.0.4-canary.1",
-    "bootstrap-4": "npm:bootstrap@4",
+    "bootstrap": "^5.3.3",
     "csv-stringify": "^6.4.0",
     "date-fns": "^2.22.1",
     "flagged": "^2.0.1",
@@ -51,13 +51,13 @@
     "html-react-parser": "^5.1.12",
     "js-yaml-loader": "^1.2.2",
     "jsonwebtoken": "^8.5.1",
-    "maltipoo": "https://github.com/datacite/maltipoo#1.0.2",
+    "maltipoo": "https://github.com/datacite/maltipoo#2.0.3",
     "next": "^14.1.1",
     "next-plausible": "^3.12.0",
     "node-fetch": "^2.6.0",
     "nuqs": "^1.16.0",
     "react": "^18.2.0",
-    "react-bootstrap-4": "npm:react-bootstrap@1",
+    "react-bootstrap": "^2.10.5",
     "react-content-loader": "^5.1.3",
     "react-cookie-consent": "^8.0.0",
     "react-dom": "^18.2.0",

diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
@@ -2,9 +2,9 @@
 
 import React from 'react'
 import useSWR from 'swr'
-import Container from 'react-bootstrap-4/Container'
-import Row from 'react-bootstrap-4/Row'
-import Col from 'react-bootstrap-4/Col'
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope, faBlog } from '@fortawesome/free-solid-svg-icons'
 import {

diff --git a/src/app/Header.tsx b/src/app/Header.tsx
@@ -3,12 +3,6 @@
 import React from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import {
-  Navbar,
-  Nav,
-  Form
-} from 'react-bootstrap-4'
-import NavDropdown from 'react-bootstrap-4/NavDropdown'
 import Search from 'src/components/Header/Search'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -25,7 +19,12 @@ import {
 import { faOrcid } from '@fortawesome/free-brands-svg-icons'
 import { session } from 'src/utils/session'
 import styles from './Header.module.scss'
-import { Container } from 'src/components/Layout-4'
+
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown'
+import Form from 'react-bootstrap/Form';
 
 
 type Props = {
@@ -54,7 +53,7 @@ export default function Header(props: Props) {
         </Navbar.Brand>
         <Navbar.Toggle />
         <Navbar.Collapse className={styles.navcenter}>
-          <Form inline className={styles.navsearchlinks}>
+          <Form className={`${styles.navsearchlinks} form-inline`}>
             <Search base={base} />
             <Nav id="search-nav" activeKey={base} className={styles.navmain}>
               <Nav.Item>
@@ -132,7 +131,7 @@ export default function Header(props: Props) {
                     <NavDropdown.Item eventKey={3.1} data-cy="beta" href="/beta">
                       <FontAwesomeIcon icon={faUserTag} /> Beta Tester
                     </NavDropdown.Item>
-                    <NavDropdown.Item divider />
+                    <NavDropdown.Divider />
                   </>
                 )}
                 <NavDropdown.Item

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import About from 'src/components/About/About'
-import { Grid } from 'src/components/Layout-4'
+import { Container } from 'react-bootstrap'
 
 export default function AboutPage() {
   return (
-    <Grid fluid>
+    <Container fluid>
       <About title={'About'} />
-    </Grid>
+    </Container>
   )
 }
diff --git a/src/app/doi.org/[...doi]/Content.tsx b/src/app/doi.org/[...doi]/Content.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Row, Col } from "src/components/Layout-4";
+import { Container, Row, Col } from 'react-bootstrap'
 
 import apolloClient from 'src/utils/apolloClient/apolloClient'
 import { Work as WorkType } from 'src/data/types'
@@ -52,8 +52,8 @@ export default async function Content(props: Props) {
       </Row>
 
       <Row>
-        <Col md={3} className='pr-5'>
-          <Row className="mb-2">
+        <Col md={3} className='pe-5'>
+          <Row className="mb-2 pb-4">
             {work.registrationAgency.id == "datacite" && (
               <Col xs={12} className="mb-2">
                 <Claim doi_id={work.doi} />
@@ -63,10 +63,10 @@ export default async function Content(props: Props) {
               <DownloadMetadata doi={work} />
             </Col>
           </Row>
-          <Row className="mb-2">
+          <Row className="mb-2 pb-4">
             <CiteAs doi={work} />
           </Row>
-          <Row className="mb-2">
+          <Row className="mb-2 pb-4">
             {!isBot && <DownloadReports
               links={[
                 {
@@ -77,6 +77,8 @@ export default async function Content(props: Props) {
               ]}
               variables={variables as any}
             />}
+          </Row>
+          <Row className="mb-2 pb-4">
             <ShareLinks url={'doi.org/' + work.doi} title={title} />
           </Row>
         </Col>

diff --git a/src/app/doi.org/[...doi]/RelatedAggregateGraph.tsx b/src/app/doi.org/[...doi]/RelatedAggregateGraph.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Col, Row } from "src/components/Layout-4";
+import { Col, Container, Row } from 'react-bootstrap'
 import { GraphData, getRelatedWorksGraph } from 'src/data/queries/relatedWorks'
 import ForceDirectedGraph from 'src/components/ForceDirectedGraph/ForceDirectedGraph'
 import EmptyChart from 'src/components/EmptyChart/EmptyChart'
@@ -50,19 +50,19 @@ export default async function RelatedAggregateGraph(props: Props) {
   let innerGraph = <EmptyChart title={emptyTitleText} />
   if (graphExists) {
     innerGraph = <ForceDirectedGraph
-                  titleText={titleText}
-                  nodes={data.nodes}
-                  links={data.links}
-                  tooltipText={helpText}
-                  />;
+      titleText={titleText}
+      nodes={data.nodes}
+      links={data.links}
+      tooltipText={helpText}
+    />;
   } else if (timedOut) {
     innerGraph = <EmptyChart title={timedOutTitle}>
-                   <p className={styles.explanitoryText}>{timedOutHelpText}</p>
-                 </EmptyChart>
+      <p className={styles.explanitoryText}>{timedOutHelpText}</p>
+    </EmptyChart>
   }
 
 
-  return (<Row>
+  return (<Container fluid><Row>
     <Col md={{ offset: 3 }} className="panel panel-transparent">
       <div className="panel-body">
         {innerGraph}
@@ -72,5 +72,5 @@ export default async function RelatedAggregateGraph(props: Props) {
       </div>
     </Col>
   </Row>
-  )
+  </Container>)
 }
diff --git a/src/app/doi.org/[...doi]/RelatedContent.tsx b/src/app/doi.org/[...doi]/RelatedContent.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { useQuery } from '@apollo/client'
-import { Col, Row } from "src/components/Layout-4";
+import { Col, Container, Row } from 'react-bootstrap'
 import Loading from 'src/components/Loading/Loading'
 
 import { RELATED_CONTENT_QUERY, QueryVar, QueryData } from 'src/data/queries/doiQuery'
@@ -67,18 +67,18 @@ export default function RelatedContent(props: Props) {
 
   const defaultConnectionType =
     allRelatedCount > 0 ? 'allRelated' :
-    referenceCount > 0 ? 'references' :
-    citationCount > 0 ? 'citations' :
-    partCount > 0 ? 'parts' :
-    partOfCount > 0 ? 'partOf' : 'otherRelated'
+      referenceCount > 0 ? 'references' :
+        citationCount > 0 ? 'citations' :
+          partCount > 0 ? 'parts' :
+            partOfCount > 0 ? 'partOf' : 'otherRelated'
 
   const displayedConnectionType = connectionType ? connectionType : defaultConnectionType
   //convert camel case to title and make first letter uppercase
   //convert connectionType to title, allRelated becomes All Related Wokrs, references becomes References, citations becomes Citations, parts becomes Parts, partOf becomes Part Of, and otherRelated becomes Other Works
   const displayedConnectionTitle =
     displayedConnectionType === 'allRelated' ? 'All Related Works' :
-    displayedConnectionType === 'otherRelated' ? 'Other Works' :
-    displayedConnectionType.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())
+      displayedConnectionType === 'otherRelated' ? 'Other Works' :
+        displayedConnectionType.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())
 
 
 
@@ -91,32 +91,28 @@ export default function RelatedContent(props: Props) {
   const endCursor = works.pageInfo ? works.pageInfo.endCursor : ''
 
   return (
-    <>
+    <Container fluid>
       <Row>
         <Col md={{ offset: 3 }}>
           <h3 className="member-results" id="title">Related Works</h3>
         </Col>
       </Row>
       <Row>
-        <div className="panel panel-transparent">
-          <div className="panel-body">
-            <WorksListing
-              works={works}
-              loading={loading}
-              showFacets={true}
-              connectionTypesCounts={connectionTypeCounts}
-              showAnalytics={true}
-              showSankey={showSankey}
-              sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
-              showClaimStatus={true}
-              hasPagination={works.totalCount > 25}
-              hasNextPage={hasNextPage}
-              model={'doi'}
-              url={url}
-              endCursor={endCursor} />
-          </div>
-        </div>
+        <WorksListing
+          works={works}
+          loading={loading}
+          showFacets={true}
+          connectionTypesCounts={connectionTypeCounts}
+          showAnalytics={true}
+          showSankey={showSankey}
+          sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
+          showClaimStatus={true}
+          hasPagination={works.totalCount > 25}
+          hasNextPage={hasNextPage}
+          model={'doi'}
+          url={url}
+          endCursor={endCursor} />
       </Row>
-    </>
+    </Container>
   )
 }
diff --git a/src/app/orcid.org/[orcid]/Content.tsx b/src/app/orcid.org/[orcid]/Content.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Row, Col } from "src/components/Layout-4";
+import { Container, Row, Col } from 'react-bootstrap';
 
 import apolloClient from 'src/utils/apolloClient/apolloClient'
 import { PERSON_QUERY, QueryVar, QueryData } from 'src/data/queries/personQuery'

diff --git a/src/app/orcid.org/[orcid]/RelatedContent.tsx b/src/app/orcid.org/[orcid]/RelatedContent.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { useQuery } from '@apollo/client'
-import { Col, Row } from "src/components/Layout-4";
+import { Col, Container, Row } from 'react-bootstrap'
 import Loading from 'src/components/Loading/Loading'
 
 import { RELATED_CONTENT_QUERY, QueryVar, QueryData } from 'src/data/queries/personQuery'
@@ -51,7 +51,7 @@ export default function RelatedContent(props: Props) {
     ? relatedWorks.pageInfo.endCursor
     : ''
 
-  return (<>
+  return (<Container fluid>
     <Row>
       <Col md={{ offset: 3 }}>
         <h3 className="member-results" id="title">{pluralize(relatedWorks.totalCount, 'Work')}</h3>
@@ -69,5 +69,5 @@ export default function RelatedContent(props: Props) {
       url={'/orcid.org/' + orcid + '/?'}
       endCursor={endCursor}
     />
-  </>)
+  </Container>)
 }
diff --git a/src/app/repositories/[...repoid]/Content.tsx b/src/app/repositories/[...repoid]/Content.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Row, Col, Container } from "src/components/Layout-4";
+import { Row, Col, Container } from 'react-bootstrap';
 
 import apolloClient from 'src/utils/apolloClient/apolloClient'
 import { Repository as RepositoryType } from 'src/data/types'

diff --git a/src/app/ror.org/[rorid]/Content.tsx b/src/app/ror.org/[rorid]/Content.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Row, Col } from "src/components/Layout-4";
+import { Row, Col } from "react-bootstrap";
 
 import apolloClient from 'src/utils/apolloClient/apolloClient'
 import { Organization as OrganizationType } from 'src/data/types'

diff --git a/src/app/ror.org/[rorid]/RelatedContent.tsx b/src/app/ror.org/[rorid]/RelatedContent.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { useQuery } from '@apollo/client'
-import { Col, Row } from "src/components/Layout-4";
+import { Col, Row } from 'react-bootstrap';
 import Loading from 'src/components/Loading/Loading'
 
 import { RELATED_CONTENT_QUERY, QueryVar, QueryData } from 'src/data/queries/organizationQuery'

diff --git a/src/app/ror.org/[rorid]/page.tsx b/src/app/ror.org/[rorid]/page.tsx
@@ -6,7 +6,7 @@ import Content from './Content'
 import RelatedContent from './RelatedContent'
 import Loading from 'src/components/Loading/Loading'
 import { MetadataQueryData, MetadataQueryVar, ORGANIZATION_METADATA_QUERY } from 'src/data/queries/organizationQuery'
-import { Container } from 'src/components/Layout-4'
+import { Container } from 'react-bootstrap'
 
 
 interface Props {

diff --git a/src/app/statistics/Content.tsx b/src/app/statistics/Content.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { useQuery } from '@apollo/client'
-import { Alert, Col, Container, Row } from "src/components/Layout-4";
+import { Alert, Col, Container, Row } from 'react-bootstrap'
 import Loading from 'src/components/Loading/Loading'
 
 import { STATISTICS_QUERY, QueryData } from 'src/data/queries/statisticsQuery'

diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Row, Col } from 'src/components/Layout-4'
+import { Row, Col } from 'react-bootstrap'
 
 type Props = {
   title: string

diff --git a/src/components/CitationFormatter/CitationFormatter.tsx b/src/components/CitationFormatter/CitationFormatter.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
 import Error from '../Error/Error'
 import { gql, useQuery } from '@apollo/client'
-import { Alert } from 'src/components/Layout-4'
+import { Col, Alert } from 'react-bootstrap'
 import ReactHtmlParser from 'html-react-parser'
-import { Col } from '../Layout-4'
 
 type Props = {
   id: string

diff --git a/src/components/CiteAs/CiteAs.tsx b/src/components/CiteAs/CiteAs.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import React from 'react'
-import { Col } from 'src/components/Layout-4'
+import { Col } from 'react-bootstrap'
 import { Work } from 'src/data/types'
-import CitationFormatter from '../CitationFormatter/CitationFormatter'
+import CitationFormatter from 'src/components/CitationFormatter/CitationFormatter'
 
 type Props = {
   doi: Work

diff --git a/src/components/Claim/Claim.module.scss b/src/components/Claim/Claim.module.scss
@@ -1,7 +1,9 @@
 .claimDisabled {
   color: #1abc9c !important;
+  width: 100%;
 }
 
 .claimWarning {
-  color: #e67e22 !important;
+  color: #1abc9c !important;
+  width: 100%;
 }