Show preview of content to be deleted for activity and activity section

code-dot-org · Jan 8, 2021 · ab11d96 · ab11d96
1 parent ccf19de
commit ab11d96
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 11 deletions.
diff --git a/apps/src/lib/levelbuilder/OrderControls.jsx b/apps/src/lib/levelbuilder/OrderControls.jsx
@@ -1,6 +1,11 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import Dialog from '../../templates/Dialog';
+import BaseDialog from '@cdo/apps/templates/BaseDialog';
+import ActivitySection from '@cdo/apps/templates/lessonOverview/activities/ActivitySection';
+import DialogFooter from '@cdo/apps/templates/teacherDashboard/DialogFooter';
+import Button from '@cdo/apps/templates/Button';
+import Activity from '@cdo/apps/templates/lessonOverview/activities/Activity';
+import color from '@cdo/apps/util/color';
 
 const styles = {
   controls: {
@@ -9,14 +14,31 @@ const styles = {
   controlIcon: {
     margin: '0 5px',
     cursor: 'pointer'
+  },
+  previewContainer: {
+    color: color.default_text
+  },
+  preview: {
+    border: '1px solid #ccc',
+    padding: '5px 25px'
+  },
+  dialog: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingBottom: 20,
+    width: 970,
+    fontFamily: '"Gotham 4r", sans-serif, sans-serif',
+    marginLeft: -500
   }
 };
 
 export default class OrderControls extends Component {
   static propTypes = {
     move: PropTypes.func.isRequired,
     remove: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    item: PropTypes.object,
+    itemType: PropTypes.oneOf(['activity', 'activitySection'])
   };
 
   state = {
@@ -46,7 +68,7 @@ export default class OrderControls extends Component {
 
   render() {
     const {showConfirm} = this.state;
-    const {name} = this.props;
+    const {name, item, itemType} = this.props;
     const text = `Are you sure you want to remove "${name}" and all its contents from the script?`;
     return (
       <div style={styles.controls}>
@@ -65,16 +87,37 @@ export default class OrderControls extends Component {
           style={styles.controlIcon}
           className="fa fa-trash"
         />
-        <Dialog
-          body={text}
-          cancelText="Cancel"
-          confirmText="Delete"
-          confirmType="danger"
+        <BaseDialog
           isOpen={showConfirm}
           handleClose={this.handleClose}
-          onCancel={this.handleClose}
-          onConfirm={this.handleConfirm}
-        />
+          useUpdatedStyles
+          style={styles.dialog}
+        >
+          <h2>{text}</h2>
+          {item && itemType && (
+            <div style={styles.previewContainer}>
+              <h4>Preview of Content To Delete: </h4>
+              <div style={styles.preview}>
+                {itemType === 'activity' && <Activity activity={item} />}
+                {itemType === 'activitySection' && (
+                  <ActivitySection section={item} />
+                )}
+              </div>
+            </div>
+          )}
+          <DialogFooter rightAlign>
+            <Button
+              text={'Cancel'}
+              onClick={this.handleClose}
+              color={Button.ButtonColor.gray}
+            />
+            <Button
+              text={'Delete'}
+              onClick={this.handleConfirm}
+              color={Button.ButtonColor.red}
+            />
+          </DialogFooter>
+        </BaseDialog>
       </div>
     );
   }

diff --git a/apps/src/lib/levelbuilder/lesson-editor/ActivityCard.jsx b/apps/src/lib/levelbuilder/lesson-editor/ActivityCard.jsx
@@ -173,6 +173,8 @@ class ActivityCard extends Component {
             name={activity.displayName || 'Unnamed Activity'}
             move={this.handleMoveActivity}
             remove={this.handleRemoveActivity}
+            item={this.props.activity}
+            itemType={'activity'}
           />
         </div>
         <div style={styles.activityBody} hidden={this.props.collapsed}>

diff --git a/apps/src/lib/levelbuilder/lesson-editor/ActivitySectionCard.jsx b/apps/src/lib/levelbuilder/lesson-editor/ActivitySectionCard.jsx
@@ -429,6 +429,8 @@ class ActivitySectionCard extends Component {
               }
               move={this.handleMoveActivitySection}
               remove={this.handleRemoveActivitySection}
+              item={this.props.activitySection}
+              itemType={'activitySection'}
             />
           </label>
           <div style={styles.checkboxesAndButtons}>