Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEATURE: custom node deletion text #3294

Merged
merged 8 commits into from
Feb 22, 2023
Merged

FEATURE: custom node deletion text #3294

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5bd3dce
Feature: Custom Confirm delete note text
pKallert Dec 13, 2022
382f440
Feature: Add translation
pKallert Dec 13, 2022
cdec27e
Merge branch 'master' into feature/DeleteNodeConfirmText
pKallert Dec 13, 2022
cc662a8
Feature: move Settings
pKallert Dec 22, 2022
3a37de8
Feature: add truncated string
pKallert Dec 22, 2022
8c19337
Fix: Linter
pKallert Feb 20, 2023
f222c31
Merge branch '8.3' into feature/DeleteNodeConfirmText
markusguenther Feb 22, 2023
c6a5458
TASK: Remove usage of I18n component
markusguenther Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 45 additions & 21 deletions packages/neos-ui/src/Containers/Modals/DeleteNode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {$get, $transform} from 'plow-js';
import Button from '@neos-project/react-ui-components/src/Button/';
import Dialog from '@neos-project/react-ui-components/src/Dialog/';
import Icon from '@neos-project/react-ui-components/src/Icon/';
import I18n from '@neos-project/neos-ui-i18n';

import {selectors, actions} from '@neos-project/neos-ui-redux-store';
import {neos} from '@neos-project/neos-ui-decorators';
Expand Down Expand Up @@ -48,42 +47,47 @@ export default class DeleteNodeModal extends PureComponent {
}

renderTitle() {
const {nodesToBeDeletedContextPaths, getNodeByContextPath, nodeTypesRegistry} = this.props;
const {nodesToBeDeletedContextPaths, getNodeByContextPath, nodeTypesRegistry, i18nRegistry} = this.props;
if (nodesToBeDeletedContextPaths.length === 1) {
const singleNodeToBeDeletedContextPath = nodesToBeDeletedContextPaths[0];
const node = getNodeByContextPath(singleNodeToBeDeletedContextPath);
const nodeType = $get('nodeType', node);
const nodeTypeLabel = $get('ui.label', nodeTypesRegistry.get(nodeType)) || 'Neos.Neos:Main:node';
const nodeTypeLabelText = i18nRegistry.translate(nodeTypeLabel, 'Node')
const deleteLabel = i18nRegistry.translate('delete', 'Delete')
return (
<div className={style.modalTitleContainer}>
<Icon icon="exclamation-triangle"/>
<span className={style.modalTitle}>
<I18n id="Neos.Neos:Main:delete" fallback="Delete"/>
{deleteLabel}
&nbsp;
<I18n id={nodeTypeLabel} fallback="Node"/>
{nodeTypeLabelText}
&nbsp;
"{$get('label', node)}"
</span>
</div>
);
}

const deleteMultipleNodesLabel = i18nRegistry.translate(
'deleteXNodes',
'Delete multiple nodes',
{amount: nodesToBeDeletedContextPaths.length},
'Neos.Neos.Ui',
'Main'
)
return (
<div>
<Icon icon="exclamation-triangle"/>
<span className={style.modalTitle}>
<I18n
id="Neos.Neos.Ui:Main:deleteXNodes"
params={{
amount: nodesToBeDeletedContextPaths.length
}}
fallback="Delete multiple nodes"
/>
{deleteMultipleNodesLabel}
</span>
</div>
);
}

renderAbort() {
const abortLabel = this.props.i18nRegistry.translate('cancel', 'Cancel')
return (
<Button
id="neos-DeleteNodeModal-Cancel"
Expand All @@ -92,12 +96,13 @@ export default class DeleteNodeModal extends PureComponent {
hoverStyle="brand"
onClick={this.handleAbort}
>
<I18n id="Neos.Neos:Main:cancel" fallback="Cancel"/>
{abortLabel}
</Button>
);
}

renderConfirm() {
const confirmationLabel = this.props.i18nRegistry.translate('deleteConfirm', 'Confirm')
return (
<Button
id="neos-DeleteNodeModal-Confirm"
Expand All @@ -107,22 +112,32 @@ export default class DeleteNodeModal extends PureComponent {
onClick={this.handleConfirm}
>
<Icon icon="ban" className={style.buttonIcon}/>
<I18n id="Neos.Neos:Main:deleteConfirm" fallback="Confirm"/>
{confirmationLabel}
</Button>
);
}

render() {
const {nodesToBeDeletedContextPaths, getNodeByContextPath, i18nRegistry} = this.props;
let node = null;
if (nodesToBeDeletedContextPaths.length === 1) {
const singleNodeToBeDeletedContextPath = nodesToBeDeletedContextPaths[0];
node = getNodeByContextPath(singleNodeToBeDeletedContextPath);
}
const {nodesToBeDeletedContextPaths, getNodeByContextPath, i18nRegistry, nodeTypesRegistry} = this.props;

if (nodesToBeDeletedContextPaths.length === 0) {
return null;
}
let node = null;
const warnings = [];

nodesToBeDeletedContextPaths.forEach(nodeToBeDeleted => {
node = getNodeByContextPath(nodeToBeDeleted);
const nodeLabel = $get('label', node);
const deleteMessage = $get('ui.deleteConfirmation.message', nodeTypesRegistry.get(node.nodeType));
const nodeType = $get('ui.label', nodeTypesRegistry.get(node.nodeType))
warnings.push({
'deleteMessage': i18nRegistry.translate(deleteMessage),
'nodeType': i18nRegistry.translate(nodeType, 'Node'),
'nodeLabelTruncated': nodeLabel.substring(0, 30).substring(0, nodeLabel.substring(0, 30).lastIndexOf(' ')),
nodeLabel
});
});

return (
<Dialog
Expand All @@ -134,8 +149,17 @@ export default class DeleteNodeModal extends PureComponent {
id="neos-DeleteNodeDialog"
>
<div className={style.modalContents}>
<I18n id="Neos.Neos:Main:content.navigate.deleteNodeDialog.header"/>
&nbsp; {nodesToBeDeletedContextPaths.length > 1 ? `${nodesToBeDeletedContextPaths.length} ${i18nRegistry.translate('nodes', 'nodes', {}, 'Neos.Neos.Ui', 'Main')}` : `"${$get('label', node)}"`}?
<p>
{i18nRegistry.translate('content.navigate.deleteNodeDialog.header')}
&nbsp; {nodesToBeDeletedContextPaths.length > 1 ? `${nodesToBeDeletedContextPaths.length} ${i18nRegistry.translate('nodes', 'nodes', {}, 'Neos.Neos.Ui', 'Main')}` : `"${$get('label', node)}"`}?
</p>
{warnings.length > 0 ? <hr /> : ''}
{warnings.map((warning, index) => <p key={index}>
{warning.nodeType}
<i> "{warning.nodeLabelTruncated + (warning.nodeLabelTruncated < warning.nodeLabel ? '...' : '')}"</i>
<span> : </span>
{warning.deleteMessage}</p>
)}
</div>
</Dialog>
);
Expand Down