@openedx/frontend-base 1.0.0-alpha.0

package/runtime/slots/widget/utils.tsx

@@ -0,0 +1,201 @@
+import { ReactNode } from 'react';
+import { SlotOperation } from '../types';
+import { isSlotOperationConditionSatisfied } from '../utils';
+import { IFrameWidget } from './iframe';
+import { IdentifiedWidget, WidgetAbsoluteOperation, WidgetAppendOperation, WidgetComponentProps, WidgetElementProps, WidgetIdentityProps, WidgetIFrameProps, WidgetInsertAfterOperation, WidgetInsertBeforeOperation, WidgetOperation, WidgetOperationTypes, WidgetOptionsOperation, WidgetPrependOperation, WidgetRemoveOperation, WidgetRendererOperation, WidgetRendererProps, WidgetReplaceOperation } from './types';
+import WidgetProvider from './WidgetProvider';
+
+export function isWidgetOperation(operation: SlotOperation): operation is WidgetOperation {
+  return Object.values(WidgetOperationTypes).includes(operation.op as WidgetOperationTypes);
+}
+
+export function isWidgetAbsoluteOperation(operation: WidgetOperation): operation is WidgetAbsoluteOperation {
+  return operation.op === WidgetOperationTypes.APPEND || operation.op === WidgetOperationTypes.PREPEND;
+}
+
+export function isWidgetRelativeOperation(operation: WidgetOperation): operation is (WidgetInsertAfterOperation | WidgetInsertBeforeOperation) {
+  return operation.op === WidgetOperationTypes.INSERT_AFTER || operation.op === WidgetOperationTypes.INSERT_BEFORE;
+}
+
+export function isWidgetAppendOperation(operation: SlotOperation): operation is WidgetAppendOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.APPEND;
+}
+
+export function isWidgetInsertAfterOperation(operation: SlotOperation): operation is WidgetInsertAfterOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_AFTER;
+}
+
+export function isWidgetInsertBeforeOperation(operation: SlotOperation): operation is WidgetInsertBeforeOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_BEFORE;
+}
+
+export function isWidgetPrependOperation(operation: SlotOperation): operation is WidgetPrependOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.PREPEND;
+}
+
+export function isWidgetRemoveOperation(operation: SlotOperation): operation is WidgetRemoveOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REMOVE;
+}
+
+export function isWidgetReplaceOperation(operation: SlotOperation): operation is WidgetReplaceOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REPLACE;
+}
+
+export function isWidgetOptionsOperation(operation: SlotOperation): operation is WidgetOptionsOperation {
+  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.OPTIONS;
+}
+
+export function isWidgetRendererOperation(operation: SlotOperation): operation is WidgetRendererOperation {
+  return isWidgetOperation(operation) && hasWidgetRendererProps(operation);
+}
+
+export function isWidgetIdentityOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps) {
+  return isWidgetOperation(operation) && hasWidgetIdentityProps(operation);
+}
+
+export function isWidgetIdentityRoleOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {
+  return isWidgetIdentityOperation(operation) && hasWidgetIdentityRoleProps(operation);
+}
+
+export function createWidgetAppendOperation(id: string, slotId: string, element: ReactNode) {
+  let operation: WidgetOperation | undefined = undefined;
+  if (element) {
+    operation = {
+      slotId,
+      id,
+      op: WidgetOperationTypes.APPEND,
+      element
+    };
+  }
+
+  return operation;
+}
+
+// Widget Operation props helpers
+
+function hasWidgetComponentProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetComponentProps) {
+  return isWidgetOperation(operation) && 'component' in operation;
+}
+
+function hasWidgetElementProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetElementProps) {
+  return isWidgetOperation(operation) && 'element' in operation;
+}
+
+function hasWidgetIFrameProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIFrameProps) {
+  return isWidgetOperation(operation) && 'url' in operation && 'title' in operation;
+}
+
+function hasWidgetRendererProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetRendererProps) {
+  return hasWidgetComponentProps(operation) || hasWidgetElementProps(operation) || hasWidgetIFrameProps(operation);
+}
+
+function hasWidgetIdentityProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps) {
+  return isWidgetOperation(operation) && 'id' in operation;
+}
+
+function hasWidgetIdentityRoleProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {
+  return hasWidgetIdentityProps(operation) && 'role' in operation;
+}
+
+/**
+ * An 'identified' widget just means a data structure with an ID and a ReactNode.
+ */
+function createIdentifiedWidget(operation: WidgetRendererOperation, componentProps?: Record<string, unknown>) {
+  let widget: ReactNode = null;
+  const { id } = operation;
+  if (hasWidgetComponentProps(operation)) {
+    widget = (
+      <operation.component {...componentProps} />
+    );
+  } else if (hasWidgetElementProps(operation)) {
+    widget = operation.element;
+  } else if (hasWidgetIFrameProps(operation)) {
+    widget = (
+      <IFrameWidget url={operation.url} title={operation.title} />
+    );
+  }
+
+  return {
+    id,
+    node: (
+      <WidgetProvider key={id} slotId={operation.slotId} widgetId={operation.id} role={operation.role}>
+        {widget}
+      </WidgetProvider>
+    ),
+  };
+}
+
+function findRelatedWidgetIndex(id: string, widgets: IdentifiedWidget[]) {
+  for (const candidateRelatedWidget of widgets) {
+    if (candidateRelatedWidget.id === id) {
+      return widgets.indexOf(candidateRelatedWidget);
+    }
+  }
+  return null;
+}
+
+function appendWidget(operation: WidgetAppendOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {
+  const widget = createIdentifiedWidget(operation, componentProps);
+  widgets.push(widget);
+}
+
+function prependWidget(operation: WidgetPrependOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {
+  const widget = createIdentifiedWidget(operation, componentProps);
+  widgets.unshift(widget);
+}
+
+function insertAfterWidget(operation: WidgetInsertAfterOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {
+  const widget = createIdentifiedWidget(operation, componentProps);
+  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);
+  if (relatedIndex !== null) {
+    widgets.splice(relatedIndex + 1, 0, widget);
+  }
+}
+
+function insertBeforeWidget(operation: WidgetInsertBeforeOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {
+  const widget = createIdentifiedWidget(operation, componentProps);
+  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);
+  if (relatedIndex !== null) {
+    widgets.splice(relatedIndex, 0, widget);
+  }
+}
+
+function replaceWidget(operation: WidgetReplaceOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {
+  const widget = createIdentifiedWidget(operation, componentProps);
+  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);
+  if (relatedIndex !== null) {
+    widgets.splice(relatedIndex, 1, widget);
+  }
+}
+
+function removeWidget(operation: WidgetRemoveOperation, widgets: IdentifiedWidget[]) {
+  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);
+  if (relatedIndex !== null) {
+    widgets.splice(relatedIndex, 1);
+  }
+}
+
+export function createWidgets(operations: WidgetOperation[], componentProps?: Record<string, unknown>) {
+  const identifiedWidgets: IdentifiedWidget[] = [];
+
+  for (const operation of operations) {
+    if (isSlotOperationConditionSatisfied(operation)) {
+      if (isWidgetAppendOperation(operation)) {
+        appendWidget(operation, identifiedWidgets, componentProps);
+      } else if (isWidgetPrependOperation(operation)) {
+        prependWidget(operation, identifiedWidgets, componentProps);
+      } else if (isWidgetInsertAfterOperation(operation)) {
+        insertAfterWidget(operation, identifiedWidgets, componentProps);
+      } else if (isWidgetInsertBeforeOperation(operation)) {
+        insertBeforeWidget(operation, identifiedWidgets, componentProps);
+      } else if (isWidgetReplaceOperation(operation)) {
+        replaceWidget(operation, identifiedWidgets, componentProps);
+      } else if (isWidgetRemoveOperation(operation)) {
+        removeWidget(operation, identifiedWidgets);
+      }
+    }
+  }
+
+  // Remove the 'id' metadata and return just the nodes.
+  return identifiedWidgets.map(widget => widget.node);
+}

package/runtime/subscriptions.ts

@@ -0,0 +1,60 @@
+/**
+ * #### Import members from **@openedx/frontend-base**
+ *
+ * The PubSub module is a thin wrapper around the base functionality of
+ * [PubSubJS](https://github.com/mroderick/PubSubJS).  For the sake of simplicity and not relying
+ * too heavily on implementation-specific features, it maintains a fairly simple API (subscribe,
+ * unsubscribe, and publish).
+ *
+ * Publish/Subscribe events should be used mindfully, especially in relation to application UI
+ * frameworks like React.  Given React's unidirectional data flow and prop/state management
+ * capabilities, using a pub/sub mechanism is at odds with that framework's best practices.
+ *
+ * That said, we use pub/sub in our application initialization sequence to allow applications to
+ * hook into the initialization lifecycle, and we also use them to publish when the application
+ * state has changed, i.e., when the config document or user's authentication state have changed.
+ *
+ * @module PubSub
+ */
+
+// export const {
+//   subscribe,
+//   unsubscribe,
+//   publish,
+// } = PubSub;
+
+type CallbackFunction = (topic: string, data?: any) => void;
+
+let subscriptions: Record<string, CallbackFunction[]> = {};
+
+export function subscribe(topic: string, callback) {
+  if (subscriptions[topic] === undefined) {
+    subscriptions[topic] = [];
+  }
+  subscriptions[topic].push(callback);
+}
+
+export function publish(topic: string, data?: any) {
+  if (subscriptions[topic] === undefined) {
+    subscriptions[topic] = [];
+  }
+  subscriptions[topic].forEach(callback => {
+    if (data) {
+      callback(topic, data);
+    } else {
+      callback(topic);
+    }
+  });
+}
+
+export function unsubscribe(topic: string, callback: CallbackFunction) {
+  if (subscriptions[topic] === undefined) {
+    subscriptions[topic] = [];
+  }
+
+  subscriptions[topic] = subscriptions[topic].filter((value) => value !== callback);
+}
+
+export function clearAllSubscriptions() {
+  subscriptions = {};
+}

package/runtime/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * #### Import members from **@openedx/frontend-base** Testing
+ * The testing module provides helpers for writing tests in Jest.
+ *
+ * @module Testing
+ */
+
+export { default as initializeMockApp } from './initializeMockApp';
+export { default as mockMessages } from './mockMessages';

package/runtime/testing/initializeMockApp.ts

@@ -0,0 +1,81 @@
+import siteConfig from 'site.config';
+
+import { configureAnalytics, MockAnalyticsService } from '../analytics';
+import { configureAuth, MockAuthService, setAuthenticatedUser } from '../auth';
+import { getSiteConfig, mergeSiteConfig } from '../config';
+import { configureI18n } from '../i18n';
+import { configureLogging, MockLoggingService } from '../logging';
+import mockMessages from './mockMessages';
+
+/**
+ * Initializes a mock application for component testing. The mock application includes
+ * mock analytics, auth, and logging services, and the real i18n service.
+ *
+ * See MockAnalyticsService, MockAuthService, and MockLoggingService for mock implementation
+ * details. For the most part, the analytics and logging services just implement their functions
+ * with jest.fn() and do nothing else, whereas the MockAuthService actually has some behavior
+ * implemented, it just doesn't make any HTTP calls.
+ *
+ * Note that this mock application is not sufficient for testing the full application lifecycle or
+ * initialization callbacks/custom handlers as described in the 'initialize' function's
+ * documentation. It exists merely to set up the mock services that components themselves tend to
+ * interact with most often. It could be extended to allow for setting up custom handlers fairly
+ * easily, as this functionality would be more-or-less identical to what the real initialize
+ * function does.
+ *
+ * Example:
+ *
+ * ```
+ * import { initializeMockApp, logInfo } from '@openedx/frontend-base';
+ *
+ * describe('initializeMockApp', () => {
+ *   it('mocks things correctly', () => {
+ *     const { loggingService } = initializeMockApp();
+ *     logInfo('test', {});
+ *     expect(loggingService.logInfo).toHaveBeenCalledWith('test', {});
+ *   });
+ * });
+ * ```
+ *
+ * @param {Object} [options]
+ * @param {*} [options.messages] A i18n-compatible messages object, or an array of such objects. If
+ * an array is provided, duplicate keys are resolved with the last-one-in winning.
+ * @param {UserData|null} [options.authenticatedUser] A UserData object representing the
+ * authenticated user. This is passed directly to MockAuthService.
+ * @memberof module:Testing
+ */
+export default function initializeMockApp({
+  messages = mockMessages,
+  authenticatedUser = null,
+} = {}) {
+  const config = siteConfig;
+  mergeSiteConfig(config);
+
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getSiteConfig(),
+  });
+
+  const authService = configureAuth(MockAuthService, {
+    config: getSiteConfig(),
+    loggingService,
+  });
+
+  setAuthenticatedUser(authenticatedUser);
+
+  const analyticsService = configureAnalytics(MockAnalyticsService, {
+    config: getSiteConfig(),
+    httpClient: authService.getAuthenticatedHttpClient(),
+    loggingService,
+  });
+
+  // The i18n service configureI18n function has no return value, since there isn't a service class.
+  configureI18n({
+    messages,
+  });
+
+  return {
+    analyticsService,
+    authService,
+    loggingService,
+  };
+}

