Merge pull request #3667 from openstax/ex-context

nathanstitt · web-flow · commit feae7d013d0e · 2021-06-29T16:52:38.000-05:00
Render context along with exercise preview
diff --git a/exercises/specs/components/__snapshots__/exercise.spec.js.snap b/exercises/specs/components/__snapshots__/exercise.spec.js.snap
@@ -1733,6 +1733,13 @@ exports[`Exercises component renders and matches snapshot 1`] = `
             Author: Alene
           </div>
         </div>
+        <div
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<h3>read this chapter first</h3>",
+            }
+          }
+        />
         <div
           className="openstax-exercise-preview exercise-editing-preview is-displaying-formats is-displaying-feedback card"
           data-exercise-id="1@1"
@@ -5049,6 +5056,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
             Author: Louvenia
           </div>
         </div>
+        
         <div
           className="openstax-exercise-preview exercise-editing-preview is-displaying-formats is-displaying-feedback card"
           data-exercise-id="9@1"
diff --git a/exercises/specs/components/exercise.spec.js b/exercises/specs/components/exercise.spec.js
@@ -27,6 +27,7 @@ describe('Exercises component', () => {
     });
 
     it('renders and matches snapshot', () => {
+        exercise.context = '<h3>read this chapter first</h3>'
         expect.snapshot(<Router><Exercise {...props} /></Router>).toMatchSnapshot();
     });
 
diff --git a/exercises/src/components/exercise/preview.jsx b/exercises/src/components/exercise/preview.jsx
@@ -5,6 +5,7 @@ import { ExercisePreview } from 'shared';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { CornerRibbon } from 'shared';
+import { ArbitraryHtmlAndMath as HTML } from 'shared';
 
 const Preview = styled.div`
   margin-top: 1.5rem;
@@ -43,6 +44,8 @@ class ExerciseEditingPreview extends React.Component {
                             <div key="n">{exercise.readOnlyReason}</div>,
                         ]}
                     >
+                        {exercise.context && <HTML html={exercise.context} />}
+
                         <ExercisePreview
                             questionType="teacher-preview"
                             className='exercise-editing-preview'
diff --git a/exercises/src/components/preview.jsx b/exercises/src/components/preview.jsx
@@ -9,6 +9,7 @@ import { idType } from 'shared';
 import { Loading, NotFound } from './exercise-state';
 import Controls from './preview/controls';
 import { ExercisePreview } from 'shared';
+import { ArbitraryHtmlAndMath as HTML } from 'shared';
 
 @observer
 export default
@@ -52,6 +53,7 @@ class Preview extends React.Component {
 
         return (
             <div className="preview-screen">
+                {exercise.context && <HTML html={exercise.context} />}
                 <ExercisePreview
                     displayAllTags
                     displayFeedback
diff --git a/exercises/src/components/search.tsx b/exercises/src/components/search.tsx
@@ -45,6 +45,7 @@ class Search extends React.Component<SearchProps> {
         this.titleChangeDisposer = autorun(() => {
             document.title = this.search.title
         })
+        props.ux.setSearchDefault(props.history.location.search.replace(/^\?/, ''))
     }
 
     componentWillUnmount() {
diff --git a/exercises/src/models/search.ts b/exercises/src/models/search.ts
@@ -2,6 +2,7 @@ import { map } from 'lodash';
 import {
     BaseModel, model, runInAction, array, hydrateModel, modelize, observable, computed, action, getParentOf,
 } from 'shared/model';
+import { override } from 'mobx'
 import Exercise from './exercises/exercise';
 import urlFor from '../api'
 import pluralize from 'pluralize';
@@ -146,6 +147,11 @@ class Search extends BaseModel {
         )
     }
 
+    @override update(clause: string) {
+        const [filter, value] = clause.split(':')
+        this.clauses.replace([{ filter, value } as any])
+
+    }
     //called by api
     @action async perform() {
         this.isPending = true
diff --git a/exercises/src/ux.ts b/exercises/src/ux.ts
@@ -1,8 +1,16 @@
-import { lazyGetter } from 'shared/model';
+import { lazyGetter, action } from 'shared/model';
+import qs from 'qs';
 import Search from './models/search';
 
 export default class ExerciseUX {
 
     @lazyGetter get search() { return new Search() }
 
+    @action setSearchDefault(queryString: string) {
+        const { q: query } = qs.parse(queryString)
+        if (query && typeof query == 'string') {
+            this.search.update(query)
+            this.search.execute()
+        }
+    }
 }
diff --git a/shared/src/model/exercise.ts b/shared/src/model/exercise.ts
@@ -25,7 +25,7 @@ export default class SharedExercise extends BaseModel {
 
     @field published_at?: Time | Date
     @field stem_html = ''
-
+    @field context = '';
     @model(Attachment) attachments = array<Attachment>()
     @model(Author) authors = array<Author>()
     @model(Author) copyright_holders = array<Author>()

Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ class Search extends React.Component<SearchProps> {`
`45`	`45`	`this.titleChangeDisposer = autorun(() => {`
`46`	`46`	`document.title = this.search.title`
`47`	`47`	`})`
	`48`	`+ props.ux.setSearchDefault(props.history.location.search.replace(/^\?/, ''))`
`48`	`49`	`}`
`49`	`50`
`50`	`51`	`componentWillUnmount() {`