@openedx/frontend-base 1.0.0-alpha.2 → 1.0.0-alpha.21

package/runtime/slots/layout/utils.test.ts

@@ -1,67 +0,0 @@
-import { SlotOperation } from '../types';
-import { WidgetOperationTypes } from '../widget';
-import { LayoutOperationTypes } from './types';
-import { isLayoutOperation, isLayoutOptionsOperation, isLayoutReplaceOperation } from './utils';
-
-describe('UI Layout Operation utilities', () => {
-  describe('isLayoutOperation', () => {
-    it('should return true for valid LayoutOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: LayoutOperationTypes.OPTIONS,
-        options: {},
-      };
-      expect(isLayoutOperation(operation)).toBe(true);
-    });
-
-    it('should return false for invalid LayoutOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: WidgetOperationTypes.APPEND,
-        id: 'mock.slot.widget',
-        element: '',
-      };
-      expect(isLayoutOperation(operation)).toBe(false);
-    });
-  });
-
-  describe('isLayoutOptionsOperation', () => {
-    it('should return true for valid LayoutOptionsOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: LayoutOperationTypes.OPTIONS,
-        options: {},
-      };
-      expect(isLayoutOptionsOperation(operation)).toBe(true);
-    });
-
-    it('should return false for invalid LayoutOptionsOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: LayoutOperationTypes.REPLACE,
-        element: '',
-      };
-      expect(isLayoutOptionsOperation(operation)).toBe(false);
-    });
-  });
-
-  describe('isLayoutReplaceOperation', () => {
-    it('should return true for valid LayoutReplaceOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: LayoutOperationTypes.REPLACE,
-        element: '',
-      };
-      expect(isLayoutReplaceOperation(operation)).toBe(true);
-    });
-
-    it('should return false for invalid LayoutReplaceOperation', () => {
-      const operation: SlotOperation = {
-        slotId: 'mock.slot.ui',
-        op: LayoutOperationTypes.OPTIONS,
-        options: {},
-      };
-      expect(isLayoutReplaceOperation(operation)).toBe(false);
-    });
-  });
-});

package/runtime/slots/layout/utils.ts

@@ -1,14 +0,0 @@
-import { SlotOperation } from '../types';
-import { LayoutOperation, LayoutOperationTypes, LayoutOptionsOperation, LayoutReplaceOperation } from './types';
-
-export function isLayoutOperation(operation: SlotOperation): operation is LayoutOperation {
-  return Object.values(LayoutOperationTypes).includes(operation.op as LayoutOperationTypes);
-}
-
-export function isLayoutOptionsOperation(operation: SlotOperation): operation is LayoutOptionsOperation {
-  return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.OPTIONS;
-}
-
-export function isLayoutReplaceOperation(operation: SlotOperation): operation is LayoutReplaceOperation {
-  return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.REPLACE;
-}

package/runtime/slots/utils.test.ts