package/runtime/testing/mockMessages.ts

@@ -0,0 +1,23 @@
+/**
+ * An empty messages object suitable for fulfilling the i18n service's contract.
+ * @memberof module:Testing
+ */
+const messages = {
+  ar: {},
+  'es-419': {},
+  fa: {},
+  'fa-ir': {},
+  fr: {},
+  'zh-cn': {},
+  ca: {},
+  he: {},
+  id: {},
+  'ko-kr': {},
+  pl: {},
+  'pt-br': {},
+  ru: {},
+  th: {},
+  uk: {},
+};
+
+export default messages;

package/runtime/utils.js

@@ -0,0 +1,178 @@
+/**
+ * #### Import members from **@openedx/frontend-base**
+ *
+ * @module Utilities
+ */
+import camelCase from 'lodash.camelcase';
+import snakeCase from 'lodash.snakecase';
+
+/**
+ * This is the underlying function used by camelCaseObject, snakeCaseObject, and convertKeyNames
+ * above.
+ *
+ * Given an object (or array) and a modification function, will perform the function on each key it
+ * encounters on the object and its tree of children.
+ *
+ * The modification function must take a string as an argument and returns a string.
+ *
+ * Example:
+ *
+ * ```
+ * (key) => {
+ *   if (key === 'edX') {
+ *     return 'Open edX';
+ *   }
+ *   return key;
+ * }
+ * ```
+ *
+ * This function will turn any key that matches 'edX' into 'Open edX'.  All other keys will be
+ * passed through unmodified.
+ *
+ * Can accept arrays as well as objects, and will perform its conversion on any objects it finds in
+ * the array.
+ *
+ * @param {Object} object
+ * @param {function} modify
+ * @returns {Object}
+ */
+export function modifyObjectKeys(object, modify) {
+  // If the passed in object is not an Object, return it.
+  if (
+    object === undefined
+    || object === null
+    || (typeof object !== 'object' && !Array.isArray(object))
+  ) {
+    return object;
+  }
+
+  if (Array.isArray(object)) {
+    return object.map(value => modifyObjectKeys(value, modify));
+  }
+
+  // Otherwise, process all its keys.
+  const result = {};
+  Object.entries(object).forEach(([key, value]) => {
+    result[modify(key)] = modifyObjectKeys(value, modify);
+  });
+  return result;
+}
+
+/**
+ * Performs a deep conversion to camelCase on all keys in the provided object and its tree of
+ * children.  Uses [lodash.camelcase](https://lodash.com/docs/4.17.15#camelCase) on each key.  This
+ * is commonly used to convert snake_case keys in models from a backend server into camelCase keys
+ * for use in the JavaScript client.
+ *
+ * Can accept arrays as well as objects, and will perform its conversion on any objects it finds in
+ * the array.
+ *
+ * @param {Array|Object} object
+ * @returns {Array|Object}
+ */
+export function camelCaseObject(object) {
+  return modifyObjectKeys(object, camelCase);
+}
+
+/**
+ * Performs a deep conversion to snake_case on all keys in the provided object and its tree of
+ * children.  Uses [lodash.snakecase](https://lodash.com/docs/4.17.15#snakeCase) on each key.  This
+ * is commonly used to convert camelCase keys from the JavaScript app into snake_case keys expected
+ * by backend servers.
+ *
+ * Can accept arrays as well as objects, and will perform its conversion on any objects it finds in
+ * the array.
+ *
+ * @param {Array|Object} object
+ * @returns {Array|Object}
+ */
+export function snakeCaseObject(object) {
+  return modifyObjectKeys(object, snakeCase);
+}
+
+/**
+ * Given a map of key-value pairs, performs a deep conversion key names in the specified object
+ * _from_ the key _to_ the value.  This is useful for updating names in an API request to the names
+ * used throughout a client application if they happen to differ.  It can also be used in the
+ * reverse - formatting names from the client application to names expected by an API.
+ *
+ * ```
+ * import { convertKeyNames } from '@openedx/frontend-base';
+ *
+ * // This object can be of any shape or depth with subobjects/arrays.
+ * const myObject = {
+ *   myKey: 'my value',
+ * }
+ *
+ * const result = convertKeyNames(myObject, { myKey: 'their_key' });
+ *
+ * console.log(result) // { their_key: 'my value' }
+ * ```
+ *
+ * Can accept arrays as well as objects, and will perform its conversion on any objects it finds in
+ * the array.
+ *
+ * @param {Array|Object} object
+ * @param {Object} nameMap
+ * @returns {Array|Object}
+ */
+export function convertKeyNames(object, nameMap) {
+  const transformer = key => (nameMap[key] === undefined ? key : nameMap[key]);
+
+  return modifyObjectKeys(object, transformer);
+}
+
+/**
+ * *Deprecated*: A method which converts the supplied query string into an object of
+ * key-value pairs and returns it.  Defaults to the current query string - should perform like
+ * [window.searchParams](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams)
+ *
+ * @deprecated
+ * @param {string} [search=global.location.search]
+ * @returns {Object}
+ */
+export function getQueryParameters(search = global.location.search) {
+  const keyValueFragments = search
+    .slice(search.indexOf('?') + 1)
+    .split('&')
+    .filter(hash => hash !== '');
+
+  return keyValueFragments.reduce((params, keyValueFragment) => {
+    const split = keyValueFragment.indexOf('=');
+    const key = keyValueFragment.slice(0, split);
+    const value = keyValueFragment.slice(split + 1);
+    return Object.assign(params, { [key]: decodeURIComponent(value) });
+  }, {});
+}
+
+export function isValidVariableName(name) {
+  // Check if the name is a string and not empty
+  if (typeof name !== 'string' || name === '') {
+    return false;
+  }
+
+  // Check if the first character is a letter, underscore, or dollar sign
+  if (!/^[a-zA-Z_$]/.test(name)) {
+    return false;
+  }
+
+  // Check if the name contains only letters, numbers, underscores, or dollar signs
+  if (!/^[a-zA-Z0-9_$]+$/.test(name)) {
+    return false;
+  }
+
+  // Check if the name is a reserved keyword
+  const reservedKeywords = [
+    'break', 'case', 'catch', 'class', 'const', 'continue',
+    'debugger', 'default', 'delete', 'do', 'else', 'enum',
+    'export', 'extends', 'false', 'finally', 'for', 'function',
+    'if', 'import', 'in', 'instanceof', 'new', 'null', 'return',
+    'super', 'switch', 'this', 'throw', 'true', 'try',
+    'typeof', 'var', 'void', 'while', 'with', 'yield'
+  ];
+  if (reservedKeywords.includes(name)) {
+    return false;
+  }
+
+  return true;
+}

