@openedx/frontend-base 1.0.0-alpha.4 → 1.0.0-alpha.41

package/runtime/react/CurrentAppProvider.tsx

@@ -1,46 +0,0 @@
-import { ReactNode, useMemo, useState } from 'react';
-
-import { getAppConfig } from '../config';
-import { CONFIG_CHANGED } from '../constants';
-
-import CurrentAppContext from './CurrentAppContext';
-import { useSiteEvent } from './hooks';
-
-interface CurrentAppProviderProps {
-  appId: string,
-  children: ReactNode,
-}
-
-/**
- * A wrapper component for React-based micro-frontends to initialize a number of common data/
- * context providers.
- *
- * ```
- * <CurrentAppProvider appId="my.app">
- *   <HelloWorld />
- * </CurrentAppProvider>
- * ```
- *
- * This will provide the following to HelloWorld:
- * - A `CurrentAppContext` provider for React context data.
- *
- * @param {Object} props
- * @memberof module:React
- */
-export default function CurrentAppProvider({ appId, children }: CurrentAppProviderProps) {
-  const [appConfig, setAppConfig] = useState(getAppConfig(appId));
-
-  useSiteEvent(CONFIG_CHANGED, () => {
-    setAppConfig(getAppConfig(appId));
-  });
-
-  const appContextValue = useMemo(() => ({
-    appConfig,
-  }), [appConfig]);
-
-  return (
-    <CurrentAppContext.Provider value={appContextValue}>
-      {children}
-    </CurrentAppContext.Provider>
-  );
-}

package/runtime/react/Divider.tsx

@@ -1,5 +0,0 @@
-export default function Divider() {
-  return (
-    <hr className="w-100 my-2" />
-  );
-}

package/runtime/react/ErrorBoundary.jsx

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { logError } from '../logging';
-
-import ErrorPage from './ErrorPage';
-
-/**
- * Error boundary component used to log caught errors and display the error page.
- *
- * @memberof module:React
- * @extends {Component}
- */
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError() {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, info) {
-    logError(error, { stack: info.componentStack });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallbackComponent || <ErrorPage />;
-    }
-    return this.props.children;
-  }
-}
-
-ErrorBoundary.propTypes = {
-  children: PropTypes.node,
-  fallbackComponent: PropTypes.node,
-};
-
-ErrorBoundary.defaultProps = {
-  children: null,
-  fallbackComponent: undefined,
-};
-
-export default ErrorBoundary;

package/runtime/react/ErrorBoundary.test.jsx

@@ -1,83 +0,0 @@
-import { render } from '@testing-library/react';
-
-import ErrorBoundary from './ErrorBoundary';
-import { initializeMockApp } from '..';
-
-describe('ErrorBoundary', () => {
-  let logError = jest.fn();
-
-  beforeEach(async () => {
-    // This is a gross hack to suppress error logs in the invalid parentSelector test
-    jest.spyOn(console, 'error');
-    global.console.error.mockImplementation(() => { });
-
-    const { loggingService } = initializeMockApp();
-    logError = loggingService.logError;
-  });
-
-  afterEach(() => {
-    global.console.error.mockRestore();
-    jest.clearAllMocks();
-  });
-
-  it('should render children if no error', () => {
-    const component = (
-      <ErrorBoundary>
-        <div>Yay</div>
-      </ErrorBoundary>
-    );
-    const { container: wrapper } = render(component);
-
-    const element = wrapper.querySelector('div');
-    expect(element.textContent).toEqual('Yay');
-  });
-
-  it('should render ErrorPage if it has an error', () => {
-    const ExplodingComponent = () => {
-      throw new Error('booyah');
-    };
-
-    const component = (
-      <ErrorBoundary>
-        <ExplodingComponent />
-      </ErrorBoundary>
-    );
-
-    render(component);
-
-    expect(logError).toHaveBeenCalledTimes(1);
-    expect(logError).toHaveBeenCalledWith(
-      new Error('booyah'),
-      expect.objectContaining({
-        stack: expect.stringContaining('ExplodingComponent'),
-      }),
-    );
-  });
-  it('should render the fallback component when an error occurs', () => {
-    function FallbackComponent() {
-      return <div data-testid="fallback-component">Oops, something went wrong!</div>;
-    }
-    function ComponentError() {
-      throw new Error('An error occurred during the click event!');
-    }
-    const wrapper = render(
-      <ErrorBoundary fallbackComponent={<FallbackComponent />}>
-        <ComponentError />
-      </ErrorBoundary>,
-    );
-
-    expect(wrapper.queryByTestId('fallback-component')).toBeInTheDocument();
-  });
-
-  it('should render the ErrorPage fallbackComponent is null', () => {
-    function ComponentError() {
-      throw new Error('An error occurred during the click event!');
-    }
-    const wrapper = render(
-      <ErrorBoundary fallbackComponent={null}>
-        <ComponentError />
-      </ErrorBoundary>,
-    );
-    expect(wrapper.queryByTestId('error-page')).toBeInTheDocument();
-  });
-});

