Role selection for operator status roles (#6706)

* Add additional test roles to example user * Add session storage and role to user indicator * Update example user provider * Added selection dialog to overlays and implemented for operator status * Display role in user indicator * Updates to broadcast channel lifecycle * Update comment * Comment width * UserAPI role updates and UserIndicator improvement * Moved prompt to UserIndicator * Reconnect channel on error and UserIndicator updates * Updates to status api canPRovideStatusForRole * Cleanup * Store status roles in an array instead of a singular value * Added success notification and cleanup * Lint * Removed unused role param from status api call * Remove default status role from example user plugin * Removed status.getStatusRoleForCurrentUser * Cleanup * Cleanup * Moved roleChannel to private field * Separated input value from active role value * More flight like status role names and parameter names * Update statusRole parameter name * Update default selection for roles if input is not chosen * Update OperatorStatusIndicator install to hide if an observer * console.log * Return null instead of undefined * Remove unneccesary filter on allRoles * refactor: format with prettier * Undid merge error * Merge conflict extra line * Copyright statement * RoleChannelProvider to RoleChannel * Throw error on no provider * Change RoleChannel to ActiveRoleSynchronizer and update method calls to match * iconClass to alert * Add role selection step to beforeEach * example-role to flight * Dismiss overlay from exampleUser plugin which affected menu api positioning --------- Co-authored-by: Scott Bell <[email protected]>
nasa · Jul 14, 2023 · 32529ff · 32529ff
1 parent 92329b3
commit 32529ff
Show file tree

Hide file tree

Showing 18 changed files with 434 additions and 70 deletions.
diff --git a/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js b/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js
@@ -47,6 +47,11 @@ test.describe('Operator Status', () => {
       path: path.join(__dirname, '../../../../helper/', 'addInitOperatorStatus.js')
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByText('Select Role')).toBeVisible();
+    // set role
+    await page.getByRole('button', { name: 'Select' }).click();
+    // dismiss role confirmation popup
+    await page.getByRole('button', { name: 'Dismiss' }).click();
   });
 
   // verify that operator status is visible

