diff --git a/.env b/.env index f16685a..603b66a 100644 --- a/.env +++ b/.env @@ -39,3 +39,4 @@ HOTJAR_DEBUG='' ACCOUNT_SETTINGS_URL='' ACCOUNT_PROFILE_URL='' ENABLE_NOTICES='' +CAREER_LINK_URL='' diff --git a/.env.development b/.env.development index 9b319ba..83442cb 100644 --- a/.env.development +++ b/.env.development @@ -46,3 +46,4 @@ HOTJAR_DEBUG='' ACCOUNT_SETTINGS_URL='http://localhost:1997' ACCOUNT_PROFILE_URL='http://localhost:1995' ENABLE_NOTICES='' +CAREER_LINK_URL='' diff --git a/.env.test b/.env.test index 9dd6516..9314c0a 100644 --- a/.env.test +++ b/.env.test @@ -45,3 +45,4 @@ HOTJAR_DEBUG='' ACCOUNT_SETTINGS_URL='http://account-settings-url.test' ACCOUNT_PROFILE_URL='http://account-profile-url.test' ENABLE_NOTICES='' +CAREER_LINK_URL='' diff --git a/src/App.jsx b/src/App.jsx index a6ce7d7..5adba84 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -23,7 +23,7 @@ import ZendeskFab from 'components/ZendeskFab'; import track from 'tracking'; import fakeData from 'data/services/lms/fakeData/courses'; -import LearnerDashboardHeaderVariant from './containers/LearnerDashboardHeaderVariant'; +import LearnerDashboardHeader from './containers/LearnerDashboardHeader'; import messages from './messages'; @@ -77,7 +77,7 @@ export const App = () => { {formatMessage(messages.pageTitle)}
- +
{hasNetworkFailure ? ( diff --git a/src/App.test.jsx b/src/App.test.jsx index 6734293..bc57ea7 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -12,14 +12,14 @@ import { Alert } from '@edx/paragon'; import { RequestKeys } from 'data/constants/requests'; import { reduxHooks } from 'hooks'; import Dashboard from 'containers/Dashboard'; -import LearnerDashboardHeaderVariant from 'containers/LearnerDashboardHeaderVariant'; +import LearnerDashboardHeader from 'containers/LearnerDashboardHeader'; import { App } from './App'; import messages from './messages'; jest.mock('@edx/frontend-component-footer', () => 'Footer'); jest.mock('containers/Dashboard', () => 'Dashboard'); -jest.mock('containers/LearnerDashboardHeaderVariant', () => 'LearnerDashboardHeaderVariant'); +jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader'); jest.mock('components/ZendeskFab', () => 'ZendeskFab'); jest.mock('data/redux', () => ({ selectors: 'redux.selectors', @@ -54,7 +54,7 @@ describe('App router component', () => { expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle)); }); it('displays learner dashboard header', () => { - expect(el.find(LearnerDashboardHeaderVariant).length).toEqual(1); + expect(el.find(LearnerDashboardHeader).length).toEqual(1); }); it('wraps the page in a browser router', () => { expect(el.find(Router)).toMatchObject(el); diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap index 443fdba..d819557 100644 --- a/src/__snapshots__/App.test.jsx.snap +++ b/src/__snapshots__/App.test.jsx.snap @@ -11,7 +11,7 @@ exports[`App router component component initialize failure snapshot 1`] = `
- +
- +
@@ -63,7 +63,7 @@ exports[`App router component component refresh failure snapshot 1`] = `
- +
+ + + + + Unenroll + + + Email settings + + + Share to Facebook + + + Share to Twitter + + + + + + +`; + exports[`CourseCardMenu enrolled, share enabled, email setting enable snapshot 1`] = ` @@ -117,24 +176,3 @@ exports[`CourseCardMenu masquerading snapshot 1`] = ` /> `; - -exports[`CourseCardMenu not enrolled, share disabled, email setting disabled snapshot 1`] = ` - - - - - - - -`; diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.jsx index f2c4524..c674b04 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/index.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/index.jsx @@ -25,6 +25,7 @@ export const CourseCardMenu = ({ cardId }) => { const { isEnrolled, isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId); const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId); const { isMasquerading } = reduxHooks.useMasqueradeData(); + const { isEarned } = reduxHooks.useCardCertificateData(cardId); const handleTwitterShare = reduxHooks.useTrackCourseEvent( track.socialShare, cardId, @@ -40,6 +41,13 @@ export const CourseCardMenu = ({ cardId }) => { const unenrollModal = useUnenrollData(); const handleToggleDropdown = useHandleToggleDropdown(cardId); + const showUnenrollItem = isEnrolled && !isEarned; + const showDropdown = showUnenrollItem || isEmailEnabled || facebook.isEnabled || twitter.isEnabled; + + if (!showDropdown) { + return null; + } + return ( <> @@ -52,7 +60,7 @@ export const CourseCardMenu = ({ cardId }) => { alt={formatMessage(messages.dropdownAlt)} /> - {isEnrolled && ( + {showUnenrollItem && ( ({ useCardEnrollmentData: jest.fn(), useCardSocialSettingsData: jest.fn(), useMasqueradeData: jest.fn(), + useCardCertificateData: jest.fn(), useTrackCourseEvent: (_, __, site) => jest.fn().mockName(`${site}ShareClick`), }, })); @@ -53,17 +54,43 @@ let wrapper; let el; describe('CourseCardMenu', () => { - beforeEach(() => { - useEmailSettings.mockReturnValue(defaultEmailSettingsModal); - useUnenrollData.mockReturnValue(defaultUnenrollModal); - reduxHooks.useCardSocialSettingsData.mockReturnValue(defaultSocialShare); - reduxHooks.useCardCourseData.mockReturnValue({ courseName }); - reduxHooks.useCardEnrollmentData.mockReturnValue({ isEnrolled: true, isEmailEnabled: true }); - reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false }); - }); + const mockCourseCardMenu = ({ + isEnrolled, + isEmailEnabled, + isMasquerading, + facebook, + twitter, + isEarned, + }) => { + useEmailSettings.mockReturnValueOnce(defaultEmailSettingsModal); + useUnenrollData.mockReturnValueOnce(defaultUnenrollModal); + reduxHooks.useCardCourseData.mockReturnValueOnce({ courseName }); + reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({ + facebook: { + ...defaultSocialShare.facebook, + ...facebook, + }, + twitter: { + ...defaultSocialShare.twitter, + ...twitter, + }, + }); + reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ + isEnrolled, + isEmailEnabled, + }); + reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading }); + reduxHooks.useCardCertificateData.mockReturnValueOnce({ isEarned }); + return shallow(); + }; describe('enrolled, share enabled, email setting enable', () => { beforeEach(() => { - wrapper = shallow(); + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + isMasquerading: false, + isEarned: false, + }); }); test('snapshot', () => { expect(wrapper).toMatchSnapshot(); @@ -89,36 +116,84 @@ describe('CourseCardMenu', () => { expect(el.props().disabled).toEqual(false); }); }); - describe('not enrolled, share disabled, email setting disabled', () => { - beforeEach(() => { - reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({ - ...defaultSocialShare, - twitter: { ...defaultSocialShare.twitter, isEnabled: false }, - facebook: { ...defaultSocialShare.facebook, isEnabled: false }, + describe('disable and stop rendering buttons', () => { + it('does not render unenroll dropdown item when certificate is already earned', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + isMasquerading: false, + isEarned: true, }); - reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false, isEmailEnabled: false }); - wrapper = shallow(); - }); - test('snapshot', () => { - expect(wrapper).toMatchSnapshot(); - }); - it('does not renders share buttons', () => { - expect(wrapper.find('FacebookShareButton').length).toEqual(0); - expect(wrapper.find('TwitterShareButton').length).toEqual(0); - }); - it('does not render unenroll modal toggle', () => { el = wrapper.find({ 'data-testid': 'unenrollModalToggle' }); expect(el.length).toEqual(0); }); - it('does not render email settings modal toggle', () => { + it('does not render unenroll dropdown item when course is not enrolled', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: false, + isEmailEnabled: true, + isMasquerading: false, + isEarned: false, + }); + el = wrapper.find({ 'data-testid': 'unenrollModalToggle' }); + expect(el.length).toEqual(0); + }); + it('does not render email settings modal toggle when email is not enabled', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: false, + isMasquerading: false, + isEarned: false, + }); el = wrapper.find({ 'data-testid': 'emailSettingsModalToggle' }); expect(el.length).toEqual(0); }); + it('does not render facebook share button when facebook is not enabled', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + facebook: { + ...defaultSocialShare.facebook, + isEnabled: false, + }, + isMasquerading: false, + isEarned: false, + }); + el = wrapper.find('FacebookShareButton'); + expect(el.length).toEqual(0); + }); + it('does not render twitter share button when twitter is not enabled', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + twitter: { + ...defaultSocialShare.twitter, + isEnabled: false, + }, + isMasquerading: false, + isEarned: false, + }); + el = wrapper.find('TwitterShareButton'); + expect(el.length).toEqual(0); + }); + it('snapshot when no dropdown items exist', () => { + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + isMasquerading: false, + isEarned: false, + }); + expect(wrapper).toMatchSnapshot(); + expect(wrapper).toEqual({}); + }); }); describe('masquerading', () => { beforeEach(() => { - reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true }); - wrapper = shallow(); + wrapper = mockCourseCardMenu({ + isEnrolled: true, + isEmailEnabled: true, + isMasquerading: true, + isEarned: false, + }); }); test('snapshot', () => { expect(wrapper).toMatchSnapshot(); diff --git a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx b/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx deleted file mode 100644 index 1c02746..0000000 --- a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { getConfig } from '@edx/frontend-platform'; -import { useIntl } from '@edx/frontend-platform/i18n'; -import { AppContext } from '@edx/frontend-platform/react'; -import { AvatarButton, Dropdown } from '@edx/paragon'; - -import urls from 'data/services/lms/urls'; -import { reduxHooks } from 'hooks'; - -import { useIsCollapsed, findCoursesNavDropdownClicked } from './hooks'; -import messages from './messages'; - -export const AuthenticatedUserDropdown = ({ username }) => { - const { formatMessage } = useIntl(); - const { authenticatedUser } = React.useContext(AppContext); - const dashboard = reduxHooks.useEnterpriseDashboardData(); - const { courseSearchUrl } = reduxHooks.usePlatformSettingsData(); - const isCollapsed = useIsCollapsed(); - const { profileImage } = authenticatedUser; - - return ( - - - - {username} - - - - SWITCH DASHBOARD - Personal - {!!dashboard && ( - - {dashboard.label} {formatMessage(messages.dashboard)} - - )} - - - {formatMessage(messages.profile)} - - {isCollapsed && ( - <> - - {formatMessage(messages.viewPrograms)} - - - {formatMessage(messages.exploreCourses)} - - - )} - - {formatMessage(messages.account)} - - {getConfig().ORDER_HISTORY_URL && ( - - {formatMessage(messages.orderHistory)} - - )} - - {formatMessage(messages.help)} - - - - {formatMessage(messages.signOut)} - - - - ); -}; - -AuthenticatedUserDropdown.propTypes = { - username: PropTypes.string.isRequired, -}; - -export default AuthenticatedUserDropdown; diff --git a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.test.jsx b/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.test.jsx deleted file mode 100644 index 9343b0a..0000000 --- a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.test.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import { shallow } from 'enzyme'; -import { getConfig } from '@edx/frontend-platform'; - -import { reduxHooks } from 'hooks'; -import { AuthenticatedUserDropdown } from './AuthenticatedUserDropdown'; -import { useIsCollapsed } from './hooks'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: jest.fn(), -})); -jest.mock('@edx/frontend-platform/react', () => ({ - AppContext: { - authenticatedUser: { - profileImage: 'profileImage', - }, - }, -})); -jest.mock('hooks', () => ({ - reduxHooks: { - useEnterpriseDashboardData: jest.fn(), - usePlatformSettingsData: jest.fn(() => ({ - courseSearchUrl: 'test-course-search-url', - })), - }, -})); -jest.mock('containers/LearnerDashboardHeader/hooks', () => ({ - useIsCollapsed: jest.fn(), - findCoursesNavDropdownClicked: (href) => jest.fn().mockName(`findCoursesNavDropdownClicked('${href}')`), -})); - -const config = { - ACCOUNT_PROFILE_URL: 'http://account-profile-url.test', - ACCOUNT_SETTINGS_URL: 'http://account-settings-url.test', - LOGOUT_URL: 'http://logout-url.test', - ORDER_HISTORY_URL: 'http://order-history-url.test', - SUPPORT_URL: 'http://localhost:18000/support', -}; -getConfig.mockReturnValue(config); - -describe('AuthenticatedUserDropdown', () => { - const props = { - username: 'username', - }; - const defaultDashboardData = { - label: 'label', - url: 'url', - }; - - describe('snapshots', () => { - test('with enterprise dashboard', () => { - reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(defaultDashboardData); - useIsCollapsed.mockReturnValueOnce(true); - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - test('without enterprise dashboard and expanded', () => { - reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null); - useIsCollapsed.mockReturnValueOnce(false); - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/src/containers/LearnerDashboardHeaderVariant/BrandLogo.jsx b/src/containers/LearnerDashboardHeader/BrandLogo.jsx similarity index 100% rename from src/containers/LearnerDashboardHeaderVariant/BrandLogo.jsx rename to src/containers/LearnerDashboardHeader/BrandLogo.jsx diff --git a/src/containers/LearnerDashboardHeaderVariant/BrandLogo.test.jsx b/src/containers/LearnerDashboardHeader/BrandLogo.test.jsx similarity index 100% rename from src/containers/LearnerDashboardHeaderVariant/BrandLogo.test.jsx rename to src/containers/LearnerDashboardHeader/BrandLogo.test.jsx diff --git a/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx similarity index 86% rename from src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.jsx rename to src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx index 557e279..c2982d4 100644 --- a/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx @@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform'; import { useIntl } from '@edx/frontend-platform/i18n'; import { AppContext } from '@edx/frontend-platform/react'; -import { Button } from '@edx/paragon'; +import { Button, Badge } from '@edx/paragon'; import urls from 'data/services/lms/urls'; import { reduxHooks } from 'hooks'; @@ -45,11 +45,19 @@ export const CollapseMenuBody = ({ isOpen }) => { {authenticatedUser && ( <> - {dashboard && ( + {!!dashboard && ( )} + {!dashboard && getConfig().CAREER_LINK_URL && ( + + )} -
- - -
- - -
+ + `; diff --git a/src/containers/LearnerDashboardHeader/hooks.js b/src/containers/LearnerDashboardHeader/hooks.js index 3e683fd..7457d76 100644 --- a/src/containers/LearnerDashboardHeader/hooks.js +++ b/src/containers/LearnerDashboardHeader/hooks.js @@ -1,11 +1,18 @@ import React from 'react'; import { useWindowSize, breakpoints } from '@edx/paragon'; import track from 'tracking'; +import { StrictDict } from 'utils'; import { linkNames } from 'tracking/constants'; +import * as module from './hooks'; + +export const state = StrictDict({ + isOpen: (val) => React.useState(val), // eslint-disable-line +}); + export const useIsCollapsed = () => { const { width } = useWindowSize(); - const isCollapsed = React.useMemo(() => (width <= breakpoints.large.maxWidth), [width]); + const isCollapsed = React.useMemo(() => (width <= breakpoints.large.minWidth), [width]); return isCollapsed; }; @@ -17,8 +24,19 @@ export const findCoursesNavDropdownClicked = (href) => track.findCourses.findCou linkName: linkNames.learnerHomeNavDropdownExplore, }); +export const useLearnerDashboardHeaderData = () => { + const [isOpen, setIsOpen] = module.state.isOpen(false); + const toggleIsOpen = () => setIsOpen(!isOpen); + + return { + isOpen, + toggleIsOpen, + }; +}; + export default { useIsCollapsed, findCoursesNavClicked, findCoursesNavDropdownClicked, + useLearnerDashboardHeaderData, }; diff --git a/src/containers/LearnerDashboardHeader/hooks.test.js b/src/containers/LearnerDashboardHeader/hooks.test.js index 79ea527..a039a58 100644 --- a/src/containers/LearnerDashboardHeader/hooks.test.js +++ b/src/containers/LearnerDashboardHeader/hooks.test.js @@ -1,7 +1,19 @@ import { useWindowSize, breakpoints } from '@edx/paragon'; import track from 'tracking'; import { linkNames } from 'tracking/constants'; -import { useIsCollapsed, findCoursesNavClicked, findCoursesNavDropdownClicked } from './hooks'; + +import { MockUseState } from 'testUtils'; + +import * as hooks from './hooks'; + +const state = new MockUseState(hooks); + +const { + useIsCollapsed, + findCoursesNavClicked, + findCoursesNavDropdownClicked, + useLearnerDashboardHeaderData, +} = hooks; jest.mock('tracking', () => ({ findCourses: { @@ -12,13 +24,17 @@ jest.mock('tracking', () => ({ const url = 'http://example.com'; describe('LearnerDashboardHeader hooks', () => { + describe('state values', () => { + state.testGetter(state.keys.isOpen); + }); + describe('useIsCollapsed', () => { test('large screen is not collapsed', () => { - useWindowSize.mockReturnValueOnce({ width: breakpoints.large.maxWidth + 1 }); + useWindowSize.mockReturnValueOnce({ width: breakpoints.large.minWidth + 1 }); expect(useIsCollapsed()).toEqual(false); }); test('small screen is collapsed', () => { - useWindowSize.mockReturnValueOnce({ width: breakpoints.large.maxWidth - 1 }); + useWindowSize.mockReturnValueOnce({ width: breakpoints.large.minWidth - 1 }); expect(useIsCollapsed()).toEqual(true); }); }); @@ -40,4 +56,14 @@ describe('LearnerDashboardHeader hooks', () => { }); }); }); + + describe('useLearnerDashboardHeaderData', () => { + test('default state', () => { + state.mock(); + const out = useLearnerDashboardHeaderData(); + state.expectInitializedWith(state.keys.isOpen, false); + out.toggleIsOpen(); + expect(state.values.isOpen).toEqual(true); + }); + }); }); diff --git a/src/containers/LearnerDashboardHeader/index.jsx b/src/containers/LearnerDashboardHeader/index.jsx index 7cebb5c..dfa8dbf 100644 --- a/src/containers/LearnerDashboardHeader/index.jsx +++ b/src/containers/LearnerDashboardHeader/index.jsx @@ -1,92 +1,22 @@ -import React, { useContext } from 'react'; +import React from 'react'; -import { useIntl } from '@edx/frontend-platform/i18n'; -import { AppContext } from '@edx/frontend-platform/react'; -import { Program, Search } from '@edx/paragon/icons'; -import { - Button, Image, IconButton, Icon, -} from '@edx/paragon'; - -import topBanner from 'assets/top_stripe.svg'; import MasqueradeBar from 'containers/MasqueradeBar'; -import urls from 'data/services/lms/urls'; -import { reduxHooks } from 'hooks'; - -import AuthenticatedUserDropdown from './AuthenticatedUserDropdown'; -import GreetingBanner from './GreetingBanner'; import ConfirmEmailBanner from './ConfirmEmailBanner'; -import { useIsCollapsed, findCoursesNavClicked } from './hooks'; -import messages from './messages'; +import CollapsedHeader from './CollapsedHeader'; +import ExpandedHeader from './ExpandedHeader'; + import './index.scss'; -export const UserMenu = () => { - const { authenticatedUser } = useContext(AppContext); - return authenticatedUser ? () : null; -}; +export const LearnerDashboardHeader = () => ( + <> + + + + + +); -export const LearnerDashboardHeader = () => { - const { formatMessage } = useIntl(); - const isCollapsed = useIsCollapsed(); - const { courseSearchUrl } = reduxHooks.usePlatformSettingsData(); - - const exploreCoursesClick = findCoursesNavClicked(courseSearchUrl); - - return ( - <> - -
- {!(isCollapsed) && ( - - )} -
-
- {(!isCollapsed) && ( - - )} -
- {isCollapsed && } -
- {isCollapsed ? ( -
- - -
- ) : ( - <> - - - - )} -
-
- {!isCollapsed && } -
- - - ); -}; - -LearnerDashboardHeader.propTypes = { -}; +LearnerDashboardHeader.propTypes = {}; export default LearnerDashboardHeader; diff --git a/src/containers/LearnerDashboardHeader/index.scss b/src/containers/LearnerDashboardHeader/index.scss index a2210db..d8bd8da 100644 --- a/src/containers/LearnerDashboardHeader/index.scss +++ b/src/containers/LearnerDashboardHeader/index.scss @@ -1,12 +1,38 @@ -.greetings-slash-container-small { - height: 4px; - width: 40px; - transform-origin: center; - transform: rotate(-70deg); +.dropdown-menu-collapse { + width: 100vw; + position: absolute; + left: 0; } -.greetings-slash-container-large { - height: 8px; - width: 120px; - transform-origin: center; - transform: rotate(-70deg); + +.learner-variant-header { + a { + // needed to make the link not resize the header + border-bottom: 2px solid transparent; + } + .course-link { + border-bottom: 2px solid !important; + } + + .course-link:hover { + border-bottom: inherit !important; + } +} + +.nav-small-menu { + > * { + justify-content: flex-start !important; + + border-radius: 0 !important; + border-top: 1px solid #ddd !important; + + &::after { + content: '\00BB'; + padding-left: 10px; + } + } +} + +.logo { + // copy from legacy dashboard + height: 40px; } diff --git a/src/containers/LearnerDashboardHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/index.test.jsx index ca2ec40..cbaf555 100644 --- a/src/containers/LearnerDashboardHeader/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/index.test.jsx @@ -1,59 +1,18 @@ import { shallow } from 'enzyme'; -import { AppContext } from '@edx/frontend-platform/react'; +import LearnerDashboardHeader from '.'; -import LearnerDashboardHeader, { UserMenu } from '.'; - -import { useIsCollapsed } from './hooks'; - -jest.mock('@edx/frontend-platform/react', () => ({ - AppContext: { - authenticatedUser: { - username: 'test-username', - }, - }, -})); -jest.mock('./hooks', () => ({ - useIsCollapsed: jest.fn(), - findCoursesNavClicked: (href) => jest.fn().mockName(`findCoursesNavClicked('${href}')`), -})); -jest.mock('hooks', () => ({ - reduxHooks: { - usePlatformSettingsData: jest.fn(() => ({ - courseSearchUrl: 'test-course-search-url', - })), - }, -})); jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar'); - +jest.mock('./CollapsedHeader', () => 'CollapsedHeader'); jest.mock('./ConfirmEmailBanner', () => 'ConfirmEmailBanner'); -jest.mock('./AuthenticatedUserDropdown', () => 'AuthenticatedUserDropdown'); -jest.mock('./GreetingBanner', () => 'GreetingBanner'); +jest.mock('./ExpandedHeader', () => 'ExpandedHeader'); describe('LearnerDashboardHeader', () => { - describe('snapshots', () => { - test('with collapsed', () => { - useIsCollapsed.mockReturnValueOnce(true); - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - test('without collapsed', () => { - useIsCollapsed.mockReturnValueOnce(false); - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - }); - - describe('UserMenu', () => { - describe('snapshots', () => { - test('with authenticated user', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - test('without authenticated user', () => { - AppContext.authenticatedUser = null; - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - }); + test('render', () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + expect(wrapper.find('ConfirmEmailBanner')).toHaveLength(1); + expect(wrapper.find('MasqueradeBar')).toHaveLength(1); + expect(wrapper.find('CollapsedHeader')).toHaveLength(1); + expect(wrapper.find('ExpandedHeader')).toHaveLength(1); }); }); diff --git a/src/containers/LearnerDashboardHeader/messages.js b/src/containers/LearnerDashboardHeader/messages.js index 01e02a9..8ac4e04 100644 --- a/src/containers/LearnerDashboardHeader/messages.js +++ b/src/containers/LearnerDashboardHeader/messages.js @@ -2,70 +2,79 @@ import { defineMessages } from '@edx/frontend-platform/i18n'; const messages = defineMessages({ dashboard: { - id: 'leanerDashboard.menu.dashboard.label', + id: 'learnerVariantDashboard.menu.dashboard.label', defaultMessage: 'Dashboard', description: 'The text for the user menu Dashboard navigation link.', }, help: { - id: 'leanerDashboard.help.label', + id: 'learnerVariantDashboard.help.label', defaultMessage: 'Help', description: 'The text for the link to the Help Center', }, profile: { - id: 'leanerDashboard.menu.profile.label', + id: 'learnerVariantDashboard.menu.profile.label', defaultMessage: 'Profile', description: 'The text for the user menu Profile navigation link.', }, viewPrograms: { - id: 'leanerDashboard.menu.viewPrograms.label', + id: 'learnerVariantDashboard.menu.viewPrograms.label', defaultMessage: 'View Programs', description: 'The text for the user menu View Programs navigation link.', }, account: { - id: 'leanerDashboard.menu.account.label', + id: 'learnerVariantDashboard.menu.account.label', defaultMessage: 'Account', description: 'The text for the user menu Account navigation link.', }, orderHistory: { - id: 'leanerDashboard.menu.orderHistory.label', + id: 'learnerVariantDashboard.menu.orderHistory.label', defaultMessage: 'Order History', description: 'The text for the user menu Order History navigation link.', }, signOut: { - id: 'leanerDashboard.menu.signOut.label', + id: 'learnerVariantDashboard.menu.signOut.label', defaultMessage: 'Sign Out', description: 'The label for the user menu Sign Out action.', }, - - goodMorning: { - id: 'greeting.morning', - defaultMessage: 'Good Morning!', - description: 'Good Morning', + course: { + id: 'learnerVariantDashboard.course', + defaultMessage: 'Courses', + description: 'Header link for switching to dashboard page.', }, - goodAfternoon: { - id: 'greeting.afternoon', - defaultMessage: 'Good Afternoon!', - description: 'Good Afternoon', - }, - goodEvening: { - id: 'greeting.evening', - defaultMessage: 'Good Evening!', - description: 'Good Evening', - }, - switchToProgram: { - id: 'leanerDashboard.switchToProgram', - defaultMessage: 'Switch to Programs', + program: { + id: 'learnerVariantDashboard.program', + defaultMessage: 'Programs', description: 'Header link for switching to program page.', }, - exploreCourses: { - id: 'leanerDashboard.exploreCourses', - defaultMessage: 'Explore courses', - description: 'Header link for switching to course page.', + discoverNew: { + id: 'learnerVariantDashboard.discoverNew', + defaultMessage: 'Discover New', + description: 'Header link for switching to discover page.', }, - courseSearchAlt: { - id: 'leanerDashboard.courseSearchAlt', - defaultMessage: 'Course search', - description: 'Alt-text for course search icon button', + logoAltText: { + id: 'learnerVariantDashboard.logoAltText', + defaultMessage: 'edX, Inc. Dashboard', + description: 'Alt text for the edX logo.', + }, + collapseMenuOpenAltText: { + id: 'learnerVariantDashboard.collapseMenuOpenAltText', + defaultMessage: 'Menu', + description: 'Alt text for the collapse menu icon when the menu is open.', + }, + collapseMenuClosedAltText: { + id: 'learnerVariantDashboard.collapseMenuClosedAltText', + defaultMessage: 'Close', + description: 'Alt text for the collapse menu icon when the menu is closed.', + }, + career: { + id: 'leanerDashboard.menu.career.label', + defaultMessage: 'Career', + description: 'The text for the user menu Career navigation link.', + }, + newAlert: { + id: 'header.menu.new.label', + defaultMessage: 'New', + description: 'The text announcing that an item in the user menu is New', }, }); diff --git a/src/containers/LearnerDashboardHeaderVariant/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeaderVariant/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 3d86b7b..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,10 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LearnerDashboardHeaderVariant render 1`] = ` - - - - - - -`; diff --git a/src/containers/LearnerDashboardHeaderVariant/hooks.js b/src/containers/LearnerDashboardHeaderVariant/hooks.js deleted file mode 100644 index a3f8592..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/hooks.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { useWindowSize, breakpoints } from '@edx/paragon'; -import track from 'tracking'; -import { StrictDict } from 'utils'; -import { linkNames } from 'tracking/constants'; - -import * as module from './hooks'; - -export const state = StrictDict({ - isOpen: (val) => React.useState(val), // eslint-disable-line -}); - -export const useIsCollapsed = () => { - const { width } = useWindowSize(); - const isCollapsed = React.useMemo(() => (width <= breakpoints.large.minWidth), [width]); - return isCollapsed; -}; - -export const findCoursesNavClicked = (href) => track.findCourses.findCoursesClicked(href, { - linkName: linkNames.learnerHomeNavExplore, -}); - -export const findCoursesNavDropdownClicked = (href) => track.findCourses.findCoursesClicked(href, { - linkName: linkNames.learnerHomeNavDropdownExplore, -}); - -export const useLearnerDashboardHeaderVariantData = () => { - const [isOpen, setIsOpen] = module.state.isOpen(false); - const toggleIsOpen = () => setIsOpen(!isOpen); - - return { - isOpen, - toggleIsOpen, - }; -}; - -export default { - useIsCollapsed, - findCoursesNavClicked, - findCoursesNavDropdownClicked, - useLearnerDashboardHeaderVariantData, -}; diff --git a/src/containers/LearnerDashboardHeaderVariant/hooks.test.js b/src/containers/LearnerDashboardHeaderVariant/hooks.test.js deleted file mode 100644 index a426dce..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/hooks.test.js +++ /dev/null @@ -1,69 +0,0 @@ -import { useWindowSize, breakpoints } from '@edx/paragon'; -import track from 'tracking'; -import { linkNames } from 'tracking/constants'; - -import { MockUseState } from 'testUtils'; - -import * as hooks from './hooks'; - -const state = new MockUseState(hooks); - -const { - useIsCollapsed, - findCoursesNavClicked, - findCoursesNavDropdownClicked, - useLearnerDashboardHeaderVariantData, -} = hooks; - -jest.mock('tracking', () => ({ - findCourses: { - findCoursesClicked: jest.fn(), - }, -})); - -const url = 'http://example.com'; - -describe('LearnerDashboardHeaderVariant hooks', () => { - describe('state values', () => { - state.testGetter(state.keys.isOpen); - }); - - describe('useIsCollapsed', () => { - test('large screen is not collapsed', () => { - useWindowSize.mockReturnValueOnce({ width: breakpoints.large.minWidth + 1 }); - expect(useIsCollapsed()).toEqual(false); - }); - test('small screen is collapsed', () => { - useWindowSize.mockReturnValueOnce({ width: breakpoints.large.minWidth - 1 }); - expect(useIsCollapsed()).toEqual(true); - }); - }); - - describe('findCoursesNavClicked', () => { - test('calls tracking with nav link name', () => { - findCoursesNavClicked(url); - expect(track.findCourses.findCoursesClicked).toHaveBeenCalledWith(url, { - linkName: linkNames.learnerHomeNavExplore, - }); - }); - }); - - describe('findCoursesNavDropdownClicked', () => { - test('calls tracking with dropdown link name', () => { - findCoursesNavDropdownClicked(url); - expect(track.findCourses.findCoursesClicked).toHaveBeenCalledWith(url, { - linkName: linkNames.learnerHomeNavDropdownExplore, - }); - }); - }); - - describe('useLearnerDashboardHeaderVariantData', () => { - test('default state', () => { - state.mock(); - const out = useLearnerDashboardHeaderVariantData(); - state.expectInitializedWith(state.keys.isOpen, false); - out.toggleIsOpen(); - expect(state.values.isOpen).toEqual(true); - }); - }); -}); diff --git a/src/containers/LearnerDashboardHeaderVariant/index.jsx b/src/containers/LearnerDashboardHeaderVariant/index.jsx deleted file mode 100644 index b8ed23e..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/index.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import MasqueradeBar from 'containers/MasqueradeBar'; -import ConfirmEmailBanner from 'containers/LearnerDashboardHeader/ConfirmEmailBanner'; - -import CollapsedHeader from './CollapsedHeader'; -import ExpandedHeader from './ExpandedHeader'; - -import './index.scss'; - -export const LearnerDashboardHeaderVariant = () => ( - <> - - - - - -); - -LearnerDashboardHeaderVariant.propTypes = {}; - -export default LearnerDashboardHeaderVariant; diff --git a/src/containers/LearnerDashboardHeaderVariant/index.scss b/src/containers/LearnerDashboardHeaderVariant/index.scss deleted file mode 100644 index d8bd8da..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/index.scss +++ /dev/null @@ -1,38 +0,0 @@ -.dropdown-menu-collapse { - width: 100vw; - position: absolute; - left: 0; -} - -.learner-variant-header { - a { - // needed to make the link not resize the header - border-bottom: 2px solid transparent; - } - .course-link { - border-bottom: 2px solid !important; - } - - .course-link:hover { - border-bottom: inherit !important; - } -} - -.nav-small-menu { - > * { - justify-content: flex-start !important; - - border-radius: 0 !important; - border-top: 1px solid #ddd !important; - - &::after { - content: '\00BB'; - padding-left: 10px; - } - } -} - -.logo { - // copy from legacy dashboard - height: 40px; -} diff --git a/src/containers/LearnerDashboardHeaderVariant/index.test.jsx b/src/containers/LearnerDashboardHeaderVariant/index.test.jsx deleted file mode 100644 index ff97e3b..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/index.test.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import { shallow } from 'enzyme'; -import LearnerDashboardHeaderVariant from '.'; - -jest.mock('containers/LearnerDashboardHeader/ConfirmEmailBanner', () => 'ConfirmEmailBanner'); -jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar'); -jest.mock('./CollapsedHeader', () => 'CollapsedHeader'); -jest.mock('./ExpandedHeader', () => 'ExpandedHeader'); - -describe('LearnerDashboardHeaderVariant', () => { - test('render', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('ConfirmEmailBanner')).toHaveLength(1); - expect(wrapper.find('MasqueradeBar')).toHaveLength(1); - expect(wrapper.find('CollapsedHeader')).toHaveLength(1); - expect(wrapper.find('ExpandedHeader')).toHaveLength(1); - }); -}); diff --git a/src/containers/LearnerDashboardHeaderVariant/messages.js b/src/containers/LearnerDashboardHeaderVariant/messages.js deleted file mode 100644 index 70f3bbd..0000000 --- a/src/containers/LearnerDashboardHeaderVariant/messages.js +++ /dev/null @@ -1,71 +0,0 @@ -import { defineMessages } from '@edx/frontend-platform/i18n'; - -const messages = defineMessages({ - dashboard: { - id: 'learnerVariantDashboard.menu.dashboard.label', - defaultMessage: 'Dashboard', - description: 'The text for the user menu Dashboard navigation link.', - }, - help: { - id: 'learnerVariantDashboard.help.label', - defaultMessage: 'Help', - description: 'The text for the link to the Help Center', - }, - profile: { - id: 'learnerVariantDashboard.menu.profile.label', - defaultMessage: 'Profile', - description: 'The text for the user menu Profile navigation link.', - }, - viewPrograms: { - id: 'learnerVariantDashboard.menu.viewPrograms.label', - defaultMessage: 'View Programs', - description: 'The text for the user menu View Programs navigation link.', - }, - account: { - id: 'learnerVariantDashboard.menu.account.label', - defaultMessage: 'Account', - description: 'The text for the user menu Account navigation link.', - }, - orderHistory: { - id: 'learnerVariantDashboard.menu.orderHistory.label', - defaultMessage: 'Order History', - description: 'The text for the user menu Order History navigation link.', - }, - signOut: { - id: 'learnerVariantDashboard.menu.signOut.label', - defaultMessage: 'Sign Out', - description: 'The label for the user menu Sign Out action.', - }, - course: { - id: 'learnerVariantDashboard.course', - defaultMessage: 'Courses', - description: 'Header link for switching to dashboard page.', - }, - program: { - id: 'learnerVariantDashboard.program', - defaultMessage: 'Programs', - description: 'Header link for switching to program page.', - }, - discoverNew: { - id: 'learnerVariantDashboard.discoverNew', - defaultMessage: 'Discover New', - description: 'Header link for switching to discover page.', - }, - logoAltText: { - id: 'learnerVariantDashboard.logoAltText', - defaultMessage: 'edX, Inc. Dashboard', - description: 'Alt text for the edX logo.', - }, - collapseMenuOpenAltText: { - id: 'learnerVariantDashboard.collapseMenuOpenAltText', - defaultMessage: 'Menu', - description: 'Alt text for the collapse menu icon when the menu is open.', - }, - collapseMenuClosedAltText: { - id: 'learnerVariantDashboard.collapseMenuClosedAltText', - defaultMessage: 'Close', - description: 'Alt text for the collapse menu icon when the menu is closed.', - }, -}); - -export default messages; diff --git a/src/data/redux/app/selectors/courseCard.js b/src/data/redux/app/selectors/courseCard.js index 01faaca..edfe048 100644 --- a/src/data/redux/app/selectors/courseCard.js +++ b/src/data/redux/app/selectors/courseCard.js @@ -24,6 +24,7 @@ export const courseCard = StrictDict({ isDownloadable: certificate.isDownloadable, isEarnedButUnavailable: certificate.isEarned && !isAvailable, isRestricted: certificate.isRestricted, + isEarned: certificate.isEarned, }; }, ),