Various usability improvements to tabbed views (#105)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct-mcws",
-  "version": "5.1.0",
+  "version": "5.2.0-rc1",
   "description": "Open MCT for MCWS",
   "devDependencies": {
     "axios": "^0.21.2",

pom.xml

@@ -6,7 +6,7 @@
     <groupId>gov.nasa.arc.wtd</groupId>
     <artifactId>openmct-client</artifactId>
     <name>Open MCT for MCWS Client</name>
-    <version>5.1.0</version>
+    <version>5.2.0-rc1</version>
     <packaging>war</packaging>
 
     <properties>

src/alarmsView/alarms-view-timeout.vue

@@ -1,10 +1,24 @@
 <template>
-    <div class="c-properties" v-if="isEditing">
-        <div class="c-properties__header">Out-of-Alarm Channels</div>
-        <ul class="c-properties__section">
-            <li class="c-properties__row">
-                <div class="c-properties__label" title="Clear channels if no longer in alarm state"><label><span style="white-space: nowrap">Auto-clear</span> (minutes)</label></div>
-                <div class="c-properties__value"><input type="number" v-model="autoClearTimeout" @input="setAutoClearTimeout"></div>            
+    <div class="c-inspect-properties">
+        <div class="c-inspect-properties__header">Out-of-Alarm Channels</div>
+        <ul class="c-inspect-properties__section">
+            <li class="c-inspect-properties__row">
+                <div class="c-inspect-properties__label" title="Clear channels if no longer in alarm state">
+                    <label for="autoClearTimeout">Auto-clear (mins)</label>
+                </div>
+                <div class="c-inspect-properties__value">
+                    <input
+                        type="number"
+                        v-if="isEditing"
+                        v-model="autoClearTimeout"
+                        id="autoClearTimeout"
+                        @input="setAutoClearTimeout"
+                    >
+                    <span
+                      v-else
+                      id="autoClearTimeout"
+                    >{{ autoClearTimeout }}</span>
+                </div>
             </li>
         </ul>
     </div>

src/alarmsView/plugin.js

@@ -27,7 +27,7 @@ export default function AlarmsViewPlugin() {
         });
         openmct.inspectorViews.addProvider({
             key: 'vista.alarmsView-configuration',
-            name: 'Alarms View Timeout Configuration',
+            name: 'Autoclear',
             canView: function (selection) {
                 if (selection.length === 0) {
                     return false;
@@ -53,18 +53,21 @@ export default function AlarmsViewPlugin() {
                             el: element
                         });
                     },
+                    priority: function () {
+                      return openmct.priority.HIGH;
+                    },
                     destroy: function () {
                         component.$destroy();
                         component = undefined;
                     }
                 }
-            },
-            priority: function () {
-                return 1;
             }
         });
