reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 17:46:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

added copy to clipboard functionality to Tree, in Actions and State tab, updates permissions, copy to clipboard, chrome, edge, firefox

Browse Source
This commit is contained in:
Iliya Brook 2024-03-06 23:28:52 +02:00
parent 3b7bca2dbb
commit 8fe79d2eb9
8 changed files with 84 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extension/chrome/manifest.json
View File

@ -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",

4
extension/edge/manifest.json
View File

@ -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:;"
}

4
extension/firefox/manifest.json
View File

@ -57,7 +57,9 @@
"storage",
"file:///*",
"http://*/*",
"https://*/*"
"https://*/*",
"clipboardWrite",
"clipboardRead"
],
"content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self' data:;"
}

2
packages/redux-devtools-inspector-monitor/package.json
View File

@ -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",

39
packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
View File

@ -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<S, A extends Action<string>> {
labelRenderer: LabelRenderer;
@ -184,7 +186,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {
const { onInspectPath, inspectedPath } = this.props;
const reversedPath = [key, ...rest].reverse();
return (
<span>
<span>{key}</span>
@ -202,14 +204,41 @@ class ActionPreview<S, A extends Action<string>> extends Component<
onClick={() =>
onInspectPath([
...inspectedPath.slice(0, inspectedPath.length - 1),
...[key, ...rest].reverse(),
...reversedPath,
])
}
>
{'(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();
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)'}
</span>
{!expanded && ': '}
</span>
);
};
}

11
packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts Normal file
View File

@ -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);
}
}

12
packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts Normal file
View File

@ -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;
}

16
pnpm-lock.yaml
View File

@ -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