feat: update footer and header to use frontend-component version

package.json

@@ -35,9 +35,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-footer": "^12.3.0",
+    "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^1.2.1",
-    "@edx/frontend-lib-content-components": "^1.173.4",
+    "@edx/frontend-lib-content-components": "^1.174.0",
     "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "^20.45.4",
     "@fortawesome/fontawesome-svg-core": "1.2.28",

src/CourseAuthoringPage.jsx

@@ -5,14 +5,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   useLocation,
 } from 'react-router-dom';
-import Header from './studio-header/Header';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import Header from './header';
 import { fetchCourseDetail } from './data/thunks';
 import { useModel } from './generic/model-store';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
 import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
-import AppFooter from './AppFooter';
 
 const AppHeader = ({
   courseNumber, courseOrg, courseTitle, courseId,
@@ -76,7 +76,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
         )
         )}
       {children}
-      {!inProgress && showHeader && <AppFooter />}
+      {!inProgress && showHeader && <StudioFooter />}
     </div>
   );
 };

src/CourseAuthoringRoutes.test.jsx

@@ -65,7 +65,7 @@ describe('<CourseAuthoringRoutes>', () => {
     store = initializeStore();
   });
 
-  it('renders the PagesAndResources component when the pages and resources route is active', () => {
+  fit('renders the PagesAndResources component when the pages and resources route is active', () => {
     render(
       <AppProvider store={store}>
         <MemoryRouter initialEntries={[`/course/${courseId}/pages-and-resources`]}>
@@ -74,7 +74,7 @@ describe('<CourseAuthoringRoutes>', () => {
       </AppProvider>,
     );
 
-    expect(screen.queryByText(pagesAndResourcesMockText)).toBeInTheDocument();
+    expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
     expect(screen.queryByText(proctoredExamSeetingsMockText)).not.toBeInTheDocument();
     expect(mockComponentFn).toHaveBeenCalledWith(
       expect.objectContaining({

src/course-rerun/index.jsx

@@ -9,13 +9,13 @@ import {
   Button,
 } from '@edx/paragon';
 import { history } from '@edx/frontend-platform';
+import { StudioFooter } from '@edx/frontend-component-footer';
 
-import Header from '../studio-header/Header';
+import Header from '../header';
 import Loading from '../generic/Loading';
 import { getLoadingStatuses } from '../generic/data/selectors';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
 import { RequestStatus } from '../data/constants';
-import AppFooter from '../AppFooter';
 import CourseRerunForm from './course-rerun-form';
 import CourseRerunSideBar from './course-rerun-sidebar';
 import messages from './messages';
@@ -87,7 +87,7 @@ const CourseRerun = ({ courseId }) => {
           isQueryPending={savingStatus === RequestStatus.PENDING}
         />
       </div>
-      <AppFooter />
+      <StudioFooter />
     </>
   );
 };

src/header/Header.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { StudioHeader } from '@edx/frontend-component-header';
+import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
+import messages from './messages';
+
+const Header = ({
+  courseId,
+  courseOrg,
+  courseNumber,
+  courseTitle,
+  isHiddenMainMenu,
+  // injected
+  intl,
+}) => {
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const mainMenuDropdowns = [
+    {
+      id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.content']),
+      items: getContentMenuItems({ studioBaseUrl, courseId, intl }),
+    },
+    {
+      id: `${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.settings']),
+      items: getSettingMenuItems({ studioBaseUrl, courseId, intl }),
+    },
+    {
+      id: `${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.tools']),
+      items: getToolsMenuItems({ studioBaseUrl, courseId, intl }),
+    },
+  ];
+  const outlineLink = `${studioBaseUrl}/course/${courseId}`;
+  return (
+    <div className="site-header-desktop">
+      <StudioHeader
+        {...{
+          org: courseOrg,
+          number: courseNumber,
+          title: courseTitle,
+          isHiddenMainMenu,
+          mainMenuDropdowns,
+          outlineLink,
+        }}
+      />
+    </div>
+  );
+};
+
+Header.propTypes = {
+  courseId: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseOrg: PropTypes.string,
+  courseTitle: PropTypes.string,
+  isHiddenMainMenu: PropTypes.bool,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+Header.defaultProps = {
+  courseId: '',
+  courseNumber: '',
+  courseOrg: '',
+  courseTitle: '',
+  isHiddenMainMenu: false,
+};
+
+export default injectIntl(Header);

src/header/header.scss

@@ -0,0 +1,65 @@
+// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.btn-tertiary:hover {
+  color: white;
+  background-color: #00262B;
+}
+
+.course-title-lockup {
+  @media only screen and (max-width: 768px) {
+    padding-left: .5rem;
+    max-width: 70%;
+  }
+
+  @media only screen and (min-width: 769px) {
+    padding: .5rem;
+    padding-right: $spacer;
+    border-right: 1px solid #E5E5E5;
+    min-width: 70%;
+  }
+
+  overflow: hidden;
+
+  span {
+    color: #333333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.375rem;
+  }
+}
+
+.site-header-mobile,
+.site-header-desktop {
+  position: relative;
+  z-index: 1000;
+}
+
+.site-header-mobile {
+  img {
+    height: 1.5rem;
+  }
+}
+
+.site-header-desktop {
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+}

src/header/index.js

@@ -0,0 +1 @@
+export { default } from './Header';

src/studio-header/utils.js → src/header/utils.js

@@ -1,7 +1,7 @@
 import { getPagePath } from '../utils';
 import messages from './messages';
 
-export const getContentMenuItem = ({ studioBaseUrl, courseId, intl }) => {
+export const getContentMenuItems = ({ studioBaseUrl, courseId, intl }) => {
   const items = [
     {
       href: `${studioBaseUrl}/course/${courseId}`,
@@ -70,36 +70,3 @@ export const getToolsMenuItems = ({ studioBaseUrl, courseId, intl }) => ([
     title: intl.formatMessage(messages['header.links.checklists']),
   },
 ]);
-
-export const getUserMenuItems = ({
-  studioBaseUrl,
-  logoutUrl,
-  intl,
-  isAdmin,
-}) => {
-  let items = [
-    {
-      href: `${studioBaseUrl}}`,
-      title: intl.formatMessage(messages['header.user.menu.studio']),
-    }, {
-      href: `${logoutUrl}`,
-      title: intl.formatMessage(messages['header.user.menu.logout']),
-    },
-  ];
-  if (isAdmin) {
-    items = [
-      {
-        href: `${studioBaseUrl}}`,
-        title: intl.formatMessage(messages['header.user.menu.studio']),
-      }, {
-        href: `${studioBaseUrl}/maintenance`,
-        title: intl.formatMessage(messages['header.user.menu.maintenance']),
-      }, {
-        href: `${logoutUrl}`,
-        title: intl.formatMessage(messages['header.user.menu.logout']),
-      },
-    ];
-  }
-
-  return items;
-};

src/header/utils.test.js

@@ -0,0 +1,23 @@
+import { getContentMenuItems } from './utils';
+
+const props = {
+  studioBaseUrl: 'UrLSTuiO',
+  courseId: '123',
+  intl: {
+    formatMessage: jest.fn(),
+  },
+};
+
+describe('header utils', () => {
+  describe('getContentMenuItems', () => {
+    it('should include Video Uploads option', () => {
+      const actualItems = getContentMenuItems(props);
+      expect(actualItems).toHaveLength(5);
+    });
+    it('should not include Video Uploads option', () => {
+      process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = 'false';
+      const actualItems = getContentMenuItems(props);
+      expect(actualItems).toHaveLength(4);
+    });
+  });
+});

src/index.scss

@@ -2,8 +2,7 @@
 @import "~@edx/brand/paragon/variables";
 @import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
-@import "studio-header/header";
-@import "~@edx/frontend-component-footer/dist/footer";
+@import "header/header";
 @import "assets/scss/variables";
 @import "assets/scss/form";
 @import "assets/scss/utilities";