Change RoleChannel to ActiveRoleSynchronizer and update method calls to match

src/api/user/ActiveRoleSynchronizer.js

@@ -0,0 +1,41 @@
+import { ACTIVE_ROLE_BROADCAST_CHANNEL_NAME } from './constants';
+
+class ActiveRoleSynchronizer {
+  #roleChannel;
+
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.#roleChannel = new BroadcastChannel(ACTIVE_ROLE_BROADCAST_CHANNEL_NAME);
+    this.setActiveRoleFromChannelMessage = this.setActiveRoleFromChannelMessage.bind(this);
+
+    this.subscribeToRoleChanges(this.setActiveRoleFromChannelMessage);
+  }
+  extractRoleFromEvent(callback) {
+    return function (event) {
+      callback(event.data);
+    };
+  }
+  subscribeToRoleChanges(callback) {
+    this.#roleChannel.addEventListener('message', this.extractRoleFromEvent(callback));
+  }
+  unsubscribeFromRoleChanges(callback) {
+    this.#roleChannel.removeEventListener('message', this.extractRoleFromEvent(callback));
+  }
+
+  setActiveRoleFromChannelMessage(role) {
+    this.openmct.user.setActiveRole(role);
+  }
+  broadcastNewRole(role) {
+    if (!this.#roleChannel.name) {
+      return false;
+    }
+
+    this.#roleChannel.postMessage(role);
+  }
+  destroy() {
+    this.unsubscribeFromRoleChanges(this.setActiveRoleFromChannelMessage);
+    this.#roleChannel.close();
+  }
+}
+
+export default ActiveRoleSynchronizer;

src/api/user/RoleChannel.js

@@ -1,52 +0,0 @@
-import { BROADCAST_CHANNEL_NAME } from './constants';
-
-class RoleChannel {
-  #roleChannel;
-
-  constructor(openmct, channelName = BROADCAST_CHANNEL_NAME) {
-    this.openmct = openmct;
-    this.channelName = channelName;
-  }
-
-  createRoleChannel() {
-    this.#roleChannel = new BroadcastChannel(this.channelName);
-  }
-  subscribeToRole(cb) {
-    this.#roleChannel.onmessage = (event) => {
-      const role = event.data;
-      this.openmct.user.setActiveRole(role);
-      if (cb) {
-        cb(role);
-      }
-    };
-  }
-  unsubscribeToRole() {
-    this.#roleChannel.close();
-  }
-  reconnect() {
-    this.#roleChannel.close();
-    this.createRoleChannel();
-  }
-
-  broadcastNewRole(role) {
-    if (!this.#roleChannel.name) {
-      return false;
-    }
-
-    try {
-      this.#roleChannel.postMessage(role);
-    } catch (e) {
-      console.error(e);
-      this.reconnect();
-      this.broadcastNewRole(role);
-      /** FIXME: there doesn't seem to be a reliable way to test for open/closed
-       * status of a broadcast channel; channel.name exists even after the
-       * channel is closed. Failure to update the subscribed tabs, should
-       * not block the focused tab's selection and so it is caught here.
-       * An error will often be thrown if the dialog remains open during HMR.
-       **/
-    }
-  }
-}
-
-export default RoleChannel;

src/api/user/constants.js

@@ -23,5 +23,5 @@
 export const MULTIPLE_PROVIDER_ERROR = 'Only one user provider may be set at a time.';
 export const NO_PROVIDER_ERROR = 'No user provider has been set.';
 
-export const SESSION_STORAGE_KEY = 'USER_ROLE';
-export const BROADCAST_CHANNEL_NAME = 'USER_ROLE';
+export const SESSION_STORAGE_KEY = 'ACTIVE_USER_ROLE';
+export const ACTIVE_ROLE_BROADCAST_CHANNEL_NAME = 'ActiveRoleChannel';

src/plugins/userIndicator/components/UserIndicator.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import RoleChannel from '../../../api/user/RoleChannel';
+import ActiveRoleSynchronizer from '../../../api/user/ActiveRoleSynchronizer';
 export default {
   inject: ['openmct'],
   data() {
@@ -45,13 +45,12 @@ export default {
 
   async mounted() {
     this.getUserInfo();
-    this.roleChannel = new RoleChannel(this.openmct);
-    this.roleChannel.createRoleChannel();
-    this.roleChannel.subscribeToRole(this.setRoleSelection);
+    this.roleChannel = new ActiveRoleSynchronizer(this.openmct);
+    this.roleChannel.subscribeToRoleChanges(this.setRoleSelection);
     await this.fetchOrPromptForRole();
   },
   beforeDestroy() {
-    this.roleChannel.unsubscribeToRole();
+    this.roleChannel.unsubscribeFromRoleChanges(this.setRoleSelection);
   },
   methods: {
     async getUserInfo() {