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

package/runtime/react/hooks/theme/useTrackColorSchemeChoice.ts

@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-import { sendTrackEvent } from '../../../analytics';
-
-/**
- * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
- * event to the tracking service.
- *
- * @memberof module:React
- */
-const useTrackColorSchemeChoice = () => {
-  useEffect(() => {
-    const trackColorSchemeChoice = ({ matches }) => {
-      const preferredColorScheme = matches ? 'dark' : 'light';
-      sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });
-    };
-    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
-    if (colorSchemeQuery) {
-      // send user's initial choice
-      trackColorSchemeChoice(colorSchemeQuery);
-      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
-    }
-    return () => {
-      if (colorSchemeQuery) {
-        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
-      }
-    };
-  }, []);
-};
-
-export default useTrackColorSchemeChoice;

package/runtime/react/hooks/useActiveRouteRoleWatcher.ts

@@ -1,31 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useMatches } from 'react-router';
-import { setActiveRouteRoles } from '../../config';
-import { isRoleRouteObject } from '../../routing';
-
-const useActiveRouteRoleWatcher = () => {
-  const matches = useMatches();
-
-  // We create this callback so we can use it right away to populate the default state value.
-  const findActiveRouteRoles = useCallback(() => {
-    // Starts with the widget roles and adds the others in.
-    const roles: string[] = [];
-
-    // Route roles
-    for (const match of matches) {
-      if (isRoleRouteObject(match)) {
-        if (!roles.includes(match.handle.role)) {
-          roles.push(match.handle.role);
-        }
-      }
-    }
-
-    return roles;
-  }, [matches]);
-
-  useEffect(() => {
-    setActiveRouteRoles(findActiveRouteRoles());
-  }, [matches, findActiveRouteRoles]);
-};
-
-export default useActiveRouteRoleWatcher;

package/runtime/react/hooks/useAuthenticatedUser.test.tsx

@@ -1,41 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { setAuthenticatedUser } from '../../auth';
-import { initializeMockApp } from '../../testing';
-import SiteProvider from '../SiteProvider';
-import useAuthenticatedUser from './useAuthenticatedUser';
-
-describe('useAuthenticatedUser', () => {
-  it('returns null when the user is anonymous', () => {
-    const { result } = renderHook(() => useAuthenticatedUser());
-    expect(result.current).toBeNull();
-  });
-
-  describe('with a user', () => {
-    const user = {
-      administrator: true,
-      email: 'admin@example.com',
-      name: 'Admin',
-      roles: ['admin'],
-      userId: 1,
-      username: 'admin-user',
-      avatar: 'http://localhost/admin.png',
-    };
-
-    beforeEach(() => {
-      initializeMockApp({
-        authenticatedUser: user,
-      });
-    });
-
-    afterEach(() => {
-      act(() => {
-        setAuthenticatedUser(null);
-      });
-    });
-
-    it('returns a User when the user exists', () => {
-      const { result } = renderHook(() => useAuthenticatedUser(), { wrapper: SiteProvider });
-      expect(result.current).toBe(user);
-    });
-  });
-});

package/runtime/react/hooks/useSiteConfig.test.tsx

@@ -1,13 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import siteConfig from 'site.config';
-import { EnvironmentTypes } from '../../../types';
-import useSiteConfig from './useSiteConfig';
-
-describe('useSiteConfig', () => {
-  it('returns the site config', () => {
-    const { result } = renderHook(() => useSiteConfig());
-    expect(result.current).toHaveProperty('apps', siteConfig.apps);
-    expect(result.current).toHaveProperty('environment', EnvironmentTypes.TEST);
-    expect(result.current).toHaveProperty('baseUrl', 'http://localhost:8080');
-  });
-});

package/runtime/react/reducers.ts

@@ -1,40 +0,0 @@
-import {
-  SET_THEME_VARIANT,
-  SET_IS_THEME_LOADED,
-} from './constants';
-
-export function themeReducer(state, action) {
-  switch (action.type) {
-    case SET_THEME_VARIANT: {
-      const requestedThemeVariant = action.payload;
-      return {
-        ...state,
-        themeVariant: requestedThemeVariant,
-      };
-    }
-    case SET_IS_THEME_LOADED: {
-      const requestedIsThemeLoaded = action.payload;
-      return {
-        ...state,
-        isThemeLoaded: requestedIsThemeLoaded,
-      };
-    }
-    default:
-      return state;
-  }
-}
-
-const setThemeVariant = (payload) => ({
-  type: SET_THEME_VARIANT,
-  payload,
-});
-
-const setThemeLoaded = (payload) => ({
-  type: SET_IS_THEME_LOADED,
-  payload,
-});
-
-export const themeActions = {
-  setThemeVariant,
-  setThemeLoaded,
-};

