@nauedu/frontend-component-header 20.0.0 → 20.1.0

package/dist/studio-header/StudioHeader.test.tsx

@@ -1,220 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
-import {
-  render,
-  fireEvent,
-  waitFor,
-} from '@testing-library/react';
-
-import { AppContext } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router-dom';
-
-import StudioHeader from './StudioHeader';
-import messages from './messages';
-
-const authenticatedUser = {
-  userId: 3,
-  username: 'abc123',
-  administrator: true,
-  roles: [],
-  avatar: '/imges/test.png',
-};
-let currentUser;
-let screenWidth = 1280;
-
-const RootWrapper = ({
-  ...props
-}: React.ComponentProps<typeof StudioHeader>) => {
-  const appContextValue = useMemo(() => ({
-    authenticatedUser: currentUser,
-    config: {
-      LOGOUT_URL: process.env.LOGOUT_URL,
-      LOGO_URL: process.env.LOGO_URL,
-      SITE_NAME: process.env.SITE_NAME,
-      STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-      LOGIN_URL: process.env.LOGIN_URL,
-    },
-  }), []);
-  const responsiveContextValue = useMemo(() => ({ width: screenWidth }), []);
-
-  return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values, react/prop-types
-    <MemoryRouter>
-      <IntlProvider locale="en">
-        <AppContext.Provider value={appContextValue}>
-          <ResponsiveContext.Provider value={responsiveContextValue}>
-            <StudioHeader
-              {...props}
-            />
-          </ResponsiveContext.Provider>
-        </AppContext.Provider>
-      </IntlProvider>
-    </MemoryRouter>
-  );
-};
-
-const props: React.ComponentProps<typeof StudioHeader> = {
-  number: '123',
-  org: 'Ed',
-  title: 'test',
-  mainMenuDropdowns: [
-    {
-      id: 'testId',
-      buttonTitle: 'test',
-      items: [
-        {
-          title: 'link',
-          href: '#',
-        },
-      ],
-    },
-  ],
-  outlineLink: 'tEsTLInK',
-  searchButtonAction: null,
-  isNewHomePage: true,
-  // These default values shouldn't be needed but typescript is confused by propTypes; can remove after converting
-  // from propTypes to TypeScript:
-  containerProps: {},
-  isHiddenMainMenu: false,
-};
-
-describe('Header', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    currentUser = authenticatedUser;
-  });
-  describe('desktop', () => {
-    it('course lock up should be visible', () => {
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const courseLockUpBlock = getByTestId('course-lock-up-block');
-
-      expect(courseLockUpBlock).toBeVisible();
-    });
-
-    it('mobile menu should not be visible', () => {
-      const { queryByTestId } = render(<RootWrapper {...props} />);
-      const mobileMenuButton = queryByTestId('mobile-menu-button');
-
-      expect(mobileMenuButton).toBeNull();
-    });
-
-    it('desktop menu should be visible', () => {
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const desktopMenu = getByTestId('desktop-menu');
-
-      expect(desktopMenu).toBeVisible();
-    });
-
-    it('should render one dropdown', async () => {
-      const { getAllByRole, getByText } = render(<RootWrapper {...props} />);
-      const dropdownMenu = getAllByRole('button')[0];
-
-      expect(dropdownMenu).toBeVisible();
-
-      await waitFor(() => fireEvent.click(dropdownMenu));
-      const dropdownOption = getByText('link');
-
-      expect(dropdownOption).toBeVisible();
-    });
-
-    it('maintenance should not be in user menu', async () => {
-      currentUser = { ...authenticatedUser, administrator: false };
-      const { getAllByRole, queryByText } = render(<RootWrapper {...props} />);
-      const userMenu = getAllByRole('button')[1];
-      await waitFor(() => fireEvent.click(userMenu));
-      const maintenanceButton = queryByText(messages['header.user.menu.maintenance'].defaultMessage);
-
-      expect(maintenanceButton).toBeNull();
-    });
-
-    it('user menu should use avatar icon', async () => {
-      currentUser = { ...authenticatedUser, avatar: null };
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const avatarIcon = getByTestId('avatar-icon');
-
-      expect(avatarIcon).toBeVisible();
-    });
-
-    it('should hide nav items if prop isHiddenMainMenu true', async () => {
-      const initialProps = { ...props, isHiddenMainMenu: true };
-      const { queryByTestId } = render(<RootWrapper {...initialProps} />);
-      const desktopMenu = queryByTestId('desktop-menu');
-      const mobileMenuButton = queryByTestId('mobile-menu-button');
-
-      expect(mobileMenuButton).toBeNull();
-
-      expect(desktopMenu).toBeNull();
-    });
-
-    it('should show search button', async () => {
-      const testProps = { ...props, searchButtonAction: () => undefined };
-      const { getByRole } = render(<RootWrapper {...testProps} />);
-      const searchButton = getByRole('button', { name: 'Search content' });
-
-      expect(searchButton).toBeVisible();
-    });
-
-    it('should not show search button', async () => {
-      const testProps = { ...props, searchButtonAction: null };
-      const { queryByRole } = render(<RootWrapper {...testProps} />);
-      expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('mobile', () => {
-    beforeEach(() => { screenWidth = 500; });
-    it('course lock up should not be visible', async () => {
-      const { queryByTestId } = render(<RootWrapper {...props} />);
-      const courseLockUpBlock = queryByTestId('course-lock-up-block');
-
-      expect(courseLockUpBlock).toBeNull();
-    });
-
-    it('mobile menu should be visible', async () => {
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const mobileMenuButton = getByTestId('mobile-menu-button');
-
-      expect(mobileMenuButton).toBeVisible();
-      await waitFor(() => fireEvent.click(mobileMenuButton));
-      const mobileMenu = getByTestId('mobile-menu');
-
-      expect(mobileMenu).toBeVisible();
-    });
-
-    it('desktop menu should not be visible', () => {
-      const { queryByTestId } = render(<RootWrapper {...props} />);
-      const desktopMenu = queryByTestId('desktop-menu');
-
-      expect(desktopMenu).toBeNull();
-    });
-
-    it('maintenance should be in user menu', async () => {
-      const { getAllByRole, getByText } = render(<RootWrapper {...props} />);
-      const userMenu = getAllByRole('button')[1];
-      await waitFor(() => fireEvent.click(userMenu));
-      const maintenanceButton = getByText(messages['header.user.menu.maintenance'].defaultMessage);
-
-      expect(maintenanceButton).toBeVisible();
-    });
-
-    it('user menu should use avatar image', async () => {
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const avatarImage = getByTestId('avatar-image');
-
-      expect(avatarImage).toBeVisible();
-    });
-
-    it('should hide nav items if prop isHiddenMainMenu true', async () => {
-      const initialProps = { ...props, isHiddenMainMenu: true };
-      const { queryByTestId } = render(<RootWrapper {...initialProps} />);
-      const desktopMenu = queryByTestId('desktop-menu');
-      const mobileMenuButton = queryByTestId('mobile-menu-button');
-
-      expect(mobileMenuButton).toBeNull();
-
-      expect(desktopMenu).toBeNull();
-    });
-  });
-});

package/dist/studio-header/StudioHeader.tsx

@@ -1,84 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import Responsive from 'react-responsive';
-import { AppContext } from '@edx/frontend-platform/react';
-import { ensureConfig } from '@edx/frontend-platform';
-
-import MobileHeader from './MobileHeader';
-import HeaderBody from './HeaderBody';
-
-ensureConfig([
-  'STUDIO_BASE_URL',
-  'SITE_NAME',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-  'LOGO_URL',
-], 'Studio Header component');
-
-const StudioHeader = ({
-  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
-  outlineLink, searchButtonAction, isNewHomePage,
-}) => {
-  // @ts-expect-error - frontend-platform doesn't yet have type information :/
-  const { authenticatedUser, config } = useContext(AppContext);
-  const props = {
-    logo: config.LOGO_URL,
-    logoAltText: `Studio ${config.SITE_NAME}`,
-    number,
-    org,
-    title,
-    containerProps,
-    username: authenticatedUser?.username,
-    isAdmin: authenticatedUser?.administrator,
-    authenticatedUserAvatar: authenticatedUser?.avatar,
-    studioBaseUrl: isNewHomePage ? '/home' : config.STUDIO_BASE_URL,
-    logoutUrl: config.LOGOUT_URL,
-    isHiddenMainMenu,
-    mainMenuDropdowns,
-    outlineLink,
-    searchButtonAction,
-  };
-
-  return (
-    <div className="studio-header">
-      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
-      <Responsive maxWidth={841}>
-        <MobileHeader {...props} />
-      </Responsive>
-      <Responsive minWidth={842}>
-        <HeaderBody {...props} />
-      </Responsive>
-    </div>
-  );
-};
-
-StudioHeader.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  containerProps: HeaderBody.propTypes.containerProps,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  isNewHomePage: PropTypes.bool.isRequired,
-};
-
-StudioHeader.defaultProps = {
-  number: '',
-  org: '',
-  containerProps: {},
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-};
-
-export default StudioHeader;

package/dist/studio-header/UserMenu.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Avatar,
-} from '@openedx/paragon';
-import NavDropdownMenu from './NavDropdownMenu';
-import getUserMenuItems from './utils';
-
-const UserMenu = ({
-  username,
-  studioBaseUrl,
-  logoutUrl,
-  authenticatedUserAvatar,
-  isMobile,
-  isAdmin,
-  // injected
-  intl,
-}) => {
-  const avatar = authenticatedUserAvatar ? (
-    <img
-      className="d-block w-100 h-100"
-      src={authenticatedUserAvatar}
-      alt={username}
-      data-testid="avatar-image"
-    />
-  ) : (
-    <Avatar
-      size="sm"
-      className="mr-2"
-      alt={username}
-      data-testid="avatar-icon"
-    />
-  );
-  const title = isMobile ? avatar : <>{avatar}{username}</>;
-
-  return (
-    <NavDropdownMenu
-      buttonTitle={title}
-      id="user-dropdown-menu"
-      items={getUserMenuItems({
-        studioBaseUrl,
-        logoutUrl,
-        intl,
-        isAdmin,
-      })}
-    />
-  );
-};
-
-UserMenu.propTypes = {
-  username: PropTypes.string,
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  authenticatedUserAvatar: PropTypes.string,
-  isMobile: PropTypes.bool,
-  isAdmin: PropTypes.bool,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-UserMenu.defaultProps = {
-  isMobile: false,
-  isAdmin: false,
-  authenticatedUserAvatar: null,
-  username: null,
-};
-
-export default injectIntl(UserMenu);

package/dist/studio-header/utils.ts

@@ -1,37 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import messages from './messages';
-
-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: `${getConfig().STUDIO_BASE_URL}/maintenance`,
-        title: intl.formatMessage(messages['header.user.menu.maintenance']),
-      }, {
-        href: `${logoutUrl}`,
-        title: intl.formatMessage(messages['header.user.menu.logout']),
-      },
-    ];
-  }
-
-  return items;
-};
-
-export default getUserMenuItems;