From 8fe79d2eb9300a8fad6e292dd09673141ea12061 Mon Sep 17 00:00:00 2001 From: Iliya Brook Date: Wed, 6 Mar 2024 23:28:52 +0200 Subject: [PATCH 1/2] added copy to clipboard functionality to Tree, in Actions and State tab, updates permissions, copy to clipboard, chrome, edge, firefox --- extension/chrome/manifest.json | 4 +- extension/edge/manifest.json | 4 +- extension/firefox/manifest.json | 4 +- .../package.json | 2 + .../src/ActionPreview.tsx | 39 ++++++++++++++++--- .../src/utils/copyToClipboard.ts | 11 ++++++ .../src/utils/getValueByPath.ts | 12 ++++++ pnpm-lock.yaml | 16 ++++++++ 8 files changed, 84 insertions(+), 8 deletions(-) create mode 100644 packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts create mode 100644 packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json index 7369d6c8a5..a1b33abaeb 100644 --- a/extension/chrome/manifest.json +++ b/extension/chrome/manifest.json @@ -61,7 +61,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;", "update_url": "https://clients2.google.com/service/update2/crx", diff --git a/extension/edge/manifest.json b/extension/edge/manifest.json index 00fb14e6c3..097ea2ca00 100644 --- a/extension/edge/manifest.json +++ b/extension/edge/manifest.json @@ -61,7 +61,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;" } diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json index c19b76e8b2..7bf83536df 100644 --- a/extension/firefox/manifest.json +++ b/extension/firefox/manifest.json @@ -57,7 +57,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self' data:;" } diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 2808dcffee..1db31dcfa8 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 3427fb2d3b..a3837b0284 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,6 +10,8 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; +import { getValueByPath } from './utils/getValueByPath'; +import { copyToClipboard } from './utils/copyToClipboard'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -184,7 +186,7 @@ class ActionPreview> extends Component< labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => { const { onInspectPath, inspectedPath } = this.props; - + const reversedPath = [key, ...rest].reverse(); return ( {key} @@ -202,14 +204,41 @@ class ActionPreview> extends Component< onClick={() => onInspectPath([ ...inspectedPath.slice(0, inspectedPath.length - 1), - ...[key, ...rest].reverse(), + ...reversedPath, ]) } > - {'(pin)'} - - {!expanded && ': '} + {'(pin)'} + ({ + fontSize: '0.7em', + paddingLeft: '5px', + cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, + color: theme.PIN_COLOR, + })} + onClick={event => { + event.stopPropagation(); + let objectForCopying; + if (this.props.tabName === 'Action') { + objectForCopying = getValueByPath(this.props.action, reversedPath); + } else if (this.props.tabName === 'State') { + objectForCopying = getValueByPath(this.props.nextState, reversedPath); + } + if (objectForCopying !== undefined) { + copyToClipboard(objectForCopying); + } else { + console.error('Unable to find the object to copy'); + } + }} + > + {'(copy)'} + + {!expanded && ': '} + ); }; } diff --git a/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts new file mode 100644 index 0000000000..39f4021c46 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts @@ -0,0 +1,11 @@ +import cloneDeep from 'lodash.clonedeep'; + +export function copyToClipboard(object: any){ + try { + const deepCopiedObject = cloneDeep(object); + const jsonString = JSON.stringify(deepCopiedObject, null, 2); + void navigator.clipboard.writeText(jsonString); + } catch (err) { + console.error('Error during copy: ', err); + } +} diff --git a/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts new file mode 100644 index 0000000000..f98ce1c288 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts @@ -0,0 +1,12 @@ +export function getValueByPath(obj: any, path: (string | number)[]){ + let current: any = obj; + for (let i = 0; i < path.length; i++) { + const key = path[i]; + const adjustedKey = typeof key === 'string' && !isNaN(Number(key)) ? parseInt(key, 10) : key; + if (current[adjustedKey] === undefined) { + return undefined; + } + current = current[adjustedKey]; + } + return current; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1b769dd14..93903bf9a7 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 From eae2d5b752c31195bb9399225149759e06149e59 Mon Sep 17 00:00:00 2001 From: Iliya Brook Date: Wed, 6 Mar 2024 23:31:03 +0200 Subject: [PATCH 2/2] prettier write --- .../src/ActionPreview.tsx | 22 ++++++++++++------- .../src/utils/copyToClipboard.ts | 2 +- .../src/utils/getValueByPath.ts | 5 +++-- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index a3837b0284..cab7b740e5 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -208,8 +208,8 @@ class ActionPreview> extends Component< ]) } > - {'(pin)'} - + {'(pin)'} + ({ fontSize: '0.7em', @@ -220,13 +220,19 @@ class ActionPreview> extends Component< }, color: theme.PIN_COLOR, })} - onClick={event => { + onClick={(event) => { event.stopPropagation(); let objectForCopying; if (this.props.tabName === 'Action') { - objectForCopying = getValueByPath(this.props.action, reversedPath); + objectForCopying = getValueByPath( + this.props.action, + reversedPath, + ); } else if (this.props.tabName === 'State') { - objectForCopying = getValueByPath(this.props.nextState, reversedPath); + objectForCopying = getValueByPath( + this.props.nextState, + reversedPath, + ); } if (objectForCopying !== undefined) { copyToClipboard(objectForCopying); @@ -235,10 +241,10 @@ class ActionPreview> extends Component< } }} > - {'(copy)'} - + {'(copy)'} + {!expanded && ': '} - + ); }; } diff --git a/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts index 39f4021c46..a43b01a5e7 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts @@ -1,6 +1,6 @@ import cloneDeep from 'lodash.clonedeep'; -export function copyToClipboard(object: any){ +export function copyToClipboard(object: any) { try { const deepCopiedObject = cloneDeep(object); const jsonString = JSON.stringify(deepCopiedObject, null, 2); diff --git a/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts index f98ce1c288..e7610fccb6 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts @@ -1,8 +1,9 @@ -export function getValueByPath(obj: any, path: (string | number)[]){ +export function getValueByPath(obj: any, path: (string | number)[]) { let current: any = obj; for (let i = 0; i < path.length; i++) { const key = path[i]; - const adjustedKey = typeof key === 'string' && !isNaN(Number(key)) ? parseInt(key, 10) : key; + const adjustedKey = + typeof key === 'string' && !isNaN(Number(key)) ? parseInt(key, 10) : key; if (current[adjustedKey] === undefined) { return undefined; }