FEATURE: Make document tree clickable #3440

pKallert · 2023-03-22T15:19:31Z

What I did
I changed the document tree elements into links so that we can open them with right/middle click

How I did it
Since I was not sure how to get the URL (neos/content) from the Node I tried around a little bit and changed the NodeInfoHelper to add the backendUri. I tried to adhere as much as possible to the currently existing "uri" property in the node. If there is a better place for this, I am ready to learn 😄

Some googling told me that a tags without href are valid so I chose to exchange all of the spans into a-tag. Works still as expected.

How to verify it

Links now show up in the left document tree:

closes #3353

mhsdesign · 2023-03-22T19:19:30Z

Nice one, noticed that also here: #3241 (comment)

Im not sure why we need another uri (the backenduri) on the node (seems like a bad idea performance wise and also technically) but have to look into this deeper

Classes/Fusion/Helper/NodeInfoHelper.php

pKallert · 2023-03-23T08:19:54Z

Nice one, noticed that also here: #3241 (comment)

Im not sure why we need another uri (the backenduri) on the node (seems like a bad idea performance wise and also technically) but have to look into this deeper

@mhsdesign
I thought adding it to the node would be cleaner and reusable but if there is concern about the impact on the performance I can also use the solution from the alt+click from here: https://github.com/neos/neos-ui/blob/8.3/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js#L62

markusguenther · 2023-03-23T12:28:03Z

The end to end tests failed because the fluid version is not working. TYPO3/Fluid@24f4494

But guess a new build would work since today 2.7.4 has been released.

packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

packages/react-ui-components/src/Tree/node.js

markusguenther · 2023-04-05T07:08:49Z

Will check it later today

mhsdesign · 2023-04-05T08:59:29Z

question is, what to do with the legacy onClick logic?

onClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

Lines 363 to 382 in 4497f94

    
           handleNodeClick = e => { 
        
               const {node, onNodeFocus, onNodeClick, isFocused, reload} = this.props; 
        
               const metaKeyPressed = e.metaKey || e.ctrlKey; 
        
               const shiftKeyPressed = e.shiftKey; 
        
               const altKeyPressed = e.altKey; 
        
               // Trigger reload if clicking on the current document node 
        
               if (isFocused && reload) { 
        
                   reload(); 
        
               } 
        
               // Append presetBaseNodeType param to src 
        
               const srcWithBaseNodeType = this.props.filterNodeType ? urlWithParams( 
        
                   $get('uri', node), 
        
                   {presetBaseNodeType: this.props.filterNodeType} 
        
               ) : $get('uri', node); 
        
               onNodeFocus(node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed); 
        
               onNodeClick(srcWithBaseNodeType, node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed); 
        
           }

onNodeClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js

Lines 59 to 79 in 4497f94

    
           handleClick = (src, contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed) => { 
        
               const {setActiveContentCanvasSrc, setActiveContentCanvasContextPath, requestScrollIntoView} = this.props; 
        
               if (altKeyPressed) { 
        
                   window.open(window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + window.location.pathname + '?node=' + contextPath); 
        
                   return; 
        
               } 
        
               if (metaKeyPressed || shiftKeyPressed) { 
        
                   return; 
        
               } 
        
               // Set a flag that will imperatively tell ContentCanvas to scroll to focused node 
        
               if (requestScrollIntoView) { 
        
                   requestScrollIntoView(true); 
        
               } 
        
               if (setActiveContentCanvasSrc) { 
        
                   setActiveContentCanvasSrc(src); 
        
               } 
        
               if (setActiveContentCanvasContextPath) { 
        
                   setActiveContentCanvasContextPath(contextPath); 
        
               }

Co-authored-by: Marc Henry Schultz <85400359+mhsdesign@users.noreply.github.com>

markusguenther · 2023-04-12T11:36:59Z

While testing and fixing the End-to-end tests I stumbled over the issue that the multiple move of nodes is broken. Will try to fix that.

Only via Toolbar it is not working yet.
https://app.circleci.com/pipelines/github/neos/neos-ui/3370/workflows/48dac434-bd95-42bf-92bc-67948b9a2c53/jobs/15353

markusguenther · 2023-04-12T19:48:45Z

Finally, the tests are green again :)

https://app.circleci.com/pipelines/github/neos/neos-ui/3376/workflows/d0c3291b-af25-4b80-8797-c82d65403d8b

markusguenther · 2023-04-13T06:24:41Z

question is, what to do with the legacy onClick logic?

onClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

Lines 363 to 382 in 4497f94

handleNodeClick = e => {

const {node, onNodeFocus, onNodeClick, isFocused, reload} = this.props;

const metaKeyPressed = e.metaKey || e.ctrlKey;

const shiftKeyPressed = e.shiftKey;

const altKeyPressed = e.altKey;

// Trigger reload if clicking on the current document node

if (isFocused && reload) {

reload();

}

// Append presetBaseNodeType param to src

const srcWithBaseNodeType = this.props.filterNodeType ? urlWithParams(

$get('uri', node),

{presetBaseNodeType: this.props.filterNodeType}

) : $get('uri', node);

onNodeFocus(node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);

onNodeClick(srcWithBaseNodeType, node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);

}

onNodeClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js

Lines 59 to 79 in 4497f94

handleClick = (src, contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed) => {

const {setActiveContentCanvasSrc, setActiveContentCanvasContextPath, requestScrollIntoView} = this.props;

if (altKeyPressed) {

window.open(window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + window.location.pathname + '?node=' + contextPath);

return;

}

if (metaKeyPressed || shiftKeyPressed) {

return;

}

// Set a flag that will imperatively tell ContentCanvas to scroll to focused node

if (requestScrollIntoView) {

requestScrollIntoView(true);

}

if (setActiveContentCanvasSrc) {

setActiveContentCanvasSrc(src);

}

if (setActiveContentCanvasContextPath) {

setActiveContentCanvasContextPath(contextPath);

}

This logic is still used on a higher layer for the multi operations on nodes.
Have tested the feature and made the tests work again.

mhsdesign · 2023-04-20T09:40:54Z

question is, what to do with the legacy onClick logic?
onClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

Lines 363 to 382 in 4497f94

handleNodeClick = e => {

const {node, onNodeFocus, onNodeClick, isFocused, reload} = this.props;

const metaKeyPressed = e.metaKey || e.ctrlKey;

const shiftKeyPressed = e.shiftKey;

const altKeyPressed = e.altKey;

// Trigger reload if clicking on the current document node

if (isFocused && reload) {

reload();

}

// Append presetBaseNodeType param to src

const srcWithBaseNodeType = this.props.filterNodeType ? urlWithParams(

$get('uri', node),

{presetBaseNodeType: this.props.filterNodeType}

) : $get('uri', node);

onNodeFocus(node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);

onNodeClick(srcWithBaseNodeType, node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);

}

onNodeClick

neos-ui/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js

Lines 59 to 79 in 4497f94

handleClick = (src, contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed) => {

const {setActiveContentCanvasSrc, setActiveContentCanvasContextPath, requestScrollIntoView} = this.props;

if (altKeyPressed) {

window.open(window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + window.location.pathname + '?node=' + contextPath);

return;

}

if (metaKeyPressed || shiftKeyPressed) {

return;

}

// Set a flag that will imperatively tell ContentCanvas to scroll to focused node

if (requestScrollIntoView) {

requestScrollIntoView(true);

}

if (setActiveContentCanvasSrc) {

setActiveContentCanvasSrc(src);

}

if (setActiveContentCanvasContextPath) {

setActiveContentCanvasContextPath(contextPath);

}

This logic is still used on a higher layer for the multi operations on nodes. Have tested the feature and made the tests work again.

This legacy second way now introduces a lot of complexity — and we must clean it up please 😅 (or share the logic, comment it and explain how things work and why this would be necessary) otherwise it’s really hard for future people to make sense of the code

This pr is only okay as intermediate step …

markusguenther · 2023-04-20T12:17:45Z

This legacy second way now introduces a lot of complexity — and we must clean it up please 😅 (or share the logic, comment it and explain how things work and why this would be necessary) otherwise it’s really hard for future people to make sense of the code

This pr is only okay as intermediate step …

Indeed ... we have an issue for making the tree accessible and as I watched into it some months ago I realized that it will need a bit further adjustments on the markup to achieve that. With the change from Paula, we have a first step.

#2938

github-actions bot added Feature Label to mark the change as feature 8.3 labels Mar 22, 2023

Sebobo requested changes Mar 23, 2023

View reviewed changes

Classes/Fusion/Helper/NodeInfoHelper.php Outdated Show resolved Hide resolved

Classes/Fusion/Helper/NodeInfoHelper.php Outdated Show resolved Hide resolved

Classes/Fusion/Helper/NodeInfoHelper.php Outdated Show resolved Hide resolved

crydotsnake self-requested a review March 24, 2023 19:18

pKallert requested a review from Sebobo April 3, 2023 14:35

mhsdesign reviewed Apr 4, 2023

View reviewed changes

packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js Outdated Show resolved Hide resolved

mhsdesign reviewed Apr 4, 2023

View reviewed changes

packages/react-ui-components/src/Tree/node.js Outdated Show resolved Hide resolved

mhsdesign reviewed Apr 4, 2023

View reviewed changes

packages/react-ui-components/src/Tree/node.js Outdated Show resolved Hide resolved

pKallert and others added 5 commits April 11, 2023 13:17

Feature: Make content tree clickable as a link

7001eed

Bugfix: Fixe style

5195f7e

FEATURE: Use Javascript instead of php

2bd6aaf

FEATURE: Use URL for creating the uri

dc1e51a

Co-authored-by: Marc Henry Schultz <85400359+mhsdesign@users.noreply.github.com>

BUGFIX: Remove unneeded query

a9d3b88

Co-authored-by: Marc Henry Schultz <85400359+mhsdesign@users.noreply.github.com>

markusguenther force-pushed the feature/makeContentTreeClickableLink branch from 92aa7aa to a9d3b88 Compare April 11, 2023 11:17

markusguenther added 3 commits April 11, 2023 13:32

TASK: Resolve linting issues

d26f5f4

BUGFIX: Adjust End to End test

1a51654

TASK: Extract link props

719933f

BUGFIX: Make multiple move work again

e3d185e

markusguenther force-pushed the feature/makeContentTreeClickableLink branch from 6a1d841 to e3d185e Compare April 12, 2023 19:47

markusguenther approved these changes Apr 12, 2023

View reviewed changes

markusguenther merged commit 69564eb into neos:8.3 Apr 12, 2023

mhsdesign mentioned this pull request Apr 20, 2023

Cleanup: what to do with the legacy onClick logic? #3466

Open

Alvadda mentioned this pull request Mar 13, 2024

WIP FEATURE: Push history on clicking node link node #3749

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FEATURE: Make document tree clickable #3440

FEATURE: Make document tree clickable #3440

pKallert commented Mar 22, 2023 •

edited by markusguenther

Loading

mhsdesign commented Mar 22, 2023 •

edited

Loading

pKallert commented Mar 23, 2023 •

edited

Loading

markusguenther commented Mar 23, 2023

markusguenther commented Apr 5, 2023

mhsdesign commented Apr 5, 2023 •

edited

Loading

markusguenther commented Apr 12, 2023 •

edited

Loading

markusguenther commented Apr 12, 2023 •

edited

Loading

markusguenther commented Apr 13, 2023

mhsdesign commented Apr 20, 2023

markusguenther commented Apr 20, 2023

FEATURE: Make document tree clickable #3440

FEATURE: Make document tree clickable #3440

Conversation

pKallert commented Mar 22, 2023 • edited by markusguenther Loading

mhsdesign commented Mar 22, 2023 • edited Loading

pKallert commented Mar 23, 2023 • edited Loading

markusguenther commented Mar 23, 2023

markusguenther commented Apr 5, 2023

mhsdesign commented Apr 5, 2023 • edited Loading

markusguenther commented Apr 12, 2023 • edited Loading

markusguenther commented Apr 12, 2023 • edited Loading

markusguenther commented Apr 13, 2023

mhsdesign commented Apr 20, 2023

markusguenther commented Apr 20, 2023

pKallert commented Mar 22, 2023 •

edited by markusguenther

Loading

mhsdesign commented Mar 22, 2023 •

edited

Loading

pKallert commented Mar 23, 2023 •

edited

Loading

mhsdesign commented Apr 5, 2023 •

edited

Loading

markusguenther commented Apr 12, 2023 •

edited

Loading

markusguenther commented Apr 12, 2023 •

edited

Loading