Operator status (#5179)

* Added click event to simple indicator

* Moved operator status plugin to Open

* Implementing user role status API

* Support adding indicators asynchronously

* Adding user status API

* Updated example user provider

* Update icon with status

* Adding admin indicator

* Apply config options

* Set status class on indicator. Clear all statuses

* Show poll question in op stat indicator

* Implementing status summary

* Get statuses from providers. Reset statuses when poll question set

* Styling for operator status
- New icon glyph - IMPORTANT: OVERRIDE ANY MERGE CONFLICTS USING THIS COMMIT!
- Fixed erroneous font glyph mapping;
- Added default color for indicator icon;
- Changed user indicator to display response when set to other than "NO_STATUS".
- Standardized icon display.

* Cherrypick symbols font updates from restricted-notebook branch. This is the most full and complete version of the symbols font - OVERRIDE ANY MERGE CONFLICTS WITH THIS COMMIT!

* Fix positioning of popups

* Also fix positioning of status indicator

* Get roles by status instead of users

* Refactor how status summary is determined to simplify API

* Re-fetch status summary on status change

* Implemented status reset

* Move status into separate API

* Refactor user status to its own sub-API

* Create RAF utility class

* Error handling

* Add copyright notices

* Fix test issues

* Added jsdocs

* Additional tests for raf utility function

* Move status style configuration into Open

* Move styling from the API into the view

* Added some docs

* Added some unit tests and fixed a bug found in the process. Tests work\!

Co-authored-by: Andrew Henry <akhenry@gmail.com>

example/exampleUser/ExampleUserProvider.js

@@ -24,16 +24,53 @@ import EventEmitter from 'EventEmitter';
 import { v4 as uuid } from 'uuid';
 import createExampleUser from './exampleUserCreator';
 
+const STATUSES = [{
+    key: "NO_STATUS",
+    label: "Not set",
+    iconClass: "icon-question-mark",
+    iconClassPoll: "icon-status-poll-question-mark"
+}, {
+    key: "GO",
+    label: "GO",
+    iconClass: "icon-check",
+    iconClassPoll: "icon-status-poll-question-mark",
+    statusClass: "s-status-ok",
+    statusBgColor: "#33cc33",
+    statusFgColor: "#000"
+}, {
+    key: "MAYBE",
+    label: "MAYBE",
+    iconClass: "icon-alert-triangle",
+    iconClassPoll: "icon-status-poll-question-mark",
+    statusClass: "s-status-warning",
+    statusBgColor: "#ffb66c",
+    statusFgColor: "#000"
+}, {
+    key: "NO_GO",
+    label: "NO GO",
+    iconClass: "icon-circle-slash",
+    iconClassPoll: "icon-status-poll-question-mark",
+    statusClass: "s-status-error",
+    statusBgColor: "#9900cc",
+    statusFgColor: "#fff"
+}];
+/**
+ * @implements {StatusUserProvider}
+ */
 export default class ExampleUserProvider extends EventEmitter {
-    constructor(openmct) {
+    constructor(openmct, {defaultStatusRole} = {defaultStatusRole: undefined}) {
         super();
 
         this.openmct = openmct;
         this.user = undefined;
         this.loggedIn = false;
         this.autoLoginUser = undefined;
+        this.status = STATUSES[1];
+        this.pollQuestion = undefined;
+        this.defaultStatusRole = defaultStatusRole;
 
         this.ExampleUser = createExampleUser(this.openmct.user.User);
+        this.loginPromise = undefined;
     }
 
     isLoggedIn() {
@@ -45,11 +82,19 @@ export default class ExampleUserProvider extends EventEmitter {
     }
 
     getCurrentUser() {
-        if (this.loggedIn) {
-            return Promise.resolve(this.user);
+        if (!this.loginPromise) {
+            this.loginPromise = this._login().then(() => this.user);
         }
 
-        return this._login().then(() => this.user);
+        return this.loginPromise;
+    }
+
+    canProvideStatusForRole() {
+        return Promise.resolve(true);
+    }
+
+    canSetPollQuestion() {
+        return Promise.resolve(true);
     }
 
     hasRole(roleId) {
@@ -60,6 +105,55 @@ export default class ExampleUserProvider extends EventEmitter {
         return Promise.resolve(this.user.getRoles().includes(roleId));
     }
 
+    getStatusRoleForCurrentUser() {
+        return Promise.resolve(this.defaultStatusRole);
+    }
+
+    getAllStatusRoles() {
+        return Promise.resolve([this.defaultStatusRole]);
+    }
+
+    getStatusForRole(role) {
+        return Promise.resolve(this.status);
+    }
+
+    async getDefaultStatusForRole(role) {
+        const allRoles = await this.getPossibleStatuses();
+
+        return allRoles?.[0];
+    }
+
+    setStatusForRole(role, status) {
+        this.status = status;
+        this.emit('statusChange', {
+            role,
+            status
+        });
+
+        return true;
+    }
+
+    getPollQuestion() {
+        return Promise.resolve({
+            question: 'Set "GO" if your position is ready for a boarding action on the Klingon cruiser',
+            timestamp: Date.now()
+        });
+    }
+
+    setPollQuestion(pollQuestion) {
+        this.pollQuestion = {
+            question: pollQuestion,
+            timestamp: Date.now()
+        };
+        this.emit("pollQuestionChange", this.pollQuestion);
+
+        return true;
+    }
+
+    getPossibleStatuses() {
+        return Promise.resolve(STATUSES);
+    }
+
     _login() {
         const id = uuid();
 
@@ -108,3 +202,6 @@ export default class ExampleUserProvider extends EventEmitter {
         );
     }
 }
+/**
+ * @typedef {import('@/api/user/StatusUserProvider').default} StatusUserProvider
+ */