From 061145a2e80a463220f519cff2609885f81bfea7 Mon Sep 17 00:00:00 2001
From: Fekete Otto <otto.fekete@sensenet.com>
Date: Mon, 20 Jun 2022 10:59:39 +0200
Subject: [PATCH 1/2] Add: CopyPath next to Breadcrumbs

---
 apps/sensenet/src/components/Breadcrumbs.tsx  |  4 +-
 apps/sensenet/src/components/CopyPath.tsx     | 40 +++++++++++++++++++
 .../src/components/content/Explore.tsx        |  2 +-
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 apps/sensenet/src/components/CopyPath.tsx

diff --git a/apps/sensenet/src/components/Breadcrumbs.tsx b/apps/sensenet/src/components/Breadcrumbs.tsx
index 046c6dee1..2a308a573 100644
--- a/apps/sensenet/src/components/Breadcrumbs.tsx
+++ b/apps/sensenet/src/components/Breadcrumbs.tsx
@@ -4,6 +4,7 @@ import Button from '@material-ui/core/Button'
 import Tooltip from '@material-ui/core/Tooltip'
 import React, { MouseEvent, useState } from 'react'
 import { ContentContextMenu } from './context-menu/content-context-menu'
+import CopyPath from './CopyPath'
 import { DropFileArea } from './DropFileArea'
 
 export interface BreadcrumbItem<T extends GenericContent> {
@@ -27,7 +28,7 @@ export function Breadcrumbs<T extends GenericContent>(props: BreadcrumbProps<T>)
     <>
       <MUIBreadcrumbs maxItems={5} aria-label="breadcrumb">
         {props.items.map((item) => (
-          <DropFileArea key={item.content.Id} parentContent={item.content} style={{ display: 'inline-block' }}>
+          <DropFileArea key={item.content.Id} parentContent={item.content} style={{ display: 'flex' }}>
             <Tooltip title={item.title}>
               <Button
                 data-test={`breadcrumb-item-${item.displayName.replace(/\s+/g, '-').toLowerCase()}`}
@@ -45,6 +46,7 @@ export function Breadcrumbs<T extends GenericContent>(props: BreadcrumbProps<T>)
           </DropFileArea>
         ))}
       </MUIBreadcrumbs>
+      <CopyPath copyText={props.items[props.items.length - 1].title} />
       {contextMenuItem ? (
         <ContentContextMenu
           isOpened={isContextMenuOpened}
diff --git a/apps/sensenet/src/components/CopyPath.tsx b/apps/sensenet/src/components/CopyPath.tsx
new file mode 100644
index 000000000..ab686bec8
--- /dev/null
+++ b/apps/sensenet/src/components/CopyPath.tsx
@@ -0,0 +1,40 @@
+import Button from '@material-ui/core/Button'
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'
+import React, { useState } from 'react'
+
+type Props = { copyText: string }
+
+const CopyPath = ({ copyText }: Props) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyTextToClipboard = async (text: string) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(text)
+    } else {
+      return document.execCommand('copy', true, text)
+    }
+  }
+
+  const handleCopyClick = () => {
+    copyTextToClipboard(copyText)
+      .then(() => {
+        setIsCopied(true)
+        setTimeout(() => {
+          setIsCopied(false)
+        }, 1500)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+
+  return (
+    <div>
+      <Button onClick={handleCopyClick}>
+        <span>{isCopied ? 'Copied!' : <FileCopyOutlinedIcon />}</span>
+      </Button>
+    </div>
+  )
+}
+
+export default CopyPath
diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
index 1cd76b0de..34c4da493 100644
--- a/apps/sensenet/src/components/content/Explore.tsx
+++ b/apps/sensenet/src/components/content/Explore.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme: Theme) => {
       boxSizing: 'border-box',
       borderBottom: theme.palette.type === 'light' ? '1px solid #DBDBDB' : '1px solid rgba(255, 255, 255, 0.11)',
       paddingLeft: '15px',
-      justifyContent: 'space-between',
+      justifyContent: 'start',
     },
     treeAndDatagridWrapper: {
       display: 'flex',

From 90e0ee76a586b32d678eba01e3e86ed1149b730c Mon Sep 17 00:00:00 2001
From: Fekete Otto <otto.fekete@sensenet.com>
Date: Fri, 24 Jun 2022 11:02:27 +0200
Subject: [PATCH 2/2] CopyPathButton: Check icon

---
 apps/sensenet/src/components/CopyPath.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/sensenet/src/components/CopyPath.tsx b/apps/sensenet/src/components/CopyPath.tsx
index ab686bec8..d8daefc5c 100644
--- a/apps/sensenet/src/components/CopyPath.tsx
+++ b/apps/sensenet/src/components/CopyPath.tsx
@@ -1,4 +1,5 @@
 import Button from '@material-ui/core/Button'
+import CheckCircleOutlineOutlinedIcon from '@material-ui/icons/CheckCircleOutlineOutlined'
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'
 import React, { useState } from 'react'
 
@@ -31,7 +32,9 @@ const CopyPath = ({ copyText }: Props) => {
   return (
     <div>
       <Button onClick={handleCopyClick}>
-        <span>{isCopied ? 'Copied!' : <FileCopyOutlinedIcon />}</span>
+        <span>
+          {isCopied ? <CheckCircleOutlineOutlinedIcon style={{ color: 'lightgreen' }} /> : <FileCopyOutlinedIcon />}
+        </span>
       </Button>
     </div>
   )