Merge pull request #54 from eduNEXT/and-jlc/add_essentials_views

And jlc/add essentials views

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.env.frontend

@@ -0,0 +1,42 @@
+BASE_URL='http://lms.mango.edunext.link:8000'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+LMS_BASE_URL=http://lms.mango.edunext.link:8000
+BASE_URL='http://localhost:2000'
+CONTACT_URL='http://lms.mango.edunext.link:8000/contact'
+CREDENTIALS_BASE_URL='http://localhost:18150'
+CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DISCOVERY_API_BASE_URL='http://localhost:18381'
+DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+ENABLE_JUMPNAV='true'
+ENABLE_NOTICES=''
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
+EXAMS_BASE_URL='http://localhost:18740'
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+IGNORED_ERROR_REGEX=''
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
+LOGIN_URL='http://lms.mango.edunext.link:8000/login'
+LOGOUT_URL='http://lms.mango.edunext.link:8000/logout'
+LOGO_URL='http://lms.mango.edunext.link:8000/theming/asset/images/logo.png'
+LOGO_TRADEMARK_URL='http://lms.mango.edunext.link:8000/theming/asset/images/logo.png'
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+LEGACY_THEME_NAME=''
+MARKETING_SITE_BASE_URL='http://lms.mango.edunext.link:8000'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://lms.mango.edunext.link:8000/login_refresh'
+SEARCH_CATALOG_URL='http://lms.mango.edunext.link:8000/courses'
+SEGMENT_KEY=''
+SITE_NAME='edX'
+SOCIAL_UTM_MILESTONE_CAMPAIGN='edxmilestone'
+STUDIO_BASE_URL='http://localhost:18010'
+SUPPORT_URL='https://support.edx.org'
+SUPPORT_URL_CALCULATOR_MATH='https://support.edx.org/hc/en-us/articles/360000038428-Entering-math-expressions-in-assignments-or-the-calculator'
+SUPPORT_URL_ID_VERIFICATION='https://support.edx.org/hc/en-us/articles/206503858-How-do-I-verify-my-identity'
+SUPPORT_URL_VERIFIED_CERTIFICATE='https://support.edx.org/hc/en-us/articles/206502008-What-is-a-verified-certificate'
+TERMS_OF_SERVICE_URL='https://www.edx.org/edx-terms-service'
+TWITTER_HASHTAG='myedxjourney'
+TWITTER_URL='https://twitter.com/edXOnline'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SESSION_COOKIE_DOMAIN='mango.edunext.link:8000'
+MFE_CONFIG_API_URL=/eox-nelp/api/mfe_config/v1/
+COURSE_EXPERIENCE_API_URL=/eox-nelp/api/experience/v1

.gitignore

@@ -113,3 +113,10 @@ dmypy.json
 
 # VS Code
 .vscode
