NickAkhmetov/CAT-977 Revise Collection DOI links to copy on click

CHANGELOG-cat-977.md

@@ -0,0 +1 @@
+- Revise Collection DOI links to copy on click instead of opening a new tab that leads to the same page.

context/app/static/js/components/detailPage/Citation/Citation.tsx

@@ -3,6 +3,9 @@ import Typography from '@mui/material/Typography';
 
 import OutboundIconLink from 'js/shared-styles/Links/iconLinks/OutboundIconLink';
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import { useHandleCopyClick } from 'js/hooks/useCopyText';
+import IconLink from 'js/shared-styles/Links/iconLinks/IconLink';
 
 interface Contributor {
   last_name: string;
@@ -24,11 +27,41 @@ interface CitationProps {
   doi_url: string;
   doi: string;
   className?: string;
+  internalDoi?: boolean;
 }
 
-function Citation({ contributors, citationTitle, created_timestamp, doi_url, doi, className }: CitationProps) {
+function ExternalDoiLink({ doi_url }: { doi_url: string }) {
+  return <OutboundIconLink href={doi_url}>{doi_url}</OutboundIconLink>;
+}
+
+function InternalDoiLink({ doi_url }: { doi_url: string }) {
+  const copy = useHandleCopyClick();
+  return (
+    <IconLink
+      href={doi_url}
+      onClick={(e) => {
+        e.preventDefault();
+        copy(doi_url);
+      }}
+      icon={<ContentCopyIcon />}
+    >
+      {doi_url}
+    </IconLink>
+  );
+}
+
+function Citation({
+  contributors,
+  citationTitle,
+  created_timestamp,
+  doi_url,
+  doi,
+  className,
+  internalDoi,
+}: CitationProps) {
   const citation = buildNLMCitation(contributors, citationTitle, created_timestamp);
 
+  const DOI = internalDoi ? InternalDoiLink : ExternalDoiLink;
   return (
     <LabelledSectionText
       label="Citation"
@@ -38,7 +71,7 @@ function Citation({ contributors, citationTitle, created_timestamp, doi_url, doi
       childContainerComponent="div"
     >
       <Typography variant="body1">
-        {citation} Available from: <OutboundIconLink href={doi_url}>{doi_url}</OutboundIconLink>
+        {citation} Available from: <DOI doi_url={doi_url} />
       </Typography>
       <OutboundIconLink href={`https://commons.datacite.org/doi.org/${doi}`}>View DataCite Page</OutboundIconLink>
     </LabelledSectionText>

context/app/static/js/components/detailPage/summary/SummaryBody/SummaryBody.tsx

@@ -108,6 +108,7 @@ function CollectionCitation() {
       contributors={contributors}
       citationTitle={title}
       created_timestamp={created_timestamp}
+      internalDoi
     />
   );
 }

context/app/static/js/pages/Collection/Collection.tsx

@@ -1,39 +1,21 @@
 import React from 'react';
 
-import OutboundIconLink from 'js/shared-styles/Links/iconLinks/OutboundIconLink';
 import Summary from 'js/components/detailPage/summary/Summary';
 import CollectionDatasetsTable from 'js/components/detailPage/CollectionDatasetsTable';
 import ContributorsTable from 'js/components/detailPage/ContributorsTable';
 import useTrackID from 'js/hooks/useTrackID';
 import { Collection } from 'js/components/types';
 
-import { getCollectionDOI } from './utils';
-
-function DOILink({ doi_url }: Pick<Collection, 'doi_url'>) {
-  if (!doi_url) {
-    return null;
-  }
-  const doi = getCollectionDOI(doi_url);
-
-  return (
-    <OutboundIconLink href={doi_url} variant="body1">
-      doi:{doi}
-    </OutboundIconLink>
-  );
-}
-
 function CollectionDetail({ collection: collectionData }: { collection: Collection }) {
-  const { entity_type, hubmap_id, doi_url, datasets, contributors, contacts } = collectionData;
+  const { entity_type, hubmap_id, datasets, contributors, contacts } = collectionData;
 
   useTrackID({ entity_type, hubmap_id });
 
   return (
     <div>
       {collectionData && (
         <>
-          <Summary title={hubmap_id}>
-            <DOILink doi_url={doi_url} />
-          </Summary>
+          <Summary title={hubmap_id} />
           {'datasets' in collectionData && <CollectionDatasetsTable datasets={datasets} />}
           {contributors && Boolean(contributors.length) && (
             <ContributorsTable contributors={contributors} contacts={contacts} title="Contributors" />