Merge pull request #2 from eduNEXT/and/add_nelc_essentials

And/add nelc essentials
eduNEXT · Jun 13, 2023 · 74fcfb1 · 74fcfb1
2 parents 678502b + cd0417c
commit 74fcfb1
Show file tree

Hide file tree

Showing 11 changed files with 1,013 additions and 254 deletions.
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -21,4 +21,4 @@ jobs:
     - name: Upload coverage
       uses: codecov/codecov-action@v3
       with:
-        fail_ci_if_error: true
+        fail_ci_if_error: false
diff --git a/jest.config.js b/jest.config.js
@@ -12,3 +12,7 @@ module.exports = createConfig('jest', {
   testTimeout: 30000,
   testEnvironment: 'jsdom'
 });
+
+module.exports.transformIgnorePatterns = [
+  '/node_modules/(?!(@edx|@edunext))',
+];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,12 +29,13 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
+    "@edunext/frontend-essentials": "^1.0.0",
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-component-footer": "11.6.3",
     "@edx/frontend-component-header": "3.6.4",
     "@edx/frontend-lib-special-exams": "2.2.1",
-    "@edx/frontend-platform": "3.4.1",
-    "@edx/paragon": "20.24.0",
+    "@edx/frontend-platform": "npm:@edunext/[email protected].1",
+    "@edx/paragon": "npm:@edunext/paragon@20.22.48",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
@@ -13,6 +13,7 @@ import { useSelector } from 'react-redux';
 import { history } from '@edx/frontend-platform';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';
+import { ReportButton, LikeDislikeUnit } from '@edunext/frontend-essentials';
 
 import PageLoading from '../../../generic/PageLoading';
 import { useModel } from '../../../generic/model-store';
@@ -175,19 +176,26 @@ const Sequence = ({
             unitLoadedHandler={handleUnitLoaded}
           />
           {unitHasLoaded && (
-          <UnitNavigation
-            sequenceId={sequenceId}
-            unitId={unitId}
-            onClickPrevious={() => {
-              logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');
-              handlePrevious();
-            }}
-            onClickNext={() => {
-              logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
-              handleNext();
-            }}
-            goToCourseExitPage={() => goToCourseExitPage()}
-          />
+            <>
+              <div className="nelp-container">
+                <LikeDislikeUnit courseId={courseId} unitId={unitId} />
+                <ReportButton courseId={courseId} unitId={unitId} />
+              </div>
+
+              <UnitNavigation
+                sequenceId={sequenceId}
+                unitId={unitId}
+                onClickPrevious={() => {
+                  logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');
+                  handlePrevious();
+                }}
+                onClickNext={() => {
+                  logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
+                  handleNext();
+                }}
+                goToCourseExitPage={() => goToCourseExitPage()}
+              />
+            </>
           )}
         </div>
       </div>

diff --git a/src/courseware/course/sequence/Sequence.scss b/src/courseware/course/sequence/Sequence.scss
@@ -0,0 +1,5 @@
+.nelp-container {
+	display: flex;
+	text-align: center;
+    justify-content: center;
+}
diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog, ActionRow } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React, {
   Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
@@ -184,29 +184,45 @@ const Unit = ({
         <ErrorPage />
       )}
       {modalOptions.open && (
-        <Modal
-          body={(
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={() => { setModalOptions({ open: false }); }}
+          isFullscreenOnMobile
+          // size="xl"
+          className="modal-lti"
+          hasCloseButton
+        >
+          <ModalDialog.Body>
             <>
               {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
+                ? <div className="unit-modal">{modalOptions.body}</div>
                 : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{
-                      width: '100%',
-                      height: '100vh',
-                    }}
-                  />
+                  <>
+                    <iframe
+                      title={modalOptions.title}
+                      allow={IFRAME_FEATURE_POLICY}
+                      frameBorder="0"
+                      src={modalOptions.url}
+                      style={{
+                        width: '100%',
+                        height: '100vh',
+                      }}
+                    />
+                  </>
                 )}
             </>
-          )}
-          onClose={() => { setModalOptions({ open: false }); }}
-          open
-          dialogClassName="modal-lti"
-        />
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant="primary">
+                Close
+              </ModalDialog.CloseButton>
+            </ActionRow>
+          </ModalDialog.Footer>
+        </ModalDialog>
+
       )}
       {!shouldDisplayHonorCode && (
         <div className="unit-iframe-wrapper">

diff --git a/src/index.scss b/src/index.scss
@@ -377,3 +377,4 @@
 @import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
 @import "courseware/course/course-exit/CourseRecommendations";
 @import "product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss";
+@import "courseware/course/sequence/Sequence.scss";
diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx
@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Input } from '@edx/paragon';
+import { FormControl } from '@edx/paragon';
 
 import messages from './messages';
 
@@ -46,7 +46,7 @@ class MasqueradeUserNameInput extends Component {
       ...rest
     } = this.props;
     return (
-      <Input
+      <FormControl
         aria-labelledby="masquerade-search-label"
         label={intl.formatMessage(messages.userNameLabel)}
         onKeyPress={(event) => this.onKeyPress(event)}

diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
@@ -135,7 +135,8 @@ class MasqueradeWidget extends Component {
             <span className="col-auto col-form-label pl-3" id="masquerade-search-label">{`${specificLearnerInputText}:`}</span>
             <MasqueradeUserNameInput
               id="masquerade-search"
-              className="col-4 form-control"
+              className="col-4"
+              controlClassName="form-control"
               autoFocus={autoFocus}
               defaultValue={masqueradeUsername}
               onError={(errorMessage) => this.onError(errorMessage)}

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -147,6 +147,9 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
     const proctoredExamApiUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${courseMetadata.id}/content_id/${sequenceMetadata.item_id}?is_learning_mfe=true`;
     axiosMock.onGet(proctoredExamApiUrl).reply(200, { exam: {}, active_attempt: {} });
   });
+  // frontend essentials configuration, this will return an status 404 on every like-dislike request
+  const likeDislikeUrlPattern = new RegExp(`${getConfig().COURSE_EXPERIENCE_API_URL}/like/units/.*/`);
+  axiosMock.onGet(likeDislikeUrlPattern).reply(404, {});
 
   logUnhandledRequests(axiosMock);