feat: Added Schedule and Details MFE page (#547)

2023-08-08 16:49:53 +03:00
parent a218e7e5f8
commit a0e37c0357
152 changed files with 9633 additions and 371 deletions
--- a/src/generic/help-sidebar/HelpSidebar.scss
+++ b/src/generic/help-sidebar/HelpSidebar.scss
@@ -11,17 +11,14 @@
      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
      color: $text-color-base;
    }
+
+    .help-sidebar-about-link {
+      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+    }
  }

  .help-sidebar-other-links ul {
    list-style: none;
-
-    .help-sidebar-other-link {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
-      line-height: 1.5rem;
-      color: $info-500;
-      margin-bottom: .5rem;
-    }
  }

  .help-sidebar-other-title {
@@ -29,4 +26,11 @@
    color: $black;
    margin-bottom: 1.25rem;
  }
+
+  .sidebar-link {
+    font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+    line-height: 1.5rem;
+    color: $info-500;
+    margin-bottom: .5rem;
+  }
 }
--- a/src/generic/help-sidebar/HelpSidebar.test.jsx
+++ b/src/generic/help-sidebar/HelpSidebar.test.jsx
@@ -14,31 +14,51 @@ jest.mock('react-router-dom', () => ({
  }),
 }));

-const RootWrapper = () => (
+const RootWrapper = (props) => (
  <IntlProvider locale="en">
-    <HelpSidebar
-      courseId="course123"
-      showOtherSettings
-      proctoredExamSettingsUrl=""
-    >
+    <HelpSidebar {...props}>
      <p>Test children</p>
    </HelpSidebar>
  </IntlProvider>
 );

+const props = {
+  courseId: 'course123',
+  showOtherSettings: true,
+  proctoredExamSettingsUrl: '',
+};
+
 describe('HelpSidebar', () => {
  it('renders children correctly', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<RootWrapper {...props} />);
    expect(getByText('Test children')).toBeTruthy();
  });
+
  it('should render all sidebar links with correct text', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText, queryByText } = render(<RootWrapper {...props} />);
    expect(getByText(messages.sidebarTitleOther.defaultMessage)).toBeTruthy();
    expect(getByText(messages.sidebarLinkToScheduleAndDetails.defaultMessage)).toBeTruthy();
    expect(getByText(messages.sidebarLinkToGrading.defaultMessage)).toBeTruthy();
    expect(getByText(messages.sidebarLinkToCourseTeam.defaultMessage)).toBeTruthy();
    expect(getByText(messages.sidebarLinkToGroupConfigurations.defaultMessage)).toBeTruthy();
    expect(getByText(messages.sidebarLinkToAdvancedSettings.defaultMessage)).toBeTruthy();
+    expect(queryByText(messages.sidebarLinkToProctoredExamSettings.defaultMessage)).toBeFalsy();
+  });
+
+  it('should hide other settings url if showOtherSettings disabled', () => {
+    const initialProps = { ...props, showOtherSettings: false };
+    const { queryByText } = render(<RootWrapper {...initialProps} />);
+    expect(queryByText(messages.sidebarTitleOther.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToScheduleAndDetails.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToGrading.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToCourseTeam.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToGroupConfigurations.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToAdvancedSettings.defaultMessage)).toBeFalsy();
+  });
+
+  it('should render proctored mfe url only if passed not empty value', () => {
+    const initialProps = { ...props, proctoredExamSettingsUrl: 'http:/link-to' };
+    const { getByText } = render(<RootWrapper {...initialProps} />);
    expect(getByText(messages.sidebarLinkToProctoredExamSettings.defaultMessage)).toBeTruthy();
  });
 });
--- a/src/generic/help-sidebar/HelpSidebarLink.jsx
+++ b/src/generic/help-sidebar/HelpSidebarLink.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@edx/paragon';
+
+const HelpSidebarLink = ({ as, pathToPage, title }) => {
+  const TagElement = as;
+  return (
+    <TagElement className="sidebar-link">
+      <Hyperlink destination={pathToPage}>
+        {title}
+      </Hyperlink>
+    </TagElement>
+  );
+};
+
+HelpSidebarLink.propTypes = {
+  pathToPage: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  as: PropTypes.string,
+};
+
+HelpSidebarLink.defaultProps = {
+  as: 'li',
+};
+
+export default HelpSidebarLink;
--- a/src/generic/help-sidebar/constants.js
+++ b/src/generic/help-sidebar/constants.js
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/prefer-default-export
+export const otherLinkURLParams = {
+  scheduleAndDetails: 'settings/details',
+  grading: 'settings/grading',
+  courseTeam: 'course_team',
+  advancedSettings: 'settings/advanced',
+  groupConfigurations: 'group_configurations',
+  proctoredExamSettings: 'proctored-exam-settings',
+};
--- a/src/generic/help-sidebar/index.jsx
+++ b/src/generic/help-sidebar/index.jsx
@@ -4,9 +4,9 @@ import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import { Hyperlink } from '@edx/paragon';