package/runtime/routing/utils.test.ts

@@ -1,7 +0,0 @@
-import { getUrlByRouteRole } from './utils';
-
-describe('getUrlByRouteRole', () => {
-  it('returns the default path for an internal module', () => {
-    expect(getUrlByRouteRole('test-app-1')).toBe('/app1');
-  });
-});

package/runtime/routing/utils.ts

@@ -1,34 +0,0 @@
-import { RouteObject } from 'react-router';
-
-import { RoleRouteObject } from '../../types';
-import { getSiteConfig } from '../config';
-
-export function getUrlByRouteRole(role: string) {
-  const { apps, externalRoutes } = getSiteConfig();
-
-  if (apps) {
-    for (const app of apps) {
-      if (Array.isArray(app.routes)) {
-        for (const route of app.routes) {
-          if (route?.handle?.role === role) {
-            return route.path ?? null;
-          }
-        }
-      }
-    }
-  }
-
-  if (externalRoutes) {
-    for (const externalRoute of externalRoutes) {
-      if (externalRoute.role === role) {
-        return externalRoute.url;
-      }
-    }
-  }
-
-  return null;
-}
-
-export function isRoleRouteObject(match: RouteObject): match is RoleRouteObject {
-  return match.handle !== undefined && 'role' in match.handle;
-}

package/runtime/scripts/GoogleAnalyticsLoader.test.ts

@@ -1,77 +0,0 @@
-import { GoogleAnalyticsLoader } from './index';
-
-const googleAnalyticsId = 'test-key';
-
-describe('GoogleAnalytics', () => {
-  let body;
-  let gaScriptSrc;
-  let gaScriptGtag;
-  let data;
-
-  beforeEach(() => {
-    // @ts-expect-error We're adding it, this is fine.
-    window.googleAnalytics = [];
-  });
-
-  function loadGoogleAnalytics(scriptData) {
-    const script = new GoogleAnalyticsLoader(scriptData);
-    script.loadScript();
-  }
-
-  describe('with valid GOOGLE_ANALYTICS_4_ID', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '<script id="stub" />';
-      data = {
-        config: {
-          GOOGLE_ANALYTICS_4_ID: googleAnalyticsId,
-        },
-      };
-      loadGoogleAnalytics(data);
-      expect(global.googleAnalytics.invoked).toBe(true);
-      body = document.body.innerHTML;
-      gaScriptSrc = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`;
-      gaScriptGtag = `gtag('config', '${googleAnalyticsId}');`;
-    });
-
-    it('should initialize google analytics', () => {
-      expect(body).toMatch(gaScriptSrc);
-      expect(body).toMatch(gaScriptGtag);
-    });
-
-    it('should not invoke snippet twice', () => {
-      loadGoogleAnalytics(data);
-
-      expect(global.googleAnalytics.invoked).toBe(true);
-
-      expect(body).toMatch(gaScriptSrc);
-      expect(body).toMatch(gaScriptGtag);
-
-      let count = (body.match(new RegExp(gaScriptSrc.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
-      expect(count).toBe(1);
-
-      count = (body.match(new RegExp(gaScriptGtag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
-      expect(count).toBe(1);
-    });
-  });
-
-  describe('with invalid GOOGLE_ANALYTICS_ID', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '<script id="stub" />';
-      data = {
-        config: {
-          GOOGLE_ANALYTICS_4_ID: '',
-        },
-      };
-      loadGoogleAnalytics(data);
-      body = document.body.innerHTML;
-      gaScriptSrc = 'https://www.googletagmanager.com/gtag/js?id=';
-      gaScriptGtag = "gtag('config', '');";
-      expect(global.googleAnalytics.invoked).toBeFalsy();
-    });
-
-    it('should not initialize google analytics', () => {
-      expect(body).not.toMatch(gaScriptSrc);
-      expect(body).not.toMatch(gaScriptGtag);
-    });
-  });
-});

package/runtime/scripts/GoogleAnalyticsLoader.ts

@@ -1,59 +0,0 @@
-/**
- * @implements {GoogleAnalyticsLoader}
- * @memberof module:GoogleAnalytics
- */
-class GoogleAnalyticsLoader {
-  analyticsId: string;
-
-  constructor({ config }) {
-    this.analyticsId = config.GOOGLE_ANALYTICS_4_ID;
-  }
-
-  loadScript() {
-    if (!this.analyticsId) {
-      return;
-    }
-
-    global.googleAnalytics = global.googleAnalytics || [];
-    // @ts-expect-error We just added googleAnalytics to global, it's there.
-    const { googleAnalytics } = global;
-
-    // If the snippet was invoked do nothing.
-    if (googleAnalytics.invoked) {
-      return;
-    }
-
-    // Invoked flag, to make sure the snippet
-    // is never invoked twice.
-    googleAnalytics.invoked = true;
-
-    googleAnalytics.load = (key, options) => {
-      const scriptSrc = document.createElement('script');
-      scriptSrc.type = 'text/javascript';
-      scriptSrc.async = true;
-      scriptSrc.src = `https://www.googletagmanager.com/gtag/js?id=${key}`;
-
-      const scriptGtag = document.createElement('script');
-      scriptGtag.innerHTML = `
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', '${key}');
-      `;
-
-      // Insert our scripts next to the first script element.
-      const first = document.getElementsByTagName('script')[0];
-      if (first?.parentNode === null) {
-        throw new Error('No script to insert Google analytics script before.');
-      }
-      first.parentNode.insertBefore(scriptSrc, first);
-      first.parentNode.insertBefore(scriptGtag, first);
-      googleAnalytics._loadOptions = options;
-    };
-
-    // Load GoogleAnalytics with your key.
-    googleAnalytics.load(this.analyticsId);
-  }
-}
-
-export default GoogleAnalyticsLoader;

