Media: Update/scarier media delete message (Automattic#11629)

* update wording * allow button element instead of text * media-modal: update tests
solarsoft0 · Mar 8, 2017 · 3adf639 · 3adf639
1 parent 79b43b2
commit 3adf639
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/client/lib/accept/README.md b/client/lib/accept/README.md
@@ -7,10 +7,10 @@ Accept is a stylized substitute to the browser `confirm` dialog.
 
 ## Arguments
 
-* `message` - A string that gets displayed to the user in the cofirm dialog. 
+* `message` - A string that gets displayed to the user in the cofirm dialog.
 * `callback` - A callback that gets called after confirms or cancels the dialog.
-* `confirmButtonText` - Optional confirm button text, defaults to 'OK'.
-* `cancelButtonText` - Optional cancel button text, defaults to 'Cancel'.
+* `confirmButtonText` - Optional confirm button text (defaults to 'OK') OR Button element.
+* `cancelButtonText` - Optional cancel button text (defaults to 'Cancel') OR Button element.
 
 ## Usage
 

diff --git a/client/lib/accept/dialog.jsx b/client/lib/accept/dialog.jsx
@@ -15,7 +15,7 @@ const AcceptDialog = React.createClass( {
 		message: PropTypes.node,
 		onClose: PropTypes.func.isRequired,
 		confirmButtonText: PropTypes.node,
-		cancelButtonText: PropTypes.node
+		cancelButtonText: PropTypes.node,
 	},
 
 	getInitialState: function() {
@@ -31,16 +31,18 @@ const AcceptDialog = React.createClass( {
 	},
 
 	getActionButtons: function() {
+		const cancelButton = React.isValidElement( this.props.cancelButtonText ) ? this.props.cancelButtonText : {
+			action: 'cancel',
+			label: this.props.cancelButtonText ? this.props.cancelButtonText : this.props.translate( 'Cancel' ),
+		};
+		const confirmButton = React.isValidElement( this.props.confirmButtonText ) ? this.props.confirmButtonText : {
+			action: 'accept',
+			label: this.props.confirmButtonText ? this.props.confirmButtonText : this.props.translate( 'OK' ),
+			isPrimary: true,
+		};
 		return [
-			{
-				action: 'cancel',
-				label: this.props.cancelButtonText ? this.props.cancelButtonText : this.props.translate( 'Cancel' ),
-			},
-			{
-				action: 'accept',
-				label: this.props.confirmButtonText ? this.props.confirmButtonText : this.props.translate( 'OK' ),
-				isPrimary: true
-			}
+			cancelButton,
+			confirmButton,
 		];
 	},
 

diff --git a/client/post-editor/media-modal/index.jsx b/client/post-editor/media-modal/index.jsx
@@ -30,6 +30,7 @@ import MediaModalGallery from './gallery';
 import MediaActions from 'lib/media/actions';
 import MediaUtils from 'lib/media/utils';
 import Dialog from 'components/dialog';
+import Button from 'components/button';
 import accept from 'lib/accept';
 
 import { getMediaModalView } from 'state/ui/media-modal/selectors';
@@ -174,12 +175,16 @@ export class EditorMediaModal extends Component {
 		}
 
 		const confirmMessage = this.props.translate(
-			'Are you sure you want to permanently delete this item?',
-			'Are you sure you want to permanently delete these items?',
+			'Are you sure you want to permanently delete this item? It will be ' +
+			'permanently removed from all other locations where it currently appears.',
+			'Are you sure you want to permanently delete these items? They will be ' +
+			'permanently removed from all other locations where they appear.',
 			{ count: selectedCount }
 		);
 
-		accept( confirmMessage, this.confirmDeleteMedia );
+		const deleteButton = <Button primary scary>{ this.props.translate( 'Delete' ) }</Button>;
+
+		accept( confirmMessage, this.confirmDeleteMedia, deleteButton );
 	};
 
 	onAddMedia = () => {

diff --git a/client/post-editor/media-modal/test/index.jsx b/client/post-editor/media-modal/test/index.jsx
@@ -73,7 +73,10 @@ describe( 'EditorMediaModal', function() {
 		).instance();
 		tree.deleteMedia();
 
-		expect( accept ).to.have.been.calledWith( 'Are you sure you want to permanently delete this item?' );
+		expect( accept ).to.have.been.calledWith(
+			'Are you sure you want to permanently delete this item? It will be ' +
+			'permanently removed from all other locations where it currently appears.'
+		);
 		process.nextTick( function() {
 			expect( deleteMedia ).to.have.been.calledWith( DUMMY_SITE.ID, media );
 			done();
@@ -86,7 +89,10 @@ describe( 'EditorMediaModal', function() {
 		).instance();
 		tree.deleteMedia();
 
-		expect( accept ).to.have.been.calledWith( 'Are you sure you want to permanently delete these items?' );
+		expect( accept ).to.have.been.calledWith(
+			'Are you sure you want to permanently delete these items? They will be ' +
+			'permanently removed from all other locations where they appear.',
+		);
 		process.nextTick( function() {
 			expect( deleteMedia ).to.have.been.calledWith( DUMMY_SITE.ID, DUMMY_MEDIA );
 			done();
@@ -102,7 +108,10 @@ describe( 'EditorMediaModal', function() {
 		).instance();
 		tree.deleteMedia();
 
-		expect( accept ).to.have.been.calledWith( 'Are you sure you want to permanently delete this item?' );
+		expect( accept ).to.have.been.calledWith(
+			'Are you sure you want to permanently delete this item? It will be ' +
+			'permanently removed from all other locations where it currently appears.'
+		);
 		process.nextTick( function() {
 			expect( deleteMedia ).to.have.been.calledWith( DUMMY_SITE.ID, media );
 			done();
@@ -115,7 +124,10 @@ describe( 'EditorMediaModal', function() {
 		).instance();
 		tree.deleteMedia();
 
-		expect( accept ).to.have.been.calledWith( 'Are you sure you want to permanently delete this item?' );
+		expect( accept ).to.have.been.calledWith(
+			'Are you sure you want to permanently delete this item? It will be ' +
+			'permanently removed from all other locations where it currently appears.'
+		);
 		process.nextTick( function() {
 			expect( deleteMedia ).to.have.been.calledWith( DUMMY_SITE.ID, DUMMY_MEDIA[ 0 ] );
 			done();