-import { getPagePath } from '../../utils';
+import HelpSidebarLink from './HelpSidebarLink';
+import { otherLinkURLParams } from './constants';
 import messages from './messages';

 const HelpSidebar = ({
@@ -18,34 +18,25 @@ const HelpSidebar = ({
  className,
 }) => {
  const { pathname } = useLocation();
-  const scheduleAndDetailsDestination = getPagePath(
-    courseId,
-    process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE,
-    'settings/details',
-  );
-  const gradingDestination = getPagePath(
-    courseId,
-    process.env.ENABLE_NEW_GRADING_PAGE,
-    'settings/grading',
-  );
-  const courseTeamDestination = getPagePath(
-    courseId,
-    process.env.ENABLE_NEW_COURSE_TEAM_PAGE,
-    'course_team',
-  );
-  const advancedSettingsDestination = getPagePath(
-    courseId,
-    process.env.ENABLE_NEW_ADVANCED_SETTINGS_PAGE,
-    'settings/advanced',
-  );
-  const groupConfigurationsDestination = new URL(
-    `/group_configurations/${courseId}`,
-    getConfig().STUDIO_BASE_URL,
-  );
-  const proctoredExamSettingsDestination = new URL(
-    `/course/${courseId}/proctored-exam-settings`,
-    getConfig().BASE_URL,
-  );
+  const {
+    grading,
+    courseTeam,
+    advancedSettings,
+    scheduleAndDetails,
+    groupConfigurations,
+  } = otherLinkURLParams;
+
+  const showOtherLink = (params) => !pathname.includes(params);
+  const generateLegacyURL = (urlParameter) => {
+    const referObj = new URL(`${urlParameter}/${courseId}`, getConfig().STUDIO_BASE_URL);
+    return referObj.href;
+  };
+
+  const scheduleAndDetailsDestination = generateLegacyURL(scheduleAndDetails);
+  const gradingDestination = generateLegacyURL(grading);
+  const courseTeamDestination = generateLegacyURL(courseTeam);
+  const advancedSettingsDestination = generateLegacyURL(advancedSettings);
+  const groupConfigurationsDestination = generateLegacyURL(groupConfigurations);

  return (
    <aside className={classNames('help-sidebar', className)}>
@@ -61,73 +52,47 @@ const HelpSidebar = ({
            aria-label={intl.formatMessage(messages.sidebarTitleOther)}
          >
            <ul className="p-0 mb-0">
-              {!scheduleAndDetailsDestination.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink destination={scheduleAndDetailsDestination}>
-                    {intl.formatMessage(
-                      messages.sidebarLinkToScheduleAndDetails,
-                    )}
-                  </Hyperlink>
-                </li>
+              {showOtherLink(scheduleAndDetails) && (
+                <HelpSidebarLink
+                  pathToPage={scheduleAndDetailsDestination}
+                  title={intl.formatMessage(
+                    messages.sidebarLinkToScheduleAndDetails,
+                  )}
+                />
              )}
-              {!gradingDestination.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink rel="noopener" destination={gradingDestination}>
-                    {intl.formatMessage(messages.sidebarLinkToGrading)}
-                  </Hyperlink>
-                </li>
+              {showOtherLink(grading) && (
+                <HelpSidebarLink
+                  pathToPage={gradingDestination}
+                  title={intl.formatMessage(messages.sidebarLinkToGrading)}
+                />
              )}
-              {!courseTeamDestination.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink rel="noopener" destination={courseTeamDestination}>
-                    {intl.formatMessage(messages.sidebarLinkToCourseTeam)}
-                  </Hyperlink>
-                </li>
+              {showOtherLink(courseTeam) && (
+                <HelpSidebarLink
+                  pathToPage={courseTeamDestination}
+                  title={intl.formatMessage(messages.sidebarLinkToCourseTeam)}
+                />
              )}
-              {proctoredExamSettingsUrl
-                && !proctoredExamSettingsUrl.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink
-                    rel="noopener"
-                    destination={proctoredExamSettingsUrl}
-                  >
-                    {intl.formatMessage(
-                      messages.sidebarLinkToProctoredExamSettings,
-                    )}
-                  </Hyperlink>
-                </li>
+              {showOtherLink(groupConfigurations) && (
+                <HelpSidebarLink
+                  pathToPage={groupConfigurationsDestination}
+                  title={intl.formatMessage(
+                    messages.sidebarLinkToGroupConfigurations,
+                  )}
+                />
              )}
-              {!groupConfigurationsDestination.href.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink
-                    rel="noopener"
-                    destination={groupConfigurationsDestination.href}
-                  >
-                    {intl.formatMessage(
-                      messages.sidebarLinkToGroupConfigurations,
-                    )}
-                  </Hyperlink>
-                </li>
+              {showOtherLink(advancedSettings) && (
+                <HelpSidebarLink
+                  pathToPage={advancedSettingsDestination}
+                  title={intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
+                />
              )}
-              {!advancedSettingsDestination.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink
-                    rel="noopener"
-                    destination={advancedSettingsDestination}
-                  >
-                    {intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
-                  </Hyperlink>
-                </li>
-              )}
-              {!proctoredExamSettingsDestination.href.includes(pathname) && !gradingDestination.includes(pathname) && (
-                <li className="help-sidebar-other-link">
-                  <Hyperlink
-                    rel="noopener"
-                    destination={proctoredExamSettingsDestination}
-                  >
-                    {intl.formatMessage(messages.sidebarLinkToProctoredExamSettings)}
-                  </Hyperlink>
-                </li>
+              {proctoredExamSettingsUrl && (
+                <HelpSidebarLink
+                  pathToPage={proctoredExamSettingsUrl}
+                  title={intl.formatMessage(
+                    messages.sidebarLinkToProctoredExamSettings,
+                  )}
+                />
              )}
            </ul>
          </nav>