[BD-03] [BB-2542] ]Add discussions configuration UI wireframe in MFE

.gitignore

@@ -12,6 +12,9 @@ temp/babel-plugin-react-intl
 ### pyenv ###
 .python-version
 
+### vim ###
+*.swp
+
 ### Emacs ###
 *~
 /temp

package.json

@@ -44,6 +44,7 @@
     "@fortawesome/free-solid-svg-icons": "5.11.2",
     "@fortawesome/react-fontawesome": "0.1.9",
     "babel-polyfill": "6.26.0",
+    "classnames": "^2.2.6",
     "email-validator": "^2.0.4",
     "moment": "^2.27.0",
     "prop-types": "15.7.2",

src/course-page-resources/CoursePageResources.jsx

@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import CoursePageConfigCard from './course-page/CoursePageConfigCard';
+import messages from './messages';
+
+// XXX this is just for testing and should be removed ASAP
+const coursePages = [
+  {
+    id: 'cp-discussion',
+    title: 'Discussion',
+    isEnabled: false,
+    showSettings: false,
+    showStatus: false,
+    showEnable: true,
+    description: 'Encourage participation and engagement in your course with discussion forums',
+  },
+  {
+    id: 'cp-teams',
+    title: 'Teams',
+    isEnabled: true,
+    showSettings: true,
+    showStatus: true,
+    showEnable: false,
+    description: 'Leverage teams to allow learners to connect by topic of interest',
+  },
+  {
+    id: 'cp-progress',
+    title: 'Progress',
+    isEnabled: false,
+    showSettings: true,
+    showStatus: true,
+    showEnable: false,
+    description: 'Allow students to track their progress throughout the course lorem ipsum',
+  },
+  {
+    id: 'cp-textbooks',
+    title: 'Textbooks',
+    isEnabled: true,
+    showSettings: true,
+    showStatus: true,
+    showEnable: false,
+    description: 'Provide links to applicable resources for your course',
+  },
+  {
+    id: 'cp-notes',
+    title: 'Notes',
+    isEnabled: true,
+    showSettings: true,
+    showStatus: true,
+    showEnable: false,
+    description: 'Support individual note taking that is visible only to the students',
+  },
+  {
+    id: 'cp-wiki',
+    title: 'Wiki',
+    isEnabled: false,
+    showSettings: false,
+    showStatus: false,
+    showEnable: true,
+    description: 'Share your wiki content to provide additional course material',
+  },
+];
+
+function CoursePageResources({ intl, courseId }) {
+  const { config } = useContext(AppContext);
+  const lmsCourseURL = `${config.LMS_BASE_URL}/courses/${courseId}`;
+  return (
+    <main>
+      <div className="container-fluid bg-info-100">
+        <div className="d-flex justify-content-between align-items-center border-bottom">
+          <h1 className="mt-3 text-info-500">{intl.formatMessage(messages.heading)}</h1>
+          <a className="btn btn-primary" href={lmsCourseURL} role="button">
+            {intl.formatMessage(messages['viewLive.button'])}
+          </a>
+        </div>
+        <div className="text-info-500">
+          <h3 className="mt-3">
+            {intl.formatMessage(messages['pages.subheading'])}
+          </h3>
+          <div className="d-flex flex-wrap align-items-stretch justify-content-around">
+            {coursePages.map((coursePage) => (
+              <div
+                className="d-flex flex-column align-content-stretch p-3 col-sm-12 col-md-6 col-lg-4"
+                key={coursePage.id}
+              >
+                <CoursePageConfigCard coursePage={coursePage} />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 className="text-info-500">{intl.formatMessage(messages['resources.subheading'])}</h3>
+          <div className="row bg-white text-info-500 border shadow justify-content-center align-items-center my-3 mx-1">
+            <div className="col-1 font-weight-bold">{intl.formatMessage(messages['resources.custom.title'])}</div>
+            <div className="col-8 my-3">
+              {intl.formatMessage(messages['resources.custom.description'])}
+            </div>
+            <div className="col-2 text-right">
+              <a className="btn btn-outline-info" href="/#" role="button">
+                {intl.formatMessage(messages['resources.newPage.button'])}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+CoursePageResources.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CoursePageResources);

src/example/ExamplePage.test.jsx → src/course-page-resources/CoursePageResources.test.jsx

@@ -1,4 +1,4 @@
-describe('example', () => {
+describe('coursepageresources', () => {
   it('will pass because it is an example', () => {
 
   });

src/course-page-resources/course-page/CoursePageConfigCard.jsx

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '@edx/paragon';
+
+import classNames from 'classnames';
+import messages from '../messages';
+
+const CoursePageShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  isEnabled: PropTypes.bool.isRequired,
+  showSettings: PropTypes.bool.isRequired,
+  showStatus: PropTypes.bool.isRequired,
+  showEnable: PropTypes.bool.isRequired,
+});
+
+export { CoursePageShape };
+
+function CoursePageConfigCard({ intl, coursePage }) {
+  const pageStatusMsgId = coursePage.isEnabled ? 'pageStatus.enabled' : 'pageStatus.disabled';
+  const componentClasses = classNames(
+    'course-page-config-card d-flex flex-column align-content-stretch',
+    'bg-white p-3 border shadow',
+    { 'border-info-300': coursePage.isEnabled, 'border-gray-100': !coursePage.isEnabled },
+  );
+
+  return (
+    <div className={componentClasses}>
+      <div className="d-flex flex-row">
+        <span className="font-weight-bold">{coursePage.title}</span>
+        {coursePage.showSettings && <FontAwesomeIcon icon={faCog} className="ml-auto" />}
+      </div>
+
+      <div>
+        {coursePage.showStatus && <span>{intl.formatMessage(messages[pageStatusMsgId])}</span>}
+      </div>
+
+      <div className="mt-3">
+        <p>{coursePage.description}</p>
+      </div>
+
+      {coursePage.showEnable && !coursePage.isEnabled && (
+        <div className="d-flex justify-content-center">
+          <Button className="btn btn-outline-primary">
+            {intl.formatMessage(messages['enable.button'])}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+CoursePageConfigCard.propTypes = {
+  intl: intlShape.isRequired,
+  coursePage: CoursePageShape.isRequired,
+};
+
+export default injectIntl(CoursePageConfigCard);

src/course-page-resources/course-page/CoursePageConfigCard.test.jsx

@@ -0,0 +1,5 @@
+describe('CoursePageConfigCard', () => {
+  it('will pass because it is an example', () => {
+
+  });
+});

src/course-page-resources/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as CoursePageResources } from './CoursePageResources';

src/course-page-resources/index.scss

@@ -0,0 +1,3 @@
+.course-page-config-card {
+  flex-basis: 100%;
+}

src/course-page-resources/messages.js

@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.heading',
+    defaultMessage: 'Pages & Resources',
+  },
+  'viewLive.button': {
+    id: 'course-authoring.pages-resources.viewLive.button',
+    defaultMessage: 'View Live',
+  },
+  'enable.button': {
+    id: 'course-authoring.pages-resources.enable.button',
+    defaultMessage: 'Enable',
+  },
+  'pages.subheading': {
+    id: 'course-authoring.pages-resources.pages.subheading',
+    defaultMessage: 'Course pages',
+  },
+  'pageStatus.enabled': {
+    id: 'course-authoring.pages-resources.pageStatus.enabled',
+    defaultMessage: 'Enabled',
+  },
+  'pageStatus.disabled': {
+    id: 'course-authoring.pages-resources.pageStatus.disabled',
+    defaultMessage: 'Disabled',
+  },
+  'resources.subheading': {
+    id: 'course-authoring.pages-resources.resources.subheading',
+    defaultMessage: 'Resources',
+  },
+  'resources.custom.title': {
+    id: 'course-authoring.pages-resources.resources.custom.title',
+    defaultMessage: 'Custom',
+  },
+  'resources.custom.description': {
+    id: 'course-authoring.pages-resources.resources.custom.description',
+    defaultMessage: 'Create and edit custom pages to provide students with additional course content and resources. Pages are publicly visible. If users know the URL of a page, they can view the page even if they are not registered for or logged in to your course.',
+  },
+  'resources.newPage.button': {
+    id: 'course-authoring.pages-resources.resources.newPage.button',
+    defaultMessage: 'New Page',
+  },
+});
+
+export default messages;

src/index.jsx

@@ -8,11 +8,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Switch } from 'react-router-dom';
 
-import Header, { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as headerMessages } from '@edx/frontend-component-header';
 import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
 
 import appMessages from './i18n';
-import ExamplePage from './example/ExamplePage';
+import { CoursePageResources } from './course-page-resources';
 import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettings';
 import StudioHeader from './studio-header/Header';
 
@@ -36,10 +36,19 @@ subscribe(APP_READY, () => {
             );
           }}
         />
-        <Route path="/example">
-          <Header />
-          <ExamplePage />
-        </Route>
+        <Route
+          path="/course-pages/:course_id"
+          render={({ match }) => {
+            const courseId = decodeURIComponent(match.params.course_id);
+            return (
+              <>
+                <StudioHeader courseId={courseId} />
+                <CoursePageResources courseId={courseId} />
+                <Footer />
+              </>
+            );
+          }}
+        />
       </Switch>
       <Footer />
     </AppProvider>,

src/index.scss

@@ -1,5 +1,8 @@
 @import '~@edx/paragon/scss/edx/theme.scss';
 
+@import './course-page-resources/index.scss';
+
+@import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 
 @import "proctored-exam-settings/proctoredExamSettings.scss";