Skip to content

Commit fd5076f

Browse files
PRGfxPRGfx
committed
FEATURE: display node-label if available
Instead of the node-name taken from the node-path, we try to display the label of the node. As every node on the page should already be known to the store, the data should be available.
1 parent 1be594d commit fd5076f

File tree

10 files changed

+80
-33
lines changed

10 files changed

+80
-33
lines changed

‎Resources/Private/JavaScript/AxeCoreView/src/AxeCorePopout.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Popout = (props) => {
1717
const store = useStore();
1818
const dispatch = useDispatch();
1919
const currentlySelectedDocument = useSelector(state => selectors.CR.Nodes.documentNodeContextPathSelector(state));
20+
const getNodeData = useSelector(state => selectors.CR.Nodes.nodeByContextPath(state));
2021
const isPoppedOut = useSelector(state => axeCoreViewSelectors.isPoppedOut(state));
2122
const popin = useCallback(() => dispatch(axeCoreViewActions.popin()), [ dispatch ]);
2223
const analyze = useCallback(() => dispatch(axeCoreViewActions.analyze(currentlySelectedDocument)), [ dispatch, currentlySelectedDocument ]);
@@ -44,6 +45,7 @@ const Popout = (props) => {
4445
analyze={analyze}
4546
featureEnabled={props.featureEnabled}
4647
isPopout
48+
getNodeData={getNodeData}
4749
/>
4850
</Provider>
4951
</div>

‎Resources/Private/JavaScript/AxeCoreView/src/AxeCoreView.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { featureEnabled } from './util';
1212
currentReport: axeCoreViewSelectors.getReport(state)(selectors.CR.Nodes.documentNodeContextPathSelector(state)),
1313
isAnalyzing: axeCoreViewSelectors.isAnalyzing(state),
1414
isPoppedOut: axeCoreViewSelectors.isPoppedOut(state),
15+
getNodeData: selectors.CR.Nodes.nodeByContextPath(state),
1516
}),
1617
{
1718
focusNode: actions.CR.Nodes.focus,
@@ -42,6 +43,7 @@ export default class AxeCoreView extends Component {
4243
i18nRegistry={this.props.i18nRegistry}
4344
featureEnabled={isFeatureEnabled}
4445
analyze={this.analyze}
46+
getNodeData={this.props.getNodeData}
4547
/>
4648
);
4749
}

‎Resources/Private/JavaScript/AxeCoreView/src/components/node-info.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IconButton } from '@neos-project/react-ui-components';
33
import { I18nRegistry } from '@neos-project/neos-ts-interfaces';
44
import { ContentElementInfo } from '../types/report';
55
import styles from './node-info.css';
6+
import { NodeData } from '../types/custom';
67

78
interface INodeInfoProps {
89
selector: string;
@@ -12,6 +13,7 @@ interface INodeInfoProps {
1213
highlightNode: (selector: string | null) => void;
1314
highlightedSelector: string | null;
1415
i18nRegistry: I18nRegistry;
16+
getNodeData: (contextPath: string) => NodeData | null;
1517
}
1618

1719
const NodeInfoRow: React.FunctionComponent<{title: string}> = props => (
@@ -25,7 +27,11 @@ export const NodeInfo: React.FunctionComponent<INodeInfoProps> = props => {
2527
const nodePath = props.contentElement
2628
? props.contentElement.contextPath.split('@')[0]
2729
: null;
28-
const nodeName = nodePath?.split('/').pop();
30+
const nodeData = props.contentElement
31+
? props.getNodeData(props.contentElement.contextPath)
32+
: null;
33+
console.log('nodeData', nodeData);
34+
const nodeName = nodeData?.label ?? nodePath?.split('/').pop();
2935
const nodeIsHighlighted = props.highlightedSelector === props.selector;
3036
const onHighlightElement = () =>
3137
props.highlightNode(nodeIsHighlighted ? null : props.selector);

‎Resources/Private/JavaScript/AxeCoreView/src/components/occurrence.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { NodeResult } from 'axe-core';
33
import style from './style.css';
44
import { NodeInfo } from './node-info';
55
import { I18nRegistry } from '@neos-project/neos-ts-interfaces';
6+
import { NodeData } from '../types/custom';
67

78
export interface IOccurrenceProps {
89
node: NodeResult;
910
focusNode: (contextPath: string, fusionPath: string) => void;
1011
highlightNode: (selector: string | null) => void;
1112
highlightedSelector: string | null;
1213
i18nRegistry: I18nRegistry;
14+
getNodeData: (contextPath: string) => NodeData | null;
1315
}
1416

1517
export const Occurrence: React.FunctionComponent<IOccurrenceProps> = props => {
@@ -54,6 +56,7 @@ export const Occurrence: React.FunctionComponent<IOccurrenceProps> = props => {
5456
highlightNode={props.highlightNode}
5557
highlightedSelector={props.highlightedSelector}
5658
i18nRegistry={props.i18nRegistry}
59+
getNodeData={props.getNodeData}
5760
/>
5861
))}
5962
</div>

‎Resources/Private/JavaScript/AxeCoreView/src/components/result-list.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { Result as AxeResult } from 'axe-core';
33
import { I18nRegistry } from '@neos-project/neos-ts-interfaces';
44
import { Result } from './result';
55
import { sortByImpact } from '../util';
6+
import { NodeData } from '../types/custom';
67

78
export interface IResultListProps {
89
items: AxeResult[];
910
focusNode: (contextPath: string, fusionPath: string) => void;
1011
highlightNode: (selector: string | null) => void;
1112
highlightedSelector: string | null;
1213
i18nRegistry: I18nRegistry;
14+
getNodeData: (contextPath: string) => NodeData | null;
1315
}
1416

1517
export const ResultList: React.FunctionComponent<IResultListProps> = props => {
@@ -24,6 +26,7 @@ export const ResultList: React.FunctionComponent<IResultListProps> = props => {
2426
highlightNode={props.highlightNode}
2527
highlightedSelector={props.highlightedSelector}
2628
i18nRegistry={props.i18nRegistry}
29+
getNodeData={props.getNodeData}
2730
/>
2831
))}
2932
</ul>

‎Resources/Private/JavaScript/AxeCoreView/src/components/result.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import { I18nRegistry } from '@neos-project/neos-ts-interfaces';
66
import style from './style.css';
77
import { Occurrence } from './occurrence';
88
import { OccurrencePaginator } from './OccurrencePaginator';
9+
import { NodeData } from '../types/custom';
910

1011
export interface IResultProps {
1112
result: AxeResult;
1213
focusNode: (contextPath: string, fusionPath: string) => void;
1314
highlightNode: (selector: string | null) => void;
1415
highlightedSelector: string | null;
1516
i18nRegistry: I18nRegistry;
17+
getNodeData: (contextPath: string) => NodeData | null;
1618
}
1719

1820
export const Result: React.FunctionComponent<IResultProps> = props => {
@@ -64,6 +66,7 @@ export const Result: React.FunctionComponent<IResultProps> = props => {
6466
highlightNode={props.highlightNode}
6567
highlightedSelector={props.highlightedSelector}
6668
i18nRegistry={props.i18nRegistry}
69+
getNodeData={props.getNodeData}
6770
/>
6871
</>
6972
)}

‎Resources/Private/JavaScript/AxeCoreView/src/components/view.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { highlightElement } from '../guest-frame/highlight';
77
import { getGuestFrameWindow } from '../guest-frame/util';
88
import { Button } from '@neos-project/react-ui-components';
99
import { ResultSection } from './result-section';
10-
import { ResultList } from './result-list';
10+
import { IResultListProps, ResultList } from './result-list';
1111
import { PopoutFeatureName } from '../AxeCorePopout';
1212
import { actions, selectors } from '@neos-project/neos-ui-redux-store';
1313
import styles from './style.css';
1414
import { ExportButton, ExportFeatureName, getFilenameFromTitle } from './export';
15+
import { NodeData } from '../types/custom';
1516

1617
export interface IViewProps {
1718
isAnalyzing: boolean;
@@ -25,6 +26,7 @@ export interface IViewProps {
2526
popin: () => void;
2627
i18nRegistry: I18nRegistry;
2728
featureEnabled: (feature: string) => boolean;
29+
getNodeData: (contextPath: string) => NodeData | null;
2830
}
2931

3032
export const View: React.FunctionComponent<IViewProps> = props => {
@@ -33,6 +35,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
3335
highlightElement(selector);
3436
setHighlightedSelector(selector);
3537
};
38+
3639
useEffect(() => {
3740
return () => {
3841
const gfw = getGuestFrameWindow();
@@ -44,6 +47,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
4447
}
4548
};
4649
});
50+
4751
if (!props.isPopout && props.isPoppedOut) {
4852
return (
4953
<div>
@@ -58,6 +62,15 @@ export const View: React.FunctionComponent<IViewProps> = props => {
5862
</div>
5963
);
6064
}
65+
66+
const commonResultListProps: Omit<IResultListProps, 'items'> = {
67+
focusNode: props.focusNode,
68+
i18nRegistry: props.i18nRegistry,
69+
highlightNode: highlightNode,
70+
highlightedSelector: highlightedSelector,
71+
getNodeData: props.getNodeData,
72+
};
73+
6174
return (
6275
<div>
6376
{props.isAnalyzing && <p>{props.i18nRegistry.translate('Prgfx.Neos.AxeCore:AxeCoreView:view.analyzing')}</p>}
@@ -100,10 +113,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
100113
>
101114
<ResultList
102115
items={props.currentReport.violations}
103-
focusNode={props.focusNode}
104-
i18nRegistry={props.i18nRegistry}
105-
highlightNode={highlightNode}
106-
highlightedSelector={highlightedSelector}
116+
{...commonResultListProps}
107117
/>
108118
</ResultSection>
109119
<ResultSection
@@ -114,10 +124,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
114124
>
115125
<ResultList
116126
items={props.currentReport.incomplete}
117-
focusNode={props.focusNode}
118-
i18nRegistry={props.i18nRegistry}
119-
highlightNode={highlightNode}
120-
highlightedSelector={highlightedSelector}
127+
{...commonResultListProps}
121128
/>
122129
</ResultSection>
123130
<ResultSection
@@ -128,10 +135,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
128135
>
129136
<ResultList
130137
items={props.currentReport.passes}
131-
focusNode={props.focusNode}
132-
i18nRegistry={props.i18nRegistry}
133-
highlightNode={highlightNode}
134-
highlightedSelector={highlightedSelector}
138+
{...commonResultListProps}
135139
/>
136140
</ResultSection>
137141
<ResultSection
@@ -142,10 +146,7 @@ export const View: React.FunctionComponent<IViewProps> = props => {
142146
>
143147
<ResultList
144148
items={props.currentReport.inapplicable}
145-
focusNode={props.focusNode}
146-
i18nRegistry={props.i18nRegistry}
147-
highlightNode={highlightNode}
148-
highlightedSelector={highlightedSelector}
149+
{...commonResultListProps}
149150
/>
150151
</ResultSection>
151152
</React.Fragment>
@@ -159,6 +160,7 @@ export interface IViewContainerProps {
159160
analyze: () => void;
160161
isPopout?: boolean;
161162
featureEnabled: (feature: string) => boolean;
163+
getNodeData: (contextPath: string) => NodeData | null;
162164
}
163165

164166
export const ViewContainer: React.FunctionComponent<IViewContainerProps> = props => {
@@ -186,6 +188,7 @@ export const ViewContainer: React.FunctionComponent<IViewContainerProps> = props
186188
i18nRegistry={props.i18nRegistry}
187189
isPopout={props.isPopout}
188190
featureEnabled={props.featureEnabled}
191+
getNodeData={props.getNodeData}
189192
/>
190193
);
191194
};

‎Resources/Private/JavaScript/AxeCoreView/src/types/custom.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type NodeData = {
2+
label: string;
3+
contextPath: string;
4+
name: string;
5+
nodeType: string;
6+
depth: number;
7+
parent: string;
8+
}

0 commit comments

Comments
 (0)