From 038f30ecc18cb809d5c7632f01756fc26b43fd18 Mon Sep 17 00:00:00 2001
From: Iliya Brook <iliyabrook1987@gmail.com>
Date: Wed, 6 Mar 2024 14:29:44 +0200
Subject: [PATCH] add copy object to Tree "copy" button next to the "pin"
 button

---
 .../package.json                              |  2 ++
 .../src/ActionPreview.tsx                     | 33 +++++++++++++++++--
 pnpm-lock.yaml                                | 16 +++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json
index 2808dcff..1db31dcf 100644
--- a/packages/redux-devtools-inspector-monitor/package.json
+++ b/packages/redux-devtools-inspector-monitor/package.json
@@ -47,6 +47,7 @@
     "immutable": "^4.3.5",
     "javascript-stringify": "^2.1.0",
     "jsondiffpatch": "^0.6.0",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
     "react-json-tree": "^0.18.0",
@@ -66,6 +67,7 @@
     "@types/dateformat": "^5.0.2",
     "@types/hex-rgba": "^1.0.3",
     "@types/history": "^4.7.11",
+    "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.2.58",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
index 3427fb2d..17181b68 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
@@ -10,6 +10,7 @@ import ActionPreviewHeader from './ActionPreviewHeader';
 import DiffTab from './tabs/DiffTab';
 import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
+import cloneDeep from 'lodash.clonedeep';
 
 export interface TabComponentProps<S, A extends Action<string>> {
   labelRenderer: LabelRenderer;
@@ -80,6 +81,15 @@ class ActionPreview<S, A extends Action<string>> extends Component<
   static defaultProps = {
     tabName: DEFAULT_STATE.tabName,
   };
+  copyToClipboard = () => {
+    try {
+      const deepCopiedObject = cloneDeep(this.props.nextState);
+      const jsonString = JSON.stringify(deepCopiedObject, null, 2);
+      void navigator.clipboard.writeText(jsonString);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
 
   render(): JSX.Element {
     const {
@@ -206,10 +216,27 @@ class ActionPreview<S, A extends Action<string>> extends Component<
             ])
           }
         >
-          {'(pin)'}
-        </span>
-        {!expanded && ': '}
+              {'(pin)'}
       </span>
+        <span
+          css={(theme) => ({
+            fontSize: '0.7em',
+            paddingLeft: '5px',
+            cursor: 'pointer',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+            color: theme.PIN_COLOR,
+          })}
+          onClick={event => {
+            event.stopPropagation();
+            this.copyToClipboard();
+          }}
+        >
+        {'(copy)'}
+      </span>
+        {!expanded && ': '}
+    </span>
     );
   };
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1b769dd..93903bf9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1614,6 +1614,9 @@ importers:
       jsondiffpatch:
         specifier: ^0.6.0
         version: 0.6.0
+      lodash.clonedeep:
+        specifier: ^4.5.0
+        version: 4.5.0
       lodash.debounce:
         specifier: ^4.0.8
         version: 4.0.8
@@ -1669,6 +1672,9 @@ importers:
       '@types/history':
         specifier: ^4.7.11
         version: 4.7.11
+      '@types/lodash.clonedeep':
+        specifier: ^4.5.9
+        version: 4.5.9
       '@types/lodash.debounce':
         specifier: ^4.0.9
         version: 4.0.9
@@ -10273,6 +10279,12 @@ packages:
       '@types/lodash': 4.14.202
     dev: true
 
+  /@types/lodash.clonedeep@4.5.9:
+    resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==}
+    dependencies:
+      '@types/lodash': 4.14.202
+    dev: true
+
   /@types/lodash.curry@4.1.9:
     resolution: {integrity: sha512-QV967vSflHEza0d0IMTK7fwbl+baPBXZjcESeAHrA5eSE+EHetaggZjPpkzX1NJh4qa8DLOLScwUR+f7FN85Zg==}
     dependencies:
@@ -16841,6 +16853,10 @@ packages:
   /lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
+  /lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    dev: false
+
   /lodash.curry@4.1.1:
     resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==}
     dev: false