feat: set/unset mission status for role

src/api/user/StatusAPI.js

@@ -114,6 +114,26 @@ export default class StatusAPI extends EventEmitter {
     }
   }
 
+  setMissionStatusForRole(role, status) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.setMissionStatusForRole) {
+      return provider.setMissionStatusForRole(role, status);
+    } else {
+      this.#userAPI.error('User provider does not support setting mission status');
+    }
+  }
+
+  getMissionStatusForRole(role) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getMissionStatusForRole) {
+      return provider.getMissionStatusForRole(role);
+    } else {
+      this.#userAPI.error('User provider does not support getting mission status');
+    }
+  }
+
   /**
    * Fetch the list of possible mission status options
    * @returns {Promise<MissionStatusOption[]>} the current mission status

src/plugins/userIndicator/components/MissionStatusPopup.vue

@@ -11,10 +11,16 @@
     <div class="c-ucp-mission-status">
       <template v-for="status in missionStatuses" :key="status">
         <label class="c-ucp-mission-status__label" :for="status">{{ status }}</label>
-        <div class="c-ucp-mission-status__widget --is-no-go">NO GO</div>
+        <div class="c-ucp-mission-status__widget" :class="missionStatusClass(status)">
+          {{ selectedStatus[status] }}
+        </div>
         <div class="c-ucp-mission-status__select">
-          <select :id="status.label">
-            <option v-for="option in missionStatusOptions" :key="option.key">
+          <select :id="status" v-model="selectedStatus[status]">
+            <option
+              v-for="option in missionStatusOptions"
+              :key="option.key"
+              @change="onChangeStatus"
+            >
               {{ option.label }}
             </option>
           </select>
@@ -31,16 +37,49 @@ export default {
   data() {
     return {
       missionStatuses: [],
-      missionStatusOptions: []
+      missionStatusOptions: [],
+      selectedStatus: {}
     };
   },
+  computed: {
+    missionStatusClass() {
+      return (status) => {
+        return {
+          '--is-no-go': this.selectedStatus[status] === 'NO GO'
+        };
+      };
+    }
+  },
   async created() {
     this.missionStatuses = await this.openmct.user.status.getPossibleMissionStatuses();
     this.missionStatusOptions = await this.openmct.user.status.getPossibleMissionStatusOptions();
+    this.selectedStatus = await Promise.all(
+      this.missionStatuses.map(
+        this.openmct.user.status.getMissionStatusForRole.bind(this.openmct.user.status)
+      )
+    );
   },
   methods: {
     onDismiss() {
       this.$emit('dismiss');
+    },
+    async onChangeStatus(event) {
+      if (!this.openmct.user.status.canSetMissionStatus()) {
+        this.openmct.notifications.error('Selected role is ineligible to set mission status');
+
+        return;
+      }
+
+      if (this.selectedStatus !== undefined) {
+        const statusObject = this.findStatusByKey(this.selectedStatus);
+
+        const result = await this.openmct.user.status.setMissionStatusForRole(statusObject);
+        if (result === true) {
+          this.openmct.notifications.info('Successfully set operator status');
+        } else {
+          this.openmct.notifications.error('Unable to set operator status');
+        }
+      }
     }
   }
 };

src/plugins/userIndicator/components/UserIndicator.vue

@@ -216,7 +216,7 @@ export default {
       this.roleChannel.broadcastNewRole(role);
     },
     togglePopup() {
-      this.isPopupVisible = !this.isPopupVisible;
+      this.isPopupVisible = !this.isPopupVisible && this.canSetMissionStatus;
     }
   }
 };