package/shell/DefaultLayout.tsx

@@ -0,0 +1,18 @@
+import { Slot } from '../runtime';
+import DefaultMain from './DefaultMain';
+
+export default function DefaultLayout() {
+  return (
+    <div className="d-flex flex-column min-vh-100">
+      <div className="flex-grow-0 flex-shrink-0">
+        <Slot id="org.openedx.frontend.slot.header.main.v1" />
+      </div>
+      <div id="main-content" className="flex-grow-1">
+        <Slot id="org.openedx.frontend.slot.content.main.v1" layout={DefaultMain} />
+      </div>
+      <div className="flex-grow-0 flex-shrink-0">
+        <Slot id="org.openedx.frontend.slot.footer.main.v1" />
+      </div>
+    </div>
+  );
+}

package/shell/DefaultMain.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from 'react-router';
+
+export default function DefaultMain() {
+  return (
+    <Outlet />
+  );
+}

package/shell/Logo.tsx

@@ -0,0 +1,28 @@
+import { IntlProvider } from 'react-intl';
+import { Hyperlink, Image } from '@openedx/paragon';
+
+interface LogoProps {
+  imageUrl?: string,
+  destinationUrl?: string,
+}
+
+export default function Logo({
+  imageUrl = 'https://edx-cdn.org/v3/default/logo.svg',
+  destinationUrl
+}: LogoProps) {
+  const image = (
+    <Image src={imageUrl} style={{ maxHeight: '2rem' }} />
+  );
+
+  if (destinationUrl === undefined) {
+    return image;
+  }
+
+  return (
+    <IntlProvider locale="en">
+      <Hyperlink destination={destinationUrl} className="p-0">
+        {image}
+      </Hyperlink>
+    </IntlProvider>
+  );
+}

