Merge branch 'master' into mct4879

.eslintrc.js

@@ -11,12 +11,14 @@ module.exports = {
     },
     "extends": [
         "eslint:recommended",
+        "plugin:compat/recommended",
         "plugin:vue/recommended",
         "plugin:you-dont-need-lodash-underscore/compatible"
     ],
     "parser": "vue-eslint-parser",
     "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
+        "requireConfigFile": false,
         "allowImportExportEverywhere": true,
         "ecmaVersion": 2015,
         "ecmaFeatures": {
@@ -35,7 +37,6 @@ module.exports = {
         "no-inner-declarations": "off",
         "no-use-before-define": ["error", "nofunc"],
         "no-caller": "error",
-        "no-sequences": "error",
         "no-irregular-whitespace": "error",
         "no-new": "error",
         "no-shadow": "error",
@@ -239,13 +240,12 @@ module.exports = {
         ],
         "vue/max-attributes-per-line": ["error", {
             "singleline": 1,
-            "multiline": {
-                "max": 1,
-                "allowFirstLine": true
-            }
+            "multiline": 1,
         }],
+        "vue/first-attribute-linebreak": "error",
         "vue/multiline-html-element-content-newline": "off",
         "vue/singleline-html-element-content-newline": "off",
+        "vue/multi-word-component-names": "off", // TODO enable, align with conventions
         "vue/no-mutating-props": "off"
 
     },

README.md

@@ -65,6 +65,12 @@ Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpa
 
 See our documentation for a guide on [building Applications with Open MCT](https://github.com/nasa/openmct/blob/master/API.md#starting-an-open-mct-application).
 
+## Compatibility
+
+This is a fast moving project and we do our best to test and support the widest possible range of browsers, operating systems, and nodejs APIs. We have a published list of support available in our package.json's `browserslist` key.
+
+If you encounter an issue with a particular browser, OS, or nodejs API, please file a [GitHub issue](https://github.com/nasa/openmct/issues/new/choose)
+
 ## Plugins
 
 Open MCT can be extended via plugins that make calls to the Open MCT API. A plugin is a group 

package.json

@@ -3,12 +3,12 @@
   "version": "2.0.1-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
+    "@babel/eslint-parser": "7.16.3",
     "@braintree/sanitize-url": "6.0.0",
     "@percy/cli": "1.0.0-beta.75",
     "@percy/playwright": "1.0.1",
     "@playwright/test": "1.19.2",
     "allure-playwright": "2.0.0-beta.15",
-    "babel-eslint": "10.1.0",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "10.2.0",
     "core-js": "3.20.3",
@@ -17,9 +17,10 @@
     "d3-axis": "1.0.x",
     "d3-scale": "1.0.x",
     "d3-selection": "1.3.x",
-    "eslint": "7.0.0",
+    "eslint": "8.11.0",
+    "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-playwright": "0.8.0",
-    "eslint-plugin-vue": "7.5.0",
+    "eslint-plugin-vue": "8.5.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "exports-loader": "0.7.0",
@@ -107,6 +108,13 @@
   "engines": {
     "node": ">=12.22.0"
   },
+  "browserslist": [
+    "Firefox ESR",
+    "not IE 11",
+    "last 2 Chrome versions",
+    "unreleased Chrome versions",
+    "ios_saf > 15"
+  ],
   "author": "",
   "license": "Apache-2.0",
   "private": true

src/api/forms/components/FormProperties.vue

@@ -26,45 +26,52 @@
         <div class="c-overlay__dialog-title">{{ model.title }}</div>
         <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
     </div>
-    <form name="mctForm"
-          class="c-form__contents"
-          autocomplete="off"
-          @submit.prevent
+    <form
+        name="mctForm"
+        class="c-form__contents"
+        autocomplete="off"
+        @submit.prevent
     >
-        <div v-for="section in formSections"
-             :key="section.id"
-             class="c-form__section"
-             :class="section.cssClass"
+        <div
+            v-for="section in formSections"
+            :key="section.id"
+            class="c-form__section"
+            :class="section.cssClass"
         >
-            <h2 v-if="section.name"
+            <h2
+                v-if="section.name"
                 class="c-form__section-header"
             >
                 {{ section.name }}
             </h2>
-            <div v-for="(row, index) in section.rows"
-                 :key="row.id"
-                 class="u-contents"
+            <div
+                v-for="(row, index) in section.rows"
+                :key="row.id"
+                class="u-contents"
             >
-                <FormRow :css-class="section.cssClass"
-                         :first="index < 1"
-                         :row="row"
-                         @onChange="onChange"
+                <FormRow
+                    :css-class="section.cssClass"
+                    :first="index < 1"
+                    :row="row"
+                    @onChange="onChange"
                 />
             </div>
         </div>
     </form>
 
     <div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar">
-        <button tabindex="0"
-                :disabled="isInvalid"
-                class="c-button c-button--major"
-                @click="onSave"
+        <button
+            tabindex="0"
+            :disabled="isInvalid"
+            class="c-button c-button--major"
+            @click="onSave"
         >
             {{ submitLabel }}
         </button>
-        <button tabindex="0"
-                class="c-button"
-                @click="onDismiss"
+        <button
+            tabindex="0"
+            class="c-button"
+            @click="onDismiss"
         >
             {{ cancelLabel }}
         </button>

src/api/forms/components/FormRow.vue

@@ -21,21 +21,25 @@
 *****************************************************************************/
 
 <template>
-<div class="form-row c-form__row"
-     :class="[{ 'first': first }]"
-     @onChange="onChange"
+<div
+    class="form-row c-form__row"
+    :class="[{ 'first': first }]"
+    @onChange="onChange"
 >
-    <div class="c-form-row__label"
-         :title="row.description"
+    <div
+        class="c-form-row__label"
+        :title="row.description"
     >
         {{ row.name }}
     </div>
-    <div class="c-form-row__state-indicator"
-         :class="rowClass"
+    <div
+        class="c-form-row__state-indicator"
+        :class="rowClass"
     >
     </div>
-    <div v-if="row.control"
-         class="c-form-row__controls"
+    <div
+        v-if="row.control"
+        class="c-form-row__controls"
     >
         <div ref="rowElement"></div>
     </div>

src/api/forms/components/controls/AutoCompleteField.vue

@@ -22,20 +22,24 @@
 
 <template>
 <div class="form-control autocomplete">
-    <input v-model="field"
-           class="autocompleteInput"
-           type="text"
-           @click="inputClicked()"
-           @keydown="keyDown($event)"
+    <input
+        v-model="field"
+        class="autocompleteInput"
+        type="text"
+        @click="inputClicked()"
+        @keydown="keyDown($event)"
     >
-    <span class="icon-arrow-down"
-          @click="arrowClicked()"
+    <span
+        class="icon-arrow-down"
+        @click="arrowClicked()"
     ></span>
-    <div class="autocompleteOptions"
-         @blur="hideOptions = true"
+    <div
+        class="autocompleteOptions"
+        @blur="hideOptions = true"
     >
         <ul v-if="!hideOptions">
-            <li v-for="opt in filteredOptions"
+            <li
+                v-for="opt in filteredOptions"
                 :key="opt.optionId"
                 :class="{'optionPreSelected': optionIndex === opt.optionId}"
                 @click="fillInputWithString(opt.name)"

src/api/forms/components/controls/ClockDisplayFormatField.vue

@@ -22,10 +22,11 @@
 
 <template>
 <div class="c-form-control--clock-display-format-fields">
-    <SelectField v-for="item in items"
-                 :key="item.key"
-                 :model="item"
-                 @onChange="onChange"
+    <SelectField
+        v-for="item in items"
+        :key="item.key"
+        :model="item"
+        @onChange="onChange"
     />
 </div>
 </template>

src/api/forms/components/controls/Composite.vue

@@ -22,12 +22,13 @@
 
 <template>
 <span>
-    <CompositeItem v-for="(item, index) in model.items"
-                   :key="item.name"
-                   :first="index < 1"
-                   :value="JSON.stringify(model.value[index])"
-                   :item="item"
-                   @onChange="onChange"
+    <CompositeItem
+        v-for="(item, index) in model.items"
+        :key="item.name"
+        :first="index < 1"
+        :value="JSON.stringify(model.value[index])"
+        :item="item"
+        @onChange="onChange"
     />
 </span>
 </template>

src/api/forms/components/controls/CompositeItem.vue

@@ -22,10 +22,11 @@
 
 <template>
 <div :class="compositeCssClass">
-    <FormRow :css-class="item.cssClass"
-             :first="first"
-             :row="row"
-             @onChange="onChange"
+    <FormRow
+        :css-class="item.cssClass"
+        :first="first"
+        :row="row"
+        @onChange="onChange"
     />
     <span class="composite-control-label">
         {{ item.name }}

src/api/forms/components/controls/Datetime.vue

@@ -27,50 +27,55 @@
     <div class="hint time sm">Min</div>
     <div class="hint time sm">Sec</div>
     <div class="hint timezone">Timezone</div>
-    <form ref="dateTimeForm"
-          prevent
-          class="u-contents"
+    <form
+        ref="dateTimeForm"
+        prevent
+        class="u-contents"
     >
         <div class="field control date">
-            <input v-model="date"
-                   :pattern="/\d{4}-\d{2}-\d{2}/"
-                   :placeholder="format"
-                   type="date"
-                   name="date"
-                   @change="onChange"
+            <input
+                v-model="date"
+                :pattern="/\d{4}-\d{2}-\d{2}/"
+                :placeholder="format"
+                type="date"
+                name="date"
+                @change="onChange"
             >
         </div>
         <div class="field control hour sm">
-            <input v-model="hour"
-                   :pattern="/\d+/"
-                   type="number"
-                   name="hour"
-                   maxlength="10"
-                   min="0"
-                   max="23"
-                   @change="onChange"
+            <input
+                v-model="hour"
+                :pattern="/\d+/"
+                type="number"
+                name="hour"
+                maxlength="10"
+                min="0"
+                max="23"
+                @change="onChange"
             >
         </div>
         <div class="field control min sm">
-            <input v-model="min"
-                   :pattern="/\d+/"
-                   type="number"
-                   name="min"
-                   maxlength="2"
-                   min="0"
-                   max="59"
-                   @change="onChange"
+            <input
+                v-model="min"
+                :pattern="/\d+/"
+                type="number"
+                name="min"
+                maxlength="2"
+                min="0"
+                max="59"
+                @change="onChange"
             >
         </div>
         <div class="field control sec sm">
-            <input v-model="sec"
-                   :pattern="/\d+/"
-                   type="number"
-                   name="sec"
-                   maxlength="2"
-                   min="0"
-                   max="59"
-                   @change="onChange"
+            <input
+                v-model="sec"
+                :pattern="/\d+/"
+                type="number"
+                name="sec"
+                maxlength="2"
+                min="0"
+                max="59"
+                @change="onChange"
             >
         </div>
         <div class="field control timezone">