+
+# frontend dependencies
+/node_modules
+
+#unnecesary files on frontend build
+report.html
+eox_nelp/static/*.svg

eox_nelp/course_experience/frontend/src/components/FeedbackCarousel/index.jsx

@@ -0,0 +1,25 @@
+import React, { useState} from 'react';
+import ReactDOM from 'react-dom';
+import { APP_INIT_ERROR, APP_READY, subscribe, initialize } from '@edx/frontend-platform';
+import { getLocale, getMessages, IntlProvider } from '@edx/frontend-platform/i18n';
+import { FeedbackCarousel, messages as essentialsMessages } from '@edunext/frontend-essentials'
+
+import './index.scss';
+
+
+function LaunchFeedbackCarousel() {
+  const [locale, setLocale] = useState(getLocale());
+
+  return (
+    <IntlProvider locale={locale} messages={getMessages()}>
+      <FeedbackCarousel />
+    </IntlProvider>
+  );
+}
+
+subscribe(APP_READY, () => {
+  ReactDOM.render(<LaunchFeedbackCarousel />, document.getElementById('feedback-courses-carousel'));
+
+});
+
+initialize({  messages: [essentialsMessages]});

eox_nelp/course_experience/frontend/src/components/FeedbackCarousel/index.scss

@@ -0,0 +1,17 @@
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+#feedback-courses-carousel .feedback-container .feedback-carousel-title {
+  margin: 0 0 20px 0;
+  color: var(--pgn-color-primary-base);
+}
+
+body {
+  background-color: unset;
+}
+
+.feedback-card {
+  background: white;
+}

eox_nelp/course_experience/frontend/templates/feedback_courses.html

@@ -0,0 +1,12 @@
+<%namespace name='static' file='static_content.html'/>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Feedback courses general</title>
+    <link rel="stylesheet" href="${static.url('feedback_carousel/css/feedback_carousel.css')}">
+</head>
+<body>
+    <div id="feedback-courses-carousel"></div>
+    <script src="${static.url('feedback_carousel/js/feedback_carousel.js')}"></script>
+</body>
+</html>

eox_nelp/course_experience/frontend/tests/test_views.py

@@ -0,0 +1,58 @@
+"""This file contains all the test for the course_experience views.py file.
+Classes:
+    CourseExperienceFrontendTestCase: Test CourseExperienceFrontendView template.
+"""
+from django.apps import apps
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.test import TestCase
+from django.urls import reverse
+from mock import patch
+from rest_framework.test import APIClient
+
+
+class FrontendFeedbackCourseTestCase(TestCase):
+    """ Test FeedbackCoursesTemplate view """
+
+    def setUp(self):  # pylint: disable=invalid-name
+        """
+        Set base variables and objects across experience test cases.
+        """
+        self.client = APIClient()
+        self.url_endpoint = reverse("course-experience-frontend:feedback-courses")
+
+    @patch("eox_nelp.templates_config.edxmako")
+    def test_edxmako_render_correct_call(self, edxmako_mock):
+        """ Test edxmako functions from edxapp_wrapper are called with the right values.
+        Expected behavior:
+            - `edxmako_mock.paths.add_lookup` is called with course_experience_template_path.
+            (The path of course xp templates is used)
+            - The get request to the url_endpoint is using the template `feedback_courses.html`.
+        """
+        course_experience_template_path = apps.get_app_config('eox_nelp').path + "/course_experience/frontend/templates"
+        edxmako_mock.shortcuts.render_to_response.return_value = HttpResponse(content='Template mock')
+
+        self.client.get(self.url_endpoint)
+
+        edxmako_mock.paths.add_lookup.assert_called_with('main', course_experience_template_path)
+        edxmako_mock.shortcuts.render_to_response.assert_called_with("feedback_courses.html", {}, 'main', None)
+
+    @patch("eox_nelp.course_experience.frontend.views.render_to_response")
+    def test_feedback_course_template_behaviour(self, render_to_response_mock):
+        """ The correct rendering of the feedback courses template using the url_endpoint
+        for frontend feedback courses.
+        Expected behavior:
+            - Status code 200.
+            - Response has the correct title page.
+            - Response has the main div for feedback courses carousel.
+            - Response has the correct path to load styles with feedback carrousel css.
+            - Response has the correct path to load script with feedback carrousel js.
+        """
+        render_to_response_mock.return_value = render(None, "feedback_courses.html")
+
+        response = self.client.get(self.url_endpoint)
+
+        self.assertContains(response, '<title>Feedback courses general</title>', status_code=200)
+        self.assertContains(response, '<div id="feedback-courses-carousel"></div')
+        self.assertContains(response, 'feedback_carousel/css/feedback_carousel.css')
+        self.assertContains(response, 'feedback_carousel/js/feedback_carousel.js')

eox_nelp/course_experience/frontend/urls.py

@@ -0,0 +1,10 @@
+"""frontend templates urls for course_experience"""
+from django.urls import path
+
+from eox_nelp.course_experience.frontend import views
+
+app_name = "eox_nelp"  # pylint: disable=invalid-name
+
+urlpatterns = [
+    path('feedback/courses/', views.FeedbackCoursesTemplate.as_view(), name='feedback-courses')
+]

eox_nelp/course_experience/frontend/views.py

@@ -0,0 +1,22 @@
+"""Frontend Views file.
+
+Contains all the views for render react views using django templates.
+These views render frontend react components from npm like frontend essentials.
+
+classes:
+    FeedbackCoursesTemplate: View template that render courses carousel.
+"""
+from django.views import View
+
+from eox_nelp.templates_config import render_to_response
+
+
+class FeedbackCoursesTemplate(View):
+    """Eoxnelp CoursesFeedbackTemplate view class.
+
+    General feedback courses template.
+    """
+
+    def get(self, request):  # pylint: disable=unused-argument
+        """Render start html"""
+        return render_to_response("feedback_courses.html", {})

eox_nelp/edxapp_wrapper/backends/edxmako_m_v1.py

@@ -0,0 +1,12 @@
+""" Backend abstraction """
+from common.djangoapps import edxmako  # pylint: disable=import-error
+
+
+def get_edxmako():
+    """Allow to get edxmako from
+    https://github.com/eduNEXT/edx-platform/blob/open-release/maple.master/common/djangoapps/edxmako/__init__.py
+
+    Returns:
+        edxmako module.
+    """
+    return edxmako

eox_nelp/edxapp_wrapper/edxmako.py

@@ -0,0 +1,16 @@
+"""
+Wrapper edxmako module.
+
+This contains all the required dependencies from modulestore
+
+Attributes:
+    backend:Imported module by using the plugin settings.
+    edxmako: Wrapper edxmako module.
+"""
+from importlib import import_module
+
+from django.conf import settings
+
+backend = import_module(settings.EOX_NELP_EDXMAKO_BACKEND)
+
+edxmako = backend.get_edxmako()

eox_nelp/edxapp_wrapper/test_backends/edxmako_m_v1.py

@@ -0,0 +1,10 @@
+from mock import MagicMock
+
+
+def get_edxmako():
+    """Test backend for eox_nelp.edxapp_wrapper.backends.edxmako_m_v1.
+
+    Returns:
+        Mock class.
+    """
+    return MagicMock()

eox_nelp/settings/common.py

@@ -42,6 +42,7 @@ def plugin_settings(settings):
     settings.EOX_NELP_XMODULE_MODULESTORE = 'eox_nelp.edxapp_wrapper.backends.modulestore_m_v1'
     settings.EOX_NELP_BULK_EMAIL_BACKEND = 'eox_nelp.edxapp_wrapper.backends.bulk_email_m_v1'
     settings.EOX_NELP_STUDENT_BACKEND = 'eox_nelp.edxapp_wrapper.backends.student_m_v1'
+    settings.EOX_NELP_EDXMAKO_BACKEND = 'eox_nelp.edxapp_wrapper.backends.edxmako_m_v1'
 
     settings.FUTUREX_API_URL = 'https://testing-site.com'
     settings.FUTUREX_API_CLIENT_ID = 'my-test-client-id'

eox_nelp/settings/test.py

@@ -2,8 +2,13 @@
 Settings for eox-nelp
 """
 
+import os
+from pathlib import Path
+
 from .common import *  # pylint: disable=wildcard-import, unused-wildcard-import  # noqa: F401
 
+BASE_DIR = Path(__file__).resolve().parent.parent
+
 
 class SettingsClass:
     """ dummy settings class """
@@ -24,6 +29,7 @@ def plugin_settings(settings):  # pylint: disable=function-redefined
     settings.EOX_NELP_XMODULE_MODULESTORE = 'eox_nelp.edxapp_wrapper.test_backends.modulestore_m_v1'
     settings.EOX_NELP_BULK_EMAIL_BACKEND = 'eox_nelp.edxapp_wrapper.test_backends.bulk_email_m_v1'
     settings.EOX_NELP_STUDENT_BACKEND = 'eox_nelp.edxapp_wrapper.test_backends.student_m_v1'
+    settings.EOX_NELP_EDXMAKO_BACKEND = 'eox_nelp.edxapp_wrapper.test_backends.edxmako_m_v1'
 
     settings.FUTUREX_API_URL = 'https://testing.com'
     settings.FUTUREX_API_CLIENT_ID = 'my-test-client-id'
@@ -93,3 +99,26 @@ def plugin_settings(settings):  # pylint: disable=function-redefined
     INSTALLED_APPS.append(EOX_AUDIT_MODEL_APP)  # noqa: F405
 ALLOW_EOX_AUDIT_MODEL = False
 CELERY_TASK_ALWAYS_EAGER = True
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            os.path.join(BASE_DIR, 'course_experience/frontend/templates'),
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+            # 'loaders': [
+            #     'django.template.loaders.filesystem.Loader',
+            #     'django.template.loaders.app_directories.Loader',
+            # ],
+            'debug': True,
+        },
+    },
+]

eox_nelp/static/feedback_carousel/js/feedback_carousel.js.LICENSE.txt

@@ -0,0 +1,80 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+    localForage -- Offline Storage, Improved
+    Version 1.10.0
+    https://localforage.github.io/localForage
+    (c) 2013-2017 Mozilla, Apache License 2.0
+*/
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @mui/styled-engine v5.13.2
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */