Add: CopyPath next to Breadcrumbs

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}

apps/sensenet/src/components/CopyPath.tsx

@@ -0,0 +1,43 @@
+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'
+
+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 ? <CheckCircleOutlineOutlinedIcon style={{ color: 'lightgreen' }} /> : <FileCopyOutlinedIcon />}
+        </span>
+      </Button>
+    </div>
+  )
+}
+
+export default CopyPath

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',