package/runtime/react/ErrorPage.jsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, Container, Row, Col,
-} from '@openedx/paragon';
-
-import { useSiteEvent } from './hooks';
-import {
-  FormattedMessage,
-  IntlProvider,
-  getMessages,
-  getLocale,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-/**
- * An error page that displays a generic message for unexpected errors.  Also contains a "Try
- * Again" button to refresh the page.
- *
- * @memberof module:React
- * @extends {Component}
- */
-function ErrorPage({
-  message = null,
-}) {
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  /* istanbul ignore next */
-  const reload = () => {
-    global.location.reload();
-  };
-
-  return (
-    <IntlProvider locale={locale} messages={getMessages()}>
-      <Container fluid className="py-5 justify-content-center align-items-start text-center" data-testid="error-page">
-        <Row>
-          <Col>
-            <p className="text-muted">
-              <FormattedMessage
-                id="unexpected.error.message.text"
-                defaultMessage="An unexpected error occurred. Please click the button below to refresh the page."
-                description="error message when an unexpected error occurs"
-              />
-            </p>
-            {message && (
-              <div role="alert" className="my-4">
-                <p>{message}</p>
-              </div>
-            )}
-            <Button onClick={reload}>
-              <FormattedMessage
-                id="unexpected.error.button.text"
-                defaultMessage="Try again"
-                description="text for button that tries to reload the app by refreshing the page"
-              />
-            </Button>
-          </Col>
-        </Row>
-      </Container>
-    </IntlProvider>
-  );
-}
-
-ErrorPage.propTypes = {
-  message: PropTypes.string,
-};
-
-export default ErrorPage;

package/runtime/react/SiteProvider.test.jsx

@@ -1,66 +0,0 @@
-import { render } from '@testing-library/react';
-import { initialize } from '../initialize';
-import SiteProvider from './SiteProvider';
-
-jest.mock('../auth', () => ({
-  configureAuth: () => { },
-  getAuthenticatedUser: () => null,
-  fetchAuthenticatedUser: () => null,
-  getAuthenticatedHttpClient: () => ({}),
-  AUTHENTICATED_USER_CHANGED: 'user_changed',
-}));
-
-jest.mock('../analytics', () => ({
-  configureAnalytics: () => { },
-  identifyAnonymousUser: jest.fn(),
-  identifyAuthenticatedUser: jest.fn(),
-}));
-
-jest.mock('./hooks', () => ({
-  ...jest.requireActual('./hooks'),
-  useTrackColorSchemeChoice: jest.fn(),
-}));
-
-describe('SiteProvider', () => {
-  beforeEach(async () => {
-    await initialize({
-      loggingService: jest.fn(() => ({
-        logError: jest.fn(),
-        logInfo: jest.fn(),
-      })),
-      messages: {
-        ar: {},
-        'es-419': {},
-        fr: {},
-        'zh-cn': {},
-        ca: {},
-        he: {},
-        id: {},
-        'ko-kr': {},
-        pl: {},
-        'pt-br': {},
-        ru: {},
-        th: {},
-        uk: {},
-        'fa-ir': {},
-        fa: {},
-      },
-    });
-  });
-
-  it('should render its children with a router', () => {
-    const component = (
-      <SiteProvider>
-        <div className="child">Child One</div>
-        <div className="child">Child Two</div>
-      </SiteProvider>
-    );
-
-    const wrapper = render(component);
-    const list = wrapper.container.querySelectorAll('div.child');
-
-    expect(list.length).toEqual(2);
-    expect(list[0].textContent).toEqual('Child One');
-    expect(list[1].textContent).toEqual('Child Two');
-  });
-});

package/runtime/react/SiteProvider.tsx

@@ -1,78 +0,0 @@
-import { ReactNode, useMemo, useState } from 'react';
-
-import { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth';
-import { getSiteConfig } from '../config';
-import { CONFIG_CHANGED } from '../constants';
-import {
-  getLocale,
-  getMessages,
-  IntlProvider,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-import CombinedAppProvider from './CombinedAppProvider';
-import ErrorBoundary from './ErrorBoundary';
-import SiteContext from './SiteContext';
-import { useSiteEvent } from './hooks';
-
-interface SiteProviderProps {
-  children: ReactNode,
-}
-
-/**
- * A wrapper component for React-based micro-frontends to initialize a number of common data/
- * context providers.
- *
- * ```
- * subscribe(SITE_READY, () => {
- *   ReactDOM.render(
- *     <SiteProvider>
- *       <HelloWorld />
- *     </SiteProvider>
- *   )
- * });
- * ```
- *
- * This will provide the following to HelloWorld:
- * - An error boundary as described above.
- * - An `SiteContext` provider for React context data.
- * - IntlProvider for @edx/frontend-i18n internationalization
- *
- * @param {Object} props
- * @memberof module:React
- */
-export default function SiteProvider({ children }: SiteProviderProps) {
-  const [siteConfig, setSiteConfig] = useState(getSiteConfig());
-  const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(AUTHENTICATED_USER_CHANGED, () => {
-    setAuthenticatedUser(getAuthenticatedUser());
-  });
-
-  useSiteEvent(CONFIG_CHANGED, () => {
-    setSiteConfig(getSiteConfig());
-  });
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  const siteContextValue = useMemo(() => ({
-    authenticatedUser,
-    siteConfig,
-    locale
-  }), [authenticatedUser, siteConfig, locale]);
-
-  return (
-    <IntlProvider locale={locale} messages={getMessages()}>
-      <ErrorBoundary>
-        <SiteContext.Provider value={siteContextValue}>
-          <CombinedAppProvider>
-            {children}
-          </CombinedAppProvider>
-        </SiteContext.Provider>
-      </ErrorBoundary>
-    </IntlProvider>
-  );
-}

package/runtime/react/hooks.test.jsx

@@ -1,104 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import siteConfig from 'site.config';
-import { EnvironmentTypes } from '../../types';
-import { sendTrackEvent } from '../analytics';
-import { setAuthenticatedUser } from '../auth';
-import { initializeMockApp } from '../testing';
-import SiteProvider from './SiteProvider';
-import { useAuthenticatedUser, useSiteConfig, useTrackColorSchemeChoice } from './hooks';
-
-jest.mock('../analytics');
-
-const mockAddEventListener = jest.fn();
-const mockRemoveEventListener = jest.fn();
-let matchesMock;
-
-Object.defineProperty(window, 'matchMedia', {
-  value: jest.fn(() => ({
-    addEventListener: mockAddEventListener,
-    removeEventListener: mockRemoveEventListener,
-    matches: matchesMock,
-  })),
-});
-
-describe('useTrackColorSchemeChoice hook', () => {
-  afterEach(() => {
-    mockAddEventListener.mockClear();
-    mockRemoveEventListener.mockClear();
-    sendTrackEvent.mockClear();
-  });
-
-  it('sends dark preferred color schema event if query matches', async () => {
-    matchesMock = true;
-    renderHook(() => useTrackColorSchemeChoice());
-
-    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-    expect(sendTrackEvent).toHaveBeenCalledWith(
-      'openedx.ui.frontend-base.prefers-color-scheme.selected',
-      { preferredColorScheme: 'dark' },
-    );
-  });
-
-  it('sends light preferred color schema event if query does not match', async () => {
-    matchesMock = false;
-    renderHook(() => useTrackColorSchemeChoice());
-
-    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-    expect(sendTrackEvent).toHaveBeenCalledWith(
-      'openedx.ui.frontend-base.prefers-color-scheme.selected',
-      { preferredColorScheme: 'light' },
-    );
-  });
-
-  it('adds change event listener to matchMedia query', async () => {
-    renderHook(() => useTrackColorSchemeChoice());
-
-    expect(mockAddEventListener).toHaveBeenCalledTimes(1);
-    expect(mockAddEventListener).toHaveBeenCalledWith('change', expect.any(Function));
-  });
-});
-
-describe('useAuthenticatedUser', () => {
-  it('returns null when the user is anonymous', () => {
-    const { result } = renderHook(() => useAuthenticatedUser());
-    expect(result.current).toBeNull();
-  });
-
-  describe('with a user', () => {
-    const user = {
-      administrator: true,
-      email: 'admin@example.com',
-      name: 'Admin',
-      roles: ['admin'],
-      userId: 1,
-      username: 'admin-user',
-      avatar: 'http://localhost/admin.png',
-    };
-
-    beforeEach(() => {
-      initializeMockApp({
-        authenticatedUser: user,
-      });
-    });
-
-    afterEach(() => {
-      act(() => {
-        setAuthenticatedUser(null);
-      });
-    });
-
-    it('returns a User when the user exists', () => {
-      const { result } = renderHook(() => useAuthenticatedUser(), { wrapper: SiteProvider });
-      expect(result.current).toBe(user);
-    });
-  });
-});
-
-describe('useSiteConfig', () => {
-  it('returns the site config', () => {
-    const { result } = renderHook(() => useSiteConfig());
-    expect(result.current).toHaveProperty('apps', siteConfig.apps);
-    expect(result.current).toHaveProperty('environment', EnvironmentTypes.TEST);
-    expect(result.current).toHaveProperty('baseUrl', 'http://localhost:8080');
-  });
-});

package/runtime/react/hooks.ts

@@ -1,106 +0,0 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
-import { useMatches } from 'react-router';
-
-import { sendTrackEvent } from '../analytics';
-import { getActiveRoles, setActiveRouteRoles } from '../config';
-import { ACTIVE_ROLES_CHANGED } from '../constants';
-import { isRoleRouteObject } from '../routing';
-import { subscribe, unsubscribe } from '../subscriptions';
-
-import SiteContext from './SiteContext';
-import CurrentAppContext from './CurrentAppContext';
-
-/**
- * A React hook that allows functional components to subscribe to application events.  This should
- * be used sparingly - for the most part, Context should be used higher-up in the application to
- * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub
- * mechanism.
- *
- * @memberof module:React
- * @param {string} type
- * @param {function} callback
- */
-export const useSiteEvent = (type, callback) => {
-  useEffect(() => {
-    subscribe(type, callback);
-
-    return () => {
-      unsubscribe(type, callback);
-    };
-  }, [callback, type]);
-};
-
-/**
- * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
- * event to the tracking service.
- *
- * @memberof module:React
- */
-export const useTrackColorSchemeChoice = () => {
-  useEffect(() => {
-    const trackColorSchemeChoice = ({ matches }) => {
-      const preferredColorScheme = matches ? 'dark' : 'light';
-      sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });
-    };
-    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
-    if (colorSchemeQuery) {
-      // send user's initial choice
-      trackColorSchemeChoice(colorSchemeQuery);
-      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
-    }
-    return () => {
-      if (colorSchemeQuery) {
-        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
-      }
-    };
-  }, []);
-};
-
-export function useAuthenticatedUser() {
-  const { authenticatedUser } = useContext(SiteContext);
-  return authenticatedUser;
-}
-
-export function useSiteConfig() {
-  const { siteConfig } = useContext(SiteContext);
-  return siteConfig;
-}
-
-export function useAppConfig() {
-  const { appConfig } = useContext(CurrentAppContext);
-  return appConfig;
-}
-
-export function useActiveRouteRoleWatcher() {
-  const matches = useMatches();
-
-  // We create this callback so we can use it right away to populate the default state value.
-  const findActiveRouteRoles = useCallback(() => {
-    // Starts with the widget roles and adds the others in.
-    const roles: string[] = [];
-
-    // Route roles
-    for (const match of matches) {
-      if (isRoleRouteObject(match)) {
-        if (!roles.includes(match.handle.role)) {
-          roles.push(match.handle.role);
-        }
-      }
-    }
-
-    return roles;
-  }, [matches]);
-
-  useEffect(() => {
-    setActiveRouteRoles(findActiveRouteRoles());
-  }, [matches, findActiveRouteRoles]);
-}
-
-export function useActiveRoles() {
-  const [roles, setRoles] = useState<string[]>(getActiveRoles());
-  useSiteEvent(ACTIVE_ROLES_CHANGED, () => {
-    setRoles(getActiveRoles());
-  });
-
-  return roles;
-}

package/runtime/routing/index.ts

@@ -1 +0,0 @@
-export * from './utils';

package/runtime/routing/utils.test.ts

@@ -1,7 +0,0 @@
-import { getUrlByRouteRole } from './utils';
-
-describe('getUrlByRouteRole', () => {
-  it('returns the default path for an internal module', () => {
-    expect(getUrlByRouteRole('test-app-1')).toBe('/app1');
-  });
-});

package/runtime/routing/utils.ts

@@ -1,34 +0,0 @@
-import { RouteObject } from 'react-router';
-
-import { RoleRouteObject } from '../../types';
-import { getSiteConfig } from '../config';
-
-export function getUrlByRouteRole(role: string) {
-  const { apps, externalRoutes } = getSiteConfig();
-
-  if (apps) {
-    for (const app of apps) {
-      if (Array.isArray(app.routes)) {
-        for (const route of app.routes) {
-          if (route?.handle?.role === role) {
-            return route.path ?? null;
-          }
-        }
-      }
-    }
-  }
-
-  if (externalRoutes) {
-    for (const externalRoute of externalRoutes) {
-      if (externalRoute.role === role) {
-        return externalRoute.url;
-      }
-    }
-  }
-
-  return null;
-}
-
-export function isRoleRouteObject(match: RouteObject): match is RoleRouteObject {
-  return match.handle !== undefined && 'role' in match.handle;
-}