Moved prompt to UserIndicator

src/api/user/RoleChannel.js

@@ -0,0 +1,35 @@
+import { BROADCAST_CHANNEL_NAME } from './constants';
+
+class RoleChannel {
+
+    createRoleChannel() {
+        this.roleChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
+        this.roleChannel.onmessage = (event => {
+            const role = event.data;
+            this.openmct.user.setActiveRole(role);
+        });
+    }
+    unsubscribeToRole() {
+        this.roleChannel.close();
+    }
+    broadcastNewRole(role) {
+        if (!this.roleChannel.name) {
+            return false;
+        }
+
+        try {
+            this.roleChannel.postMessage(role);
+        } catch (e) {
+            /** 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 new RoleChannel();
+

src/api/user/SessionPersistance.js

@@ -22,16 +22,17 @@
 
 import { SESSION_STORAGE_KEY } from './constants';
 
-export default {
+class SessionPersistance {
     getActiveRole() {
         return sessionStorage.getItem(SESSION_STORAGE_KEY);
-    },
+    }
-
     setActiveRole(role) {
         return sessionStorage.setItem(SESSION_STORAGE_KEY, role);
-    },
+    }
-
     clearActiveRole() {
         return sessionStorage.removeItem(SESSION_STORAGE_KEY);
     }
-};
+}
+
+export default new SessionPersistance();
+

src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue

@@ -58,7 +58,6 @@
 
 <script>
 const DEFAULT_POLL_QUESTION = 'NO POLL QUESTION';
-const BROADCAST_CHANNEL_NAME = 'USER_ROLE';
 export default {
     inject: ['openmct', 'indicator', 'configuration'],
     props: {
@@ -94,66 +93,18 @@ export default {
     beforeDestroy() {
         this.openmct.user.status.off('statusChange', this.setStatus);
         this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
-        this.unsubscribeToRole();
     },
     async mounted() {
         this.unsubscribe = [];
         await this.fetchUser();
-        this.fetchOrPromptForRole();
         this.fetchPossibleStatusesForUser();
         this.fetchCurrentPoll();
         this.fetchMyStatus();
         this.subscribeToMyStatus();
         this.subscribeToPollQuestion();
-        this.createRoleChannel();
     },
     methods: {
 
-        async fetchOrPromptForRole() {
-            const UserAPI = this.openmct.user;
-            const activeRole = UserAPI.getActiveRole();
-            this.selectedRole = activeRole;
-            if (!activeRole) {
-                // trigger role selection modal
-                this.promptForRoleSelection();
-            }
-            // todo confirm status role
-
-            this.role = await this.openmct.user.status.getStatusRoleForCurrentUser();
-
-        },
-        promptForRoleSelection() {
-            const allRoles = this.openmct.user.getPossibleRoles();
-            const selectionOptions = allRoles.filter(this.openmct.user.canProvideStatusForRole);
-            const dialog = this.openmct.overlays.selection({
-                selectionOptions,
-                iconClass: 'info',
-                title: 'Select Role',
-                message: 'Please select your role for operator status.',
-                currentSelection: this.selectedRole,
-                onChange: (event) => {
-                    console.log('updateRole', event.target.value)
-                    this.selectedRole = event.target.value;
-                },
-                buttons: [
-                    {
-                        label: 'Select',
-                        emphasis: true,
-                        callback: () => {
-                            dialog.dismiss();
-                            //TODO: introduce a notification of success
-                            this.setRole(this.selectedRole);
-                        }
-                    }
-                ]
-            });
-        },
-        setRole(role) {
-            this.openmct.user.setActiveRole(role);
-            // update other tabs through broadcast channel
-            this.broadcastNewRole(role);
-        },
-
         async fetchUser() {
             this.user = await this.openmct.user.getCurrentUser();
         },
@@ -228,33 +179,6 @@ export default {
                 return status;
             }
         },
-        createRoleChannel() {
-            this.roleChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
-            this.roleChannel.onmessage = (event => {
-                const role = event.data;
-                this.openmct.user.setActiveRole(role);
-            });
-        },
-        unsubscribeToRole() {
-            this.roleChannel.close();
-        },
-        broadcastNewRole(role) {
-            if (!this.roleChannel.name) {
-                return false;
-            }
-
-            try {
-                this.roleChannel.postMessage(role);
-            } catch (e) {
-                /** 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.
-                **/
-            }
-
-        },
         noop() {}
     }
 };

src/plugins/userIndicator/components/UserIndicator.vue

@@ -24,13 +24,13 @@
 <div class="c-indicator icon-person c-indicator--clickable">
     <span class="label c-indicator__label">
         {{ role ? `${userName}: ${role}` : userName }}
-        <button>Change Role</button>
+        <button @click="promptForRoleSelection">Change Role</button>
     </span>
 </div>
 </template>
 
 <script>
-
+import RoleChannelProvider from '../../../api/user/RoleChannel';
 export default {
     inject: ['openmct'],
     data() {
@@ -41,8 +41,13 @@ export default {
         };
     },
 
-    mounted() {
+    async mounted() {
         this.getUserInfo();
+        RoleChannelProvider.createRoleChannel();
+        await this.fetchOrPromptForRole();
+    },
+    beforeDestroy() {
+        RoleChannelProvider.unsubscribeToRole();
     },
     methods: {
         getUserInfo() {
@@ -51,7 +56,57 @@ export default {
                 this.role = this.openmct.user.getActiveRole();
                 this.loggedIn = this.openmct.user.isLoggedIn();
             });
+        },
+        async fetchOrPromptForRole() {
+            const UserAPI = this.openmct.user;
+            const activeRole = UserAPI.getActiveRole();
+            this.selectedRole = activeRole;
+            if (!activeRole) {
+                // trigger role selection modal
+                this.promptForRoleSelection();
             }
+            // todo confirm status role
+
+            this.role = await this.openmct.user.status.getStatusRoleForCurrentUser();
+
+        },
+        promptForRoleSelection() {
+            const allRoles = this.openmct.user.getPossibleRoles();
+            const selectionOptions = allRoles.map(x => ({
+                key: x,
+                name: x
+            })).filter(this.openmct.user.canProvideStatusForRole);
+
+            const dialog = this.openmct.overlays.selection({
+                selectionOptions,
+                iconClass: 'info',
+                title: 'Select Role',
+                message: 'Please select your role for operator status.',
+                currentSelection: this.selectedRole,
+                onChange: (event) => {
+                    this.selectedRole = event.target.value;
+                },
+                buttons: [
+                    {
+                        label: 'Select',
+                        emphasis: true,
+                        callback: () => {
+                            dialog.dismiss();
+                            //TODO: introduce a notification of success
+                            this.setRole(this.selectedRole);
+                        }
+                    }
+                ]
+            });
+        },
+
+        setRole(role) {
+            this.role = role;
+            this.openmct.user.setActiveRole(role);
+            // update other tabs through broadcast channel
+            RoleChannelProvider.broadcastNewRole(role);
+        }
+
     }
 };
 </script>