Delete Asset Modal Styles v1

openedx · Dec 22, 2017 · 61ec7d2 · 61ec7d2
2 parents 8246b05 + 7cc55c6
commit 61ec7d2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edx/studio-frontend",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "The frontend for the Open edX platform",
   "repository": "edx/studio-frontend",
   "scripts": {
@@ -13,7 +13,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.0",
-    "@edx/paragon": "^1.4.10",
+    "@edx/paragon": "^1.4.11",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.0.8",

diff --git a/src/components/AssetsTable/AssetsTable.scss b/src/components/AssetsTable/AssetsTable.scss
@@ -0,0 +1 @@
+@import '../../SFE.scss';
diff --git a/src/components/AssetsTable/AssetsTable.test.jsx b/src/components/AssetsTable/AssetsTable.test.jsx
@@ -372,7 +372,7 @@ describe('<AssetsTable />', () => {
       );
 
       const trashButtons = wrapper.find('button').filterWhere(button => button.hasClass('fa-trash'));
-      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Yes, delete.</button>));
+      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Permanently delete</button>));
 
       trashButtons.at(0).simulate('click');
       deleteButton.simulate('click');
@@ -391,7 +391,7 @@ describe('<AssetsTable />', () => {
       );
 
       const trashButtons = wrapper.find('button').filterWhere(button => button.hasClass('fa-trash'));
-      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Yes, delete.</button>));
+      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Permanently delete</button>));
 
       trashButtons.at(0).simulate('click');
       deleteButton.simulate('click');
@@ -459,7 +459,7 @@ describe('<AssetsTable />', () => {
     });
 
     it('moves from modal to status alert on asset delete', () => {
-      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Yes, delete.</button>));
+      const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Permanently delete</button>));
 
       const statusAlert = wrapper.find('StatusAlert');
       const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.matchesElement(<button><span>&times;</span></button>));
@@ -494,7 +494,7 @@ describe('<AssetsTable />', () => {
 
         wrapper.setProps({ deleteAsset: mockDeleteAsset });
 
-        const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Yes, delete.</button>));
+        const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.matchesElement(<button>Permanently delete</button>));
 
         const statusAlert = wrapper.find('StatusAlert');
         const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.matchesElement(<button><span>&times;</span></button>));

diff --git a/src/components/AssetsTable/index.jsx b/src/components/AssetsTable/index.jsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 
 import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
+import styles from './AssetsTable.scss';
 import { assetActions } from '../../data/constants/actionTypes';
 import { assetLoading } from '../../data/constants/loadingTypes';
 import { clearAssetsStatus, deleteAsset, sortUpdate, toggleLockAsset } from '../../data/actions/assets';
@@ -316,7 +317,7 @@ export class AssetsTable extends React.Component {
         onClose={this.closeModal}
         buttons={[
           <Button
-            label="Yes, delete."
+            label="Permanently delete"
             buttonType="primary"
             onClick={this.deleteAsset}
           />,
@@ -328,10 +329,37 @@ export class AssetsTable extends React.Component {
   renderModalBody() {
     return (
       <div>
-        <span className={classNames(FontAwesomeStyles.fa, FontAwesomeStyles['fa-exclamation-triangle'])} aria-hidden="true" />
-        Are you sure you wish to delete this item?
-        This cannot be reversed! Any content that links/refers to this item will no longer work
-        (e.g. images and/or links may break).
+        <div className={styles['container-fluid']}>
+          <div className={styles.row}>
+            <div className={styles['col-md-10']}>
+              <div>
+                <p>Deleting <b>{this.state.assetToDelete.display_name}</b> cannot be undone.</p>
+                <p>
+                  Any links or references to this file will no longer work. <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/course_assets/course_files.html"
+                  >
+                    Learn more.
+                  </a>
+                </p>
+              </div>
+            </div>
+            <div className={styles.col}>
+              <span
+                className={
+                  classNames(
+                    FontAwesomeStyles.fa,
+                    FontAwesomeStyles['fa-exclamation-triangle'],
+                    FontAwesomeStyles['fa-3x'],
+                    styles['text-warning'],
+                  )
+                }
+                aria-hidden="true"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }