Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-06 06:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #12070 from ToolJet/fix/component-to-inspector

Browse source 
Fix: One click option to open the component directly in the inspector
This commit is contained in:
Johnson Cherian 2025-03-10 12:10:47 +05:30 committed by GitHub
commit a87036c228
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
View file

@ -88,9 +88,19 @@ const LeftSidebarInspector = ({ darkMode, pinned, setPinned }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
const handleNodeExpansion = (path) => {
const handleNodeExpansion = (path, data, currentNode) => {
if (pathToBeInspected && path?.length > 0) {
return pathToBeInspected.includes(path[path.length - 1]);
const shouldExpand = pathToBeInspected.includes(path[path.length - 1]);
// Scroll to the component in the inspector
if (path?.length === 2 && path?.[0] === 'components' && shouldExpand) {
const target = document.getElementById(`inspector-node-${String(currentNode).toLowerCase()}`);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
return shouldExpand;
} else return false;
};

3
frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
View file

@ -53,7 +53,7 @@ export const JSONNode = ({ data, ...restProps }) => {
React.useEffect(() => {
if (typeof shouldExpandNode === 'function') {
set(shouldExpandNode(path, data));
set(shouldExpandNode(path, data, currentNode));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pathToBeInspected]);
@ -345,6 +345,7 @@ export const JSONNode = ({ data, ...restProps }) => {
'group-object-container': shouldDisplayIntendedBlock,
'mx-2': typeofCurrentNode !== 'Object' && typeofCurrentNode !== 'Array',
})}
id={`inspector-node-${String(currentNode).toLowerCase()}`}
data-cy={`inspector-node-${String(currentNode).toLowerCase()}`}
>
{$NODEIcon && <div className="json-tree-icon-container">{$NODEIcon}</div>}