package/runtime/site.config.test.tsx

@@ -1,33 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-
-const siteConfig: SiteConfig = {
-  siteId: 'runtime',
-  siteName: 'edX',
-  baseUrl: 'http://localhost:8080',
-  lmsBaseUrl: 'http://localhost:18000',
-  loginUrl: 'http://localhost:18000/login',
-  logoutUrl: 'http://localhost:18000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  apps: [{
-    appId: 'test-app',
-    routes: [{
-      path: '/app1',
-      element: (
-        <div>Test App 1</div>
-      ),
-      handle: {
-        role: 'test-app-1'
-      }
-    }]
-  }],
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-  csrfTokenApiPath: '/csrf/api/v1/token',
-  languagePreferenceCookieName: 'openedx-language-preference',
-  refreshAccessTokenApiPath: '/login_refresh',
-  userInfoCookieName: 'edx-user-info',
-  ignoredErrorRegex: null,
-  segmentKey: 'segment_whoa',
-};
-
-export default siteConfig;

package/runtime/slots/Slot.test.tsx

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { useContext } from 'react';
-import { useLayoutForSlotId } from './layout/hooks';
-import Slot from './Slot';
-import SlotContext from './SlotContext';
-
-jest.mock('./layout/hooks');
-
-describe('Slot component', () => {
-  it('renders with default layout', () => {
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
-    const { container } = render(<MemoryRouter><Slot id="test-slot.ui" /></MemoryRouter>);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('successfully passes the slot ID through a SlotContext', () => {
-    function IdPrintingLayout() {
-      const { id } = useContext(SlotContext);
-      return <div>Slot ID: {id}</div>;
-    }
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(IdPrintingLayout);
-    const { getByText } = render(<Slot id="test-slot.ui" />);
-    expect(getByText('Slot ID: test-slot.ui')).toBeInTheDocument();
-  });
-
-  it('renders with a component override layout', () => {
-    const CustomLayoutComponent = () => <div>Custom Layout Component</div>;
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(CustomLayoutComponent);
-    const { getByText } = render(<Slot id="test-slot.ui" />);
-    expect(getByText('Custom Layout Component')).toBeInTheDocument();
-  });
-
-  it('renders with an element override layout', () => {
-    const CustomLayoutElement = <div>Custom Layout Element</div>;
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
-    const { getByText } = render(<Slot id="test-slot.ui" layout={CustomLayoutElement} />);
-    expect(getByText('Custom Layout Element')).toBeInTheDocument();
-  });
-});

package/runtime/slots/Slot.tsx

@@ -1,32 +0,0 @@
-import { ComponentType, createElement, isValidElement, ReactNode } from 'react';
-import DefaultSlotLayout from './layout/DefaultSlotLayout';
-import { useLayoutForSlotId } from './layout/hooks';
-import SlotContext from './SlotContext';
-
-interface SlotProps {
-  id: string,
-  children?: ReactNode,
-  layout?: ComponentType | ReactNode,
-  [key: string]: unknown,
-}
-
-export default function Slot({ id, children, layout = DefaultSlotLayout, ...props }: SlotProps) {
-  let layoutElement: ComponentType | ReactNode = layout;
-
-  const overrideLayout = useLayoutForSlotId(id);
-
-  // Weed out any ReactNode types that aren't actually JSX.
-  if (overrideLayout && overrideLayout !== null && overrideLayout !== undefined && typeof overrideLayout !== 'boolean') {
-    layoutElement = overrideLayout;
-  }
-
-  if (!isValidElement(layoutElement)) {
-    layoutElement = createElement(layoutElement as ComponentType);
-  }
-
-  return (
-    <SlotContext.Provider value={{ id, children, ...props }}>
-      {layoutElement}
-    </SlotContext.Provider>
-  );
-}

package/runtime/slots/SlotContext.tsx

@@ -1,8 +0,0 @@
-import { createContext, ReactNode } from 'react';
-
-const SlotContext = createContext<{ id: string, children?: ReactNode, [key: string]: unknown }>({
-  id: '',
-  children: null,
-});
-
-export default SlotContext;

package/runtime/slots/hooks.ts

@@ -1,35 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { SlotOperation } from './types';
-import { getSlotOperations } from './utils';
-import SlotContext from './SlotContext';
-import { createWidgetAppendOperation } from './widget';
-
-/**
- * The useSlotOperations hook will trigger re-renders when the slot configuration changes.
- * It is a fundamental hook that is used by many of the others to ensure they're using up-to-date
- * config as it changes.
- */
-export function useSlotOperations(id: string) {
-  const { children } = useSlotContext();
-  const location = useLocation();
-  const [operations, setOperations] = useState<SlotOperation[]>([]);
-
-  useEffect(() => {
-    // Setting default content has to happen inside `useEffect()` so that re-renders only happen
-    // when [children] props change.  This avoids an endless render loop.  After all, the whole
-    // point of a slot is to modify its children via slot operations.
-    const defaultOperation = createWidgetAppendOperation('defaultContent', id, children);
-    setOperations(getSlotOperations(id, defaultOperation));
-
-    // We depend on [location] to force re-renders on navigation.  This guarantees changes in active
-    // roles (and thus, changes in what conditional widgets are shown) properly.
-  }, [id, children, location]);
-
-  return operations;
-}
-
-export function useSlotContext() {
-  return useContext(SlotContext);
-}

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

@@ -1,31 +0,0 @@
-import { render } from '@testing-library/react';
-import { useWidgets } from '../widget/hooks';
-import DefaultSlotLayout from './DefaultSlotLayout';
-
-// Mock the useWidgets hook
-jest.mock('../widget/hooks', () => ({
-  useWidgets: jest.fn(),
-}));
-
-describe('DefaultSlotLayout', () => {
-  it('renders widgets returned by useWidgets hook', () => {
-    const mockWidgets = [
-      <div key="widget1">Widget One</div>,
-      <div key="widget2">Widget Two</div>,
-    ];
-    (useWidgets as jest.Mock).mockReturnValue(mockWidgets);
-
-    const { getByText } = render(<DefaultSlotLayout />);
-
-    expect(getByText('Widget One')).toBeInTheDocument();
-    expect(getByText('Widget Two')).toBeInTheDocument();
-  });
-
-  it('renders empty when no widgets are returned', () => {
-    (useWidgets as jest.Mock).mockReturnValue([]);
-
-    const { container } = render(<DefaultSlotLayout />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
-});

package/runtime/slots/layout/DefaultSlotLayout.tsx

@@ -1,9 +0,0 @@
-import { useWidgets } from '../widget/hooks';
-
-export default function DefaultSlotLayout() {
-  const widgets = useWidgets();
-
-  return (
-    <>{widgets}</>
-  );
-}