Adds copy functionality to breadcrumbs

uselagoon · Feb 19, 2025 · 1e2a904 · 1e2a904
1 parent 74a241f
commit 1e2a904
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "@types/core-js": "^2.5.5",
     "@types/git-url-parse": "^9.0.1",
     "@types/react": "^18.0.37",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.0.11",
     "@types/react-highlight-words": "^0.16.4",
     "@types/recompose": "^0.30.10",

diff --git a/src/components/Breadcrumbs/Breadcrumb.tsx b/src/components/Breadcrumbs/Breadcrumb.tsx
@@ -1,9 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Skeleton from 'react-loading-skeleton';
 
 import Router from 'next/router';
 
-import { BreadCrumbLink, StyledBreadCrumb } from './StyledBreadCrumb';
+import { BreadCrumbLink, StyledBreadCrumb, StyledCopyWrapper } from './StyledBreadCrumb';
 
 interface BreadcrumbProps {
   header: string;
@@ -17,24 +18,46 @@ interface BreadcrumbProps {
   asPath: string;
   loading?: boolean;
 }
+const Breadcrumb: FC<BreadcrumbProps> = ({ header, title, urlObject, asPath, loading }) => {
+  const [copied, setCopied] = useState(false);
 
-const Breadcrumb: FC<BreadcrumbProps> = ({ header, title, urlObject, asPath, loading }) => (
-  <>
-    <BreadCrumbLink
-      href={asPath}
-      onClick={e => {
-        e.preventDefault();
-        void Router.push(urlObject, asPath);
-      }}
-    >
-      <StyledBreadCrumb className="breadcrumb">
-        <div>
-          <label>{header}</label>
-          {title ? <h2>{title}</h2> : loading && <Skeleton width={150} />}
+  return (
+    <>
+      <BreadCrumbLink
+        href={asPath}
+        onClick={e => {
+          e.preventDefault();
+          void Router.push(urlObject, asPath);
+        }}
+      >
+        <StyledBreadCrumb className="breadcrumb">
+          <div>
+            <label>{header}</label>
+            {title ? <h2>{title}</h2> : loading && <Skeleton width={150} />}
+          </div>
+        </StyledBreadCrumb>
+      </BreadCrumbLink>
+      <StyledCopyWrapper>
+        <div className="copy-field">
+          <span className="copied" style={copied ? { top: '-20px', opacity: '0' } : {}}>
+            Copied
+          </span>
+          <CopyToClipboard
+            data-cy="copyButton"
+            text={title}
+            onCopy={() => {
+              setCopied(true);
+              setTimeout(function () {
+                setCopied(false);
+              }, 750);
+            }}
+          >
+            <span className="copy" />
+          </CopyToClipboard>
         </div>
-      </StyledBreadCrumb>
-    </BreadCrumbLink>
-  </>
-);
+      </StyledCopyWrapper>
+    </>
+  );
+};
 
 export default Breadcrumb;
diff --git a/src/components/Breadcrumbs/StyledBreadCrumb.tsx b/src/components/Breadcrumbs/StyledBreadCrumb.tsx
@@ -1,4 +1,4 @@
-import { bp, color } from 'lib/variables';
+import { bp, color, fontSize } from 'lib/variables';
 import styled from 'styled-components';
 
 export const StyledBreadCrumb = styled.div`
@@ -62,3 +62,45 @@ export const StyledBreadcrumbsWrapper = styled.div`
     margin: 0 calc((100vw / 16) * 1);
   }
 `;
+
+export const StyledCopyWrapper = styled.div`
+  margin-right: 8px;
+
+  .copy-field {
+    display: flex;
+    width: 100%;
+    overflow: visible;
+    transform: translateX(-13px);
+  }
+
+  .copy {
+    background: url('/static/images/copy.svg') center center no-repeat ${props => props.theme.backgrounds.breadCrumbs};
+    background-size: 16px;
+    bottom: 0;
+    height: 34px;
+    position: absolute;
+    right: 20px;
+    width: 40px;
+    top: 10px;
+    transition: all 0.5s;
+
+    &:hover {
+      background-color: ${props => props.theme.backgrounds.sidebar};
+      cursor: pointer;
+    }
+  }
+
+  .copied {
+    background-color: ${props => props.theme.backgrounds.breadCrumbs};
+    ${fontSize(9, 16)};
+    border-radius: 3px;
+    padding: 0 2px;
+    position: absolute;
+    right: 20px;
+    text-transform: uppercase;
+    top: 10px;
+    transition:
+      top 0.5s,
+      opacity 0.75s ease-in;
+  }
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -4015,6 +4015,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-copy-to-clipboard@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz#0cb724d4228f1c2f8f5675671b3971c8801d5f45"
+  integrity sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^18.0.11":
   version "18.3.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"