feat: slot masqueradeBar

Author: diana-villalvazo-wgu

shell/header/Header.tsx

@@ -14,6 +14,7 @@ export default function Header() {
           <Slot id="org.openedx.frontend.slot.header.mobile.v1" />
         </nav>
       </header>
+      <Slot id="org.openedx.frontend.slot.header.masqueradeBar.v1" />
       <Slot id="org.openedx.frontend.slot.header.courseNavigationBar.v1" />
     </>
   );

shell/header/app.tsx

@@ -13,7 +13,9 @@ import MobileNavLinks from './mobile/MobileNavLinks';
 
 import messages from '../Shell.messages';
 import CourseTabsNavigation from './course-navigation-bar/CourseTabsNavigation';
+import MasqueradeBar from './masquerade-bar/MasqueradeBar';
 import { isCourseNavigationRoute } from './course-navigation-bar/utils';
+import { isMasqueradeBarRoute } from './masquerade-bar/utils';
 import { appId } from './constants';
 import './app.scss';
 
@@ -147,6 +149,15 @@ const config: App = {
       condition: {
         callback: () => isCourseNavigationRoute(),
       }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.masqueradeBar.v1',
+      id: 'org.openedx.frontend.widget.header.masqueradeBar.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: MasqueradeBar,
+      condition: {
+        callback: () => isMasqueradeBarRoute(),
+      }
     }
   ]
 };

shell/header/constants.ts

@@ -1,2 +1,3 @@
 export const appId = 'org.openedx.frontend.app.header';
 export const providesCourseNavigationRolesId = 'org.openedx.frontend.provides.courseNavigationRoles.v1';
+export const providesMasqueradeBarRolesId = 'org.openedx.frontend.provides.masqueradeBarRoles.v1';

shell/header/masquerade-bar/MasqueradeBar.tsx

@@ -0,0 +1,3 @@
+const MasqueradeBar = () => <div></div>;
+
+export default MasqueradeBar;

shell/header/masquerade-bar/messages.ts

@@ -0,0 +1,21 @@
+import { defineMessages } from '../../../runtime';
+
+const messages = defineMessages({
+  titleViewCourseIn: {
+    id: 'masqueradeBar.viewCourse',
+    defaultMessage: 'View course in:',
+    description: 'Button to view the course in the studio',
+  },
+  titleStudio: {
+    id: 'masqueradeBar.studio',
+    defaultMessage: 'Studio',
+    description: 'Button to view in studio',
+  },
+  titleInsights: {
+    id: 'masqueradeBar.insights',
+    defaultMessage: 'Insights',
+    description: 'Button Insights',
+  },
+});
+
+export default messages;

shell/header/masquerade-bar/utils.ts

@@ -0,0 +1,19 @@
+import { getActiveRoles, getProvidesAsStrings } from '../../../runtime';
+import { providesMasqueradeBarRolesId } from '../constants';
+
+/*
+ * Collects route role strings from all apps that opted into the course
+ * navigation bar feature.  Each app declares its roles as a string array:
+ *
+ *   provides: {
+ *     [providesMasqueradeBarRolesId]: ['org.openedx.frontend.role.learning'],
+ *   }
+ */
+function getMasqueradeBarRoles(): string[] {
+  return getProvidesAsStrings(providesMasqueradeBarRolesId);
+}
+
+export function isMasqueradeBarRoute(): boolean {
+  const activeRoles = getActiveRoles();
+  return getMasqueradeBarRoles().some(role => activeRoles.includes(role));
+}