@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

package/runtime/logging/NewRelicLoggingService.test.js

@@ -1,214 +0,0 @@
-import NewRelicLoggingService, { MAX_ERROR_LENGTH } from './NewRelicLoggingService';
-
-global.newrelic = {
-  addPageAction: jest.fn(),
-  noticeError: jest.fn(),
-  setCustomAttribute: jest.fn(),
-};
-
-let service = null;
-const configWithIgnoredErrors = {
-  config: {
-    ignoredErrorRegex: /^Ignore this error|very minor/,
-  },
-};
-const configWithNullIgnoredErrors = {
-  config: {
-    ignoredErrorRegex: null,
-  },
-};
-const configWithEmptyIgnoredErrors = {
-  config: {
-    ignoredErrorRegex: '',
-  },
-};
-const configWithWhitespaceIgnoredErrors = {
-  config: {
-    ignoredErrorRegex: '     ',
-  },
-};
-const configWithMissingIgnoredErrors = {
-  config: {},
-};
-
-describe('NewRelicLoggingService', () => {
-  beforeEach(() => {
-    service = new NewRelicLoggingService(configWithIgnoredErrors);
-  });
-
-  describe('logInfo', () => {
-    beforeEach(() => {
-      global.newrelic.addPageAction.mockReset();
-    });
-
-    it('calls New Relic client to log message if the client is available', () => {
-      const message = 'Test log';
-      service.logInfo(message);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', { message });
-    });
-
-    it('handles plain string message properly with custom attributes', () => {
-      const message = 'Test log';
-      const attrs = { a: 1, b: 'red', c: 3 };
-      service.logInfo(message, attrs);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', {
-        message, ...attrs,
-      });
-    });
-
-    it('handles plain string message properly with no custom attributes', () => {
-      const message = 'Test log';
-      service.logInfo(message);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', {
-        message,
-      });
-    });
-
-    it('handles error object properly with custom attributes', () => {
-      const message = 'Test log';
-      const attrs = { a: 1, b: 'red', c: 3 };
-      const err = { message, customAttributes: attrs };
-      service.logInfo(err);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', {
-        message, ...attrs,
-      });
-    });
-
-    it('handles error object properly with no custom attributes', () => {
-      const message = 'Test log';
-      const err = { message };
-      service.logInfo(err);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', {
-        message,
-      });
-    });
-
-    it('handles error object properly with custom attributes in object and param', () => {
-      const message = 'Test log';
-      const attrsObj = { a: 1, b: 'red', c: 3 };
-      const attrsParam = { x: 99, y: 'blue', z: 987 };
-      const err = { message, customAttributes: attrsObj };
-      service.logInfo(err, attrsParam);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('INFO', {
-        message, ...attrsObj, ...attrsParam,
-      });
-    });
-  });
-
-  describe('logError', () => {
-    beforeEach(() => {
-      global.newrelic.noticeError.mockReset();
-    });
-
-    it('calls New Relic client to log error if the client is available', () => {
-      const error = new Error('Failed!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-
-    it('calls New Relic client to log error if the client is available', () => {
-      const error = new Error('Failed!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-
-    it('calls New Relic client to log error and merges in customAttributes from the error', () => {
-      const error = new Error('Failed!');
-      error.customAttributes = {
-        boo: 'yah',
-        foo: 'gah',
-      };
-      service.logError(error, { foo: 'wins', bar: 'baz' });
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, { boo: 'yah', foo: 'wins', bar: 'baz' });
-    });
-
-    it('calls New Relic client with truncated error string', () => {
-      const error = new Array(MAX_ERROR_LENGTH + 500 + 1).join('0');
-      const expectedError = new Array(MAX_ERROR_LENGTH + 1).join('0');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(expectedError, undefined);
-    });
-
-    it('calls New Relic client with truncated error', () => {
-      const error = {
-        message: new Array(MAX_ERROR_LENGTH + 500 + 1).join('0'),
-      };
-      const expectedError = {
-        message: new Array(MAX_ERROR_LENGTH + 1).join('0'),
-      };
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(expectedError, undefined);
-    });
-  });
-
-  describe('setCustomAttribute', () => {
-    beforeEach(() => {
-      global.newrelic.setCustomAttribute.mockReset();
-    });
-
-    it('calls New Relic client with name and value', () => {
-      service.setCustomAttribute('foo', 'bar');
-      expect(global.newrelic.setCustomAttribute).toHaveBeenCalledWith('foo', 'bar');
-    });
-  });
-
-  describe('ignoredErrors', () => {
-    beforeEach(() => {
-      global.newrelic.addPageAction.mockReset();
-      global.newrelic.noticeError.mockReset();
-    });
-
-    it('calls New Relic client as error objects but ignored and sent as page action', () => {
-      const error1 = new Error('Ignore this error!');
-      error1.customAttributes = {
-        hi: 'hello',
-      };
-      service.logError(error1);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('IGNORED_ERROR', {
-        message: error1.message, ...error1.customAttributes,
-      });
-
-      const error2 = new Error('very minor');
-      service.logError(error2);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('IGNORED_ERROR', {
-        message: error2.message,
-      });
-    });
-
-    it('calls New Relic client as error string but ignored and sent as page action', () => {
-      const error = 'Ignore this error!';
-      service.logError(error);
-      expect(global.newrelic.addPageAction).toHaveBeenCalledWith('IGNORED_ERROR', {
-        message: error,
-      });
-    });
-
-    it('calls New Relic client as error object but with null ignored error config', () => {
-      service = new NewRelicLoggingService(configWithNullIgnoredErrors);
-      const error = new Error('Ignore this error!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-
-    it('calls New Relic client as error object but with empty ignored error config', () => {
-      service = new NewRelicLoggingService(configWithEmptyIgnoredErrors);
-      const error = new Error('Ignore this error!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-
-    it('calls New Relic client as error object but with whitespace-only ignored error config', () => {
-      service = new NewRelicLoggingService(configWithWhitespaceIgnoredErrors);
-      const error = new Error('Ignore this error!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-
-    it('calls New Relic client as error object but with missing ignored error config', () => {
-      service = new NewRelicLoggingService(configWithMissingIgnoredErrors);
-      const error = new Error('Ignore this error!');
-      service.logError(error);
-      expect(global.newrelic.noticeError).toHaveBeenCalledWith(error, undefined);
-    });
-  });
-});

package/runtime/logging/index.ts

@@ -1,9 +0,0 @@
-export {
-  configureLogging,
-  getLoggingService,
-  logError,
-  logInfo,
-  resetLoggingService
-} from './interface';
-export { default as MockLoggingService } from './MockLoggingService';
-export { default as NewRelicLoggingService } from './NewRelicLoggingService';

package/runtime/logging/interface.js

@@ -1,109 +0,0 @@
-/**
- * #### Import members from **@openedx/frontend-base logging**
- *
- * Contains a shared interface for logging information. (The default implementation is in
- * NewRelicLoggingService.js.) When in development mode, all messages will instead be sent to the console.
- *
- * The `initialize` function performs much of the logging configuration for you.  If, however,
- * you're not using the `initialize` function, logging (via New Relic) can be configured via:
- *
- * ```
- * import { getSiteConfig, configureLogging, NewRelicLoggingService, logInfo, logError } from '@openedx/frontend-base';
- *
- * configureLogging(NewRelicLoggingService, {
- *   config: getSiteConfig(),
- * });
- *
- * logInfo('Just so you know...');
- * logInfo(new Error('Unimportant error'), { type: 'unimportant' });
- * logError('Uhoh!');
- * logError(new Error('Uhoh error!'));
- * ```
- *
- * As shown in this example, logging depends on the configuration document.
- *
- * @module Logging
- */
-
-import PropTypes from 'prop-types';
-
-const optionsShape = {
-  config: PropTypes.object.isRequired,
-};
-
-const serviceShape = {
-  logInfo: PropTypes.func.isRequired,
-  logError: PropTypes.func.isRequired,
-};
-
-let service = null;
-
-/**
- *
- */
-export function configureLogging(LoggingService, options) {
-  PropTypes.checkPropTypes(optionsShape, options, 'property', 'Logging');
-  service = new LoggingService(options);
-  PropTypes.checkPropTypes(serviceShape, service, 'property', 'LoggingService');
-  return service;
-}
-
-/**
- * Logs a message to the 'info' log level. Can accept custom attributes as a property of the error
- * object, or as an optional second parameter.
- *
- * @param {string|Error} infoStringOrErrorObject
- * @param {Object} [customAttributes={}]
- */
-export function logInfo(infoStringOrErrorObject, customAttributes) {
-  return service.logInfo(infoStringOrErrorObject, customAttributes);
-}
-
-/**
- * Logs a message to the 'error' log level.  Can accept custom attributes as a property of the error
- * object, or as an optional second parameter.
- *
- * @param {string|Error} errorStringOrObject
- * @param {Object} [customAttributes={}]
- */
-export function logError(errorStringOrObject, customAttributes) {
-  return service.logError(errorStringOrObject, customAttributes);
-}
-
-/**
- * Sets a custom attribute that will be included with all subsequent log messages.
- *
- * @param {string} name
- * @param {string|number|null} value
- */
-export function setCustomAttribute(name, value) {
-  return service.setCustomAttribute(name, value);
-}
-
-/**
- *
- * @throws {Error} Thrown if the logging service has not yet been configured via {@link configureLogging}.
- * @returns {LoggingService}
- */
-export function getLoggingService() {
-  if (!service) {
-    throw Error('You must first configure the logging service.');
-  }
-  return service;
-}
-
-/**
- * Sets the configured logging service back to null.
- *
- */
-export function resetLoggingService() {
-  service = null;
-}
-
-/**
- * @name LoggingService
- * @interface
- * @memberof module:Logging
- * @property {function} logError
- * @property {function} logInfo
- */

package/runtime/logging/types.ts

@@ -1,4 +0,0 @@
-export interface LoggingService {
-  logError: (errorStringOrObject: string | Error, customAttributes: any) => void,
-  logInfo: (infoStringOrErrorObject: string | Error, customAttributes: any) => void,
-}

package/runtime/react/AuthenticatedPageRoute.jsx

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { getLoginRedirectUrl } from '../auth';
-import PageWrap from './PageWrap';
-import { useAuthenticatedUser } from './hooks';
-
-/**
- * A react-router route that redirects to the login page when the route becomes active and the user
- * is not authenticated.  If the application has been initialized with `requireAuthenticatedUser`
- * false, an authenticatedPageRoute can be used to protect a subset of the application's routes,
- * rather than the entire application.
- *
- * It can optionally accept an override URL to redirect to instead of the login page.
- *
- * Like a `PageWrap`, also calls `sendPageEvent` when the route becomes active.
- *
- * @see PageWrap
- * @see {@link module:frontend-base~sendPageEvent}
- * @memberof module:React
- * @param {Object} props
- * @param {string} props.redirectUrl The URL anonymous users should be redirected to, rather than
- * viewing the route's contents.
- */
-export default function AuthenticatedPageRoute({ redirectUrl = null, children }) {
-  const authenticatedUser = useAuthenticatedUser();
-  if (authenticatedUser === null) {
-    const destination = redirectUrl || getLoginRedirectUrl(global.location.href);
-    global.location.assign(destination);
-
-    return null;
-  }
-
-  return (
-    <PageWrap>
-      {children}
-    </PageWrap>
-  );
-}
-
-AuthenticatedPageRoute.propTypes = {
-  redirectUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};

package/runtime/react/AuthenticatedPageRoute.test.jsx

@@ -1,135 +0,0 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
-import { render } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { sendPageEvent } from '../analytics';
-import { getAuthenticatedUser, getLoginRedirectUrl } from '../auth';
-import { getSiteConfig } from '../config';
-import SiteContext from './SiteContext';
-import AuthenticatedPageRoute from './AuthenticatedPageRoute';
-
-jest.mock('../subscriptions');
-jest.mock('../analytics');
-jest.mock('../auth');
-
-describe('AuthenticatedPageRoute', () => {
-  const { location } = global;
-
-  beforeEach(() => {
-    delete global.location;
-    global.location = {
-      assign: jest.fn(),
-    };
-    sendPageEvent.mockReset();
-    getLoginRedirectUrl.mockReset();
-    getAuthenticatedUser.mockReset();
-  });
-
-  afterEach(() => {
-    global.location = location;
-  });
-
-  it('should redirect to login if not authenticated', () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
-    const component = (
-      <SiteContext.Provider
-        value={{
-          authenticatedUser: getAuthenticatedUser(),
-          siteConfig: getSiteConfig(),
-        }}
-      >
-        <MemoryRouter initialEntries={['/authenticated']}>
-          <Routes>
-            <Route path="/" element={() => <p>Anonymous</p>} />
-            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
-          </Routes>
-        </MemoryRouter>
-      </SiteContext.Provider>
-    );
-    global.location.href = 'http://localhost/authenticated';
-    render(component);
-    expect(getLoginRedirectUrl).toHaveBeenCalledWith('http://localhost/authenticated');
-    expect(sendPageEvent).not.toHaveBeenCalled();
-    expect(global.location.assign).toHaveBeenCalledWith('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
-  });
-
-  it('should redirect to custom redirect URL if not authenticated', () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
-    const authenticatedElement = (
-      <AuthenticatedPageRoute redirectUrl="http://localhost/elsewhere">
-        <p>Authenticated</p>
-      </AuthenticatedPageRoute>
-    );
-    const component = (
-      <SiteContext.Provider
-        value={{
-          authenticatedUser: getAuthenticatedUser(),
-          siteConfig: getSiteConfig(),
-        }}
-      >
-        <MemoryRouter initialEntries={['/authenticated']}>
-          <Routes>
-            <Route path="/" component={() => <p>Anonymous</p>} />
-            <Route path="/authenticated" element={authenticatedElement} />
-          </Routes>
-        </MemoryRouter>
-      </SiteContext.Provider>
-    );
-    render(component);
-    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
-    expect(sendPageEvent).not.toHaveBeenCalled();
-    expect(global.location.assign).toHaveBeenCalledWith('http://localhost/elsewhere');
-  });
-
-  it('should not call login if not the current route', () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
-    const component = (
-      <SiteContext.Provider
-        value={{
-          authenticatedUser: getAuthenticatedUser(),
-          siteConfig: getSiteConfig(),
-        }}
-      >
-        <MemoryRouter>
-          <Routes>
-            <Route path="/" element={<p>Anonymous</p>} />
-            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
-          </Routes>
-        </MemoryRouter>
-      </SiteContext.Provider>
-    );
-    const wrapper = render(component);
-
-    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
-    expect(global.location.assign).not.toHaveBeenCalled();
-    expect(sendPageEvent).not.toHaveBeenCalled();
-    const element = wrapper.container.querySelector('p');
-    expect(element.textContent).toEqual('Anonymous'); // This is just a sanity check on our setup.
-  });
-
-  it('should render authenticated route if authenticated', () => {
-    const component = (
-      <SiteContext.Provider
-        value={{
-          authenticatedUser: { userId: 12345, username: 'edx' },
-          siteConfig: getSiteConfig(),
-        }}
-      >
-        <MemoryRouter initialEntries={['/authenticated']}>
-          <Routes>
-            <Route path="/" element={<p>Anonymous</p>} />
-            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
-          </Routes>
-        </MemoryRouter>
-      </SiteContext.Provider>
-    );
-    const wrapper = render(component);
-    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
-    expect(global.location.assign).not.toHaveBeenCalled();
-    expect(sendPageEvent).toHaveBeenCalled();
-    const element = wrapper.container.querySelector('p');
-    expect(element.textContent).toEqual('Authenticated');
-  });
-});

package/runtime/react/CombinedAppProvider.tsx

@@ -1,46 +0,0 @@
-import { ReactNode } from 'react';
-import { App, AppProvider } from '../../types';
-import { getSiteConfig } from '../config';
-
-const combineProviders = (providers: AppProvider[]): AppProvider => {
-  return providers.reduce(
-    (AccumulatedProviders, CurrentProvider) => {
-      // eslint-disable-next-line react/prop-types
-      const CombinedProvider: AppProvider = ({ children }) => (
-        <AccumulatedProviders>
-          <CurrentProvider>{children}</CurrentProvider>
-        </AccumulatedProviders>
-      );
-      return CombinedProvider;
-    },
-    ({ children }) => <>{children}</>,
-  );
-};
-
-interface CombinedAppProviderProps {
-  children: ReactNode,
-}
-
-export default function CombinedAppProvider({ children }: CombinedAppProviderProps) {
-  const { apps } = getSiteConfig();
-
-  let providers: AppProvider[] = [];
-
-  if (apps) {
-    apps.forEach(
-      (app: App) => {
-        if (Array.isArray(app.providers)) {
-          providers = providers.concat(app.providers);
-        }
-      }
-    );
-  }
-
-  const CombinedProviders = combineProviders(providers);
-
-  return (
-    <CombinedProviders>
-      {children}
-    </CombinedProviders>
-  );
-};

package/runtime/react/CurrentAppContext.tsx

@@ -1,25 +0,0 @@
-import { createContext } from 'react';
-import { AppConfig } from '../../types';
-
-/**
- * `CurrentAppContext` provides data from `App` in a way that React components can readily consume.
- * if it's mutable data. `CurrentAppContext` contains the following data structure:
- *
- * ```
- * {
- *   config: <THE App.config OBJECT>
- * }
- * ```
- * If the `App.config` data changes, `CurrentAppContext` will be updated
- * accordingly and pass those changes onto React components using the context.
- *
- * `CurrentAppContext` is used in a React application like any other `[React Context](https://reactjs.org/docs/context.html)
- * @memberof module:React
- */
-const CurrentAppContext = createContext<{
-  appConfig: AppConfig,
-}>({
-  appConfig: {},
-});
-
-export default CurrentAppContext;

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;