@openedx/frontend-base 1.0.0-alpha.0 → 1.0.0-alpha.10

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

@@ -0,0 +1,178 @@
+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/utils.test.ts

@@ -0,0 +1,67 @@
+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/types.ts

@@ -9,6 +9,7 @@ import { WidgetOperation } from './widget/types';
 
 export interface SlotOperationCondition {
   active?: string[],
+  inactive?: string[],
   authenticated?: boolean,
   callback?: () => boolean,
 }

package/runtime/slots/utils.test.ts

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

@@ -35,18 +35,37 @@ export function isSlotOperationConditionSatisfied(operation: SlotOperation) {
     }
   }
 
-  if (condition?.active !== undefined) {
-    let activeConditionRoleFound = false;
+  if (condition?.active !== undefined || condition?.inactive !== undefined) {
     const activeRoles: string[] = getActiveRoles();
-    for (const conditionRole of condition.active) {
-      if (activeRoles.includes(conditionRole)) {
-        activeConditionRoleFound = true;
-        break;
+
+    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 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;
+      }
     }
   }
 

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

@@ -127,7 +127,7 @@ export function dispatchUnmountedEvent() {
  */
 export function useElementSize() {
   // Holds a reference to the ResizeObserver
-  const observerRef = useRef<ResizeObserver>();
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const [offset, setOffset] = useState({ x: 0, y: 0 });

package/runtime/testing/initializeMockApp.test.ts

@@ -0,0 +1,66 @@
+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,5 +1,7 @@
 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';
@@ -47,6 +49,9 @@ import mockMessages from './mockMessages';
 export default function initializeMockApp({
   messages = mockMessages,
   authenticatedUser = null,
+}: {
+  messages?: LocalizedMessages,
+  authenticatedUser?: User | null,
 } = {}) {
   const config = siteConfig;
   mergeSiteConfig(config);

package/runtime/utils.test.js

@@ -0,0 +1,116 @@
+import { waitFor } from '@testing-library/react';
+import {
+  camelCaseObject,
+  convertKeyNames,
+  getQueryParameters,
+  modifyObjectKeys,
+  snakeCaseObject,
+} from '.';
+
+describe('modifyObjectKeys', () => {
+  it('should use the provided modify function to change all keys in and object and its children', () => {
+    function meowKeys(key) {
+      return `${key}Meow`;
+    }
+
+    const result = modifyObjectKeys(
+      {
+        one: undefined,
+        two: null,
+        three: '',
+        four: 0,
+        five: NaN,
+        six: [1, 2, { seven: 'woof' }],
+        eight: { nine: { ten: 'bark' }, eleven: true },
+      },
+      meowKeys,
+    );
+
+    expect(result).toEqual({
+      oneMeow: undefined,
+      twoMeow: null,
+      threeMeow: '',
+      fourMeow: 0,
+      fiveMeow: NaN,
+      sixMeow: [1, 2, { sevenMeow: 'woof' }],
+      eightMeow: { nineMeow: { tenMeow: 'bark' }, elevenMeow: true },
+    });
+  });
+});
+
+describe('camelCaseObject', () => {
+  it('should make everything camelCase', () => {
+    const result = camelCaseObject({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      dotDotDot: 123,
+    });
+  });
+});
+
+describe('snakeCaseObject', () => {
+  it('should make everything snake_case', () => {
+    const result = snakeCaseObject({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      dot_dot_dot: 123,
+    });
+  });
+});
+
+describe('convertKeyNames', () => {
+  it('should replace the specified keynames', () => {
+    const result = convertKeyNames(
+      {
+        one: { two: { three: 'four' } },
+        five: 'six',
+      },
+      {
+        two: 'blue',
+        five: 'alive',
+        seven: 'heaven',
+      },
+    );
+
+    expect(result).toEqual({
+      one: { blue: { three: 'four' } },
+      alive: 'six',
+    });
+  });
+});
+
+describe('getQueryParameters', () => {
+  it('should use window location by default', () => {
+    expect(global.location.search).toEqual('');
+    expect(getQueryParameters()).toEqual({});
+  });
+
+  it('should make an empty object with no query string', () => {
+    expect(getQueryParameters('')).toEqual({});
+  });
+
+  it('should make an object with one key value pair', () => {
+    expect(getQueryParameters('?foo=bar')).toEqual({
+      foo: 'bar',
+    });
+  });
+
+  it('should make an object with one key value pair', () => {
+    expect(getQueryParameters('?foo=bar&baz=1')).toEqual({
+      foo: 'bar',
+      baz: '1',
+    });
+  });
+});

package/shell/Logo.test.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Logo from './Logo';
+
+describe('Logo component', () => {
+  it('renders the image with default URL when no props are provided', async () => {
+    const { getByRole, queryByRole } = render(<Logo />);
+    const image = getByRole('img');
+    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
+    const link = queryByRole('link');
+    expect(link).toBeNull();
+  });
+
+  it('renders the image with provided imageUrl', () => {
+    const testUrl = 'https://example.com/test-logo.svg';
+    const { getByRole, queryByRole } = render(<Logo imageUrl={testUrl} />);
+    const image = getByRole('img');
+    expect(image).toHaveAttribute('src', testUrl);
+    const link = queryByRole('link');
+    expect(link).toBeNull();
+  });
+
+  it('renders the image wrapped in a Hyperlink when destinationUrl is provided', () => {
+    const testDestinationUrl = 'https://example.com';
+    const { getByRole } = render(<Logo destinationUrl={testDestinationUrl} />);
+    const link = getByRole('link');
+    expect(link).toHaveAttribute('href', testDestinationUrl);
+    const image = getByRole('img');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
+  });
+});

package/shell/__mocks__/file.js

@@ -0,0 +1 @@
+export default 'FileMock';

package/shell/__mocks__/svg.js

@@ -0,0 +1 @@
+export default 'SvgURL';

package/shell/__mocks__/universal-cookie.js

@@ -0,0 +1,6 @@
+const mockCookiesImplementation = {
+  get: jest.fn(),
+  remove: jest.fn(),
+};
+
+module.exports = () => mockCookiesImplementation;

package/shell/app.scss

@@ -1,4 +1,5 @@
-@use "@openedx/paragon/scss/core/core.scss";
+@use "@openedx/paragon/dist/core.min.css";
+@use "@openedx/paragon/dist/light.min.css";
 
 .flex-basis-0 {
   flex-basis: 0 !important;

package/shell/app.ts

@@ -3,6 +3,14 @@ import { App } from '../types';
 import { Footer } from './footer';
 import { Header } from './header';
 
+const inactive = [
+  'org.openedx.frontend.role.login',
+  'org.openedx.frontend.role.register',
+  'org.openedx.frontend.role.resetPassword',
+  'org.openedx.frontend.role.confirmPassword',
+  'org.openedx.frontend.role.welcome'
+];
+
 const app: App = {
   appId: 'org.openedx.frontend.app.shell',
   slots: [
@@ -11,12 +19,18 @@ const app: App = {
       id: 'org.openedx.frontend.widget.header.main.v1',
       op: WidgetOperationTypes.APPEND,
       component: Header,
+      condition: {
+        inactive,
+      }
     },
     {
       slotId: 'org.openedx.frontend.slot.footer.main.v1',
       id: 'org.openedx.frontend.widget.footer.main.v1',
       op: WidgetOperationTypes.APPEND,
       component: Footer,
+      condition: {
+        inactive,
+      }
     },
   ]
 };

package/shell/dev/devHome/app.ts

@@ -6,10 +6,10 @@ const app: App = {
   appId: 'org.openedx.frontend.app.dev.home',
   routes: [{
     path: '/',
-    id: 'dev.home',
+    id: 'org.openedx.frontend.route.dev.home',
     Component: HomePage,
     handle: {
-      role: 'home'
+      role: 'org.openedx.frontend.role.devHome'
     }
   }],
   messages,