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

package/runtime/slots/layout/hooks.test.tsx

@@ -1,178 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { SlotOperation } from '../types';
-import * as slotHooks from '../hooks';
-import * as slotUtils from '../utils';
-import { WidgetAppendOperation, WidgetOperationTypes } from '../widget';
-import { useLayoutForSlotId, useLayoutOptions, useLayoutOptionsForId } from './hooks';
-import { LayoutOperationTypes, LayoutReplaceOperation } from './types';
-
-jest.mock('../hooks'); // mocks the useSlotOperations hook
-
-function MockLayout() {
-  return (
-    <div>Mock Component</div>
-  );
-}
-
-describe('useLayoutForSlotId', () => {
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('should return null when no replace layout operations are provided', () => {
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toBeNull();
-  });
-
-  it('should return a layout component when replace layout operation is present', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(MockLayout);
-  });
-
-  it('should return null if the operation condition is not satisfied', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    jest.spyOn(slotUtils, 'isSlotOperationConditionSatisfied').mockReturnValue(false);
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toBeNull();
-  });
-
-  it('should return a layout element when replace layout operation is present', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      element: <div>Mock layout</div>
-    };
-
-    // @ts-expect-error This is an intentionally malformed operation to test what happens when component/element are not present.
-    const malformedOperation: SlotOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-    };
-
-    const unrelatedOperation: WidgetAppendOperation = {
-      slotId: 'test-slot.ui',
-      id: 'test-slot.widget1',
-      op: WidgetOperationTypes.APPEND,
-      element: <div>Widget</div>
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation, malformedOperation, unrelatedOperation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(<div>Mock layout</div>);
-  });
-
-  it('should return the last layout component in the operations list', () => {
-    const SecondMockLayout = () => <div>First Component</div>;
-
-    const operation1: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    const operation2: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: SecondMockLayout
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation1, operation2]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(SecondMockLayout);
-  });
-});
-
-describe('useLayoutOptionsForId', () => {
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('should return an empty object whent here are no layout options operations', () => {
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual({});
-  });
-
-  it('should return an object containing options from a single layout options operation', () => {
-    const mockOptions = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions
-    };
-
-    const otherOperation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      element: <div>Layout</div>
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation, otherOperation]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual(mockOptions);
-  });
-
-  describe('when various failure conditions are true', () => {
-    const mockOptions = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions
-    };
-
-    it('should return an empty object if the operation condition is not satisfied.', () => {
-      jest.spyOn(slotUtils, 'isSlotOperationConditionSatisfied').mockReturnValue(false);
-      (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-      const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-      expect(result.current).toEqual({});
-    });
-  });
-
-  it('should return merged layout options from multiple operations', () => {
-    const mockOptions1 = { option1: 'value1', optionOverride: 'foo', };
-    const mockOptions2 = { option2: 'value2', optionOverride: 'bar' };
-    const operation1 = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions1
-    };
-    const operation2 = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions2
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation1, operation2]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual({ option1: 'value1', option2: 'value2', optionOverride: 'bar' });
-  });
-});
-
-describe('useLayoutOptions', () => {
-  it('should call useLayoutOptionsForId with the correct id ', () => {
-    const mockOptions1 = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions1
-    };
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    jest.spyOn(slotHooks, 'useSlotContext').mockReturnValue({ id: 'test-slot.ui' });
-    const { result } = renderHook(() => useLayoutOptions());
-    expect(result.current).toEqual({ option1: 'value1' });
-  });
-});

package/runtime/slots/layout/hooks.ts

@@ -1,65 +0,0 @@
-import { ComponentType, ReactNode, useEffect, useState } from 'react';
-import { useSlotContext, useSlotOperations } from '../hooks';
-import { isSlotOperationConditionSatisfied } from '../utils';
-import { LayoutComponentProps, LayoutElementProps, LayoutOperation } from './types';
-import { isLayoutOperation, isLayoutOptionsOperation, isLayoutReplaceOperation } from './utils';
-
-function hasLayoutComponentProps(operation: LayoutOperation): operation is (LayoutOperation & LayoutComponentProps) {
-  return isLayoutOperation(operation) && 'component' in operation;
-}
-
-function hasLayoutElementProps(operation: LayoutOperation): operation is (LayoutOperation & LayoutElementProps) {
-  return isLayoutOperation(operation) && 'element' in operation;
-}
-
-export function useLayoutForSlotId(id: string) {
-  const operations = useSlotOperations(id);
-  let layoutElement: ReactNode | ComponentType = null;
-
-  for (const operation of operations) {
-    if (isSlotOperationConditionSatisfied(operation)) {
-      if (isLayoutReplaceOperation(operation)) {
-        if (hasLayoutComponentProps(operation)) {
-          layoutElement = operation.component;
-        } else if (hasLayoutElementProps(operation)) {
-          layoutElement = operation.element;
-        }
-      }
-    }
-  }
-  return layoutElement;
-}
-
-/**
- * useLayoutOptions iterates through the slot's operations to find any which are "layout
- * options" operations.  It merges these into a single object and returns them - operations are
- * merged in declaration order, meaning last one in wins.  useLayoutOptions only triggers a
- * re-render when the options change.
- */
-export function useLayoutOptions() {
-  const { id } = useSlotContext();
-  return useLayoutOptionsForId(id);
-}
-
-export function useLayoutOptionsForId(id: string) {
-  const operations = useSlotOperations(id);
-  const [options, setOptions] = useState<Record<string, unknown>>({});
-
-  useEffect(() => {
-    const findOptions = () => {
-      let nextOptions: Record<string, unknown> = {};
-      for (const operation of operations) {
-        if (isSlotOperationConditionSatisfied(operation)) {
-          if (isLayoutOptionsOperation(operation)) {
-            nextOptions = { ...nextOptions, ...operation.options };
-          }
-        }
-      }
-      return nextOptions;
-    };
-
-    setOptions(findOptions());
-  }, [operations]);
-
-  return options;
-}

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;