@@ -1,64 +0,0 @@
-import { getSiteConfig } from '../config';
-import { SlotOperation } from './types';
-import { getSlotOperations } from './utils';
-import { WidgetOperationTypes } from '.';
-
-jest.mock('../config');
-
-describe('getSlotOperations', () => {
-  it('should return an empty array if no apps are configured', () => {
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [] });
-    const result = getSlotOperations('test-slot.ui');
-    expect(result).toEqual([]);
-  });
-
-  it('should return an empty array if no slots are present in apps', () => {
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: [] }] });
-    const result = getSlotOperations('test-slot.ui');
-    expect(result).toEqual([]);
-  });
-
-  it('should return an empty array if no matching slotId is found', () => {
-    const mockSlots: SlotOperation[] = [{ slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' }];
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: mockSlots }] });
-    const result = getSlotOperations('test-slot.ui');
-    expect(result).toEqual([]);
-  });
-
-  it('should return the correct slot operations for a given slotId', () => {
-    const mockSlots: SlotOperation[] = [
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
-      { slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget3', element: '' },
-    ];
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: mockSlots }] });
-    const result = getSlotOperations('test-slot.ui');
-    expect(result).toEqual([
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
-    ]);
-  });
-
-  it('should handle multiple apps with slots correctly', () => {
-    (getSiteConfig as jest.Mock).mockReturnValue({
-      apps: [
-        {
-          slots: [
-            { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
-          ]
-        },
-        {
-          slots: [
-            { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
-            { slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget3', element: '' },
-          ]
-        }
-      ]
-    });
-    const result = getSlotOperations('test-slot.ui');
-    expect(result).toEqual([
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
-      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
-    ]);
-  });
-});

package/runtime/slots/utils.ts

@@ -1,78 +0,0 @@
-import { getAuthenticatedUser } from '../auth';
-import { getActiveRoles, getSiteConfig } from '../config';
-import { SlotOperation } from './types';
-
-export function getSlotOperations(id: string, defaultOperation?: SlotOperation) {
-  const { apps } = getSiteConfig();
-  const ops: SlotOperation[] = [];
-
-  if (defaultOperation) {
-    ops.push(defaultOperation);
-  }
-
-  if (apps) {
-    apps.forEach((app) => {
-      if (Array.isArray(app.slots)) {
-        app.slots.forEach((operation) => {
-          if (operation.slotId === id) {
-            ops.push(operation);
-          }
-        });
-      }
-    });
-  }
-
-  return ops;
-}
-
-export function isSlotOperationConditionSatisfied(operation: SlotOperation) {
-  const { condition } = operation;
-  if (condition?.authenticated !== undefined) {
-    const isAuthenticated = getAuthenticatedUser() !== null;
-    // If we failed the authenticated condition, return false.
-    if (condition.authenticated !== isAuthenticated) {
-      return false;
-    }
-  }
-
-  if (condition?.active !== undefined || condition?.inactive !== undefined) {
-    const activeRoles: string[] = getActiveRoles();
-
-    if (condition?.active !== undefined) {
-      let activeConditionRoleFound = false;
-      for (const conditionRole of condition.active) {
-        if (activeRoles.includes(conditionRole)) {
-          activeConditionRoleFound = true;
-          break;
-        }
-      }
-
-      // If we couldn't find an active role in our list, then we've failed this condition.
-      if (!activeConditionRoleFound) {
-        return false;
-      }
-    }
-
-    if (condition?.inactive !== undefined) {
-      let inactiveConditionRoleFound = false;
-      for (const conditionRole of condition.inactive) {
-        if (activeRoles.includes(conditionRole)) {
-          inactiveConditionRoleFound = true;
-          break;
-        }
-      }
-
-      // If we find an active role from our inactive list, then we've failed this condition.
-      if (inactiveConditionRoleFound) {
-        return false;
-      }
-    }
-  }
-
-  if (condition?.callback !== undefined && condition.callback() === false) {
-    return false;
-  }
-
-  // If there was no condition, we return true.
-  return true;
-}

package/runtime/slots/widget/WidgetContext.tsx

@@ -1,9 +0,0 @@
-import { createContext } from 'react';
-
-const WidgetContext = createContext<{ slotId: string, widgetId: string, role?: string }>({
-  slotId: '',
-  widgetId: '',
-  role: undefined,
-});
-
-export default WidgetContext;

package/runtime/slots/widget/WidgetProvider.tsx

@@ -1,30 +0,0 @@
-import { ReactNode, useEffect } from 'react';
-
-import { addActiveWidgetRole, removeActiveWidgetRole } from '../../config';
-import WidgetContext from './WidgetContext';
-
-interface WidgetProviderProps {
-  children: ReactNode,
-  slotId: string,
-  widgetId: string,
-  role?: string,
-}
-
-export default function WidgetProvider({ children, slotId, widgetId, role }: WidgetProviderProps) {
-  useEffect(() => {
-    if (role !== undefined) {
-      addActiveWidgetRole(role);
-    }
-    return () => {
-      if (role !== undefined) {
-        removeActiveWidgetRole(role);
-      }
-    };
-  }, [role]);
-
-  return (
-    <WidgetContext.Provider value={{ slotId, widgetId, role }}>
-      {children}
-    </WidgetContext.Provider>
-  );
-}

package/runtime/slots/widget/hooks.ts

@@ -1,105 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { useSlotContext, useSlotOperations } from '../hooks';
-import { isSlotOperationConditionSatisfied } from '../utils';
-import { WidgetOperation } from './types';
-import { createWidgets, isWidgetAbsoluteOperation, isWidgetOperation, isWidgetOptionsOperation, isWidgetRelativeOperation } from './utils';
-import WidgetContext from './WidgetContext';
-
-export function useWidgets() {
-  const { id, ...props } = useSlotContext();
-  delete props.children;
-  return useWidgetsForId(id, props);
-}
-
-export function useWidgetsForId(id: string, componentProps?: Record<string, unknown>) {
-  const operations = useSortedWidgetOperations(id);
-  return createWidgets(operations, componentProps);
-}
-
-export function useWidgetOperations(id: string) {
-  const operations = useSlotOperations(id);
-  const [widgetOperations, setWidgetOperations] = useState<WidgetOperation[]>([]);
-
-  useEffect(() => {
-    const filteredOperations = operations.filter((operation): operation is WidgetOperation => {
-      return isWidgetOperation(operation) && isSlotOperationConditionSatisfied(operation);
-    });
-
-    setWidgetOperations(filteredOperations);
-  }, [operations]);
-
-  return widgetOperations;
-}
-
-export function useSortedWidgetOperations(id: string) {
-  const operations = useWidgetOperations(id);
-  const [sortedOperations, setSortedOperations] = useState<WidgetOperation[]>([]);
-
-  useEffect(() => {
-    // This sorts widget operations in an order that guarantees that any 'related' widgets
-    // needed by relatively positioned operations (INSERT_AFTER, INSERT_BEFORE) should already exist
-    // by the time the relative operations are evaluated.  It means the declaration order of
-    // operations in SiteConfig does not prevent an operation from interacting with a widget that was
-    // declared 'later'.
-    const sortedOperations = operations.sort((a: WidgetOperation, b: WidgetOperation) => {
-      // If both operations are widget operations, there are special sorting rules.
-      const aAbsolute = isWidgetAbsoluteOperation(a);
-      const bAbsolute = isWidgetAbsoluteOperation(b);
-      if (aAbsolute && bAbsolute) {
-        return 0;
-      } else if (aAbsolute) {
-        return -1;
-      } else if (bAbsolute) {
-        return 1;
-      } else if (isWidgetRelativeOperation(a) && isWidgetRelativeOperation(b)) {
-        if (a.id === b.relatedId) {
-          return -1;
-        } else if (b.id === a.relatedId) {
-          return 1;
-        }
-      }
-
-      return 0;
-    });
-
-    setSortedOperations(sortedOperations);
-  }, [operations]);
-
-  return sortedOperations;
-}
-
-/**
- * useWidgetOptions iterates through the slot's operations to find any that are "widget options"
- * operations specific to this widget.  It merges these into a single object and returns them -
- * operations are merged in declaration order, meaning last one in wins.  useWidgetOptions only
- * triggers a re-render when the options change.
- */
-export function useWidgetOptions() {
-  const { slotId, widgetId } = useContext(WidgetContext);
-  return useWidgetOptionsForId(slotId, widgetId);
-}
-
-export function useWidgetOptionsForId(slotId: string, widgetId: string) {
-  const operations = useWidgetOperations(slotId);
-
-  const [options, setOptions] = useState<Record<string, unknown>>({});
-  useEffect(() => {
-    const findOptions = () => {
-      let nextOptions: Record<string, unknown> = {};
-      for (const operation of operations) {
-        if (isSlotOperationConditionSatisfied(operation)) {
-          if (isWidgetOptionsOperation(operation)) {
-            if (operation.relatedId === widgetId) {
-              nextOptions = { ...nextOptions, ...operation.options };
-            }
-          }
-        }
-      }
-      return nextOptions;
-    };
-
-    setOptions(findOptions());
-  }, [widgetId, operations]);
-
-  return options;
-}

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

@@ -1,16 +0,0 @@
-import { defineMessages } from '../../../i18n';
-
-const messages = defineMessages({
-  loading: {
-    id: 'loading.message.text',
-    defaultMessage: 'Loading',
-    description: 'the feature is currently loading',
-  },
-  unexpectedError: {
-    id: 'unexpected.error.message.text',
-    defaultMessage: ' Oops! An error occurred. Please refresh the screen to try again.',
-    description: 'error message when an unexpected error occurs',
-  },
-});
-
-export default messages;

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