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

package/runtime/slots/widget/utils.tsx

@@ -1,201 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/**
- * #### 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

@@ -1,9 +0,0 @@
-/**
- * #### 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.test.ts

@@ -1,66 +0,0 @@
-import {
-  getAnalyticsService,
-  MockAnalyticsService,
-  sendTrackEvent,
-} from '../analytics';
-import {
-  ensureAuthenticatedUser,
-  getAuthService,
-  getLoginRedirectUrl,
-  MockAuthService,
-  setAuthenticatedUser,
-} from '../auth';
-import {
-  getLoggingService,
-  logInfo,
-  MockLoggingService,
-} from '../logging';
-import initializeMockApp from './initializeMockApp';
-
-describe('initializeMockApp', () => {
-  it('should create mock analytics, auth, and logging services, and a real i18n service', () => {
-    const {
-      analyticsService,
-      authService,
-      loggingService,
-    } = initializeMockApp();
-
-    expect(getAnalyticsService()).toBeInstanceOf(MockAnalyticsService);
-    expect(getAuthService()).toBeInstanceOf(MockAuthService);
-    expect(getLoggingService()).toBeInstanceOf(MockLoggingService);
-
-    const customAttributes = { custom: 'attribute' };
-
-    // Next, test a representative sample of functionality to prove mocking is working the way we hope.
-
-    // Analytics
-    sendTrackEvent('testEvent', customAttributes);
-    expect(analyticsService.sendTrackEvent).toHaveBeenCalledWith('testEvent', customAttributes);
-    // The mock analytics service calls checkIdentifyCalled when sendTrackEvent is called.  Prove
-    // the jest.fn() works.
-    expect(analyticsService.checkIdentifyCalled).toHaveBeenCalledTimes(1);
-
-    // Auth
-    getLoginRedirectUrl('http://localhost/redirect/url');
-    setAuthenticatedUser({
-      userId: 'abc123',
-      username: 'Mock User',
-      roles: [],
-      administrator: false,
-      name: 'mock tester',
-    });
-    ensureAuthenticatedUser();
-
-    expect(authService.getLoginRedirectUrl).toHaveBeenCalledWith('http://localhost/redirect/url');
-    expect(authService.ensureAuthenticatedUser).toHaveBeenCalled();
-    // ensureAuthenticatedUser calls a few other things under the covers.  Prove our mocking is
-    // working as expected across multiple levels.
-    expect(authService.fetchAuthenticatedUser).toHaveBeenCalled();
-    expect(authService.getAuthenticatedUser).toHaveBeenCalled();
-    expect(authService.redirectToLogin).not.toHaveBeenCalled();
-
-    // Logging
-    logInfo('logging info', customAttributes);
-    expect(loggingService.logInfo).toHaveBeenCalledWith('logging info', customAttributes);
-  });
-});

package/runtime/testing/initializeMockApp.ts

@@ -1,86 +0,0 @@
-import siteConfig from 'site.config';
-
-import { LocalizedMessages, User } from '../../types';
-
-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,
-}: {
-  messages?: LocalizedMessages,
-  authenticatedUser?: User | 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

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,178 +0,0 @@
-/**
- * #### 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;
-}