-        openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider('vista.alarm-view-configuration', 
-            'Alarm View Configuration', 'vista.alarmsView'));
+        openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
+            'vista.alarm-view-configuration', 
+            'Config',
+            'vista.alarmsView'
+        ));
 
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === 'vista.alarmsView') {

src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js

@@ -11,7 +11,7 @@ define([
     function ChannelTableFormatViewProvider(openmct) {
         return {
             key: 'channel-list-format',
-            name: 'Channel List Format Configuration',
+            name: 'Format',
             canView: function (selection) {
                 let selectionPath = selection[0];
                 if (selectionPath && selectionPath.length > 1) {

src/channelTable/channelTablePlugin/plugin.js

@@ -24,7 +24,7 @@ export default function install() {
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.channel-list-configuration',
-                `${CHANNEL_TABLE_NAME} Configuration`,
+                'Config',
                 CHANNEL_TABLE_KEY
             )
         );

src/commandEventsView/plugin.js

@@ -29,7 +29,7 @@ export default function CommandEventsViewPlugin() {
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.command-events-view-configuration',
-                'Command Events View Configuration',
+                'Config',
                 'vista.commandEventsView'
             )
         );

src/evrView/EVRViewLevelsConfigurationViewProvider.js

@@ -42,14 +42,14 @@ export default function EVRViewLevelsConfigurationViewProvider(options) {
                         `,
                     });
                 },
+                priority: function () {
+                    return openmct.priority.HIGH;
+                },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
                 }
             }
-        },
-        priority: function () {
-            return 1;
         }
     };
 }

src/evrView/plugin.js

@@ -26,7 +26,7 @@ export default function EVRViewPlugin(options) {
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.evr-view-configuration', 
-                'EVR View Configuration',
+                'Config',
                 'vista.evrView'
             )
         );

src/messagesView/plugin.js

@@ -19,7 +19,7 @@ export default function MessagesViewPlugin(options) {
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.messages-view-configuration', 
-                'Messages View Configuration',
+                'Config',
                 'vista.messagesView'
             )
         );

src/packetSummary/plugin.js

@@ -32,7 +32,7 @@ export default function PacketSummaryPlugin() {
 
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.packet-summary-configuration', 
-            'Packet Summary View Configuration',
+            'Config',
             'vista.packetSummaryView'
         ));
     }

src/product-status/data-product-autoclear.vue

@@ -1,12 +1,28 @@
 <template>
-    <div class="c-properties" v-if="isEditing">
-        <div class="c-properties__header">Auto-clear Completed Products</div>
-        <ul class="c-properties__section">
-            <li class="c-properties__row">
-                <div class="c-properties__label" title="Automatically remove completed data products after a number of minutes. If left blank, completed products will not be removed from the view.">
-                    <label>Clear after minutes</label>
+    <div class="c-inspect-properties">
+        <div class="c-inspect-properties__header">Auto-clear Completed Products</div>
+        <ul class="c-inspect-properties__section">
+            <li class="c-inspect-properties__row">
+                <div
+                    class="c-inspect-properties__label"
+                    title="Automatically remove completed data products after a number of minutes. If left blank, completed products will not be removed from the view."
+                >
+                    <label for="autoClearTimeout">Auto-clear (mins)</label>
+                </div>
+                <div class="c-inspect-properties__value">
+                    <input
+                        v-if="isEditing"
+                        class="c-input--sm c-input-number--no-spinners"
+                        type="number" 
+                        id="autoClearTimeout"
+                        v-model="autoClearTimeout"
+                        @change="setAutoClearTimeout"
+                    >
+                    <span
+                      v-else
+                      id="autoClearTimeout"
+                    >{{ autoClearTimeout }}</span>
                 </div>
-                <div class="c-properties__value"><input class="c-input--sm c-input-number--no-spinners" type="number" ref="autoClearTimeout" v-model="autoClearTimeout" @change="setAutoClearTimeout"></div>
             </li>
         </ul>
     </div>
@@ -28,12 +44,14 @@ export default {
             this.isEditing = isEditing;
         },
         setAutoClearTimeout() {
-            this.openmct.objects.mutate(this.domainObject, 'configuration.autoClearTimeout', this.$refs.autoClearTimeout.value);
+            this.openmct.objects.mutate(this.domainObject, 'configuration.autoClearTimeout', this.autoClearTimeout);
         }
     },
     mounted() {
         this.domainObject = this.openmct.selection.get()[0][0].context.item;
-        this.autoClearTimeout = _.get(this.domainObject, 'configuration.autoClearTimeout');
+        if (this.domainObject.configuration && this.domainObject.configuration.autoClearTimeout) {
+            this.autoClearTimeout = this.domainObject.configuration.autoClearTimeout
+        }
         this.unlisteners = [];
         this.openmct.editor.on('isEditing', this.toggleEdit);
     },

src/product-status/plugin.js

@@ -24,7 +24,7 @@ export default function install() {
 
         openmct.inspectorViews.addProvider({
             key: 'vista.dataProducts-configuration',
-            name: 'Data Products Autoclear Configuration',
+            name: 'Autoclear',
             canView: function (selection) {
                 if (selection.length === 0) {
                     return false;
@@ -50,19 +50,22 @@ export default function install() {
                             el: element
                         });
                     },
+                    priority: function () {
+                        return openmct.priority.HIGH;
+                    },
                     destroy: function () {
                         component.$destroy();
                         component = undefined;
                     }
                 }
-            },
-            priority: function () {
-                return 1;
             }
         });
 
-        openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider('vista.data-products-configuration', 
-            'Data Products View Configuration', 'vista.dataProductsView'));
+        openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
+            'vista.data-products-configuration', 
+            'Config',
+            'vista.dataProductsView'
+        ));
 
         // Suppress new views via monkey-patching (for now)
         let wrappedGet = openmct.objectViews.get;

src/tables/VistaTableConfigurationProvider.js

@@ -9,10 +9,6 @@ define([
         this.type = type;
     }
 
-    VistaTableConfigurationProvider.prototype.priority = function () {
-        return Number.MAX_SAFE_INTEGER;
-    }
-
     VistaTableConfigurationProvider.prototype.canView = function (selection){
         if (selection.length === 0) {
             return false;
@@ -39,6 +35,12 @@ define([
                     el: element
                 });
             },
+            showTab: function (isEditing) {
+              return isEditing;
+            },
+            priority: function () {
+              return openmct.priority.HIGH + 1;
+            },
             destroy: function () {
                 component.$destroy();
                 component = undefined;