@openedx/frontend-base 1.0.0-alpha.12 → 1.0.0-alpha.13

package/runtime/slots/widget/iframe/IFrameContentWrapper.tsx

@@ -1,84 +0,0 @@
-import {
-  FunctionComponent,
-  ReactNode,
-  useEffect, useMemo, useState,
-} from 'react';
-
-import { useIntl } from '../../../i18n';
-import { ErrorBoundary } from '../../../react';
-import { IFRAME_RESIZE } from './constants';
-import {
-  dispatchMountedEvent,
-  dispatchReadyEvent,
-  dispatchUnmountedEvent,
-  useHostEvent
-} from './hooks';
-import messages from './IFrameContentWrapper.messages';
-
-const ErrorFallbackDefault = () => {
-  const { formatMessage } = useIntl();
-  return (
-    <div>
-      <h2>
-        {formatMessage(messages.unexpectedError)}
-      </h2>
-    </div>
-  );
-};
-
-interface IFrameContentWrapperProps {
-  children: ReactNode,
-  className?: string,
-  style?: Record<string, string>,
-  ready?: boolean,
-  errorFallbackComponent?: FunctionComponent,
-}
-
-export default function IFrameContentWrapper({
-  children, className, style = {}, ready = true, errorFallbackComponent,
-}: IFrameContentWrapperProps) {
-  const [dimensions, setDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  const finalStyle = useMemo(() => ({
-    ...dimensions,
-    ...style,
-  }), [dimensions, style]);
-
-  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
-
-  const ErrorFallback = errorFallbackComponent ?? ErrorFallbackDefault;
-
-  useHostEvent(IFRAME_RESIZE, ({ payload }) => {
-    setDimensions({
-      width: payload.width,
-      height: payload.height,
-    });
-  });
-
-  useEffect(() => {
-    dispatchMountedEvent();
-
-    return () => {
-      dispatchUnmountedEvent();
-    };
-  }, []);
-
-  useEffect(() => {
-    // Ready defaults to true, but can be used to defer rendering the Plugin until certain processes
-    // have occurred or conditions have been met
-    if (ready) {
-      dispatchReadyEvent();
-    }
-  }, [ready]);
-
-  return (
-    <div className={className} style={finalStyle}>
-      <ErrorBoundary fallbackComponent={<ErrorFallback />}>
-        {children}
-      </ErrorBoundary>
-    </div>
-  );
-};

package/runtime/slots/widget/iframe/IFrameWidget.tsx

@@ -1,59 +0,0 @@
-import { Spinner } from '@openedx/paragon';
-import { useEffect, useState } from 'react';
-
-import classNames from 'classnames';
-import { dispatchPluginEvent, useElementSize, usePluginEvent } from './hooks';
-import { IFRAME_FEATURE_POLICY, IFRAME_MOUNTED, IFRAME_READY, IFRAME_RESIZE } from './constants';
-
-interface IFrameWidgetProps {
-  url: string,
-  title: string,
-}
-
-export default function IFrameWidget({ url, title }: IFrameWidgetProps) {
-  const [mounted, setMounted] = useState(false);
-  const [ready, setReady] = useState(false);
-
-  const { ref: iframeRef, element: iframeElement, width, height } = useElementSize();
-
-  useEffect(() => {
-    if (mounted) {
-      dispatchPluginEvent(iframeElement as HTMLIFrameElement, {
-        type: IFRAME_RESIZE,
-        payload: {
-          width,
-          height,
-        },
-      }, url);
-    }
-  }, [iframeElement, mounted, width, height, url]);
-
-  usePluginEvent(iframeElement, IFRAME_MOUNTED, () => {
-    setMounted(true);
-  });
-
-  usePluginEvent(iframeElement, IFRAME_READY, () => {
-    setReady(true);
-  });
-
-  const fallback = (
-    <Spinner animation="border" variant="light" screenReaderText="Loading" />
-  );
-
-  return (
-    <>
-      <iframe
-        ref={iframeRef}
-        title={title}
-        src={url}
-        allow={IFRAME_FEATURE_POLICY}
-        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
-        className={classNames(
-          'border border-0 w-100',
-          { 'd-none': !ready },
-        )}
-      />
-      {!ready && fallback}
-    </>
-  );
-}

package/runtime/slots/widget/iframe/hooks.ts

@@ -1,179 +0,0 @@
-/**
- * Hooks file for functions that handle the communication between a Plugin and its Host
- */
-
-import {
-  LegacyRef,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
-
-import { IFRAME_MOUNTED, IFRAME_READY, IFRAME_UNMOUNTED } from './constants';
-import { MessageEventCallback } from './types';
-
-/* Listening for events */
-
-/**
- * Dynamically add an event listener to the provided source window.
- * The source window can be the global parent (ie. the "window" object in the browser)
- * or it can be the content window of an individual element (ie. iFrame plugin container)
- */
-export function useMessageEvent(srcWindow: Window | null, type: string, callback: MessageEventCallback) {
-  // useLayoutEffect is called before the browser repaints the screen
-  useLayoutEffect(() => {
-    // Create a listener callback function
-    const listener = (event: MessageEvent<{ type: string, payload: any }>) => {
-      // Filter messages to those from our source window.
-      // NOTE: the "srcWindow" is determined by the below useHostEvent and usePluginEvent functions
-      if (event.source === srcWindow) {
-        // Fire callback if the type from the listened event matches the type from the message event
-        if (event.data.type === type) {
-          callback({ type, payload: event.data.payload });
-        }
-      }
-    };
-    // Add the listener to the global object if the srcWindow is not null
-    if (srcWindow !== null) {
-      global.addEventListener('message', listener);
-    }
-    // useEffect cleanup
-    return () => {
-      global.removeEventListener('message', listener);
-    };
-  }, [srcWindow, type, callback]);
-}
-
-/**
- * Called by the Plugin component to use events that were listened to (ie. PLUGIN_RESIZE)
- */
-export function useHostEvent(type: string, callback: MessageEventCallback) {
-  useMessageEvent(global.parent, type, callback);
-}
-
-/**
- * Used to listen for events from a wrapped Plugin element (eg. PluginContainerIframe)
- *
- * @param element - Plugin element (eg. <iframe>)
- * @param type - Event type (eg. PLUGIN_RESIZE)
- * @param callback - Function to call when the event is triggered
- */
-export function usePluginEvent(element: HTMLIFrameElement | undefined, type: string, callback: MessageEventCallback) {
-  const contentWindow = element ? element.contentWindow : null;
-  useMessageEvent(contentWindow, type, callback);
-}
-
-/** Dispatching events */
-
-/**
- * Base dispatch function called by dispatchHostEvent and dispatchPluginEvent.
- * Uses the `postMessage` method to enable cross-origin communication between Window objects
- *
- * @param targetWindow - Window that the message event is being dispatched to
- * @param message - Data object for the message
- * @param targetOrigin - URL for the window that the message event is being dispatched from
- */
-export function dispatchMessageEvent(targetWindow: Window | null, message: any, targetOrigin: string) {
-  /** Checking targetOrigin falsiness here since '', null or undefined would all be
-   * reasons not to try to post a message to the origin.
-   */
-  if (targetWindow && targetOrigin) {
-    targetWindow.postMessage(message, targetOrigin);
-  }
-}
-
-/**
- * Used to dispatch events for a Plugin
- *
- * @param element - Plugin element (eg. <iframe>)
- * @param message - Data object for the message
- * @param targetOrigin - URL for the window that the message event is being dispatched from
- */
-export function dispatchPluginEvent(element: HTMLIFrameElement, message: any, targetOrigin: string) {
-  dispatchMessageEvent(element.contentWindow, message, targetOrigin);
-}
-
-/**
- * Used to dispatch events for the Host
- *
- * @param message - Data object for the message
- */
-export function dispatchHostEvent(message: any) {
-  dispatchMessageEvent(global.parent, message, global.document.referrer);
-}
-
-// Called inside Plugin when 'ready' prop is true
-export function dispatchReadyEvent() {
-  dispatchHostEvent({ type: IFRAME_READY });
-}
-
-// Below mounted events are called in a useEffect inside Plugin with [] dependencies — https://react.dev/learn/synchronizing-with-effects
-export function dispatchMountedEvent() {
-  dispatchHostEvent({ type: IFRAME_MOUNTED });
-}
-
-export function dispatchUnmountedEvent() {
-  dispatchHostEvent({ type: IFRAME_UNMOUNTED });
-}
-
-/**
- * Used to determine the size of an element as it is being resized in the browser.
- * ResizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is used to maintain a reference to the element's content/border box.
- *
- * @returns Memoized value that contains a reference to the Plugin element (eg. iframe)
- */
-export function useElementSize() {
-  // Holds a reference to the ResizeObserver
-  const observerRef = useRef<ResizeObserver | null>(null);
-
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [element, setElement] = useState<HTMLIFrameElement | undefined>();
-  // Sets a reference to the Plugin element when passed to the Plugin element as a "ref" attribute (eg. <iframe>)
-  const measuredRef: LegacyRef<HTMLIFrameElement> = useCallback(_element => {
-    setElement(_element);
-  }, []);
-
-  useEffect(() => {
-    // Create a new ResizeObserver
-    observerRef.current = new ResizeObserver(() => {
-      if (element) {
-        // Set dimensions and any offset
-        setDimensions({
-          width: element.clientWidth,
-          height: element.clientHeight,
-        });
-        setOffset({
-          x: element.offsetLeft,
-          y: element.offsetTop,
-        });
-      }
-    });
-    if (element) {
-      // Tell the ResizeObserver to start watching the element — this enables the hook to detect resizing
-      observerRef.current.observe(element);
-    }
-  }, [element]);
-
-  return useMemo<{
-    ref: LegacyRef<HTMLIFrameElement>,
-    element: HTMLIFrameElement | undefined,
-    width: number,
-    height: number,
-    x: number,
-    y: number,
-  }>(
-    () => ({
-      ref: measuredRef,
-      element: element,
-      width: dimensions.width,
-      height: dimensions.height,
-      x: offset.x,
-      y: offset.y
-    }),
-    [measuredRef, element, dimensions, offset],
-  );
-}

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/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/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;