Merge pull request #835 from Rohitbels/copu_document_path

Copy Document Path to Clipboard

src/components/SideDrawer/FieldWrapper.tsx

@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import { DocumentPath as DocumentPathIcon } from "@src/assets/icons";
 import LaunchIcon from "@mui/icons-material/Launch";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LockIcon from "@mui/icons-material/LockOutlined";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
 
@@ -25,6 +26,8 @@ import {
 import { FieldType } from "@src/constants/fields";
 import { getFieldProp } from "@src/components/fields";
 import { getLabelId, getFieldId } from "./utils";
+import { useSnackbar } from "notistack";
+import { copyToClipboard } from "@src/utils/ui";
 
 export interface IFieldWrapperProps {
   children?: React.ReactNode;
@@ -49,7 +52,7 @@ export default function FieldWrapper({
 }: IFieldWrapperProps) {
   const [projectId] = useAtom(projectIdAtom, projectScope);
   const [altPress] = useAtom(altPressAtom, projectScope);
-
+  const { enqueueSnackbar } = useSnackbar();
   return (
     <div>
       <Stack
@@ -126,7 +129,14 @@ export default function FieldWrapper({
           >
             {debugText}
           </Typography>
-
+          <IconButton
+            onClick={() => {
+              copyToClipboard(debugText as string);
+              enqueueSnackbar("Copied!");
+            }}
+          >
+            <ContentCopyIcon />
+          </IconButton>
           <IconButton
             href={`https://console.firebase.google.com/project/${projectId}/firestore/data/~2F${(
               debugText as string

src/utils/ui.ts

@@ -8,3 +8,7 @@ export const isTargetInsideBox = (target: Element, box: Element) => {
 
 export const spreadSx = (sx?: SxProps<Theme>) =>
   Array.isArray(sx) ? sx : sx ? [sx] : [];
+
+export const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};