Merge pull request #36375 from code-dot-org/dtp_candidate_4aae1d87

DTP (Test > Production: 4aae1d8)
code-dot-org · Aug 20, 2020 · 77388dc · 77388dc
2 parents 5eed433 + 171c798
commit 77388dc
Show file tree

Hide file tree

Showing 56 changed files with 382 additions and 51 deletions.
diff --git a/apps/src/code-studio/components/progress/ScriptOverviewHeader.jsx b/apps/src/code-studio/components/progress/ScriptOverviewHeader.jsx
@@ -24,6 +24,7 @@ import AssignmentVersionSelector, {
 import {assignmentVersionShape} from '@cdo/apps/templates/teacherDashboard/shapes';
 import StudentFeedbackNotification from '@cdo/apps/templates/feedback/StudentFeedbackNotification';
 import VerifiedResourcesNotification from '@cdo/apps/templates/courseOverview/VerifiedResourcesNotification';
+import SafeMarkdown from '@cdo/apps/templates/SafeMarkdown';
 
 const SCRIPT_OVERVIEW_WIDTH = 1100;
 
@@ -258,7 +259,11 @@ class ScriptOverviewHeader extends Component {
                 />
               )}
             </div>
-            <p style={styles.description}>{scriptDescription}</p>
+            <SafeMarkdown
+              style={styles.description}
+              openExternalLinksInNewTab={true}
+              markdown={scriptDescription}
+            />
           </div>
           <ProtectedStatefulDiv ref={element => (this.protected = element)} />
         </div>

diff --git a/apps/src/lib/script-editor/MarkdownPreview.jsx b/apps/src/lib/script-editor/MarkdownPreview.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SafeMarkdown from '@cdo/apps/templates/SafeMarkdown';
+import color from '@cdo/apps/util/color';
+
+const styles = {
+  box: {
+    marginTop: 10,
+    marginBottom: 10,
+    border: '1px solid ' + color.light_gray,
+    padding: 10
+  }
+};
+
+/**
+ * Component for previewing Markdown for a edit field
+ */
+export default class MarkdownPreview extends React.Component {
+  static propTypes = {
+    markdown: PropTypes.string.isRequired
+  };
+
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 5}}>Preview:</div>
+        <div style={styles.box}>
+          <SafeMarkdown
+            openExternalLinksInNewTab={true}
+            markdown={this.props.markdown}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/apps/src/lib/script-editor/ScriptEditor.jsx b/apps/src/lib/script-editor/ScriptEditor.jsx
@@ -15,6 +15,8 @@ import {announcementShape} from '@cdo/apps/code-studio/scriptAnnouncementsRedux'
 import VisibleAndPilotExperiment from './VisibleAndPilotExperiment';
 import HelpTip from '@cdo/apps/lib/ui/HelpTip';
 import LessonExtrasEditor from './LessonExtrasEditor';
+import color from '@cdo/apps/util/color';
+import MarkdownPreview from '@cdo/apps/lib/script-editor/MarkdownPreview';
 
 const styles = {
   input: {
@@ -23,13 +25,20 @@ const styles = {
     padding: '4px 6px',
     color: '#555',
     border: '1px solid #ccc',
-    borderRadius: 4
+    borderRadius: 4,
+    margin: 0
   },
   checkbox: {
     margin: '0 0 0 7px'
   },
   dropdown: {
     margin: '0 6px'
+  },
+  box: {
+    marginTop: 10,
+    marginBottom: 10,
+    border: '1px solid ' + color.light_gray,
+    padding: 10
   }
 };
 
@@ -82,7 +91,8 @@ export default class ScriptEditor extends React.Component {
     super(props);
 
     this.state = {
-      curriculumUmbrella: this.props.curriculumUmbrella
+      curriculumUmbrella: this.props.curriculumUmbrella,
+      description: this.props.i18nData.description
     };
   }
 
@@ -116,6 +126,10 @@ export default class ScriptEditor extends React.Component {
     }
   };
 
+  handleDescriptionChange = event => {
+    this.setState({description: event.target.value});
+  };
+
   render() {
     const {betaWarning} = this.props;
     const textAreaRows = this.props.lessonLevelData
@@ -131,6 +145,15 @@ export default class ScriptEditor extends React.Component {
             style={styles.input}
           />
         </label>
+        <label>
+          Unit URL (Slug)
+          <input
+            type="text"
+            value={this.props.name}
+            style={styles.input}
+            disabled={true}
+          />
+        </label>
         <label>
           Audience
           <input
@@ -157,10 +180,12 @@ export default class ScriptEditor extends React.Component {
           Description
           <textarea
             name="description"
-            defaultValue={this.props.i18nData.description}
+            defaultValue={this.state.description}
             rows={5}
             style={styles.input}
+            onChange={this.handleDescriptionChange}
           />
+          <MarkdownPreview markdown={this.state.description} />
         </label>
         <h2>Basic Settings</h2>
         <label>

diff --git a/apps/src/templates/courseOverview/CourseEditor.js b/apps/src/templates/courseOverview/CourseEditor.js
@@ -6,6 +6,8 @@ import CourseOverviewTopRow from './CourseOverviewTopRow';
 import {resourceShape} from './resourceType';
 import VisibleAndPilotExperiment from '../../lib/script-editor/VisibleAndPilotExperiment';
 import HelpTip from '@cdo/apps/lib/ui/HelpTip';
+import color from '@cdo/apps/util/color';
+import MarkdownPreview from '@cdo/apps/lib/script-editor/MarkdownPreview';
 
 const styles = {
   input: {
@@ -21,6 +23,12 @@ const styles = {
   },
   dropdown: {
     margin: '0 6px'
+  },
+  box: {
+    marginTop: 10,
+    marginBottom: 10,
+    border: '1px solid ' + color.light_gray,
+    padding: 10
   }
 };
 
@@ -45,6 +53,23 @@ export default class CourseEditor extends Component {
     versionYearOptions: PropTypes.arrayOf(PropTypes.string).isRequired
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      descriptionStudent: this.props.descriptionStudent,
+      descriptionTeacher: this.props.descriptionTeacher
+    };
+  }
+
+  handleTeacherDescriptionChange = event => {
+    this.setState({descriptionTeacher: event.target.value});
+  };
+
+  handleStudentDescriptionChange = event => {
+    this.setState({descriptionStudent: event.target.value});
+  };
+
   render() {
     const {
       name,
@@ -53,8 +78,6 @@ export default class CourseEditor extends Component {
       familyName,
       versionYear,
       descriptionShort,
-      descriptionStudent,
-      descriptionTeacher,
       scriptsInCourse,
       scriptNames,
       teacherResources,
@@ -98,19 +121,23 @@ export default class CourseEditor extends Component {
           Student Description
           <textarea
             name="description_student"
-            defaultValue={descriptionStudent}
+            defaultValue={this.state.descriptionStudent}
             rows={5}
             style={styles.input}
+            onChange={this.handleStudentDescriptionChange}
           />
+          <MarkdownPreview markdown={this.state.descriptionStudent} />
         </label>
         <label>
           Teacher Description
           <textarea
             name="description_teacher"
-            defaultValue={descriptionTeacher}
+            defaultValue={this.state.descriptionTeacher}
             rows={5}
             style={styles.input}
+            onChange={this.handleTeacherDescriptionChange}
           />
+          <MarkdownPreview markdown={this.state.descriptionTeacher} />
         </label>
         <label>
           Version Year Display Name

diff --git a/apps/src/templates/courseOverview/CourseOverview.js b/apps/src/templates/courseOverview/CourseOverview.js
@@ -29,6 +29,7 @@ import AssignmentVersionSelector, {
 } from '@cdo/apps/templates/teacherDashboard/AssignmentVersionSelector';
 import StudentFeedbackNotification from '@cdo/apps/templates/feedback/StudentFeedbackNotification';
 import {sectionsForDropdown} from '@cdo/apps/templates/teacherDashboard/teacherSectionsRedux';
+import SafeMarkdown from '../SafeMarkdown';
 
 const styles = {
   main: {
@@ -222,11 +223,15 @@ class CourseOverview extends Component {
             />
           )}
         </div>
-        <div style={styles.description}>
-          {viewAs === ViewType.Student
-            ? descriptionStudent
-            : descriptionTeacher}
-        </div>
+        <SafeMarkdown
+          style={styles.description}
+          openExternalLinksInNewTab={true}
+          markdown={
+            viewAs === ViewType.Student
+              ? descriptionStudent
+              : descriptionTeacher
+          }
+        />
         {showNotification && <VerifiedResourcesNotification />}
         {isTeacher && (
           <div>

diff --git a/apps/test/unit/code-studio/components/progress/ScriptOverviewHeaderTest.js b/apps/test/unit/code-studio/components/progress/ScriptOverviewHeaderTest.js
@@ -16,7 +16,8 @@ const defaultProps = {
   scriptId: 99,
   scriptName: 'course1',
   scriptTitle: 'Course One',
-  scriptDescription: 'The first course',
+  scriptDescription:
+    '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*',
   versions: []
 };
 
@@ -288,4 +289,13 @@ describe('ScriptOverviewHeader', () => {
     const coursea2018 = renderedVersions.find(v => v.name === 'coursea-2018');
     assert.equal(true, coursea2018.isSelected);
   });
+
+  it('has correct unit description', () => {
+    const wrapper = shallow(<ScriptOverviewHeader {...defaultProps} />, {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('SafeMarkdown').prop('markdown')).to.equal(
+      '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
+    );
+  });
 });
diff --git a/apps/test/unit/lib/script-editor/MarkdownPreviewTest.jsx b/apps/test/unit/lib/script-editor/MarkdownPreviewTest.jsx
@@ -0,0 +1,19 @@
+import {expect} from 'chai';
+import React from 'react';
+import {mount} from 'enzyme';
+import MarkdownPreview from '@cdo/apps/lib/script-editor/MarkdownPreview';
+
+const DEFAULT_PROPS = {
+  markdown:
+    '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
+};
+
+describe('ScriptEditor', () => {
+  it('has correct markdown for preview of unit description', () => {
+    const wrapper = mount(<MarkdownPreview {...DEFAULT_PROPS} />);
+    expect(wrapper.find('SafeMarkdown').length).to.equal(1);
+    expect(wrapper.find('SafeMarkdown').prop('markdown')).to.equal(
+      '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
+    );
+  });
+});
diff --git a/apps/test/unit/lib/script-editor/ScriptEditorTest.jsx b/apps/test/unit/lib/script-editor/ScriptEditorTest.jsx
@@ -8,7 +8,9 @@ describe('ScriptEditor', () => {
     announcements: [],
     curriculumUmbrella: 'CSF',
     i18nData: {
-      stageDescriptions: []
+      stageDescriptions: [],
+      description:
+        '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
     },
     isLevelbuilder: true,
     locales: [],
@@ -21,11 +23,26 @@ describe('ScriptEditor', () => {
   describe('Script Editor', () => {
     it('has the correct number of each editor field type', () => {
       const wrapper = mount(<ScriptEditor {...DEFAULT_PROPS} hidden={false} />);
-      expect(wrapper.find('input').length).to.equal(21);
+      expect(wrapper.find('input').length).to.equal(22);
       expect(wrapper.find('input[type="checkbox"]').length).to.equal(10);
       expect(wrapper.find('textarea').length).to.equal(2);
       expect(wrapper.find('select').length).to.equal(5);
     });
+
+    it('has correct markdown for preview of unit description', () => {
+      const wrapper = mount(<ScriptEditor {...DEFAULT_PROPS} hidden={false} />);
+      expect(wrapper.find('MarkdownPreview').length).to.equal(1);
+      expect(wrapper.find('MarkdownPreview').prop('markdown')).to.equal(
+        '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
+      );
+
+      wrapper
+        .find('textarea[name="description"]')
+        .simulate('change', {target: {value: '## Title'}});
+      expect(wrapper.find('MarkdownPreview').prop('markdown')).to.equal(
+        '## Title'
+      );
+    });
   });
 
   describe('VisibleInTeacherDashboard', () => {

diff --git a/apps/test/unit/sites/studio/pages/levelbuilder_edit_script.js b/apps/test/unit/sites/studio/pages/levelbuilder_edit_script.js
@@ -16,7 +16,9 @@ describe('the level builder page init script', () => {
         stages: []
       },
       i18n: {
-        stageDescriptions: []
+        stageDescriptions: [],
+        description:
+          '# Title \n This is the unit description with [link](https://studio.code.org/home) **Bold** *italics*'
       },
       beta: false,
       levelKeyList: [],