doc: [BD-26][EDUCATOR-5843] Add mfe special exam lib local developmen…

…t instructions (#889) * doc: Add mfe special lib local dev instructions * Address review comments * doc: Update system overview with new Learning MFE experience
openedx · Jun 23, 2021 · 54f62b1 · 54f62b1
1 parent f6426e9
commit 54f62b1
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 5 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -22,6 +22,7 @@ Unreleased
 ~~~~~~~~~~~~~~~~~~~~~
 * Fix a bug in exam attempt API where total time allowed for the exam would not include allowance time.
 * Add `test_plan` document to describe key features and test cases
+* Update `developing` document with the instructions for frontend-lib-special-exam local development setup
 
 [3.15.0] - 2021-06-15
 ~~~~~~~~~~~~~~~~~~~~~

diff --git a/docs/developing.rst b/docs/developing.rst
@@ -54,6 +54,42 @@ In edx-platform/lms/envs/private.py and edx-platform/cms/envs/private.py:
         'MUST_BE_VERIFIED_TRACK': False
     }
 
+
+How do I setup `mfe-special-exam-lib` for local development?
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+`MFE special exam lib <https://github.com/edx/frontend-lib-special-exams/>`_ is a react library to support
+special exams in the Learning MFE.
+
+Make sure that `frontend-app-learning` is setup and running on your devstack.
+
+The special exam lib is installed as a dependency of Learning MFE.
+And for the local development module export flow should be overridden, the following steps are required:
+
+* Create new directory `packages` in the `frontend-app-learning` repository and clone special exam library::
+
+    $ cd frontend-app-learning
+    $ mkdir packages
+    $ cd packages
+    $ git clone https://github.com/edx/frontend-lib-special-exams.git
+
+* override module export flow, create `module.config.js` file in the `frontend-app-learning`:
+
+.. code-block::
+
+  // module.config.js
+  module.exports = {
+    localModules: [
+      { moduleName: '@edx/frontend-lib-special-exams', dir: './packages/frontend-lib-special-exams', dist: 'src' },
+    ],
+  };
+
+* restart devstack::
+
+    $ make stop
+    $ make dev.up.lms+frontend-app-learning
+
+
 How does the proctoring system work?
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
@@ -107,10 +143,10 @@ The command will tell you you have to supply an client_id and client_secret. It'
 If you need to run local changes to the `mockprock Javascript worker`_ or the `worker interface`_ in this library::
 
    make lms-shell
-   
+
    (cd /edx/src/mockprock; npm link)
    npm link @edx/mockprock
-   
+
    cd /edx/src/mockprock
    (cd /edx/src/edx-proctoring; npm link)
    npm link @edx/edx-proctoring

diff --git a/docs/images/components_with_mfe.png b/docs/images/components_with_mfe.png
diff --git a/docs/images/sequence_mfe.png b/docs/images/sequence_mfe.png
diff --git a/docs/system-overview.rst b/docs/system-overview.rst
@@ -7,10 +7,18 @@ where to find the source code in our platform.
 .. contents::
 
 System Components
-------------------
+-----------------
+
+Legacy Components Schema
+^^^^^^^^^^^^^^^^^^^^^^^^
 
 .. image:: images/components.png
 
+New Components Schema with Learning MFE and special exam lib
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. image:: images/components_with_mfe.png
+
 Proctored Exam Views
 ^^^^^^^^^^^^^^^^^^^^
 
@@ -28,6 +36,8 @@ Notable Code:
 - `LMS render student_view() <https://github.com/edx/edx-platform/blob/a7dff8c21ee794e90bdc0f22876334a7843a032d/common/lib/xmodule/xmodule/seq_module.py#L274>`_
 - `edx-proctoring template logic <https://github.com/edx/edx-proctoring/blob/78976d93ab6ca5206f259dc420d2f45818fe636c/edx_proctoring/api.py#L1912>`_
 - `edx-proctoring interstitial templates <https://github.com/edx/edx-proctoring/tree/323ea43acbd6f12d5131546e8648dedff719bf9e/edx_proctoring/templates>`_
+- `Learning MFE <https://github.com/edx/frontend-app-learning>`_
+- `React lib for special exams <https://github.com/edx/frontend-lib-special-exams/>`_
 
 edx-proctoring
 ^^^^^^^^^^^^^^
@@ -92,9 +102,18 @@ This figure does not include error states or display of unmet prerequite require
 Example Action Sequence
 -------------------------
 
-The diagram below describes the happy-path of interactions between components to
-sucessfully begin a proctored exam. This example matches Proctortrack's backend
+The diagrams below describes the happy-path of interactions between components to
+sucessfully begin a proctored exam. These examples matches Proctortrack's backend
 implementation and includes any JavaScript events handled by the proctoring app.
 
+Old Sequence
+^^^^^^^^^^^^
+
 
 .. image:: images/sequence.png
+
+New Sequence with Learning MFE and special exam lib
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+
+.. image:: images/sequence_mfe.png