diff --git a/example/exampleUser/ExampleUserProvider.js b/example/exampleUser/ExampleUserProvider.js
@@ -63,16 +63,24 @@ const STATUSES = [
  * @implements {StatusUserProvider}
  */
 export default class ExampleUserProvider extends EventEmitter {
-  constructor(openmct, { defaultStatusRole } = { defaultStatusRole: undefined }) {
+  constructor(
+    openmct,
+    { statusRoles } = {
+      statusRoles: []
+    }
+  ) {
     super();
 
     this.openmct = openmct;
     this.user = undefined;
     this.loggedIn = false;
     this.autoLoginUser = undefined;
-    this.status = STATUSES[0];
+    this.statusRoleValues = statusRoles.map((role) => ({
+      role: role,
+      status: STATUSES[0]
+    }));
     this.pollQuestion = undefined;
-    this.defaultStatusRole = defaultStatusRole;
+    this.statusRoles = statusRoles;
 
     this.ExampleUser = createExampleUser(this.openmct.user.User);
     this.loginPromise = undefined;
@@ -94,14 +102,13 @@ export default class ExampleUserProvider extends EventEmitter {
     return this.loginPromise;
   }
 
-  canProvideStatusForRole() {
-    return Promise.resolve(true);
+  canProvideStatusForRole(role) {
+    return this.statusRoles.includes(role);
   }
 
   canSetPollQuestion() {
     return Promise.resolve(true);
   }
-
   hasRole(roleId) {
     if (!this.loggedIn) {
       Promise.resolve(undefined);
@@ -110,16 +117,18 @@ export default class ExampleUserProvider extends EventEmitter {
     return Promise.resolve(this.user.getRoles().includes(roleId));
   }
 
-  getStatusRoleForCurrentUser() {
-    return Promise.resolve(this.defaultStatusRole);
+  getPossibleRoles() {
+    return this.user.getRoles();
   }
 
   getAllStatusRoles() {
-    return Promise.resolve([this.defaultStatusRole]);
+    return Promise.resolve(this.statusRoles);
   }
 
   getStatusForRole(role) {
-    return Promise.resolve(this.status);
+    const statusForRole = this.statusRoleValues.find((statusRole) => statusRole.role === role);
+
+    return Promise.resolve(statusForRole?.status);
   }
 
   async getDefaultStatusForRole(role) {
@@ -130,7 +139,8 @@ export default class ExampleUserProvider extends EventEmitter {
 
   setStatusForRole(role, status) {
     status.timestamp = Date.now();
-    this.status = status;
+    const matchingIndex = this.statusRoleValues.findIndex((statusRole) => statusRole.role === role);
+    this.statusRoleValues[matchingIndex].status = status;
     this.emit('statusChange', {
       role,
       status
@@ -175,7 +185,7 @@ export default class ExampleUserProvider extends EventEmitter {
     // for testing purposes, this will skip the form, this wouldn't be used in
     // a normal authentication process
     if (this.autoLoginUser) {
-      this.user = new this.ExampleUser(id, this.autoLoginUser, ['example-role']);
+      this.user = new this.ExampleUser(id, this.autoLoginUser, ['flight', 'driver', 'observer']);
       this.loggedIn = true;
 
       return Promise.resolve();

diff --git a/example/exampleUser/plugin.js b/example/exampleUser/plugin.js
@@ -21,16 +21,18 @@
  *****************************************************************************/
 
 import ExampleUserProvider from './ExampleUserProvider';
+const AUTO_LOGIN_USER = 'mct-user';
+const STATUS_ROLES = ['flight', 'driver'];
 
 export default function ExampleUserPlugin(
-  { autoLoginUser, defaultStatusRole } = {
-    autoLoginUser: 'guest',
-    defaultStatusRole: 'test-role'
+  { autoLoginUser, statusRoles } = {
+    autoLoginUser: AUTO_LOGIN_USER,
+    statusRoles: STATUS_ROLES
   }
 ) {
   return function install(openmct) {
     const userProvider = new ExampleUserProvider(openmct, {
-      defaultStatusRole
+      statusRoles
     });
 
     if (autoLoginUser !== undefined) {

diff --git a/src/api/overlays/OverlayAPI.js b/src/api/overlays/OverlayAPI.js
@@ -1,6 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 import Overlay from './Overlay';
 import Dialog from './Dialog';
 import ProgressDialog from './ProgressDialog';
+import Selection from './Selection';
 
 /**
  * The OverlayAPI is responsible for pre-pending templates to
@@ -130,6 +153,13 @@ class OverlayAPI {
 
     return progressDialog;
   }
+
+  selection(options) {
+    let selection = new Selection(options);
+    this.showOverlay(selection);
+
+    return selection;
+  }
 }
 
 export default OverlayAPI;
diff --git a/src/api/overlays/Selection.js b/src/api/overlays/Selection.js
@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import SelectionComponent from './components/SelectionComponent.vue';
+import Overlay from './Overlay';
+import Vue from 'vue';
+
+class Selection extends Overlay {
+  constructor({
+    iconClass,
+    title,
+    message,
+    selectionOptions,
+    onChange,
+    currentSelection,
+    ...options
+  }) {
+    let component = new Vue({
+      components: {
+        SelectionComponent: SelectionComponent
+      },
+      provide: {
+        iconClass,
+        title,
+        message,
+        selectionOptions,
+        onChange,
+        currentSelection
+      },
+      template: '<selection-component></selection-component>'
+    }).$mount();
+
+    super({
+      element: component.$el,
+      size: 'fit',
+      dismissable: false,
+      onChange,
+      currentSelection,
+      ...options
+    });
+
+    this.once('destroy', () => {
+      component.$destroy();
+    });
+  }
+}
+
+export default Selection;
diff --git a/src/api/overlays/components/SelectionComponent.vue b/src/api/overlays/components/SelectionComponent.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="c-message">
+    <!--Uses flex-row -->
+    <div class="c-message__icon" :class="['u-icon-bg-color-' + iconClass]"></div>
+    <div class="c-message__text">
+      <!-- Uses flex-column -->
+      <div v-if="title" class="c-message__title">
+        {{ title }}
+      </div>
+
+      <div v-if="message" class="c-message__action-text">
+        {{ message }}
+      </div>
+      <select @change="onChange">
+        <option
+          v-for="option in selectionOptions"
+          :key="option.key"
+          :value="option.key"
+          :selected="option.key === currentSelection"
+        >
+          {{ option.name }}
+        </option>
+      </select>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['iconClass', 'title', 'message', 'selectionOptions', 'currentSelection', 'onChange']
+};
+</script>
diff --git a/src/api/user/ActiveRoleSynchronizer.js b/src/api/user/ActiveRoleSynchronizer.js
@@ -0,0 +1,37 @@
+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);
+  }
+  subscribeToRoleChanges(callback) {
+    this.#roleChannel.addEventListener('message', callback);
+  }
+  unsubscribeFromRoleChanges(callback) {
+    this.#roleChannel.removeEventListener('message', callback);
+  }
+
+  setActiveRoleFromChannelMessage(event) {
+    const role = event.data;
+    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;
diff --git a/src/api/user/StatusAPI.js b/src/api/user/StatusAPI.js
@@ -140,9 +140,9 @@ export default class StatusAPI extends EventEmitter {
     const provider = this.#userAPI.getProvider();
 
     if (provider.canProvideStatusForRole) {
-      return provider.canProvideStatusForRole(role);
+      return Promise.resolve(provider.canProvideStatusForRole(role));
     } else {
-      return false;
+      return Promise.resolve(false);
     }
   }
 
@@ -151,11 +151,16 @@ export default class StatusAPI extends EventEmitter {
    * @param {Status} status The status to set for the provided role
    * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
    */
-  setStatusForRole(role, status) {
+  setStatusForRole(status) {
     const provider = this.#userAPI.getProvider();
 
     if (provider.setStatusForRole) {
-      return provider.setStatusForRole(role, status);
+      const activeRole = this.#userAPI.getActiveRole();
+      if (!provider.canProvideStatusForRole(activeRole)) {
+        return false;
+      }
+
+      return provider.setStatusForRole(activeRole, status);
     } else {
       this.#userAPI.error('User provider does not support setting role status');
     }
@@ -216,36 +221,20 @@ export default class StatusAPI extends EventEmitter {
     }
   }
 
-  /**
-   * The status role of the current user. A user may have multiple roles, but will only have one role
-   * that provides status at any time.
-   * @returns {Promise<import("./UserAPI").Role>} the role for which the current user can provide status.
-   */
-  getStatusRoleForCurrentUser() {
-    const provider = this.#userAPI.getProvider();
-
-    if (provider.getStatusRoleForCurrentUser) {
-      return provider.getStatusRoleForCurrentUser();
-    } else {
-      this.#userAPI.error('User provider cannot provide role status for this user');
-    }
-  }
-
   /**
    * @returns {Promise<Boolean>} true if the configured UserProvider can provide status for the currently logged in user, false otherwise.
    * @see StatusUserProvider
    */
   async canProvideStatusForCurrentUser() {
     const provider = this.#userAPI.getProvider();
 
-    if (provider.getStatusRoleForCurrentUser) {
-      const activeStatusRole = await this.#userAPI.getProvider().getStatusRoleForCurrentUser();
-      const canProvideStatus = await this.canProvideStatusForRole(activeStatusRole);
-
-      return canProvideStatus;
-    } else {
+    if (!provider) {
       return false;
     }
+    const activeStatusRole = await this.#userAPI.getActiveRole();
+    const canProvideStatus = await this.canProvideStatusForRole(activeStatusRole);
+
+    return canProvideStatus;
   }
 
   /**

diff --git a/src/api/user/StatusUserProvider.js b/src/api/user/StatusUserProvider.js
@@ -77,5 +77,4 @@ export default class StatusUserProvider extends UserProvider {
   /**
    * @returns {Promise<import("./UserAPI").Role>} the active status role for the currently logged in user
    */
-  async getStatusRoleForCurrentUser() {}
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       /**
        * @returns {Promise<import("./UserAPI").Role>} the active status role for the currently logged in user
        */
-      async getStatusRoleForCurrentUser() {}
     }