package/shell/Shell.messages.ts

@@ -0,0 +1,61 @@
+import { defineMessages } from '../runtime';
+
+const messages = defineMessages({
+  'header.user.menu.dashboard': {
+    id: 'header.user.menu.dashboard',
+    defaultMessage: 'Dashboard',
+    description: 'Link to the user dashboard',
+  },
+  'header.user.menu.logout': {
+    id: 'header.user.menu.logout',
+    defaultMessage: 'Logout',
+    description: 'Logout link',
+  },
+  'header.user.menu.profile': {
+    id: 'header.user.menu.profile',
+    defaultMessage: 'Profile',
+    description: 'Link to the user profile',
+  },
+  'header.user.menu.account': {
+    id: 'header.user.menu.account',
+    defaultMessage: 'Account',
+    description: 'Link to account settings',
+  },
+  'header.user.menu.order.history': {
+    id: 'header.user.menu.order.history',
+    defaultMessage: 'Order History',
+    description: 'Link to order history',
+  },
+  'header.user.menu.login': {
+    id: 'header.user.menu.login',
+    defaultMessage: 'Login',
+    description: 'Login link',
+  },
+  'header.user.menu.register': {
+    id: 'header.user.menu.register',
+    defaultMessage: 'Sign Up',
+    description: 'Link to registration',
+  },
+  skipNavLink: {
+    id: 'header.navigation.skipNavLink',
+    defaultMessage: 'Skip to main content.',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
+  footerPoweredBy: {
+    id: 'footer.powered.by',
+    defaultMessage: 'Powered by Open edX',
+    description: 'Alt text for the \'Powered by Open edX\' logo displayed in the footer.',
+  },
+  footerTrademarkNotice: {
+    id: 'footer.trademark.notice',
+    defaultMessage: 'edX and Open edX are registered trademarks of edX LLC.',
+    description: 'A legal notice that "edX LLC" owns the trademarks on "edX" and "Open edX".  Please do not translate these three proper names.'
+  },
+  'footer.revealLinks.more': {
+    id: 'footer.revealLinks.more',
+    defaultMessage: 'More',
+    description: 'Text for a button that reveals more links and content in the footer.',
+  }
+});
+
+export default messages;