merged in new form factor code and updated link plugin

.circleci/config.yml

@@ -1,69 +1,36 @@
-version: 2.1
-executors:
-  linux:
-    docker:
-      - image: cimg/base:stable
-orbs:
-  node: circleci/node@4.5.1
-  browser-tools: circleci/browser-tools@1.1.3
+version: 2
 jobs:
-  test:
-    parameters:
-      node-version:
-        type: string
-      browser:
-        type: string
-      always-pass:
-        type: boolean  
-    executor: linux
+  build:
+    docker:
+        - image: circleci/node:13-browsers
+          environment:
+            CHROME_BIN: "/usr/bin/google-chrome"
     steps:
-      - checkout
-      - restore_cache:
-          key: deps-{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}
-      - node/install:
-          node-version: << parameters.node-version >>
-      - node/install-packages:
-          override-ci-command: npm install
-      - when: # Just to save time until caching saves the browser bin
-          condition:
-            equal: [ "FirefoxESR", <<parameters.browser>> ]
-          steps:
-            - browser-tools/install-firefox:
-                version: "78.11.0esr" #https://archive.mozilla.org/pub/firefox/releases/          
-      - when: # Just to save time until caching saves the browser bin
-          condition:
-            equal: [ "ChromeHeadless", <<parameters.browser>> ]
-          steps:
-            - browser-tools/install-chrome:
-                replace-existing: false
-      - save_cache:
-          key: deps-{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}
-          paths:
-            - ~/.npm
-            - ~/.cache
-            - node_modules
-      - run: npm run test:coverage -- --browsers=<<parameters.browser>> || <<parameters.always-pass>>
-      - store_test_results:
-          path: dist/reports/tests/
-      - store_artifacts:
-          path: dist/reports/
+        - checkout
+        - run:
+            name: Update npm
+            command: 'sudo npm install -g npm@latest'
+        - restore_cache:
+            key: dependency-cache-{{ checksum "package.json" }}
+        - run:
+            name: Installing dependencies (npm install)
+            command: npm install
+        - save_cache:
+            key: dependency-cache-{{ checksum "package.json" }}
+            paths:
+              - node_modules
+        - run:
+            name: npm run test:coverage
+            command: npm run test:coverage
+        - run:
+            name: npm run lint
+            command: npm run lint
+        - store_artifacts:
+            path: dist
+            prefix: dist
+
 workflows:
-  matrix-tests:
+  version: 2
+  test:
     jobs:
-      - test:
-          name: node10-chrome
-          node-version: lts/dubnium
-          browser: ChromeHeadless
-          always-pass: false
-      - test:
-          name: node12-firefoxESR
-          node-version: lts/erbium
-          browser: FirefoxESR
-          always-pass: true
-      - test:
-          name: node14-chrome
-          node-version: lts/fermium
-          browser: ChromeHeadless
-          always-pass: true
-
-
+      - build

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,12 +1,11 @@
+<!--- This is for filing bugs. If you have a general question, please -->
+<!--- visit https://github.com/nasa/openmct/discussions -->
+
 ---
-name: Bug report
+name: Bug Report
 about: File a Bug !
-title: ''
-labels: type:bug
-assignees: ''
 
 ---
-
 <!--- Focus on user impact in the title. Use the Summary Field to -->
 <!--- describe the problem technically. -->
 
@@ -36,7 +35,7 @@ assignees: ''
 
 #### Environment
 * Open MCT Version: <!--- date of build, version, or SHA -->
-* Deployment Type: <!--- npm dev? VIPER Dev? openmct-yamcs? -->
+* Deployment Type: <!--- npm dev? VIPER Dev? openmct-yams? -->
 * OS:
 * Browser:
 

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1 @@
-blank_issues_enabled: true
-contact_links:
-  - name: Discussions
-    url: https://github.com/nasa/openmct/discussions
-    about: Got a question?
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/enhancement-request.md

@@ -1,20 +0,0 @@
----
-name: Enhancement request
-about: Suggest an enhancement or new improvement for this project
-title: ''
-labels: type:enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/workflows/lighthouse.yml

@@ -1,20 +0,0 @@
-name: lighthouse
-on:
-  workflow_dispatch:
-    inputs: 
-      version:
-        description: 'Which branch do you want to test?' # Limited to branch for now
-        required: false
-        default: 'master' 
-jobs:
-  lighthouse:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.inputs.version }}
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - run: npm install && npm install -g @lhci/cli #Don't want to include this in our deps
-      - run: lhci autorun

.gitignore

@@ -40,7 +40,4 @@ npm-debug.log
 # karma reports
 report.*.json
 
-# Lighthouse reports
-.lighthouseci
-
 package-lock.json

.npmrc

@@ -1 +0,0 @@
-loglevel=warn

API.md

@@ -595,17 +595,9 @@ section.
 
 #### Limit Evaluators **draft**
 
-Limit evaluators allow a telemetry integrator to define which limits exist for a 
-telemetry endpoint and how limits should be applied to telemetry from a given domain object.
-
-A limit evaluator can implement the `evalute` method which is used to define how limits
-should be applied to telemetry and the `getLimits` method which is used to specify 
-what the limit values are for different limit levels.
-
-Limit levels can be mapped to one of 5 colors for visualization: 
-`purple`, `red`, `orange`, `yellow` and `cyan`.
-
-For an example of a limit evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
+Limit evaluators allow a telemetry integrator to define how limits should be 
+applied to telemetry from a given domain object.  For an example of a limit 
+evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
 
 ### Telemetry Consumer APIs **draft**
 

README.md

@@ -1,11 +1,9 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript)
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0)
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
 Please visit our [Official Site](https://nasa.github.io/openmct/) and [Getting Started Guide](https://nasa.github.io/openmct/getting-started/)
 
-Once you've created something amazing with Open MCT, showcase your work in our GitHub Discussions [Show and Tell](https://github.com/nasa/openmct/discussions/categories/show-and-tell) section. We love seeing unique and wonderful implementations of Open MCT!
-
 ## See Open MCT in Action
 
 Try Open MCT now with our [live demo](https://openmct-demo.herokuapp.com/).

docs/src/process/version.md

@@ -131,8 +131,7 @@ numbers by the following process:
   3. In `package.json` change package to be public (private: false)
   4. Test the package before publishing by doing `npm publish --dry-run` 
      if necessary.
-  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`) 
-     NOTE: Use the `--tag unstable` flag to the npm publishj if this is a prerelease.
+  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`)
   6. Confirm the package has been published (e.g. `https://www.npmjs.com/package/openmct`)
 5. Update snapshot status in `package.json`
   1. Create a new branch off the `master` branch.

example/generator/SinewaveLimitProvider.js

@@ -26,26 +26,14 @@ define([
 
 ) {
 
-    var PURPLE = {
-            sin: 2.2,
-            cos: 2.2
-        },
-        RED = {
+    var RED = {
             sin: 0.9,
             cos: 0.9
         },
-        ORANGE = {
-            sin: 0.7,
-            cos: 0.7
-        },
         YELLOW = {
             sin: 0.5,
             cos: 0.5
         },
-        CYAN = {
-            sin: 0.45,
-            cos: 0.45
-        },
         LIMITS = {
             rh: {
                 cssClass: "is-limit--upr is-limit--red",
@@ -106,66 +94,32 @@ define([
     };
 
     SinewaveLimitProvider.prototype.getLimits = function (domainObject) {
-
         return {
             limits: function () {
-                return Promise.resolve({
-                    WATCH: {
-                        low: {
-                            color: "cyan",
-                            sin: -CYAN.sin,
-                            cos: -CYAN.cos
-                        },
-                        high: {
-                            color: "cyan",
-                            ...CYAN
-                        }
-                    },
+                return {
                     WARNING: {
                         low: {
-                            color: "yellow",
+                            cssClass: "is-limit--lwr is-limit--yellow",
                             sin: -YELLOW.sin,
                             cos: -YELLOW.cos
                         },
                         high: {
-                            color: "yellow",
+                            cssClass: "is-limit--upr is-limit--yellow",
                             ...YELLOW
                         }
                     },
                     DISTRESS: {
                         low: {
-                            color: "orange",
-                            sin: -ORANGE.sin,
-                            cos: -ORANGE.cos
-                        },
-                        high: {
-                            color: "orange",
-                            ...ORANGE
-                        }
-                    },
-                    CRITICAL: {
-                        low: {
-                            color: "red",
+                            cssClass: "is-limit--lwr is-limit--red",
                             sin: -RED.sin,
                             cos: -RED.cos
                         },
                         high: {
-                            color: "red",
+                            cssClass: "is-limit--upr is-limit--red",
                             ...RED
                         }
-                    },
-                    SEVERE: {
-                        low: {
-                            color: "purple",
-                            sin: -PURPLE.sin,
-                            cos: -PURPLE.cos
-                        },
-                        high: {
-                            color: "purple",
-                            ...PURPLE
-                        }
                     }
-                });
+                };
             }
         };
     };

example/generator/StateGeneratorProvider.js

@@ -63,7 +63,7 @@ define([
 
     StateGeneratorProvider.prototype.request = function (domainObject, options) {
         var start = options.start;
-        var end = Math.min(Date.now(), options.end); // no future values
+        var end = options.end;
         var duration = domainObject.telemetry.duration * 1000;
         if (options.strategy === 'latest' || options.size === 1) {
             start = end;

example/imagery/plugin.js

@@ -49,10 +49,6 @@ define([
         ];
         const IMAGE_DELAY = 20000;
 
-        function getCompassValues(min, max) {
-            return min + Math.random() * (max - min);
-        }
-
         function pointForTimestamp(timestamp, name) {
             const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
             const urlItems = url.split('/');
@@ -63,9 +59,6 @@ define([
                 utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 url,
-                sunOrientation: getCompassValues(0, 360),
-                cameraPan: getCompassValues(0, 360),
-                heading: getCompassValues(0, 360),
                 imageDownloadName
             };
         }

example/simpleVuePlugin/plugin.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from 'Vue';
 import HelloWorld from './HelloWorld.vue';
 
 function SimpleVuePlugin() {

index.html

@@ -88,7 +88,6 @@
         openmct.install(openmct.plugins.ExampleImagery());
         openmct.install(openmct.plugins.PlanLayout());
         openmct.install(openmct.plugins.Timeline());
-        openmct.install(openmct.plugins.Hyperlink());
         openmct.install(openmct.plugins.UTCTimeSystem());
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"

karma.conf.js

@@ -23,9 +23,9 @@
 /*global module,process*/
 
 const devMode = process.env.NODE_ENV !== 'production';
-const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
+const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'FirefoxHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
-const reporters = ['progress', 'html', 'junit'];
+const reporters = ['progress', 'html'];
 
 if (coverageEnabled) {
     reporters.push('coverage-istanbul');
@@ -59,8 +59,7 @@ module.exports = (config) => {
         browsers: browsers,
         client: {
             jasmine: {
-                random: false,
-                timeoutInterval: 30000
+                random: false
             }
         },
         customLaunchers: {
@@ -68,10 +67,6 @@ module.exports = (config) => {
                 base: 'Chrome',
                 flags: ['--remote-debugging-port=9222'],
                 debug: true
-            },
-            FirefoxESR: {
-                base: 'FirefoxHeadless',
-                name: 'FirefoxESR'
             }
         },
         colors: true,
@@ -83,21 +78,12 @@ module.exports = (config) => {
             preserveDescribeNesting: true,
             foldAll: false
         },
-        junitReporter: {
-            outputDir: "dist/reports/tests",
-            outputFile: "test-results.xml",
-            useBrowserName: false
-        },
-        browserConsoleLogOptions: {
-            level: "error",
-            format: "%b %T: %m",
-            terminal: true
-        },
+        browserConsoleLogOptions: { level: "error",  format: "%b %T: %m",  terminal: true },
         coverageIstanbulReporter: {
             fixWebpackSourcePaths: true,
-            dir: process.env.CIRCLE_ARTIFACTS
-                ? process.env.CIRCLE_ARTIFACTS + '/coverage'
-                : "dist/reports/coverage",
+            dir: process.env.CIRCLE_ARTIFACTS ?
+                process.env.CIRCLE_ARTIFACTS + '/coverage' :
+                "dist/reports/coverage",
             reports: ['html', 'lcovonly', 'text-summary'],
             thresholds: {
                 global: {

lighthouserc.yml

@@ -1,96 +0,0 @@
----
-ci:
-  collect:
-    urls:
-    - http://localhost/
-    numberOfRuns: 5
-    settings:
-      onlyCategories:
-      - performance
-      - best-practices
-  upload:
-    target: temporary-public-storage
-  assert:
-    preset: lighthouse:recommended
-    assertions:
-      ### Applicable assertions
-      bootup-time:
-      - warn
-      - minScore: 0.88 #Original value was calculated at 0.88
-      dom-size: 
-      - error
-      - maxNumericValue: 200 #Original value was calculated at 188
-      first-contentful-paint:
-      - error
-      - minScore: 0.07 #Original value was calculated at 0.08
-      mainthread-work-breakdown:
-      - warn
-      - minScore: 0.8 #Original value was calculated at 0.8
-      unused-javascript:
-      - warn
-      - maxLength: 1
-      - error
-      - maxNumericValue: 2000 #Original value was calculated at 1855
-      unused-css-rules: warn
-      installable-manifest: warn
-      service-worker: warn
-      ### Disabled seo, accessibility, and pwa assertions, below
-      categories:seo: 'off'
-      categories:accessibility: 'off'
-      categories:pwa: 'off'
-      accesskeys: 'off'
-      apple-touch-icon: 'off'
-      aria-allowed-attr: 'off'
-      aria-command-name: 'off'
-      aria-hidden-body: 'off'
-      aria-hidden-focus: 'off'
-      aria-input-field-name: 'off'
-      aria-meter-name: 'off'
-      aria-progressbar-name: 'off'
-      aria-required-attr: 'off'
-      aria-required-children: 'off'
-      aria-required-parent: 'off'
-      aria-roles: 'off'
-      aria-toggle-field-name: 'off'
-      aria-tooltip-name: 'off'
-      aria-treeitem-name: 'off'
-      aria-valid-attr: 'off'
-      aria-valid-attr-value: 'off'
-      button-name: 'off'
-      bypass: 'off'
-      canonical: 'off'
-      color-contrast: 'off'
-      content-width: 'off'
-      crawlable-anchors: 'off'
-      csp-xss: 'off'
-      font-display: 'off'
-      font-size: 'off'
-      maskable-icon: 'off'
-      heading-order: 'off'
-      hreflang: 'off'
-      html-has-lang: 'off'
-      html-lang-valid: 'off'
-      http-status-code: 'off'
-      image-alt: 'off'
-      input-image-alt: 'off'
-      is-crawlable: 'off'
-      label: 'off'
-      link-name: 'off'
-      link-text: 'off'
-      list: 'off'
-      listitem: 'off'
-      meta-description: 'off'
-      meta-refresh: 'off'
-      meta-viewport: 'off'
-      object-alt: 'off'
-      plugins: 'off'
-      robots-txt: 'off'
-      splash-screen: 'off'
-      tabindex: 'off'
-      tap-targets: 'off'
-      td-headers-attr: 'off'
-      th-has-data-cells: 'off'
-      themed-omnibox: 'off'
-      valid-lang: 'off'
-      video-caption: 'off'
-      viewport: 'off'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.7-SNAPSHOT",
+  "version": "1.7.3-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {
@@ -34,21 +34,20 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "html-loader": "^0.5.5",
-    "html2canvas": "^1.0.0-rc.7",
+    "html2canvas": "^1.0.0-alpha.12",
     "imports-loader": "^0.8.0",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "jasmine-core": "^3.7.1",
+    "jasmine-core": "^3.1.0",
     "jsdoc": "^3.3.2",
-    "karma": "6.3.4",
+    "karma": "5.1.1",
     "karma-chrome-launcher": "3.1.0",
-    "karma-firefox-launcher": "2.1.1",
+    "karma-firefox-launcher": "1.3.0",
     "karma-cli": "2.0.0",
     "karma-coverage": "2.0.3",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-junit-reporter": "2.0.1",
     "karma-html-reporter": "0.2.7",
-    "karma-jasmine": "4.0.1",
-    "karma-sourcemap-loader": "0.3.8",
+    "karma-jasmine": "3.3.1",
+    "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "4.0.2",
     "location-bar": "^3.0.1",
     "lodash": "^4.17.12",
@@ -61,7 +60,7 @@
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.14.1",
-    "painterro": "^1.2.56",
+    "painterro": "^1.0.35",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
@@ -90,7 +89,6 @@
     "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
     "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",
-    "test:coverage:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
     "verify": "concurrently 'npm:test' 'npm:lint'",
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
@@ -102,9 +100,6 @@
     "type": "git",
     "url": "https://github.com/nasa/openmct.git"
   },
-  "engines": {
-    "node": ">=10.10.2 <16.0.0"
-  },
   "author": "",
   "license": "Apache-2.0",
   "private": true

platform/commonUI/browse/bundle.js

@@ -24,6 +24,7 @@ define([
     "./src/navigation/NavigationService",
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
+    "./src/windowing/NewTabAction",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -36,6 +37,7 @@ define([
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
+    NewTabAction,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -126,6 +128,23 @@ define([
                         "depends": [
                             "navigationService"
                         ]
+                    },
+                    {
+                        "key": "window",
+                        "name": "Open In New Tab",
+                        "implementation": NewTabAction,
+                        "description": "Open in a new browser tab",
+                        "category": [
+                            "view-control",
+                            "contextual"
+                        ],
+                        "depends": [
+                            "urlService",
+                            "$window"
+                        ],
+                        "group": "windowing",
+                        "priority": 10,
+                        "cssClass": "icon-new-window"
                     }
                 ],
                 "runs": [

platform/commonUI/browse/src/windowing/NewTabAction.js

@@ -20,29 +20,39 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/**
+ * Module defining NewTabAction (Originally NewWindowAction). Created by vwoeltje on 11/18/14.
+ */
 define(
-    ['./AbstractComposeAction'],
-    function (AbstractComposeAction) {
-
+    [],
+    function () {
         /**
-         * The LinkAction is available from context menus and allows a user to
-         * link an object to another location of their choosing.
-         *
-         * @implements {Action}
+         * The new tab action allows a domain object to be opened
+         * into a new browser tab.
+         * @memberof platform/commonUI/browse
          * @constructor
-         * @memberof platform/entanglement
+         * @implements {Action}
          */
-        function LinkAction(policyService, locationService, linkService, context) {
-            AbstractComposeAction.apply(
-                this,
-                [policyService, locationService, linkService, context, "Link"]
-            );
+        function NewTabAction(urlService, $window, context) {
+            context = context || {};
+
+            this.urlService = urlService;
+            this.open = function () {
+                arguments[0] += "&hideTree=true&hideInspector=true";
+                $window.open.apply($window, arguments);
+            };
+
+            // Choose the object to be opened into a new tab
+            this.domainObject = context.selectedObject || context.domainObject;
         }
 
-        LinkAction.prototype = Object.create(AbstractComposeAction.prototype);
-        LinkAction.appliesTo = AbstractComposeAction.appliesTo;
+        NewTabAction.prototype.perform = function () {
+            this.open(
+                this.urlService.urlForNewTab("browse", this.domainObject),
+                "_blank"
+            );
+        };
 
-        return LinkAction;
+        return NewTabAction;
     }
 );
-

platform/commonUI/browse/test/windowing/NewTabActionSpec.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ["../../src/windowing/NewTabAction"],
+    function (NewTabAction) {
+
+        describe("The new tab action", function () {
+            var actionSelected,
+                actionCurrent,
+                mockWindow,
+                mockContextCurrent,
+                mockContextSelected,
+                mockUrlService;
+
+            beforeEach(function () {
+                mockWindow = jasmine.createSpyObj("$window", ["open", "location"]);
+
+                // Context if the current object is selected
+                // For example, when the top right new tab
+                // button is clicked, the user is using the
+                // current domainObject
+                mockContextCurrent = jasmine.createSpyObj("context", ["domainObject"]);
+
+                // Context if the selected object is selected
+                // For example, when an object in the left
+                // tree is opened in a new tab using the
+                // context menu
+                mockContextSelected = jasmine.createSpyObj("context", ["selectedObject",
+                    "domainObject"]);
+
+                // Mocks the urlService used to make the new tab's url from a
+                // domainObject and mode
+                mockUrlService = jasmine.createSpyObj("urlService", ["urlForNewTab"]);
+
+                // Action done using the current context or mockContextCurrent
+                actionCurrent = new NewTabAction(mockUrlService, mockWindow,
+                    mockContextCurrent);
+
+                // Action done using the selected context or mockContextSelected
+                actionSelected = new NewTabAction(mockUrlService, mockWindow,
+                    mockContextSelected);
+
+            });
+
+            it("new tab with current url is opened", function () {
+                actionCurrent.perform();
+            });
+
+            it("new tab with a selected url is opened", function () {
+                actionSelected.perform();
+            });
+
+        });
+    }
+);

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <mct-container key="c-overlay__contents">
-    <div class=c-overlay__top-bar">
+    <div class="c-overlay__top-bar">
         <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
         <div class="c-overlay__dialog-hint hint">{{ngModel.dialog.hint}}</div>
     </div>

platform/commonUI/edit/bundle.js

@@ -26,7 +26,6 @@ define([
     "./src/controllers/EditObjectController",
     "./src/actions/EditAndComposeAction",
     "./src/actions/EditAction",
-    "./src/actions/PropertiesAction",
     "./src/actions/SaveAction",
     "./src/actions/SaveAndStopEditingAction",
     "./src/actions/SaveAsAction",
@@ -55,7 +54,6 @@ define([
     EditObjectController,
     EditAndComposeAction,
     EditAction,
-    PropertiesAction,
     SaveAction,
     SaveAndStopEditingAction,
     SaveAsAction,
@@ -143,22 +141,6 @@ define([
                         "group": "action",
                         "priority": 10
                     },
-                    {
-                        "key": "properties",
-                        "category": [
-                            "contextual",
-                            "view-control"
-                        ],
-                        "implementation": PropertiesAction,
-                        "cssClass": "major icon-pencil",
-                        "name": "Edit Properties...",
-                        "group": "action",
-                        "priority": 10,
-                        "description": "Edit properties of this object.",
-                        "depends": [
-                            "dialogService"
-                        ]
-                    },
                     {
                         "key": "save-and-stop-editing",
                         "category": "save",

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -21,11 +21,11 @@
  *****************************************************************************/
 
 define([
-    '../creation/CreateWizard',
+    // '../creation/CreateWizard',
     './SaveInProgressDialog'
 ],
 function (
-    CreateWizard,
+    // CreateWizard,
     SaveInProgressDialog
 ) {
 
@@ -100,7 +100,8 @@ function (
             toUndirty = [];
 
         function doWizardSave(parent) {
-            var wizard = self.createWizard(parent);
+            console.log('SaveAsAction');
+            // var wizard = self.createWizard(parent);
 
             return self.dialogService
                 .getUserInput(wizard.getFormStructure(true),

platform/commonUI/mobile/bundle.js

@@ -21,14 +21,28 @@
  *****************************************************************************/
 
 define([
-    "./src/AgentService"
+    "./src/MCTDevice",
+    "./src/AgentService",
+    "./src/DeviceClassifier"
 ], function (
-    AgentService
+    MCTDevice,
+    AgentService,
+    DeviceClassifier
 ) {
+
     return {
         name: "platform/commonUI/mobile",
         definition: {
             "extensions": {
+                "directives": [
+                    {
+                        "key": "mctDevice",
+                        "implementation": MCTDevice,
+                        "depends": [
+                            "agentService"
+                        ]
+                    }
+                ],
                 "services": [
                     {
                         "key": "agentService",
@@ -37,6 +51,15 @@ define([
                             "$window"
                         ]
                     }
+                ],
+                "runs": [
+                    {
+                        "implementation": DeviceClassifier,
+                        "depends": [
+                            "agentService",
+                            "$document"
+                        ]
+                    }
                 ]
             }
         }

platform/commonUI/mobile/src/AgentService.js

@@ -20,12 +20,122 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(["../../../../src/utils/agent/Agent.js"], function (Agent) {
-    function AngularAgentServiceWrapper(window) {
-        const AS = Agent.default;
+/**
+ * Provides features which support variant behavior on mobile devices.
+ *
+ * @namespace platform/commonUI/mobile
+ */
+define(
+    [],
+    function () {
 
-        return new AS(window);
+        /**
+         * The query service handles calls for browser and userAgent
+         * info using a comparison between the userAgent and key
+         * device names
+         * @constructor
+         * @param $window Angular-injected instance of the window
+         * @memberof platform/commonUI/mobile
+         */
+        function AgentService($window) {
+            var userAgent = $window.navigator.userAgent,
+                matches = userAgent.match(/iPad|iPhone|Android/i) || [];
+
+            this.userAgent = userAgent;
+            this.mobileName = matches[0];
+            this.$window = $window;
+            this.touchEnabled = ($window.ontouchstart !== undefined);
+        }
+
+        /**
+         * Check if the user is on a mobile device.
+         * @returns {boolean} true on mobile
+         */
+        AgentService.prototype.isMobile = function () {
+            return Boolean(this.mobileName);
+        };
+
+        /**
+         * Check if the user is on a phone-sized mobile device.
+         * @returns {boolean} true on a phone
+         */
+        AgentService.prototype.isPhone = function () {
+            if (this.isMobile()) {
+                if (this.isAndroidTablet()) {
+                    return false;
+                } else if (this.mobileName === 'iPad') {
+                    return false;
+                } else {
+                    return true;
+                }
+            } else {
+                return false;
+            }
+        };
+
+        /**
+         * Check if the user is on a tablet sized android device
+         * @returns {boolean} true on an android tablet
+         */
+        AgentService.prototype.isAndroidTablet = function () {
+            if (this.mobileName === 'Android') {
+                if (this.isPortrait() && window.innerWidth >= 768) {
+                    return true;
+                } else if (this.isLandscape() && window.innerHeight >= 768) {
+                    return true;
+                }
+            } else {
+                return false;
+            }
+        };
+
+        /**
+         * Check if the user is on a tablet-sized mobile device.
+         * @returns {boolean} true on a tablet
+         */
+        AgentService.prototype.isTablet = function () {
+            return (this.isMobile() && !this.isPhone() && this.mobileName !== 'Android') || (this.isMobile() && this.isAndroidTablet());
+        };
+
+        /**
+         * Check if the user's device is in a portrait-style
+         * orientation (display width is narrower than display height.)
+         * @returns {boolean} true in portrait mode
+         */
+        AgentService.prototype.isPortrait = function () {
+            return this.$window.innerWidth < this.$window.innerHeight;
+        };
+
+        /**
+         * Check if the user's device is in a landscape-style
+         * orientation (display width is greater than display height.)
+         * @returns {boolean} true in landscape mode
+         */
+        AgentService.prototype.isLandscape = function () {
+            return !this.isPortrait();
+        };
+
+        /**
+         * Check if the user's device supports a touch interface.
+         * @returns {boolean} true if touch is supported
+         */
+        AgentService.prototype.isTouch = function () {
+            return this.touchEnabled;
+        };
+
+        /**
+         * Check if the user agent matches a certain named device,
+         * as indicated by checking for a case-insensitive substring
+         * match.
+         * @param {string} name the name to check for
+         * @returns {boolean} true if the user agent includes that name
+         */
+        AgentService.prototype.isBrowser = function (name) {
+            name = name.toLowerCase();
+
+            return this.userAgent.toLowerCase().indexOf(name) !== -1;
+        };
+
+        return AgentService;
     }
-
-    return AngularAgentServiceWrapper;
-});
+);

platform/commonUI/mobile/src/AgentServiceSpec.js

@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 AgentService from "./AgentService";
-
-const TEST_USER_AGENTS = {
-    DESKTOP:
-    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
-    IPAD:
-    "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-    IPHONE:
-    "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
-};
-
-describe("The AgentService", function () {
-    let testWindow;
-    let agentService;
-
-    beforeEach(function () {
-        testWindow = {
-            innerWidth: 640,
-            innerHeight: 480,
-            navigator: {
-                userAgent: TEST_USER_AGENTS.DESKTOP
-            }
-        };
-    });
-
-    it("recognizes desktop devices as non-mobile", function () {
-        testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
-        agentService = new AgentService(testWindow);
-        expect(agentService.isMobile()).toBeFalsy();
-        expect(agentService.isPhone()).toBeFalsy();
-        expect(agentService.isTablet()).toBeFalsy();
-    });
-
-    it("detects iPhones", function () {
-        testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
-        agentService = new AgentService(testWindow);
-        expect(agentService.isMobile()).toBeTruthy();
-        expect(agentService.isPhone()).toBeTruthy();
-        expect(agentService.isTablet()).toBeFalsy();
-    });
-
-    it("detects iPads", function () {
-        testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
-        agentService = new AgentService(testWindow);
-        expect(agentService.isMobile()).toBeTruthy();
-        expect(agentService.isPhone()).toBeFalsy();
-        expect(agentService.isTablet()).toBeTruthy();
-    });
-
-    it("detects display orientation", function () {
-        agentService = new AgentService(testWindow);
-        testWindow.innerWidth = 1024;
-        testWindow.innerHeight = 400;
-        expect(agentService.isPortrait()).toBeFalsy();
-        expect(agentService.isLandscape()).toBeTruthy();
-        testWindow.innerWidth = 400;
-        testWindow.innerHeight = 1024;
-        expect(agentService.isPortrait()).toBeTruthy();
-        expect(agentService.isLandscape()).toBeFalsy();
-    });
-
-    it("detects touch support", function () {
-        testWindow.ontouchstart = null;
-        expect(new AgentService(testWindow).isTouch()).toBe(true);
-        delete testWindow.ontouchstart;
-        expect(new AgentService(testWindow).isTouch()).toBe(false);
-    });
-
-    it("allows for checking browser type", function () {
-        testWindow.navigator.userAgent = "Chromezilla Safarifox";
-        agentService = new AgentService(testWindow);
-        expect(agentService.isBrowser("Chrome")).toBe(true);
-        expect(agentService.isBrowser("Firefox")).toBe(false);
-    });
-});

platform/commonUI/mobile/src/DeviceClassifier.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ['./DeviceMatchers'],
+    function (DeviceMatchers) {
+
+        /**
+         * Runs at application startup and adds a subset of the following
+         * CSS classes to the body of the document, depending on device
+         * attributes:
+         *
+         * * `mobile`: Phones or tablets.
+         * * `phone`: Phones specifically.
+         * * `tablet`: Tablets specifically.
+         * * `desktop`: Non-mobile devices.
+         * * `portrait`: Devices in a portrait-style orientation.
+         * * `landscape`: Devices in a landscape-style orientation.
+         * * `touch`: Device supports touch events.
+         *
+         * @param {platform/commonUI/mobile.AgentService} agentService
+         *        the service used to examine the user agent
+         * @param $document Angular's jqLite-wrapped document element
+         * @constructor
+         */
+        function MobileClassifier(agentService, $document) {
+            var body = $document.find('body');
+
+            Object.keys(DeviceMatchers).forEach(function (key, index, array) {
+                if (DeviceMatchers[key](agentService)) {
+                    body.addClass(key);
+                }
+            });
+
+            if (agentService.isMobile()) {
+                var mediaQuery = window.matchMedia('(orientation: landscape)');
+
+                mediaQuery.addListener(function (event) {
+                    if (event.matches) {
+                        body.removeClass('portrait');
+                        body.addClass('landscape');
+                    } else {
+                        body.removeClass('landscape');
+                        body.addClass('portrait');
+                    }
+                });
+            }
+        }
+
+        return MobileClassifier;
+
+    }
+);

platform/commonUI/mobile/src/DeviceMatchers.js

@@ -19,41 +19,40 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+define(function () {
 
-/**
- * Module defining url handling.
- */
-
-export function paramsToArray(openmct) {
-    // parse urParams from an object to an array.
-    let urlParams = openmct.router.getParams();
-    let newTabParams = [];
-    for (let key in urlParams) {
-        if ({}.hasOwnProperty.call(urlParams, key)) {
-            let param = `${key}=${urlParams[key]}`;
-            newTabParams.push(param);
+    /**
+     * An object containing key-value pairs, where keys are symbolic of
+     * device attributes, and values are functions that take the
+     * `agentService` as inputs and return boolean values indicating
+     * whether or not the current device has these attributes.
+     *
+     * For internal use by the mobile support bundle.
+     *
+     * @memberof platform/commonUI/mobile
+     * @private
+     */
+    return {
+        mobile: function (agentService) {
+            return agentService.isMobile();
+        },
+        phone: function (agentService) {
+            return agentService.isPhone();
+        },
+        tablet: function (agentService) {
+            return agentService.isTablet();
+        },
+        desktop: function (agentService) {
+            return !agentService.isMobile();
+        },
+        portrait: function (agentService) {
+            return agentService.isPortrait();
+        },
+        landscape: function (agentService) {
+            return agentService.isLandscape();
+        },
+        touch: function (agentService) {
+            return agentService.isTouch();
         }
-    }
-
-    return newTabParams;
-}
-
-export function identifierToString(openmct, objectPath) {
-    let identifier = '#/browse/' + objectPath.map(function (o) {
-        return o && openmct.objects.makeKeyString(o.identifier);
-    })
-        .reverse()
-        .join('/');
-
-    return identifier;
-}
-
-export default function objectPathToUrl(openmct, objectPath) {
-    let url = identifierToString(openmct, objectPath);
-    let urlParams = paramsToArray(openmct);
-    if (urlParams.length) {
-        url += '?' + urlParams.join('&');
-    }
-
-    return url;
-}
+    };
+});

platform/commonUI/mobile/src/MCTDevice.js

@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ['./DeviceMatchers'],
+    function (DeviceMatchers) {
+
+        /**
+         * The `mct-device` directive, when applied as an attribute,
+         * only includes the element when the device being used matches
+         * a set of characteristics required.
+         *
+         * Required characteristics are given as space-separated strings
+         * as the value to this attribute, e.g.:
+         *
+         *    <span mct-device="mobile portrait">Hello world!</span>
+         *
+         * ...will only show Hello world! when viewed on a mobile device
+         * in the portrait orientation.
+         *
+         * Valid device characteristics to detect are:
+         *
+         * * `mobile`: Phones or tablets.
+         * * `phone`: Phones specifically.
+         * * `tablet`: Tablets specifically.
+         * * `desktop`: Non-mobile devices.
+         * * `portrait`: Devices in a portrait-style orientation.
+         * * `landscape`: Devices in a landscape-style orientation.
+         * * `touch`: Device supports touch events.
+         *
+         * @param {AgentService} agentService used to detect device type
+         *        based on information about the user agent
+         */
+        function MCTDevice(agentService) {
+
+            function deviceMatches(tokens) {
+                tokens = tokens || "";
+
+                return tokens.split(" ").every(function (token) {
+                    var fn = DeviceMatchers[token];
+
+                    return fn && fn(agentService);
+                });
+            }
+
+            function link(scope, element, attrs, ctrl, transclude) {
+                if (deviceMatches(attrs.mctDevice)) {
+                    transclude(function (clone) {
+                        element.replaceWith(clone);
+                    });
+                }
+            }
+
+            return {
+                link: link,
+                // We are transcluding the whole element (like ng-if)
+                transclude: 'element',
+                // 1 more than ng-if
+                priority: 601,
+                // Also terminal, since element will be transcluded
+                terminal: true,
+                // Only apply as an attribute
+                restrict: "A"
+            };
+        }
+
+        return MCTDevice;
+    }
+);

platform/commonUI/mobile/test/AgentServiceSpec.js

@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ["../src/AgentService"],
+    function (AgentService) {
+
+        var TEST_USER_AGENTS = {
+            DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
+            IPAD: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+            IPHONE: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
+        };
+
+        describe("The AgentService", function () {
+            var testWindow, agentService;
+
+            beforeEach(function () {
+                testWindow = {
+                    innerWidth: 640,
+                    innerHeight: 480,
+                    navigator: {
+                        userAgent: TEST_USER_AGENTS.DESKTOP
+                    }
+                };
+            });
+
+            it("recognizes desktop devices as non-mobile", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeFalsy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeFalsy();
+            });
+
+            it("detects iPhones", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeTruthy();
+                expect(agentService.isTablet()).toBeFalsy();
+            });
+
+            it("detects iPads", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeTruthy();
+            });
+
+            it("detects display orientation", function () {
+                agentService = new AgentService(testWindow);
+                testWindow.innerWidth = 1024;
+                testWindow.innerHeight = 400;
+                expect(agentService.isPortrait()).toBeFalsy();
+                expect(agentService.isLandscape()).toBeTruthy();
+                testWindow.innerWidth = 400;
+                testWindow.innerHeight = 1024;
+                expect(agentService.isPortrait()).toBeTruthy();
+                expect(agentService.isLandscape()).toBeFalsy();
+            });
+
+            it("detects touch support", function () {
+                testWindow.ontouchstart = null;
+                expect(new AgentService(testWindow).isTouch())
+                    .toBe(true);
+                delete testWindow.ontouchstart;
+                expect(new AgentService(testWindow).isTouch())
+                    .toBe(false);
+            });
+
+            it("allows for checking browser type", function () {
+                testWindow.navigator.userAgent = "Chromezilla Safarifox";
+                agentService = new AgentService(testWindow);
+                expect(agentService.isBrowser("Chrome")).toBe(true);
+                expect(agentService.isBrowser("Firefox")).toBe(false);
+            });
+        });
+    }
+);

platform/commonUI/mobile/test/DeviceClassifierSpec.js

@@ -0,0 +1,109 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ["../src/DeviceClassifier", "../src/DeviceMatchers"],
+    function (DeviceClassifier, DeviceMatchers) {
+
+        var AGENT_SERVICE_METHODS = [
+                'isMobile',
+                'isPhone',
+                'isTablet',
+                'isPortrait',
+                'isLandscape',
+                'isTouch'
+            ],
+            TEST_PERMUTATIONS = [
+                ['isMobile', 'isPhone', 'isTouch', 'isPortrait'],
+                ['isMobile', 'isPhone', 'isTouch', 'isLandscape'],
+                ['isMobile', 'isTablet', 'isTouch', 'isPortrait'],
+                ['isMobile', 'isTablet', 'isTouch', 'isLandscape'],
+                ['isTouch'],
+                []
+            ];
+
+        describe("DeviceClassifier", function () {
+            var mockAgentService,
+                mockDocument,
+                mockBody;
+
+            beforeEach(function () {
+                mockAgentService = jasmine.createSpyObj(
+                    'agentService',
+                    AGENT_SERVICE_METHODS
+                );
+                mockDocument = jasmine.createSpyObj(
+                    '$document',
+                    ['find']
+                );
+                mockBody = jasmine.createSpyObj(
+                    'body',
+                    ['addClass']
+                );
+                mockDocument.find.and.callFake(function (sel) {
+                    return sel === 'body' && mockBody;
+                });
+                AGENT_SERVICE_METHODS.forEach(function (m) {
+                    mockAgentService[m].and.returnValue(false);
+                });
+            });
+
+            TEST_PERMUTATIONS.forEach(function (trueMethods) {
+                var summary = trueMethods.length === 0
+                    ? "device has no detected characteristics"
+                    : "device " + (trueMethods.join(", "));
+
+                describe("when " + summary, function () {
+                    var classifier; // eslint-disable-line
+
+                    beforeEach(function () {
+                        trueMethods.forEach(function (m) {
+                            mockAgentService[m].and.returnValue(true);
+                        });
+                        classifier = new DeviceClassifier(
+                            mockAgentService,
+                            mockDocument
+                        );
+                    });
+
+                    it("adds classes for matching, detected characteristics", function () {
+                        Object.keys(DeviceMatchers).filter(function (m) {
+                            return DeviceMatchers[m](mockAgentService);
+                        }).forEach(function (key) {
+                            expect(mockBody.addClass)
+                                .toHaveBeenCalledWith(key);
+                        });
+                    });
+
+                    it("does not add classes for non-matching characteristics", function () {
+                        Object.keys(DeviceMatchers).filter(function (m) {
+                            return !DeviceMatchers[m](mockAgentService);
+                        }).forEach(function (key) {
+                            expect(mockBody.addClass)
+                                .not.toHaveBeenCalledWith(key);
+                        });
+                    });
+                });
+            });
+        });
+    }
+);

platform/commonUI/mobile/test/DeviceMatchersSpec.js

@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ["../src/DeviceMatchers"],
+    function (DeviceMatchers) {
+
+        describe("DeviceMatchers", function () {
+            var mockAgentService;
+
+            beforeEach(function () {
+                mockAgentService = jasmine.createSpyObj(
+                    'agentService',
+                    [
+                        'isMobile',
+                        'isPhone',
+                        'isTablet',
+                        'isPortrait',
+                        'isLandscape',
+                        'isTouch'
+                    ]
+                );
+            });
+
+            it("detects when a device is a desktop device", function () {
+                mockAgentService.isMobile.and.returnValue(false);
+                expect(DeviceMatchers.desktop(mockAgentService))
+                    .toBe(true);
+                mockAgentService.isMobile.and.returnValue(true);
+                expect(DeviceMatchers.desktop(mockAgentService))
+                    .toBe(false);
+            });
+
+            function method(deviceType) {
+                return "is" + deviceType[0].toUpperCase() + deviceType.slice(1);
+            }
+
+            [
+                "mobile",
+                "phone",
+                "tablet",
+                "landscape",
+                "portrait",
+                "landscape",
+                "touch"
+            ].forEach(function (deviceType) {
+                it("detects when a device is a " + deviceType + " device", function () {
+                    mockAgentService[method(deviceType)].and.returnValue(true);
+                    expect(DeviceMatchers[deviceType](mockAgentService))
+                        .toBe(true);
+                    mockAgentService[method(deviceType)].and.returnValue(false);
+                    expect(DeviceMatchers[deviceType](mockAgentService))
+                        .toBe(false);
+                });
+            });
+
+        });
+    }
+);

platform/commonUI/mobile/test/MCTDeviceSpec.js

@@ -0,0 +1,168 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+define(
+    ['../src/MCTDevice'],
+    function (MCTDevice) {
+
+        var JQLITE_METHODS = ['replaceWith'];
+
+        describe("The mct-device directive", function () {
+            var mockAgentService,
+                mockTransclude,
+                mockElement,
+                mockClone,
+                testAttrs,
+                directive;
+
+            function link() {
+                directive.link(null, mockElement, testAttrs, null, mockTransclude);
+            }
+
+            beforeEach(function () {
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    ["isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape"]
+                );
+                mockTransclude = jasmine.createSpy("$transclude");
+                mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
+                mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
+
+                mockTransclude.and.callFake(function (fn) {
+                    fn(mockClone);
+                });
+
+                // Look desktop-like by default
+                mockAgentService.isLandscape.and.returnValue(true);
+
+                testAttrs = {};
+
+                directive = new MCTDevice(mockAgentService);
+            });
+
+            function expectInclusion() {
+                expect(mockElement.replaceWith)
+                    .toHaveBeenCalledWith(mockClone);
+            }
+
+            function expectExclusion() {
+                expect(mockElement.replaceWith).not.toHaveBeenCalled();
+            }
+
+            it("is applicable at the attribute level", function () {
+                expect(directive.restrict).toEqual("A");
+            });
+
+            it("transcludes at the element level", function () {
+                expect(directive.transclude).toEqual('element');
+            });
+
+            it("has a greater priority number than ng-if", function () {
+                expect(directive.priority > 600).toBeTruthy();
+            });
+
+            it("restricts element inclusion for mobile devices", function () {
+                testAttrs.mctDevice = "mobile";
+                link();
+                expectExclusion();
+
+                mockAgentService.isMobile.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+
+            it("restricts element inclusion for tablet devices", function () {
+                testAttrs.mctDevice = "tablet";
+                mockAgentService.isMobile.and.returnValue(true);
+                link();
+                expectExclusion();
+
+                mockAgentService.isTablet.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+
+            it("restricts element inclusion for phone devices", function () {
+                testAttrs.mctDevice = "phone";
+                mockAgentService.isMobile.and.returnValue(true);
+                link();
+                expectExclusion();
+
+                mockAgentService.isPhone.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+
+            it("restricts element inclusion for desktop devices", function () {
+                testAttrs.mctDevice = "desktop";
+                mockAgentService.isMobile.and.returnValue(true);
+                link();
+                expectExclusion();
+
+                mockAgentService.isMobile.and.returnValue(false);
+                link();
+                expectInclusion();
+            });
+
+            it("restricts element inclusion for portrait orientation", function () {
+                testAttrs.mctDevice = "portrait";
+                link();
+                expectExclusion();
+
+                mockAgentService.isPortrait.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+
+            it("restricts element inclusion for landscape orientation", function () {
+                testAttrs.mctDevice = "landscape";
+                mockAgentService.isLandscape.and.returnValue(false);
+                mockAgentService.isPortrait.and.returnValue(true);
+                link();
+                expectExclusion();
+
+                mockAgentService.isLandscape.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+
+            it("allows multiple device characteristics to be requested", function () {
+                // Won't try to test every permutation here, just
+                // make sure the multi-characteristic feature has support.
+                testAttrs.mctDevice = "portrait mobile";
+                link();
+                // Neither portrait nor mobile, not called
+                expectExclusion();
+
+                mockAgentService.isPortrait.and.returnValue(true);
+                link();
+
+                // Was portrait, but not mobile, so no
+                expectExclusion();
+
+                mockAgentService.isMobile.and.returnValue(true);
+                link();
+                expectInclusion();
+            });
+        });
+    }
+);

platform/entanglement/bundle.js

@@ -21,25 +21,21 @@
  *****************************************************************************/
 
 define([
-    "./src/actions/LinkAction",
     "./src/actions/SetPrimaryLocationAction",
     "./src/services/LocatingCreationDecorator",
     "./src/services/LocatingObjectDecorator",
     "./src/policies/CopyPolicy",
     "./src/policies/CrossSpacePolicy",
     "./src/capabilities/LocationCapability",
-    "./src/services/LinkService",
     "./src/services/CopyService",
     "./src/services/LocationService"
 ], function (
-    LinkAction,
     SetPrimaryLocationAction,
     LocatingCreationDecorator,
     LocatingObjectDecorator,
     CopyPolicy,
     CrossSpacePolicy,
     LocationCapability,
-    LinkService,
     CopyService,
     LocationService
 ) {
@@ -52,21 +48,6 @@ define([
             "configuration": {},
             "extensions": {
                 "actions": [
-                    {
-                        "key": "link",
-                        "name": "Create Link",
-                        "description": "Create Link to object in another location.",
-                        "cssClass": "icon-link",
-                        "category": "contextual",
-                        "group": "action",
-                        "priority": 7,
-                        "implementation": LinkAction,
-                        "depends": [
-                            "policyService",
-                            "locationService",
-                            "linkService"
-                        ]
-                    },
                     {
                         "key": "locate",
                         "name": "Set Primary Location",
@@ -115,15 +96,6 @@ define([
                     }
                 ],
                 "services": [
-                    {
-                        "key": "linkService",
-                        "name": "Link Service",
-                        "description": "Provides a service for linking objects",
-                        "implementation": LinkService,
-                        "depends": [
-                            "openmct"
-                        ]
-                    },
                     {
                         "key": "copyService",
                         "name": "Copy Service",

platform/entanglement/src/services/LinkService.js

@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * LinkService provides an interface for linking objects to additional
-         * locations.  It also provides a method for determining if an object
-         * can be copied to a specific location.
-         * @constructor
-         * @memberof platform/entanglement
-         * @implements {platform/entanglement.AbstractComposeService}
-         */
-        function LinkService(openmct) {
-            this.openmct = openmct;
-        }
-
-        LinkService.prototype.validate = function (object, parentCandidate) {
-            if (!parentCandidate || !parentCandidate.getId) {
-                return false;
-            }
-
-            if (parentCandidate.getId() === object.getId()) {
-                return false;
-            }
-
-            if (!parentCandidate.hasCapability('composition')) {
-                return false;
-            }
-
-            if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
-                return false;
-            }
-
-            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
-        };
-
-        LinkService.prototype.perform = function (object, parentObject) {
-            if (!this.validate(object, parentObject)) {
-                throw new Error(
-                    "Tried to link objects without validating first."
-                );
-            }
-
-            return parentObject.getCapability('composition').add(object);
-        };
-
-        return LinkService;
-    }
-);
-

platform/entanglement/test/actions/LinkActionSpec.js

@@ -1,178 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/actions/LinkAction',
-        '../services/MockLinkService',
-        '../DomainObjectFactory'
-    ],
-    function (LinkAction, MockLinkService, domainObjectFactory) {
-
-        describe("Link Action", function () {
-
-            var linkAction,
-                policyService,
-                locationService,
-                locationServicePromise,
-                linkService,
-                context,
-                selectedObject,
-                selectedObjectContextCapability,
-                currentParent,
-                newParent;
-
-            beforeEach(function () {
-                policyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                policyService.allow.and.returnValue(true);
-
-                selectedObjectContextCapability = jasmine.createSpyObj(
-                    'selectedObjectContextCapability',
-                    [
-                        'getParent'
-                    ]
-                );
-
-                selectedObject = domainObjectFactory({
-                    name: 'selectedObject',
-                    model: {
-                        name: 'selectedObject'
-                    },
-                    capabilities: {
-                        context: selectedObjectContextCapability
-                    }
-                });
-
-                currentParent = domainObjectFactory({
-                    name: 'currentParent'
-                });
-
-                selectedObjectContextCapability
-                    .getParent
-                    .and.returnValue(currentParent);
-
-                newParent = domainObjectFactory({
-                    name: 'newParent'
-                });
-
-                locationService = jasmine.createSpyObj(
-                    'locationService',
-                    [
-                        'getLocationFromUser'
-                    ]
-                );
-
-                locationServicePromise = jasmine.createSpyObj(
-                    'locationServicePromise',
-                    [
-                        'then'
-                    ]
-                );
-
-                locationService
-                    .getLocationFromUser
-                    .and.returnValue(locationServicePromise);
-
-                linkService = new MockLinkService();
-            });
-
-            describe("with context from context-action", function () {
-                beforeEach(function () {
-                    context = {
-                        domainObject: selectedObject
-                    };
-
-                    linkAction = new LinkAction(
-                        policyService,
-                        locationService,
-                        linkService,
-                        context
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(linkAction).toBeDefined();
-                });
-
-                describe("when performed it", function () {
-                    beforeEach(function () {
-                        linkAction.perform();
-                    });
-
-                    it("prompts for location", function () {
-                        expect(locationService.getLocationFromUser)
-                            .toHaveBeenCalledWith(
-                                "Link selectedObject To a New Location",
-                                "Link To",
-                                jasmine.any(Function),
-                                currentParent
-                            );
-                    });
-
-                    it("waits for location and handles cancellation by user", function () {
-                        expect(locationServicePromise.then)
-                            .toHaveBeenCalledWith(jasmine.any(Function), jasmine.any(Function));
-                    });
-
-                    it("links object to selected location", function () {
-                        locationServicePromise
-                            .then
-                            .calls.mostRecent()
-                            .args[0](newParent);
-
-                        expect(linkService.perform)
-                            .toHaveBeenCalledWith(selectedObject, newParent);
-                    });
-                });
-            });
-
-            describe("with context from drag-drop", function () {
-                beforeEach(function () {
-                    context = {
-                        selectedObject: selectedObject,
-                        domainObject: newParent
-                    };
-
-                    linkAction = new LinkAction(
-                        policyService,
-                        locationService,
-                        linkService,
-                        context
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(linkAction).toBeDefined();
-                });
-
-                it("performs link immediately", function () {
-                    linkAction.perform();
-                    expect(linkService.perform)
-                        .toHaveBeenCalledWith(selectedObject, newParent);
-                });
-            });
-        });
-    }
-);

platform/entanglement/test/services/LinkServiceSpec.js

@@ -1,215 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/LinkService',
-        '../DomainObjectFactory',
-        '../ControlledPromise'
-    ],
-    function (LinkService, domainObjectFactory, ControlledPromise) {
-
-        xdescribe("LinkService", function () {
-
-            var linkService,
-                mockPolicyService;
-
-            beforeEach(function () {
-                mockPolicyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                mockPolicyService.allow.and.returnValue(true);
-                linkService = new LinkService(mockPolicyService);
-            });
-
-            describe("validate", function () {
-
-                var object,
-                    parentCandidate,
-                    validate;
-
-                beforeEach(function () {
-                    object = domainObjectFactory({
-                        name: 'object'
-                    });
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate',
-                        capabilities: {
-                            composition: jasmine.createSpyObj(
-                                'composition',
-                                ['invoke', 'add']
-                            )
-                        }
-                    });
-                    validate = function () {
-                        return linkService.validate(object, parentCandidate);
-                    };
-                });
-
-                it("does not allow invalid parentCandidate", function () {
-                    parentCandidate = undefined;
-                    expect(validate()).toBe(false);
-                    parentCandidate = {};
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parent to be object", function () {
-                    parentCandidate.id = object.id = 'abc';
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parent that contains object", function () {
-                    object.id = 'abc';
-                    parentCandidate.id = 'xyz';
-                    parentCandidate.model.composition = ['abc'];
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parents without composition", function () {
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate'
-                    });
-                    object.id = 'abc';
-                    parentCandidate.id = 'xyz';
-                    parentCandidate.hasCapability.and.callFake(function (c) {
-                        return c !== 'composition';
-                    });
-                    expect(validate()).toBe(false);
-                });
-
-                describe("defers to policyService", function () {
-                    beforeEach(function () {
-                        object.id = 'abc';
-                        object.capabilities.type = { type: 'object' };
-                        parentCandidate.id = 'xyz';
-                        parentCandidate.capabilities.type = {
-                            type: 'parentCandidate'
-                        };
-                        parentCandidate.model.composition = [];
-                    });
-
-                    it("calls policy service with correct args", function () {
-                        validate();
-                        expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                            "composition",
-                            parentCandidate,
-                            object
-                        );
-                    });
-
-                    it("and returns false", function () {
-                        mockPolicyService.allow.and.returnValue(true);
-                        expect(validate()).toBe(true);
-                        expect(mockPolicyService.allow).toHaveBeenCalled();
-                    });
-
-                    it("and returns true", function () {
-                        mockPolicyService.allow.and.returnValue(false);
-                        expect(validate()).toBe(false);
-                        expect(mockPolicyService.allow).toHaveBeenCalled();
-                    });
-                });
-            });
-
-            describe("perform", function () {
-
-                var object,
-                    linkedObject,
-                    parentModel,
-                    parentObject,
-                    compositionPromise,
-                    addPromise,
-                    compositionCapability;
-
-                beforeEach(function () {
-                    compositionPromise = new ControlledPromise();
-                    addPromise = new ControlledPromise();
-                    compositionCapability = jasmine.createSpyObj(
-                        'compositionCapability',
-                        ['invoke', 'add']
-                    );
-                    compositionCapability.invoke.and.returnValue(compositionPromise);
-                    compositionCapability.add.and.returnValue(addPromise);
-                    parentModel = {
-                        composition: []
-                    };
-                    parentObject = domainObjectFactory({
-                        name: 'parentObject',
-                        model: parentModel,
-                        capabilities: {
-                            mutation: {
-                                invoke: function (mutator) {
-                                    mutator(parentModel);
-
-                                    return new ControlledPromise();
-                                }
-                            },
-                            composition: compositionCapability
-                        }
-                    });
-
-                    object = domainObjectFactory({
-                        name: 'object',
-                        id: 'xyz'
-                    });
-
-                    linkedObject = domainObjectFactory({
-                        name: 'object-link',
-                        id: 'xyz'
-                    });
-
-                });
-
-                it("adds to the parent's composition", function () {
-                    expect(compositionCapability.add).not.toHaveBeenCalled();
-                    linkService.perform(object, parentObject);
-                    expect(compositionCapability.add)
-                        .toHaveBeenCalledWith(object);
-                });
-
-                it("returns object representing new link", function () {
-                    var returnPromise, whenComplete;
-                    returnPromise = linkService.perform(object, parentObject);
-                    whenComplete = jasmine.createSpy('whenComplete');
-                    returnPromise.then(whenComplete);
-
-                    addPromise.resolve(linkedObject);
-                    compositionPromise.resolve([linkedObject]);
-                    expect(whenComplete).toHaveBeenCalledWith(linkedObject);
-                });
-
-                it("throws an error when performed on invalid inputs", function () {
-                    function perform() {
-                        linkService.perform(object, parentObject);
-                    }
-
-                    spyOn(linkService, 'validate');
-                    linkService.validate.and.returnValue(true);
-                    expect(perform).not.toThrow();
-                    linkService.validate.and.returnValue(false);
-                    expect(perform).toThrow();
-                });
-            });
-        });
-    }
-);

platform/features/clock/bundle.js

@@ -181,7 +181,7 @@ define([
                         ],
                         "category": "contextual",
                         "name": "Stop",
-                        "cssClass": "icon-box-round-corners",
+                        "cssClass": "icon-box",
                         "priority": "preferred"
                     }
                 ],
@@ -282,7 +282,7 @@ define([
                             }
                         ],
                         "model": {
-                            "timerFormat": "DDD hh:mm:ss"
+                            "timerFormat": "long"
                         }
                     }
                 ],

platform/features/clock/test/controllers/TimerControllerSpec.js

@@ -101,7 +101,7 @@ define(
                     name: "Pause"
                 });
                 mockStop.getMetadata.and.returnValue({
-                    cssClass: "icon-box-round-corners",
+                    cssClass: "icon-box",
                     name: "Stop"
                 });
                 mockScope.domainObject = mockDomainObject;

platform/features/hyperlink/bundle.js

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2009-2016, 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.
+ *****************************************************************************/
+
+define([
+    './src/HyperlinkController',
+    './res/templates/hyperlink.html'
+], function (
+    HyperlinkController,
+    hyperlinkTemplate
+) {
+    return {
+        name: "platform/features/hyperlink",
+        definition: {
+            "name": "Hyperlink",
+            "description": "Insert a hyperlink to reference a link",
+            "extensions": {
+                "types": [
+                    {
+                        "key": "hyperlink",
+                        "name": "Hyperlink",
+                        "cssClass": "icon-chain-links",
+                        "description": "A hyperlink to redirect to a different link",
+                        "features": ["creation"],
+                        "properties": [
+                            {
+                                "key": "url",
+                                "name": "URL",
+                                "control": "textfield",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            },
+
+                            {
+                                "key": "displayText",
+                                "name": "Text to Display",
+                                "control": "textfield",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            },
+                            {
+                                "key": "displayFormat",
+                                "name": "Display Format",
+                                "control": "select",
+                                "options": [
+                                    {
+                                        "name": "Link",
+                                        "value": "link"
+                                    },
+                                    {
+                                        "value": "button",
+                                        "name": "Button"
+                                    }
+                                ],
+                                "cssClass": "l-inline"
+                            },
+                            {
+                                "key": "openNewTab",
+                                "name": "Tab to Open Hyperlink",
+                                "control": "select",
+                                "options": [
+                                    {
+                                        "name": "Open in this tab",
+                                        "value": "thisTab"
+                                    },
+                                    {
+                                        "value": "newTab",
+                                        "name": "Open in a new tab"
+                                    }
+                                ],
+                                "cssClass": "l-inline"
+
+                            }
+                        ],
+                        "model": {
+                            "displayFormat": "link",
+                            "openNewTab": "thisTab",
+                            "removeTitle": true
+                        }
+
+                    }
+                ],
+                "views": [
+                    {
+                        "key": "hyperlink",
+                        "type": "hyperlink",
+                        "name": "Hyperlink Display",
+                        "template": hyperlinkTemplate,
+                        "editable": false
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "HyperlinkController",
+                        "implementation": HyperlinkController,
+                        "depends": ["$scope"]
+                    }
+                ]
+            }
+        }
+    };
+});

platform/features/hyperlink/res/templates/hyperlink.html

@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2020, United States Government
+ Open MCT, Copyright (c) 2014-2021, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -19,34 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
-<template>
-<li class="c-inspect-properties__row">
-    <div class="c-inspect-properties__label">
-        {{ label }}
-    </div>
-    <div class="c-inspect-properties__value">
-        {{ value }}
-    </div>
-</li>
-</template>
-
-<script>
-
-export default {
-    props: {
-        label: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        value: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
-    }
-};
-</script>
+<a class="c-hyperlink u-links" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
+   ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
+   ng-class="{
+   'c-hyperlink--button u-fills-container' : hyperlink.isButton(),
+   'c-hyperlink--link' : !hyperlink.isButton() }">
+    <span class="c-hyperlink__label">{{domainObject.getModel().displayText}}</span>
+</a>

platform/features/hyperlink/src/HyperlinkController.js

@@ -0,0 +1,61 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2009-2016, 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.
+ *****************************************************************************/
+
+/**
+ * This bundle adds the Hyperlink object type, which can be used to add hyperlinks as a domain Object type
+ and into display Layouts as either a button or link that can be chosen to open in either the same tab or
+ create a new tab to open the link in
+ * @namespace platform/features/hyperlink
+ */
+define(
+    [],
+    function () {
+        function HyperlinkController($scope) {
+            this.$scope = $scope;
+        }
+
+        /**Function to analyze the location in which to open the hyperlink
+        @returns true if the hyperlink is chosen to open in a different tab, false if the same tab
+        **/
+        HyperlinkController.prototype.openNewTab = function () {
+            if (this.$scope.domainObject.getModel().openNewTab === "thisTab") {
+                return false;
+            } else {
+                return true;
+            }
+        };
+
+        /**Function to specify the format in which the hyperlink should be created
+        @returns true if the hyperlink is chosen to be created as a button, false if a link
+        **/
+        HyperlinkController.prototype.isButton = function () {
+            if (this.$scope.domainObject.getModel().displayFormat === "link") {
+                return false;
+            }
+
+            return true;
+        };
+
+        return HyperlinkController;
+    }
+
+);

platform/features/hyperlink/test/HyperlinkControllerSpec.js

@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2009-2016, 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.
+ *****************************************************************************/
+
+define(
+    ["../src/HyperlinkController"],
+    function (HyperlinkController) {
+
+        describe("The controller for hyperlinks", function () {
+            var domainObject,
+                controller,
+                scope;
+            beforeEach(function () {
+                scope = jasmine.createSpyObj(
+                    "$scope",
+                    ["domainObject"]
+                );
+                domainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    ["getModel"]
+                );
+                scope.domainObject = domainObject;
+                controller = new HyperlinkController(scope);
+            });
+            it("knows when it should open a new tab", function () {
+                scope.domainObject.getModel.and.returnValue({
+                    "displayFormat": "link",
+                    "openNewTab": "newTab",
+                    "showTitle": false
+                }
+                );
+                controller = new HyperlinkController(scope);
+                expect(controller.openNewTab())
+                    .toBe(true);
+            });
+            it("knows when it is a button", function () {
+                scope.domainObject.getModel.and.returnValue({
+                    "displayFormat": "button",
+                    "openNewTab": "thisTab",
+                    "showTitle": false
+                }
+                );
+                controller = new HyperlinkController(scope);
+                expect(controller.isButton())
+                    .toEqual(true);
+            });
+            it("knows when it should open in the same tab", function () {
+                scope.domainObject.getModel.and.returnValue({
+                    "displayFormat": "link",
+                    "openNewTab": "thisTab",
+                    "showTitle": false
+                }
+                );
+                controller = new HyperlinkController(scope);
+                expect(controller.openNewTab())
+                    .toBe(false);
+            });
+            it("knows when it is a link", function () {
+                scope.domainObject.getModel.and.returnValue({
+                    "displayFormat": "link",
+                    "openNewTab": "thisTab",
+                    "showTitle": false
+                }
+                );
+                controller = new HyperlinkController(scope);
+                expect(controller.openNewTab())
+                    .toBe(false);
+            });
+        });
+    }
+);

platform/features/timeline/README.md

@@ -0,0 +1,70 @@
+This bundle provides the Timeline domain object type, as well
+as other associated domain object types and relevant views.
+
+# Implementation notes
+
+## Model Properties
+
+The properties below record properties relevant to using and
+understanding timelines based on their JSON representation.
+Additional common properties, such as `modified`
+or `persisted` timestamps, may also be present.
+
+### Timeline Model
+
+A timeline's model looks like:
+
+```
+{
+    "type": "timeline",
+    "start": {
+        "timestamp": <number> (milliseconds since epoch),
+        "epoch": <string> (currently, always "SET")
+    },
+    "capacity": <number> (optional; battery capacity in watt-hours)
+    "composition": <string[]> (array of identifiers for contained objects)
+}
+```
+
+The identifiers in a timeline's `composition` field should refer to
+other Timeline objects, or to Activity objects.
+
+### Activity Model
+
+An activity's model looks like:
+
+```
+{
+    "type": "activity",
+    "start": {
+        "timestamp": <number> (milliseconds since epoch),
+        "epoch": <string> (currently, always "SET")
+    },
+    "duration": {
+        "timestamp": <number> (duration of this activity, in milliseconds)
+        "epoch": "SET" (this is ignored)
+    },
+    "relationships": {
+        "modes": <string[]> (array of applicable Activity Mode ids)
+    },
+    "link": <string> (optional; URL linking to associated external resource)
+    "composition": <string[]> (array of identifiers for contained objects)
+}
+```
+
+The identifiers in a timeline's `composition` field should only refer to
+other Activity objects.
+
+### Activity Mode Model
+
+An activity mode's model looks like:
+
+```
+{
+    "type": "mode",
+    "resources": {
+        "comms": <number> (communications utilization, in Kbps)
+        "power": <number> (power utilization, in watts)
+    }
+}
+```

platform/features/timeline/bundle.js

@@ -20,40 +20,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import HyperlinkLayout from './HyperlinkLayout.vue';
-import Vue from 'vue';
-
-export default function HyperlinkProvider(openmct) {
-
+define([
+    "./res/templates/deprecated-timeline-message.html"
+], function (
+    deprecatedTimelineMessage
+) {
     return {
-        key: 'hyperlink.view',
-        name: 'Hyperlink',
-        cssClass: 'icon-chain-links',
-        canView(domainObject) {
-            return domainObject.type === 'hyperlink';
-        },
-
-        view: function (domainObject) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            HyperlinkLayout
-                        },
-                        provide: {
-                            domainObject
-                        },
-                        template: '<hyperlink-layout></hyperlink-layout>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+        name: 'platform/features/timeline',
+        definition: {
+            extensions: {
+                types: [
+                    {
+                        key: "timeline",
+                        name: "Timeline",
+                        description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
+                        priority: 502
+                    }
+                ],
+                views: [
+                    {
+                        key: "timeline",
+                        name: "Timeline",
+                        type: "timeline",
+                        description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
+                        template: deprecatedTimelineMessage
+                    }
+                ]
+            }
         }
     };
-}
+});

platform/features/timeline/res/templates/deprecated-timeline-message.html

@@ -0,0 +1,10 @@
+<div>
+    Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported.
+</div>
+<div>
+    Please open an issue in the
+    <a href="https://github.com/nasa/openmct/issues" target="_blank">
+        Open MCT Issue tracker
+    </a>
+    if you have any questions about the timeline plugin.
+</div>

src/MCT.js

@@ -47,6 +47,7 @@ define([
     './plugins/licenses/plugin',
     './plugins/remove/plugin',
     './plugins/move/plugin',
+    './plugins/linkAction/plugin',
     './plugins/duplicate/plugin',
     'vue'
 ], function (
@@ -76,6 +77,7 @@ define([
     LicensesPlugin,
     RemoveActionPlugin,
     MoveActionPlugin,
+    LinkActionPlugin,
     DuplicateActionPlugin,
     Vue
 ) {
@@ -122,7 +124,6 @@ define([
             }
         };
 
-        this.destroy = this.destroy.bind(this);
         /**
          * Tracks current selection state of the application.
          * @private
@@ -254,6 +255,7 @@ define([
         this.status = new api.StatusAPI(this);
 
         this.router = new ApplicationRouter(this);
+        this.forms = new api.FormsAPI.default(this);
 
         this.branding = BrandingAPI.default;
 
@@ -263,19 +265,19 @@ define([
         // Plugins that are installed by default
 
         this.install(this.plugins.Plot());
-        this.install(this.plugins.TelemetryTable.default());
+        this.install(this.plugins.TelemetryTable());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());
         this.install(LicensesPlugin.default());
         this.install(RemoveActionPlugin.default());
         this.install(MoveActionPlugin.default());
+        this.install(LinkActionPlugin.default());
         this.install(DuplicateActionPlugin.default());
         this.install(this.plugins.FolderView());
         this.install(this.plugins.Tabs());
         this.install(ImageryPlugin.default());
         this.install(this.plugins.FlexibleLayout());
         this.install(this.plugins.GoToOriginalAction());
-        this.install(this.plugins.OpenInNewTabAction());
         this.install(this.plugins.ImportExport());
         this.install(this.plugins.WebPage());
         this.install(this.plugins.Condition());
@@ -284,10 +286,8 @@ define([
         this.install(this.plugins.NotificationIndicator());
         this.install(this.plugins.NewFolderAction());
         this.install(this.plugins.ViewDatumAction());
-        this.install(this.plugins.ViewLargeAction());
         this.install(this.plugins.ObjectInterceptors());
         this.install(this.plugins.NonEditableFolder());
-        this.install(this.plugins.DeviceClassifier());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -437,8 +437,6 @@ define([
                     Browse(this);
                 }
 
-                window.addEventListener('beforeunload', this.destroy);
-
                 this.router.start();
                 this.emit('start');
             }.bind(this));
@@ -462,7 +460,6 @@ define([
     };
 
     MCT.prototype.destroy = function () {
-        window.removeEventListener('beforeunload', this.destroy);
         this.emit('destroy');
         this.router.destroy();
     };

src/adapter/actions/LegacyContextMenuAction.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import _ from 'lodash';
 const INSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "link", "locate", "move", "link"];
-const OUTSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "properties", "move", "link", "remove", "locate"];
+const OUTSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "move", "link", "remove", "locate"];
 
 export default class LegacyContextMenuAction {
     constructor(openmct, LegacyAction) {

src/adapter/bundle.js

@@ -36,7 +36,8 @@ define([
     './views/installLegacyViews',
     './policies/LegacyCompositionPolicyAdapter',
     './actions/LegacyActionAdapter',
-    './services/LegacyPersistenceAdapter'
+    './services/LegacyPersistenceAdapter',
+    './services/ExportImageService'
 ], function (
     ActionDialogDecorator,
     AdapterCapability,
@@ -53,7 +54,8 @@ define([
     installLegacyViews,
     legacyCompositionPolicyAdapter,
     LegacyActionAdapter,
-    LegacyPersistenceAdapter
+    LegacyPersistenceAdapter,
+    ExportImageService
 ) {
     return {
         name: 'src/adapter',
@@ -82,6 +84,13 @@ define([
                             "identifierService",
                             "cacheService"
                         ]
+                    },
+                    {
+                        "key": "exportImageService",
+                        "implementation": ExportImageService,
+                        "depends": [
+                            "dialogService"
+                        ]
                     }
                 ],
                 components: [

src/adapter/runs/LegacyTelemetryProvider.js

@@ -173,11 +173,10 @@ define([
         const limitEvaluator = oldObject.getCapability("limit");
 
         return {
-            limits: () => {
-                return limitEvaluator.limits.then !== undefined
-                    ? limitEvaluator.limits()
-                    : Promise.resolve(limitEvaluator.limits());
+            limits: function () {
+                return limitEvaluator.limits();
             }
+
         };
     };
 

src/adapter/services/ExportImageService.js

@@ -0,0 +1,186 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+/**
+ * Module defining ExportImageService. Created by hudsonfoo on 09/02/16
+ */
+define(
+    [
+        "html2canvas",
+        "saveAs"
+    ],
+    function (
+        html2canvas,
+        { saveAs }
+    ) {
+
+        /**
+         * The export image service will export any HTML node to
+         * JPG, or PNG.
+         * @param {object} dialogService
+         * @constructor
+         */
+        function ExportImageService(dialogService) {
+            this.dialogService = dialogService;
+            this.exportCount = 0;
+        }
+
+        /**
+         * Converts an HTML element into a PNG or JPG Blob.
+         * @private
+         * @param {node} element that will be converted to an image
+         * @param {string} type of image to convert the element to.
+         * @returns {promise}
+         */
+        ExportImageService.prototype.renderElement = function (element, imageType, className) {
+            const dialogService = this.dialogService;
+
+            const dialog = dialogService.showBlockingMessage({
+                title: "Capturing...",
+                hint: "Capturing an image",
+                unknownProgress: true,
+                severity: "info",
+                delay: true
+            });
+
+            let mimeType = "image/png";
+            if (imageType === "jpg") {
+                mimeType = "image/jpeg";
+            }
+
+            let exportId = undefined;
+            let oldId = undefined;
+            if (className) {
+                exportId = 'export-element-' + this.exportCount;
+                this.exportCount++;
+                oldId = element.id;
+                element.id = exportId;
+            }
+
+            return html2canvas(element, {
+                onclone: function (document) {
+                    if (className) {
+                        const clonedElement = document.getElementById(exportId);
+                        clonedElement.classList.add(className);
+                    }
+
+                    element.id = oldId;
+                },
+                removeContainer: true // Set to false to debug what html2canvas renders
+            }).then(function (canvas) {
+                dialog.dismiss();
+
+                return new Promise(function (resolve, reject) {
+                    return canvas.toBlob(resolve, mimeType);
+                });
+            }, function (error) {
+                console.log('error capturing image', error);
+                dialog.dismiss();
+                const errorDialog = dialogService.showBlockingMessage({
+                    title: "Error capturing image",
+                    severity: "error",
+                    hint: "Image was not captured successfully!",
+                    options: [{
+                        label: "OK",
+                        callback: function () {
+                            errorDialog.dismiss();
+                        }
+                    }]
+                });
+            });
+        };
+
+        /**
+         * Takes a screenshot of a DOM node and exports to JPG.
+         * @param {node} element to be exported
+         * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
+         * @returns {promise}
+         */
+        ExportImageService.prototype.exportJPG = function (element, filename, className) {
+            const processedFilename = replaceDotsWithUnderscores(filename);
+
+            return this.renderElement(element, "jpg", className).then(function (img) {
+                saveAs(img, processedFilename);
+            });
+        };
+
+        /**
+         * Takes a screenshot of a DOM node and exports to PNG.
+         * @param {node} element to be exported
+         * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
+         * @returns {promise}
+         */
+        ExportImageService.prototype.exportPNG = function (element, filename, className) {
+            const processedFilename = replaceDotsWithUnderscores(filename);
+
+            return this.renderElement(element, "png", className).then(function (img) {
+                saveAs(img, processedFilename);
+            });
+        };
+
+        /**
+         * Takes a screenshot of a DOM node in PNG format.
+         * @param {node} element to be exported
+         * @param {string} filename the exported image
+         * @returns {promise}
+         */
+
+        ExportImageService.prototype.exportPNGtoSRC = function (element, className) {
+            return this.renderElement(element, "png", className);
+        };
+
+        function replaceDotsWithUnderscores(filename) {
+            const regex = /\./gi;
+
+            return filename.replace(regex, '_');
+        }
+
+        /**
+         * canvas.toBlob() not supported in IE < 10, Opera, and Safari. This polyfill
+         * implements the method in browsers that would not otherwise support it.
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
+         */
+        function polyfillToBlob() {
+            if (!HTMLCanvasElement.prototype.toBlob) {
+                Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
+                    value: function (callback, mimeType, quality) {
+                        const binStr = atob(this.toDataURL(mimeType, quality).split(',')[1]);
+                        const len = binStr.length;
+                        const arr = new Uint8Array(len);
+
+                        for (let i = 0; i < len; i++) {
+                            arr[i] = binStr.charCodeAt(i);
+                        }
+
+                        callback(new Blob([arr], {type: mimeType || "image/png"}));
+                    }
+                });
+            }
+        }
+
+        polyfillToBlob();
+
+        return ExportImageService;
+    }
+);

src/api/actions/ActionCollection.js

@@ -46,6 +46,8 @@ class ActionCollection extends EventEmitter {
             this._observeObjectPath();
             this.openmct.editor.on('isEditing', this._updateActions);
         }
+
+        this._initializeActions();
     }
 
     disable(actionKeys) {
@@ -154,10 +156,19 @@ class ActionCollection extends EventEmitter {
         });
     }
 
+    _initializeActions() {
+        Object.keys(this.applicableActions).forEach(key => {
+            this.applicableActions[key].callBack = () => {
+                return this.applicableActions[key].invoke(this.objectPath, this.view);
+            };
+        });
+    }
+
     _updateActions() {
         let newApplicableActions = this.openmct.actions._applicableActions(this.objectPath, this.view);
 
         this.applicableActions = this._mergeOldAndNewActions(this.applicableActions, newApplicableActions);
+        this._initializeActions();
         this._update();
     }
 

src/api/actions/ActionsAPI.js

@@ -34,7 +34,7 @@ class ActionsAPI extends EventEmitter {
         this._groupOrder = ['windowing', 'undefined', 'view', 'action', 'json'];
 
         this.register = this.register.bind(this);
-        this.getActionsCollection = this.getActionsCollection.bind(this);
+        this.get = this.get.bind(this);
         this._applicableActions = this._applicableActions.bind(this);
         this._updateCachedActionCollections = this._updateCachedActionCollections.bind(this);
     }
@@ -43,14 +43,12 @@ class ActionsAPI extends EventEmitter {
         this._allActions[actionDefinition.key] = actionDefinition;
     }
 
-    getAction(key) {
-        return this._allActions[key];
-    }
-
-    getActionsCollection(objectPath, view) {
+    get(objectPath, view) {
         if (view) {
+
             return this._getCachedActionCollection(objectPath, view) || this._newActionCollection(objectPath, view, true);
         } else {
+
             return this._newActionCollection(objectPath, view, true);
         }
     }
@@ -59,24 +57,25 @@ class ActionsAPI extends EventEmitter {
         this._groupOrder = groupArray;
     }
 
+    _get(objectPath, view) {
+        let actionCollection = this._newActionCollection(objectPath, view);
+
+        this._actionCollections.set(view, actionCollection);
+        actionCollection.on('destroy', this._updateCachedActionCollections);
+
+        return actionCollection;
+    }
+
     _getCachedActionCollection(objectPath, view) {
-        return this._actionCollections.get(view);
+        let cachedActionCollection = this._actionCollections.get(view);
+
+        return cachedActionCollection;
     }
 
     _newActionCollection(objectPath, view, skipEnvironmentObservers) {
         let applicableActions = this._applicableActions(objectPath, view);
 
-        const actionCollection = new ActionCollection(applicableActions, objectPath, view, this._openmct, skipEnvironmentObservers);
-        if (view) {
-            this._cacheActionCollection(view, actionCollection);
-        }
-
-        return actionCollection;
-    }
-
-    _cacheActionCollection(view, actionCollection) {
-        this._actionCollections.set(view, actionCollection);
-        actionCollection.on('destroy', this._updateCachedActionCollections);
+        return new ActionCollection(applicableActions, objectPath, view, this._openmct, skipEnvironmentObservers);
     }
 
     _updateCachedActionCollections(key) {

src/api/actions/ActionsAPISpec.js

@@ -106,7 +106,7 @@ describe('The Actions API', () => {
         it("adds action to ActionsAPI", () => {
             actionsAPI.register(mockAction);
 
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
             let action = actionCollection.getActionsObject()[mockAction.key];
 
             expect(action.key).toEqual(mockAction.key);
@@ -121,21 +121,21 @@ describe('The Actions API', () => {
         });
 
         it("returns an ActionCollection when invoked with an objectPath only", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
+            let actionCollection = actionsAPI.get(mockObjectPath);
             let instanceOfActionCollection = actionCollection instanceof ActionCollection;
 
             expect(instanceOfActionCollection).toBeTrue();
         });
 
         it("returns an ActionCollection when invoked with an objectPath and view", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
             let instanceOfActionCollection = actionCollection instanceof ActionCollection;
 
             expect(instanceOfActionCollection).toBeTrue();
         });
 
         it("returns relevant actions when invoked with objectPath only", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
+            let actionCollection = actionsAPI.get(mockObjectPath);
             let action = actionCollection.getActionsObject()[mockObjectPathAction.key];
 
             expect(action.key).toEqual(mockObjectPathAction.key);
@@ -143,7 +143,7 @@ describe('The Actions API', () => {
         });
 
         it("returns relevant actions when invoked with objectPath and view", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
             let action = actionCollection.getActionsObject()[mockAction.key];
 
             expect(action.key).toEqual(mockAction.key);

src/api/api.js

@@ -21,41 +21,44 @@
  *****************************************************************************/
 
 define([
-    './time/TimeAPI',
-    './objects/ObjectAPI',
-    './composition/CompositionAPI',
-    './types/TypeRegistry',
-    './telemetry/TelemetryAPI',
-    './indicators/IndicatorAPI',
-    './notifications/NotificationAPI',
-    './Editor',
-    './menu/MenuAPI',
     './actions/ActionsAPI',
-    './status/StatusAPI'
+    './composition/CompositionAPI',
+    './Editor',
+    './forms/FormsAPI',
+    './indicators/IndicatorAPI',
+    './menu/MenuAPI',
+    './notifications/NotificationAPI',
+    './objects/ObjectAPI',
+    './status/StatusAPI',
+    './telemetry/TelemetryAPI',
+    './time/TimeAPI',
+    './types/TypeRegistry'
 ], function (
-    TimeAPI,
-    ObjectAPI,
-    CompositionAPI,
-    TypeRegistry,
-    TelemetryAPI,
-    IndicatorAPI,
-    NotificationAPI,
-    EditorAPI,
-    MenuAPI,
     ActionsAPI,
-    StatusAPI
+    CompositionAPI,
+    EditorAPI,
+    FormsAPI,
+    IndicatorAPI,
+    MenuAPI,
+    NotificationAPI,
+    ObjectAPI,
+    StatusAPI,
+    TelemetryAPI,
+    TimeAPI,
+    TypeRegistry
 ) {
     return {
-        TimeAPI: TimeAPI,
-        ObjectAPI: ObjectAPI,
-        CompositionAPI: CompositionAPI,
-        TypeRegistry: TypeRegistry,
-        TelemetryAPI: TelemetryAPI,
-        IndicatorAPI: IndicatorAPI,
-        NotificationAPI: NotificationAPI.default,
-        EditorAPI: EditorAPI,
-        MenuAPI: MenuAPI.default,
         ActionsAPI: ActionsAPI.default,
-        StatusAPI: StatusAPI.default
+        CompositionAPI: CompositionAPI,
+        EditorAPI: EditorAPI,
+        FormsAPI: FormsAPI,
+        IndicatorAPI: IndicatorAPI,
+        MenuAPI: MenuAPI.default,
+        NotificationAPI: NotificationAPI.default,
+        ObjectAPI: ObjectAPI,
+        StatusAPI: StatusAPI.default,
+        TelemetryAPI: TelemetryAPI,
+        TimeAPI: TimeAPI,
+        TypeRegistry: TypeRegistry,
     };
 });

src/api/forms/CreateWizard.js

@@ -0,0 +1,135 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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.
+ *****************************************************************************/
+
+export default class CreateWizard {
+    constructor(openmct, domainObject, parent) {
+        this.openmct = openmct;
+
+        this.domainObject = domainObject;
+        this.type = openmct.types.get(domainObject.type);
+
+        this.model = domainObject;
+        this.parent = parent;
+        this.properties = this.type.definition.form || [];
+    }
+
+    addNotes(sections) {
+        const row = {
+            control: 'textarea',
+            cssClass: 'l-textarea-sm',
+            key: 'notes',
+            name: 'Notes',
+            required: false,
+            value: this.domainObject.notes
+        };
+
+        sections.forEach(section => {
+            if (section.name !== 'Properties') {
+                return;
+            }
+
+            section.rows.unshift(row);
+        });
+    }
+
+    addTitle(sections) {
+        const row = {
+            control: 'textfield',
+            cssClass: 'l-input-lg',
+            key: 'name',
+            name: 'Title',
+            pattern: `\\S+`,
+            required: true,
+            value: this.domainObject.name
+        };
+
+        sections.forEach(section => {
+            if (section.name !== 'Properties') {
+                return;
+            }
+
+            section.rows.unshift(row);
+        });
+    }
+
+    /**
+     * Get the form model for this wizard; this is a description
+     * that will be rendered to an HTML form. See the
+     * platform/forms bundle
+     * @param {boolean} includeLocation if true, a 'location' section
+     * will be included that will allow the user to select the location
+     * of the newly created object, otherwise the .location property of
+     * the model will be used.
+     */
+    getFormStructure(includeLocation) {
+        let sections = [];
+        let domainObject = this.domainObject;
+        let self = this;
+
+        sections.push({
+            name: 'Properties',
+            rows: this.properties.map(property => {
+                    const row = JSON.parse(JSON.stringify(property));
+                    row.value = this.getValue(row);
+
+                    return row;
+                }).filter(row => row && row.control)
+        });
+
+        this.addNotes(sections);
+        this.addTitle(sections);
+
+        // Ensure there is always a 'save in' section
+        if (includeLocation) {
+            function validateLocation(object, data) {
+                return self.openmct.composition.checkPolicy(data.value, object);
+            }
+
+            sections.push({
+                name: 'Location',
+                cssClass: 'grows',
+                rows: [{
+                    name: 'Save In',
+                    cssClass: 'grows',
+                    control: 'locator',
+                    domainObject,
+                    required: true,
+                    parent: this.parent,
+                    validate: validateLocation.bind(this),
+                    key: 'location'
+                }]
+            });
+        }
+
+        return {
+            sections
+        };
+    }
+
+    getValue(row) {
+        if (row.property) {
+            return row.property.reduce((acc, property) => acc && acc[property], this.domainObject);
+        } else {
+            return this.domainObject[row.key];
+        }
+    }
+}

src/api/forms/FormsAPI.js

@@ -0,0 +1,159 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 EditPropertiesAction from './actions/EditPropertiesAction';
+import FormProperties from './components/FormProperties.vue';
+
+import Vue from 'vue';
+
+export const CONTROLS = [
+    "autocomplete",
+    "button",
+    "checkbox",
+    "color",
+    "composite",
+    "datetime",
+    "dialog-button",
+    "file-input",
+    "menu-button",
+    "numberfield",
+    "radio",
+    "select",
+    "textarea",
+    "textfield"
+];
+
+export default class FormsAPI {
+    constructor(openmct) {
+        this.openmct = openmct;
+        this.controls = {};
+
+        this.init();
+    }
+
+    addControl(name, actions) {
+        const control = this.controls[name];
+        if (control) {
+           this.openmct.notifications.error(`Error: provided form control '${name}', already exists`);
+
+           return;
+        }
+
+        this.controls[name] = actions;
+    }
+
+    getAllControls() {
+        return this.controls;
+    }
+
+    getControl(name) {
+        const control = this.controls[name];
+        if (control) {
+            console.error(`Error: form control '${name}', does not exist`);
+        }
+
+        return control;
+    }
+
+    showForm(formStructure, options) {
+        const changes = {};
+        let overlay;
+
+        let parentDomainObject = options.parentDomainObject || {};
+        const domainObject = options.domainObject;
+        const onSave = () => {
+            overlay.dismiss();
+
+            if(options.onSave) {
+                options.onSave(domainObject, changes, parentDomainObject);
+            }
+        };
+
+        const onDismiss = () => {
+            overlay.dismiss();
+
+            if (options.onDismiss) {
+                options.onDismiss();
+            };
+        };
+
+        const vm = new Vue({
+            components: { FormProperties },
+            provide: {
+                openmct: this.openmct,
+                domainObject
+            },
+            data() {
+                return {
+                    formStructure,
+                    onChange,
+                    onDismiss,
+                    onSave
+                };
+            },
+            template: '<FormProperties :model="formStructure" @onChange="onChange" @onDismiss="onDismiss" @onSave="onSave"></FormProperties>'
+        }).$mount();
+
+        overlay = this.openmct.overlays.overlay({
+            element: vm.$el,
+            size: 'small',
+            onDestroy: () => vm.$destroy()
+        });
+
+        function onChange(data) {
+            if (options.onChange) {
+                options.onChange(data);
+            }
+
+            if (data.model) {
+                const property = data.model.property;
+                let key = data.model.key;
+                if (key === 'location') {
+                    parentDomainObject = data.value;
+                }
+
+                if (property && property.length) {
+                    key = property.join('.');
+                }
+
+                changes[key] = data.value;
+            }
+        }
+    }
+
+    // Private methods
+
+    /**
+     * @private
+     */
+    _addDefaultFormControls() {
+        CONTROLS.forEach(control => {
+            this.addControl(control);
+        });
+    }
+
+    // Init
+    init() {
+        this.openmct.actions.register(new EditPropertiesAction(this.openmct));
+
+        this._addDefaultFormControls();
+    }
+}

src/api/forms/actions/CreateAction.js

@@ -0,0 +1,131 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 PropertiesAction from './PropertiesAction';
+import CreateWizard from '../CreateWizard';
+
+import uuid from 'uuid';
+
+export default class CreateAction extends PropertiesAction {
+    constructor(openmct, type, parentDomainObject) {
+        super(openmct);
+
+        this.type = type;
+        this.parentDomainObject = parentDomainObject;
+    }
+
+    invoke() {
+        this._showCreateForm(this.type);
+    }
+
+    // Private methods
+
+    async _onSave(domainObject, changes, parentDomainObject) {
+        Object.entries(changes).forEach(([key, value]) => {
+            const properties = key.split('.');
+            let object = this.domainObject;
+            const propertiesLength = properties.length;
+            properties.forEach((property, index) => {
+                const isComplexProperty = propertiesLength > 1 && index != propertiesLength - 1;
+                if (isComplexProperty && object[property] !== null) {
+                    object = object[property];
+                } else {
+                    object[property] = value;
+                }
+            });
+
+            object = value;
+        });
+
+        this.domainObject.modified = Date.now();
+        this.domainObject.location = this.openmct.objects.makeKeyString(parentDomainObject.identifier);
+        this.domainObject.identifier.namespace = parentDomainObject.identifier.namespace;
+
+        // Show saving progress dialog
+        let dialog = this.openmct.overlays.progressDialog({
+            progressPerc: 'unknown',
+            message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
+            iconClass: 'info',
+            title: 'Saving'
+        });
+
+        const success = await this.openmct.objects.save(this.domainObject);
+        if (success) {
+            const compositionCollection = await openmct.composition.get(parentDomainObject);
+            compositionCollection.add(this.domainObject);
+
+            this._navigateAndEdit(this.domainObject);
+
+            this.openmct.notifications.info('Save successful');
+        } else {
+            this.openmct.notifications.error('Error saving objects');
+            console.error(error);
+        }
+        dialog.dismiss();
+    }
+
+    async _navigateAndEdit(domainObject) {
+        const objectPath = await this.openmct.objects.getOriginalPath(domainObject.identifier);
+
+        const url = '#/browse/' + objectPath
+            .map(object => object && this.openmct.objects.makeKeyString(object.identifier.key))
+            .reverse()
+            .join('/');
+
+        window.location.href = url;
+
+        const objectView = openmct.objectViews.get(domainObject, objectPath)[0];
+        const canEdit = objectView && objectView.canEdit && objectView.canEdit(domainObject, objectPath);
+        if (canEdit) {
+            openmct.editor.edit();
+        }
+    }
+
+    _showCreateForm(type) {
+        const typeDefinition = this.openmct.types.get(type);
+        const definition = typeDefinition.definition;
+        const domainObject = {
+            name: `Unnamed ${definition.name}`,
+            type,
+            identifier: {
+                key: uuid(),
+                namespace: this.parentDomainObject.identifier.namespace
+            }
+        };
+
+        this.domainObject = domainObject;
+
+        if (definition.initialize) {
+            definition.initialize(domainObject);
+        }
+
+        const createWizard = new CreateWizard(this.openmct, domainObject, this.parentDomainObject);
+        const formStructure = createWizard.getFormStructure(true);
+        formStructure.title = 'Create a New ' + definition.name;
+
+        const options = {
+            domainObject,
+            onSave: this._onSave.bind(this)
+        };
+
+        this.openmct.forms.showForm(formStructure, options);
+    }
+}

src/api/forms/actions/EditPropertiesAction.js

@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 PropertiesAction from './PropertiesAction';
+import CreateWizard from '../CreateWizard';
+export default class EditPropertiesAction extends PropertiesAction {
+    constructor(openmct) {
+        super(openmct);
+
+        this.name = 'Edit Properties...';
+        this.key = 'properties';
+        this.description = 'Edit properties of this object.';
+        this.cssClass = 'major icon-pencil';
+        this.hideInDefaultMenu = true;
+        this.group = 'action';
+        this.priority = 10;
+        this.formProperties = {}
+    }
+
+    appliesTo(objectPath) {
+        const definition = this._getTypeDefinition(objectPath[0].type);
+
+        return definition && definition.creatable;
+    }
+
+    invoke(objectPath) {
+        this._showEditForm(objectPath);
+    }
+
+    // Private methods
+
+    async _onSave(domainObject, changes, parentDomainObject) {
+        Object.entries(changes).forEach(([key, value]) => {
+            const properties = key.split('.');
+            let object = this.domainObject;
+            const propertiesLength = properties.length;
+            properties.forEach((property, index) => {
+                const isComplexProperty = propertiesLength > 1 && index != propertiesLength - 1;
+                if (isComplexProperty && object[property] !== null) {
+                    object = object[property];
+                } else {
+                    object[property] = value;
+                }
+            });
+
+            object = value;
+        });
+
+        this.domainObject.modified = Date.now();
+
+        // Show saving progress dialog
+        let dialog = this.openmct.overlays.progressDialog({
+            progressPerc: 'unknown',
+            message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
+            iconClass: 'info',
+            title: 'Saving'
+        });
+
+        const success = await this.openmct.objects.save(this.domainObject);
+        if (success) {
+            this.openmct.notifications.info('Save successful');
+        } else {
+            this.openmct.notifications.error('Error saving objects');
+            console.error(error);
+        }
+
+        dialog.dismiss();
+    }
+
+    _showEditForm(objectPath) {
+        this.domainObject = objectPath[0];
+
+        const createWizard = new CreateWizard(this.openmct, this.domainObject, objectPath[1]);
+        const formStructure = createWizard.getFormStructure(false);
+        formStructure.title = 'Edit ' + this.domainObject.name;
+
+        const options = {
+            domainObject: this.domainObject,
+            onSave: this._onSave.bind(this)
+        };
+
+        this.openmct.forms.showForm(formStructure, options);
+    }
+}

src/api/forms/actions/PropertiesAction.js

@@ -4,12 +4,12 @@
  * 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.
+ * '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
+ * 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.
@@ -19,11 +19,17 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+export default class PropertiesAction {
+    constructor(openmct) {
+        this.openmct = openmct;
+    }
 
-import ViewLargeAction from './viewLargeAction.js';
+    /**
+     * @private
+     */
+     _getTypeDefinition(type) {
+        const TypeDefinition = this.openmct.types.get(type);
 
-export default function plugin() {
-    return function install(openmct) {
-        openmct.actions.register(new ViewLargeAction(openmct));
-    };
+        return TypeDefinition.definition;
+    }
 }

src/api/forms/components/FormProperties.vue

@@ -0,0 +1,99 @@
+<template>
+<div>
+    <form name="mctForm"
+      class="form c-form mct-form"
+      autocomplete="off"
+      @submit.prevent
+    >
+        <div class="mct-form__title c-overlay__top-bar">
+            <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>
+        <span v-for="section in model.sections"
+            :key="section.name"
+            class="mct-form__sections l-form-section c-form__section"
+            :class="section.cssClass"
+        >
+            <h2 class="c-form__header"
+                v-if="section.name"
+            >
+                {{ section.name }}
+            </h2>
+            <div v-for="(row, index) in section.rows"
+                :key="row.name"
+            >
+                <FormRow :css-class="section.cssClass"
+                        :first="index < 1"
+                        :row="row"
+                        @onChange="onChange"
+                />
+            </div>
+        </span>
+    </form>
+
+    <div class="mct-form__controls c-overlay__button-bar">
+    <button tabindex="0"
+        :disabled="isInvalid"
+            class="c-button c-button--major"
+            @click="onSave"
+    >
+        OK
+    </button>
+    <button tabindex="0"
+            class="c-button"
+            @click="onDismiss"
+    >
+        Cancel
+    </button>
+    </div>
+</div>
+</template>
+
+<script>
+import FormRow from "@/api/forms/components/FormRow.vue";
+export default {
+    components: {
+        FormRow
+    },
+    inject: ['openmct', 'domainObject'],
+    props: {
+        model: {
+            type: Object,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: false,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            inValidProperties: {}
+        };
+    },
+    computed: {
+        isInvalid() {
+            return Object.entries(this.inValidProperties)
+                .some(([key, value]) => {
+                    return value;
+                });
+        }
+    },
+    methods: {
+        onChange(data) {
+            this.$set(this.inValidProperties, data.model.key, data.invalid);
+
+            this.$emit('onChange', data);
+        },
+        onDismiss() {
+            this.$emit('onDismiss');
+        },
+        onSave() {
+            this.$emit('onSave');
+        }
+    }
+};
+</script>

src/api/forms/components/FormRow.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="form-row c-form__row"
+     :class="rowClass"
+     @onChange="onChange"
+>
+    <div v-if="row.name"
+         class="c-form__row__label label flex-elem"
+         :title="row.description"
+    >
+        {{ row.name }}
+    </div>
+    <div class="c-form__row__controls controls flex-elem">
+        <div v-if="row.control"
+             class="c-form__controls-wrapper wrapper"
+        >
+            <component
+                :is="getComponent"
+                :key="row.key"
+                :ref="`form-control-${row.key}`"
+                :model="row"
+                :value="row.value"
+                :required="isRequired"
+                @onChange="onChange"
+            />
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import AutoCompleteField from "@/api/forms/components/controls/AutoCompleteField.vue";
+import Composite from "@/api/forms/components/controls/Composite.vue";
+import FileInput from "@/api/forms/components/controls/FileInput.vue"
+import Locator from "@/api/forms/components/controls/Locator.vue";
+import NumberField from "@/api/forms/components/controls/NumberField.vue";
+import SelectField from '@/api/forms/components/controls/SelectField.vue';
+import TextArea from "@/api/forms/components/controls/TextArea.vue";
+import TextField from "@/api/forms/components/controls/TextField.vue";
+
+const CONTROL_TYPE_VIEW_MAP = {
+    'autocomplete': AutoCompleteField,
+    'composite': Composite,
+    'file-input': FileInput,
+    'locator': Locator,
+    'numberfield': NumberField,
+    'select': SelectField,
+    'textarea': TextArea,
+    'textfield': TextField,
+};
+
+export default {
+    name: 'FormRow',
+    components: CONTROL_TYPE_VIEW_MAP,
+    inject: ['openmct', 'domainObject'],
+    props: {
+        cssClass: {
+            type: String,
+            default: '',
+            required: true
+        },
+        first: {
+            type: Boolean,
+            default: false,
+            required: true
+        },
+        row: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            valid: undefined,
+            visited: false
+        };
+    },
+    computed: {
+        getComponent() {
+            return CONTROL_TYPE_VIEW_MAP[this.row.control];
+        },
+        isRequired() {
+            //TODO: Check if field is required
+            return false;
+        },
+        rowClass() {
+            let cssClass = this.cssClass;
+
+            if (this.first === true) {
+                cssClass = `${cssClass} first`;
+            }
+
+            if (this.row.required) {
+                cssClass = `${cssClass} req`;
+            }
+
+            if (this.row.layout === 'controls-first') {
+                cssClass = `${cssClass} l-controls-first`;
+            }
+
+            if (this.row.layout === 'controls-under') {
+                cssClass = `${cssClass} l-controls-under`;
+            }
+
+            if (this.visited && this.valid !== undefined) {
+                    if (this.valid === true) {
+                    cssClass = `${cssClass} valid`;
+                } else {
+                    cssClass = `${cssClass} invalid`;
+                }
+            }
+
+            return cssClass;
+        }
+    },
+    mounted() {
+        if (this.row.required) {
+            const data = {
+                model: this.row,
+                value: this.row.value
+            };
+
+            this.onChange(data, false);
+        }
+    },
+    methods: {
+        onChange(data, visited = true) {
+            this.visited = visited;
+
+            const valid = this.validateRow(data);
+            this.valid = valid;
+            data.invalid = !valid;
+            
+            this.$emit('onChange', data);
+        },
+        validateRow(data) {
+            let valid = true;
+            if (this.row.required) {
+                valid = data.value !== undefined && data.value !== null && data.value !== '';
+            }
+
+            const pattern = data.model.pattern;
+            if (valid && pattern) {
+                const regex = new RegExp(pattern);
+                valid = regex.test(data.value);
+            }
+
+            const validate = data.model.validate;
+            if (valid && validate) {
+                valid = validate(this.domainObject, data);
+            }
+
+            return valid;
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,175 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<template>
+<div class="form-control autocomplete">
+    <input v-model="field"
+           class="autocompleteInput"
+           type="text"
+           @click="inputClicked()"
+           @keydown="keyDown($event)"
+    >
+    <span class="icon-arrow-down"
+          @click="arrowClicked()"
+    ></span>
+    <div
+         class="autocompleteOptions"
+         @blur="hideOptions = true"
+    >
+        <ul v-if="!hideOptions">
+            <li v-for="opt in filteredOptions"
+                :key="opt.optionId"
+                :class="{'optionPreSelected': optionIndex === opt.optionId}"
+                @click="fillInputWithString(opt.name)"
+                @mouseover="optionMouseover(opt.optionId)"
+            >
+                <span class="optionText">{{ opt.name }}</span>
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+const key = {
+    down: 40,
+    up: 38,
+    enter: 13
+};
+
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            hideOptions: true,
+            optionIndex: 0,
+            field: this.model.value
+        };
+    },
+    computed : {
+        filteredOptions() {
+            const options = this.optionNames || [];
+            return options
+                .filter(option => {
+                    return option.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
+                }).map((option, index) => {
+                    return {
+                        optionId: index,
+                        name: option
+                    };
+                });
+        }
+    },
+    mounted() {
+        this.options = this.model.options;
+        this.autocompleteInputElement = this.$el.getElementsByClassName('autocompleteInput')[0];
+        if (this.options[0].name) {
+        // If "options" include name, value pair
+            this.optionNames = this.options.map((opt) => {
+                return opt.name;
+            });
+        } else {
+        // If options is only an array of string.
+            this.optionNames = this.options;
+        }
+    },
+    methods: {
+        decrementOptionIndex() {
+            if (this.optionIndex === 0) {
+                this.optionIndex = this.filteredOptions.length;
+            }
+
+            this.optionIndex--;
+            this.scrollIntoView();
+        },
+        incrementOptionIndex() {
+            if (this.optionIndex === this.filteredOptions.length - 1) {
+                this.optionIndex = -1;
+            }
+
+            this.optionIndex++;
+            this.scrollIntoView();
+        },
+        fillInputWithString(string) {
+            this.hideOptions = true;
+            this.field = string;
+        },
+        showOptions(string) {
+            this.hideOptions = false;
+            this.optionIndex = 0;
+        },
+        keyDown($event) {
+            if (this.filteredOptions) {
+                let keyCode = $event.keyCode;
+                switch (keyCode) {
+                case key.down:
+                    this.incrementOptionIndex();
+                    break;
+                case key.up:
+                    $event.preventDefault(); // Prevents cursor jumping back and forth
+                    this.decrementOptionIndex();
+                    break;
+                case key.enter:
+                    if (this.filteredOptions[this.optionIndex]) {
+                        this.fillInputWithString(this.filteredOptions[this.optionIndex].name);
+                    }
+                }
+            }
+        },
+        inputClicked() {
+            this.autocompleteInputElement.select();
+            this.showOptions(this.autocompleteInputElement.value);
+        },
+        arrowClicked() {
+            this.autocompleteInputElement.select();
+            this.showOptions('');
+        },
+        optionMouseover(optionId) {
+            this.optionIndex = optionId;
+        },
+        scrollIntoView() {
+            setTimeout(() => {
+                const element = this.$el.querySelector('.optionPreSelected');
+
+                element && element.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});
+            });
+        }
+    },
+    watch: {
+        field(newValue, oldValue) {
+            if (newValue !== oldValue) {
+
+                const data = {
+                    model: this.model,
+                    value: newValue
+                };
+
+                this.$emit('onChange', data);
+            }
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,56 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<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"
+    />
+</span>
+</template>
+
+<script>
+import CompositeItem from "@/api/forms/components/controls/CompositeItem.vue";
+
+export default {
+    components: {
+        CompositeItem
+    },
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    methods: {
+        onChange(data) {
+            this.$emit('onChange', data);
+        }
+    },
+    mounted() {
+        this.model.items.forEach((item, index) => item.key = `${this.model.key}.${index}`);
+    }
+};
+</script>

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

@@ -0,0 +1,71 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<template>
+<div :class="compositeCssClass">
+    <FormRow :css-class="item.cssClass"
+             :first="first"
+             :row="row"
+             @onChange="onChange"
+    />
+    <span class="composite-control-label">
+        {{ item.name }}
+    </span>
+</div>
+</template>
+
+<script>
+
+export default {
+    components: {
+        FormRow: () => import('@/api/forms/components/FormRow.vue')
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        first: {
+            type: Boolean,
+            required: true
+        },
+        value: {
+            type: String
+        }
+    },
+    computed: {
+        compositeCssClass() {
+            return `l-composite-control l-${this.item.control}`;
+        },
+        row() {
+            const row = this.item;
+            row.value = JSON.parse(this.value);
+
+            return row;
+        }
+    },
+    methods: {
+        onChange(data) {
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+<span class="form-control shell">
+    <span class="field control"
+          :class="model.cssClass"
+    >
+        <input ref="fileInput" id="fileElem" type="file" accept=".json" style="display:none">
+        <button id="fileSelect"
+            class="c-button"
+            @click="selectFile"
+        >{{ name }}</button>
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            fileInfo: undefined
+        };
+    },
+    computed: {
+        name() {
+            const fileInfo = this.fileInfo || this.model.value;
+
+            return fileInfo && fileInfo.name || this.model.text;
+        }
+    },
+    mounted() {
+        this.$refs.fileInput.addEventListener("change", this.handleFiles, false);
+    },
+    methods: {
+        handleFiles() {
+            const fileList = this.$refs.fileInput.files;
+            this.readFile(fileList[0]);
+        },
+        readFile(file) {
+            const self = this;
+            const fileReader = new FileReader();
+            const fileInfo = {};
+            fileInfo.name = file.name;
+            fileReader.onload = function (event) {
+                fileInfo.body = event.target.result;
+                self.fileInfo = fileInfo;
+
+                const data = {
+                    model: self.model,
+                    value: fileInfo
+                };
+                self.$emit('onChange', data);
+            };
+
+            fileReader.onerror = function (error) {
+                console.error('fileReader error', error);
+            };
+
+            fileReader.readAsText(file);
+        },
+        selectFile() {
+           this.$refs.fileInput.click();
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+    <ConditionSetSelectorDialog
+        :hideTitle="true"
+        :ignoreTypeCheck="true"
+        :cssClass="`form-locator`"
+        :parent="model.parent"
+        @conditionSetSelected="handleItemSelection"
+    />
+</template>
+
+<script>
+import ConditionSetSelectorDialog from '@/plugins/condition/components/inspector/ConditionSetSelectorDialog.vue';
+
+export default {
+    components: {
+        ConditionSetSelectorDialog
+    },
+    inject: ['openmct'],
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+        // remove following after css fix
+        setTimeout(() => {
+            document.querySelector('.c-overlay__contents-main').style.height = '200px';
+        });
+    },
+    destroyed() {
+    },
+    methods: {
+       handleItemSelection(parentDomainObject) {
+           const data = { model: this.model, value: parentDomainObject };
+           this.$emit('onChange', data);
+       }
+    }
+};
+</script>

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

@@ -0,0 +1,62 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<template>
+<span class="form-control shell">
+    <span class="field control"
+          :class="model.cssClass"
+    >
+        <input v-model="field"
+               type="number"
+               :min="model.min"
+               :max="model.max"
+               :step="model.step"
+               @blur="blur()"
+        >
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            field: this.model.value
+        };
+    },
+    methods: {
+        blur() {
+            const data = {
+                model :this.model,
+                value: this.field
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <div class='form-control SelectField'>
+        <select required="model.required"
+                name="mctControl"
+                @change="onChange($event)"
+                v-model="selected"
+        >
+            <option v-for="option in model.options"
+                :key="option.name"
+                :value="option.value"
+            >
+                {{ option.name }}
+            </option>
+        </select>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            selected: this.model.value
+        };
+    },
+    methods: {
+        onChange() {
+            const data = {
+                model: this.model,
+                value: this.selected
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,60 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<template>
+<span class="form-control shell">
+    <span class="field control"
+          :class="model.cssClass"
+    >
+        <textarea v-model="field"
+               type="text"
+               :size="model.size"
+               @blur="blur()"
+        />
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            field: this.model.value
+        };
+    },
+    methods: {
+        blur() {
+            const data = {
+                model :this.model,
+                value: this.field
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,60 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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.
+-->
+<template>
+<span class="form-control shell">
+    <span class="field control"
+          :class="model.cssClass"
+    >
+        <input v-model="field"
+               type="text"
+               :size="model.size"
+               @blur="blur()"
+        />
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            field: this.model.value
+        };
+    },
+    methods: {
+        blur() {
+            const data = {
+                model :this.model,
+                value: this.field
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

src/api/menu/MenuAPI.js

@@ -37,7 +37,7 @@ import Menu, { MENU_PLACEMENT } from './menu.js';
  * @property {Boolean} isDisabled adds disable class if true
  * @property {String} name Menu item text
  * @property {String} description Menu item description
- * @property {Function} onItemClicked callback function: invoked when item is clicked
+ * @property {Function} callBack callback function: invoked when item is clicked
  */
 
 /**
@@ -66,27 +66,12 @@ class MenuAPI {
      * @param {Array.<Action>|Array.<Array.<Action>>} actions collection of actions{@link Action} or collection of groups of actions {@link Action}
      * @param {MenuOptions} [menuOptions] [Optional] The {@link MenuOptions} options for Menu
      */
-    showMenu(x, y, items, menuOptions) {
-        this._createMenuComponent(x, y, items, menuOptions);
+    showMenu(x, y, actions, menuOptions) {
+        this._createMenuComponent(x, y, actions, menuOptions);
 
         this.menuComponent.showMenu();
     }
 
-    actionsToMenuItems(actions, objectPath, view) {
-        return actions.map(action => {
-            const isActionGroup = Array.isArray(action);
-            if (isActionGroup) {
-                action = this.actionsToMenuItems(action, objectPath, view);
-            } else {
-                action.onItemClicked = () => {
-                    action.invoke(objectPath, view);
-                };
-            }
-
-            return action;
-        });
-    }
-
     /**
      * Show popup menu with description of item on hover
      * @param {number} x x-coordinates for popup

src/api/menu/MenuAPISpec.js

@@ -57,7 +57,7 @@ describe ('The Menu API', () => {
                 name: 'Test Action 1',
                 cssClass: 'icon-clock',
                 description: 'This is a test action',
-                onItemClicked: () => {
+                callBack: () => {
                     result = 'Test Action 1 Invoked';
                 }
             },
@@ -66,7 +66,7 @@ describe ('The Menu API', () => {
                 name: 'Test Action 2',
                 cssClass: 'icon-clock',
                 description: 'This is a test action',
-                onItemClicked: () => {
+                callBack: () => {
                     result = 'Test Action 2 Invoked';
                 }
             }

src/api/menu/components/Menu.vue

@@ -11,7 +11,7 @@
                 :key="action.name"
                 :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
                 :title="action.description"
-                @click="action.onItemClicked"
+                @click="action.callBack"
             >
                 {{ action.name }}
             </li>
@@ -36,7 +36,7 @@
             :key="action.name"
             :class="action.cssClass"
             :title="action.description"
-            @click="action.onItemClicked"
+            @click="action.callBack"
         >
             {{ action.name }}
         </li>

src/api/menu/components/SuperMenu.vue

@@ -13,7 +13,7 @@
                 :key="action.name"
                 :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
                 :title="action.description"
-                @click="action.onItemClicked"
+                @click="action.callBack"
                 @mouseover="toggleItemDescription(action)"
                 @mouseleave="toggleItemDescription()"
             >
@@ -42,7 +42,7 @@
             :key="action.name"
             :class="action.cssClass"
             :title="action.description"
-            @click="action.onItemClicked"
+            @click="action.callBack"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
         >

src/api/menu/menu.js

@@ -71,12 +71,12 @@ class Menu extends EventEmitter {
 
     showMenu() {
         this.component = new Vue({
-            components: {
-                MenuComponent
-            },
             provide: {
                 options: this.options
             },
+            components: {
+                MenuComponent
+            },
             template: '<menu-component />'
         });
 
@@ -85,12 +85,12 @@ class Menu extends EventEmitter {
 
     showSuperMenu() {
         this.component = new Vue({
-            components: {
-                SuperMenuComponent
-            },
             provide: {
                 options: this.options
             },
+            components: {
+                SuperMenuComponent
+            },
             template: '<super-menu-component />'
         });
 

src/api/objects/ObjectAPI.js

@@ -45,8 +45,6 @@ function ObjectAPI(typeRegistry, openmct) {
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
-
-    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
 }
 
 /**
@@ -399,25 +397,20 @@ ObjectAPI.prototype._toMutable = function (object) {
         mutableObject = object;
     } else {
         mutableObject = MutableDomainObject.createMutable(object, this.eventEmitter);
+    }
 
-        // Check if provider supports realtime updates
-        let identifier = utils.parseKeyString(mutableObject.identifier);
-        let provider = this.getProvider(identifier);
+    // Check if provider supports realtime updates
+    let identifier = utils.parseKeyString(mutableObject.identifier);
+    let provider = this.getProvider(identifier);
 
-        if (provider !== undefined
-            && provider.observe !== undefined
-            && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
-            let unobserve = provider.observe(identifier, (updatedModel) => {
-                if (updatedModel.persisted > mutableObject.modified) {
-                    //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
-                    //in rapid succession and intermediate persistence states are returned by the observe function.
-                    mutableObject.$refresh(updatedModel);
-                }
-            });
-            mutableObject.$on('$_destroy', () => {
-                unobserve();
-            });
-        }
+    if (provider !== undefined
+        && provider.observe !== undefined) {
+        let unobserve = provider.observe(identifier, (updatedModel) => {
+            mutableObject.$refresh(updatedModel);
+        });
+        mutableObject.$on('$destroy', () => {
+            unobserve();
+        });
     }
 
     return mutableObject;

src/api/objects/ObjectAPISpec.js

@@ -163,22 +163,14 @@ describe("The Object API", () => {
                     key: 'test-key'
                 },
                 name: 'test object',
-                type: 'notebook',
                 otherAttribute: 'other-attribute-value',
-                modified: 0,
-                persisted: 0,
                 objectAttribute: {
                     embeddedObject: {
                         embeddedKey: 'embedded-value'
                     }
                 }
             };
-            updatedTestObject = Object.assign({
-                otherAttribute: 'changed-attribute-value'
-            }, testObject);
-            updatedTestObject.modified = 1;
-            updatedTestObject.persisted = 1;
-
+            updatedTestObject = Object.assign({otherAttribute: 'changed-attribute-value'}, testObject);
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get",
                 "create",
@@ -190,8 +182,6 @@ describe("The Object API", () => {
             mockProvider.observeObjectChanges.and.callFake(() => {
                 callbacks[0](updatedTestObject);
                 callbacks.splice(0, 1);
-
-                return () => {};
             });
             mockProvider.observe.and.callFake((id, callback) => {
                 if (callbacks.length === 0) {
@@ -199,8 +189,6 @@ describe("The Object API", () => {
                 } else {
                     callbacks[0] = callback;
                 }
-
-                return () => {};
             });
 
             objectAPI.addProvider(TEST_NAMESPACE, mockProvider);

src/api/overlays/components/overlay-component.scss

@@ -21,7 +21,8 @@
 
     &__outer {
         @include abs();
-        background: $colorBodyBg;
+        background: $overlayColorBg;
+        color: $overlayColorFg;
         display: flex;
         flex-direction: column;
         padding: $overlayInnerMargin;
@@ -29,6 +30,7 @@
 
     &__close-button {
         $p: $interiorMargin + 2px;
+        color: $overlayColorFg;
         font-size: 1.5em;
         position: absolute;
         top: $p; right: $p;
@@ -80,6 +82,11 @@
         }
     }
 
+    .c-button,
+    .c-click-icon {
+        filter: $overlayBrightnessAdjust;
+    }
+
     .c-object-label__name {
         filter: $objectLabelNameFilter;
     }
@@ -96,7 +103,6 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
-    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -118,8 +124,12 @@ body.desktop {
         $tbPad: floor($pad * 0.8);
         $lrPad: $pad;
         .c-overlay {
+            &__blocker {
+                display: none;
+            }
+
             &__outer {
-                @include overlaySizing($overlayOuterMarginLarge);
+                @include overlaySizing($overlayOuterMarginFullscreen);
                 padding: $tbPad $lrPad;
             }
 

src/api/telemetry/TelemetryAPI.js

@@ -20,8 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { TelemetryCollection } = require("./TelemetryCollection");
-
 define([
     '../../plugins/displayLayout/CustomStringFormatter',
     './TelemetryMetadataManager',
@@ -275,28 +273,6 @@ define([
         }
     };
 
-    /**
-     * Request telemetry collection for a domain object.
-     * The `options` argument allows you to specify filters
-     * (start, end, etc.), sort order, and strategies for retrieving
-     * telemetry (aggregation, latest available, etc.).
-     *
-     * @method requestTelemetryCollection
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     * @param {module:openmct.DomainObject} domainObject the object
-     *        which has associated telemetry
-     * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
-     *        options for this telemetry collection request
-     * @returns {TelemetryCollection} a TelemetryCollection instance
-     */
-    TelemetryAPI.prototype.requestTelemetryCollection = function (domainObject, options = {}) {
-        return new TelemetryCollection(
-            this.openmct,
-            domainObject,
-            options
-        );
-    };
-
     /**
      * Request historical telemetry for a domain object.
      * The `options` argument allows you to specify filters
@@ -591,24 +567,21 @@ define([
      * @method limits returns a limits object of
      * type {
      *          level1: {
-     *              low: { key1: value1, key2: value2, color: <supportedColor> },
-     *              high: { key1: value1, key2: value2, color: <supportedColor> }
+     *              low: { key1: value1, key2: value2 },
+     *              high: { key1: value1, key2: value2 }
      *          },
      *          level2: {
      *              low: { key1: value1, key2: value2 },
      *              high: { key1: value1, key2: value2 }
      *          }
      *       }
-     *  supported colors are purple, red, orange, yellow and cyan
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     TelemetryAPI.prototype.getLimits = function (domainObject) {
         const provider = this.findLimitEvaluator(domainObject);
-        if (!provider || !provider.getLimits) {
+        if (!provider) {
             return {
-                limits: function () {
-                    return Promise.resolve(undefined);
-                }
+                limits: function () {}
             };
         }
 

src/api/telemetry/TelemetryCollection.js

@@ -1,366 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, 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 _ from 'lodash';
-import EventEmitter from 'EventEmitter';
-
-/** Class representing a Telemetry Collection. */
-
-export class TelemetryCollection extends EventEmitter {
-    /**
-     * Creates a Telemetry Collection
-     *
-     * @param  {object} openmct - Openm MCT
-     * @param  {object} domainObject - Domain Object to user for telemetry collection
-     * @param  {object} options - Any options passed in for request/subscribe
-     */
-    constructor(openmct, domainObject, options) {
-        super();
-
-        this.loaded = false;
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.boundedTelemetry = [];
-        this.futureBuffer = [];
-        this.parseTime = undefined;
-        this.metadata = this.openmct.telemetry.getMetadata(domainObject);
-        this.unsubscribe = undefined;
-        this.historicalProvider = undefined;
-        this.options = options;
-        this.pageState = undefined;
-        this.lastBounds = undefined;
-        this.requestAbort = undefined;
-    }
-
-    /**
-     * This will start the requests for historical and realtime data,
-     * as well as setting up initial values and watchers
-     */
-    load() {
-        if (this.loaded) {
-            throw new Error('Telemetry Collection has already been loaded.');
-        }
-
-        this._timeSystem(this.openmct.time.timeSystem());
-        this.lastBounds = this.openmct.time.bounds();
-
-        this._watchBounds();
-        this._watchTimeSystem();
-
-        this._initiateHistoricalRequests();
-        this._initiateSubscriptionTelemetry();
-
-        this.loaded = true;
-    }
-
-    /**
-     * can/should be called by the requester of the telemetry collection
-     * to remove any listeners
-     */
-    destroy() {
-        if (this.requestAbort) {
-            this.requestAbort.abort();
-        }
-
-        this._unwatchBounds();
-        this._unwatchTimeSystem();
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-
-        this.removeAllListeners();
-    }
-
-    /**
-     * This will start the requests for historical and realtime data,
-     * as well as setting up initial values and watchers
-     */
-    getAll() {
-        return this.boundedTelemetry;
-    }
-
-    /**
-     * Sets up  the telemetry collection for historical requests,
-     * this uses the "standardizeRequestOptions" from Telemetry API
-     * @private
-     */
-    _initiateHistoricalRequests() {
-        this.openmct.telemetry.standardizeRequestOptions(this.options);
-        this.historicalProvider = this.openmct.telemetry.
-            findRequestProvider(this.domainObject, this.options);
-
-        this._requestHistoricalTelemetry();
-    }
-    /**
-     * If a historical provider exists, then historical requests will be made
-     * @private
-     */
-    async _requestHistoricalTelemetry() {
-        if (!this.historicalProvider) {
-            return;
-        }
-
-        let historicalData;
-
-        try {
-            this.requestAbort = new AbortController();
-            this.options.abortSignal = this.requestAbort.signal;
-            historicalData = await this.historicalProvider.request(this.domainObject, this.options);
-            this.requestAbort = undefined;
-        } catch (error) {
-            console.error('Error requesting telemetry data...');
-            this.requestAbort = undefined;
-            throw new Error(error);
-        }
-
-        this._processNewTelemetry(historicalData);
-
-    }
-    /**
-     * This uses the built in subscription function from Telemetry API
-     * @private
-     */
-    _initiateSubscriptionTelemetry() {
-
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-
-        this.unsubscribe = this.openmct.telemetry
-            .subscribe(
-                this.domainObject,
-                datum => this._processNewTelemetry(datum),
-                this.options
-            );
-    }
-
-    /**
-     * Filter any new telemetry (add/page, historical, subscription) based on
-     * time bounds and dupes
-     *
-     * @param  {(Object|Object[])} telemetryData - telemetry data object or
-     * array of telemetry data objects
-     * @private
-     */
-    _processNewTelemetry(telemetryData) {
-        let data = Array.isArray(telemetryData) ? telemetryData : [telemetryData];
-        let parsedValue;
-        let beforeStartOfBounds;
-        let afterEndOfBounds;
-        let added = [];
-
-        for (let datum of data) {
-            parsedValue = this.parseTime(datum);
-            beforeStartOfBounds = parsedValue < this.lastBounds.start;
-            afterEndOfBounds = parsedValue > this.lastBounds.end;
-
-            if (!afterEndOfBounds && !beforeStartOfBounds) {
-                let isDuplicate = false;
-                let startIndex = this._sortedIndex(datum);
-                let endIndex = undefined;
-
-                // dupe check
-                if (startIndex !== this.boundedTelemetry.length) {
-                    endIndex = _.sortedLastIndexBy(
-                        this.boundedTelemetry,
-                        datum,
-                        boundedDatum => this.parseTime(boundedDatum)
-                    );
-
-                    if (endIndex > startIndex) {
-                        let potentialDupes = this.boundedTelemetry.slice(startIndex, endIndex);
-
-                        isDuplicate = potentialDupes.some(_.isEqual(undefined, datum));
-                    }
-                }
-
-                if (!isDuplicate) {
-                    let index = endIndex || startIndex;
-
-                    this.boundedTelemetry.splice(index, 0, datum);
-                    added.push(datum);
-                }
-
-            } else if (afterEndOfBounds) {
-                this.futureBuffer.push(datum);
-            }
-        }
-
-        if (added.length) {
-            this.emit('add', added);
-        }
-    }
-
-    /**
-     * Finds the correct insertion point for the given telemetry datum.
-     * Leverages lodash's `sortedIndexBy` function which implements a binary search.
-     * @private
-     */
-    _sortedIndex(datum) {
-        if (this.boundedTelemetry.length === 0) {
-            return 0;
-        }
-
-        let parsedValue = this.parseTime(datum);
-        let lastValue = this.parseTime(this.boundedTelemetry[this.boundedTelemetry.length - 1]);
-
-        if (parsedValue > lastValue || parsedValue === lastValue) {
-            return this.boundedTelemetry.length;
-        } else {
-            return _.sortedIndexBy(
-                this.boundedTelemetry,
-                datum,
-                boundedDatum => this.parseTime(boundedDatum)
-            );
-        }
-    }
-
-    /**
-     * when the start time, end time, or both have been updated.
-     * data could be added OR removed here we update the current
-     * bounded telemetry
-     *
-     * @param  {TimeConductorBounds} bounds The newly updated bounds
-     * @param  {boolean} [tick] `true` if the bounds update was due to
-     * a "tick" event (ie. was an automatic update), false otherwise.
-     * @private
-     */
-    _bounds(bounds, isTick) {
-        let startChanged = this.lastBounds.start !== bounds.start;
-        let endChanged = this.lastBounds.end !== bounds.end;
-
-        this.lastBounds = bounds;
-
-        if (isTick) {
-            // need to check futureBuffer and need to check
-            // if anything has fallen out of bounds
-            let startIndex = 0;
-            let endIndex = 0;
-
-            let discarded = [];
-            let added = [];
-            let testDatum = {};
-
-            if (startChanged) {
-                testDatum[this.timeKey] = bounds.start;
-                // Calculate the new index of the first item within the bounds
-                startIndex = _.sortedIndexBy(
-                    this.boundedTelemetry,
-                    testDatum,
-                    datum => this.parseTime(datum)
-                );
-                discarded = this.boundedTelemetry.splice(0, startIndex);
-            }
-
-            if (endChanged) {
-                testDatum[this.timeKey] = bounds.end;
-                // Calculate the new index of the last item in bounds
-                endIndex = _.sortedLastIndexBy(
-                    this.futureBuffer,
-                    testDatum,
-                    datum => this.parseTime(datum)
-                );
-                added = this.futureBuffer.splice(0, endIndex);
-                this.boundedTelemetry = [...this.boundedTelemetry, ...added];
-            }
-
-            if (discarded.length > 0) {
-                this.emit('remove', discarded);
-            }
-
-            if (added.length > 0) {
-                this.emit('add', added);
-            }
-
-        } else {
-            // user bounds change, reset
-            this._reset();
-        }
-
-    }
-
-    /**
-     * whenever the time system is updated need to update related values in
-     * the Telemetry Collection and reset the telemetry collection
-     *
-     * @param  {TimeSystem} timeSystem - the value of the currently applied
-     * Time System
-     * @private
-     */
-    _timeSystem(timeSystem) {
-        this.timeKey = timeSystem.key;
-        let metadataValue = this.metadata.value(this.timeKey) || { format: this.timeKey };
-        let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
-
-        this.parseTime = (datum) => {
-            return valueFormatter.parse(datum);
-        };
-
-        this._reset();
-    }
-
-    /**
-     * Reset the telemetry data of the collection, and re-request
-     * historical telemetry
-     * @private
-     *
-     * @todo handle subscriptions more granually
-     */
-    _reset() {
-        this.boundedTelemetry = [];
-        this.futureBuffer = [];
-
-        this._requestHistoricalTelemetry();
-    }
-
-    /**
-     * adds the _bounds callback to the 'bounds' timeAPI listener
-     * @private
-     */
-    _watchBounds() {
-        this.openmct.time.on('bounds', this._bounds, this);
-    }
-
-    /**
-     * removes the _bounds callback from the 'bounds' timeAPI listener
-     * @private
-     */
-    _unwatchBounds() {
-        this.openmct.time.off('bounds', this._bounds, this);
-    }
-
-    /**
-     * adds the _timeSystem callback to the 'timeSystem' timeAPI listener
-     * @private
-     */
-    _watchTimeSystem() {
-        this.openmct.time.on('timeSystem', this._timeSystem, this);
-    }
-
-    /**
-     * removes the _timeSystem callback from the 'timeSystem' timeAPI listener
-     * @private
-     */
-    _unwatchTimeSystem() {
-        this.openmct.time.off('timeSystem', this._timeSystem, this);
-    }
-}

src/exporters/ImageExporter.js

@@ -1,188 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-/**
- * Class defining an image exporter for JPG/PNG output.
- * Originally created by hudsonfoo on 09/02/16
- */
-
-function replaceDotsWithUnderscores(filename) {
-    const regex = /\./gi;
-
-    return filename.replace(regex, '_');
-}
-
-import {saveAs} from 'file-saver/FileSaver';
-import html2canvas from 'html2canvas';
-import uuid from 'uuid';
-
-class ImageExporter {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
-    /**
-        * Converts an HTML element into a PNG or JPG Blob.
-        * @private
-        * @param {node} element that will be converted to an image
-        * @param {object} options Image options.
-        * @returns {promise}
-        */
-    renderElement(element, { imageType, className, thumbnailSize }) {
-        const self = this;
-        const overlays = this.openmct.overlays;
-        const dialog = overlays.dialog({
-            iconClass: 'info',
-            message: 'Caputuring an image',
-            buttons: [
-                {
-                    label: 'Cancel',
-                    emphasis: true,
-                    callback: function () {
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-
-        let mimeType = 'image/png';
-        if (imageType === 'jpg') {
-            mimeType = 'image/jpeg';
-        }
-
-        let exportId = undefined;
-        let oldId = undefined;
-        if (className) {
-            const newUUID = uuid();
-            exportId = `$export-element-${newUUID}`;
-            oldId = element.id;
-            element.id = exportId;
-        }
-
-        return html2canvas(element, {
-            useCORS: true,
-            allowTaint: true,
-            logging: false,
-            onclone: function (document) {
-                if (className) {
-                    const clonedElement = document.getElementById(exportId);
-                    clonedElement.classList.add(className);
-                }
-
-                element.id = oldId;
-            },
-            removeContainer: true // Set to false to debug what html2canvas renders
-        }).then(function (canvas) {
-            dialog.dismiss();
-
-            return new Promise(function (resolve, reject) {
-                if (thumbnailSize) {
-                    const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
-
-                    return canvas.toBlob(blob => resolve({
-                        blob,
-                        thumbnail
-                    }), mimeType);
-                }
-
-                return canvas.toBlob(blob => resolve({ blob }), mimeType);
-            });
-        }, function (error) {
-            console.log('error capturing image', error);
-            dialog.dismiss();
-            const errorDialog = overlays.dialog({
-                iconClass: 'error',
-                message: 'Image was not captured successfully!',
-                buttons: [
-                    {
-                        label: "OK",
-                        emphasis: true,
-                        callback: function () {
-                            errorDialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        });
-    }
-
-    getThumbnail(canvas, mimeType, size) {
-        const thumbnailCanvas = document.createElement('canvas');
-        thumbnailCanvas.setAttribute('width', size.width);
-        thumbnailCanvas.setAttribute('height', size.height);
-        const ctx = thumbnailCanvas.getContext('2d');
-        ctx.globalCompositeOperation = "copy";
-        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
-
-        return thumbnailCanvas.toDataURL(mimeType);
-    }
-
-    /**
-     * Takes a screenshot of a DOM node and exports to JPG.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @param {string} className to be added to element before capturing (optional)
-     * @returns {promise}
-     */
-    async exportJPG(element, filename, className) {
-        const processedFilename = replaceDotsWithUnderscores(filename);
-
-        const img = await this.renderElement(element, {
-            imageType: 'jpg',
-            className
-        });
-        saveAs(img.blob, processedFilename);
-    }
-
-    /**
-     * Takes a screenshot of a DOM node and exports to PNG.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @param {string} className to be added to element before capturing (optional)
-     * @returns {promise}
-     */
-    async exportPNG(element, filename, className) {
-        const processedFilename = replaceDotsWithUnderscores(filename);
-
-        const img = await this.renderElement(element, {
-            imageType: 'png',
-            className
-        });
-        saveAs(img.blob, processedFilename);
-    }
-
-    /**
-     * Takes a screenshot of a DOM node in PNG format.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @returns {promise}
-     */
-
-    exportPNGtoSRC(element, options) {
-        return this.renderElement(element, {
-            imageType: 'png',
-            ...options
-        });
-    }
-}
-
-export default ImageExporter;
-

src/exporters/ImageExporterSpec.js

@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 ImageExporter from './ImageExporter';
-import { createOpenMct, resetApplicationState } from '../utils/testing';
-
-describe('The Image Exporter', () => {
-    let openmct;
-    let imageExporter;
-
-    beforeEach(() => {
-        openmct = createOpenMct();
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    describe("basic instatation", () => {
-        it("can be instatiated", () => {
-            imageExporter = new ImageExporter(openmct);
-
-            expect(imageExporter).not.toEqual(null);
-        });
-        it("can render an element to a blob", async () => {
-            const mockHeadElement = document.createElement("h1");
-            const mockTextNode = document.createTextNode('foo bar');
-            mockHeadElement.appendChild(mockTextNode);
-            document.body.appendChild(mockHeadElement);
-            imageExporter = new ImageExporter(openmct);
-            const returnedBlob = await imageExporter.renderElement(document.body, {
-                imageType: 'png'
-            });
-            expect(returnedBlob).not.toEqual(null);
-            expect(returnedBlob.blob).not.toEqual(null);
-            expect(returnedBlob.blob).toBeInstanceOf(Blob);
-        });
-    });
-});

src/installDefaultBundles.js

@@ -38,7 +38,8 @@ const DEFAULTS = [
     'platform/exporters',
     'platform/telemetry',
     'platform/features/clock',
-    'platform/forms',
+    'platform/features/hyperlink',
+    'platform/features/timeline',
     'platform/identity',
     'platform/persistence/aggregator',
     'platform/persistence/queue',
@@ -80,8 +81,9 @@ define([
     '../platform/exporters/bundle',
     '../platform/features/clock/bundle',
     '../platform/features/my-items/bundle',
+    '../platform/features/hyperlink/bundle',
     '../platform/features/static-markup/bundle',
-    '../platform/forms/bundle',
+    '../platform/features/timeline/bundle',
     '../platform/framework/bundle',
     '../platform/framework/src/load/Bundle',
     '../platform/identity/bundle',

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -73,7 +73,7 @@ describe('the plugin', function () {
     });
 
     it('provides a folder to hold plans', () => {
-        return openmct.objects.get(identifier).then((object) => {
+        openmct.objects.get(identifier).then((object) => {
             expect(object).toEqual({
                 identifier,
                 type: 'folder',
@@ -83,7 +83,7 @@ describe('the plugin', function () {
     });
 
     it('provides composition for couch search folders', () => {
-        return composition.load().then((objects) => {
+        composition.load().then((objects) => {
             expect(objects.length).toEqual(2);
         });
     });

src/plugins/DeviceClassifier/plugin.js

@@ -1,32 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 Agent from "../../utils/agent/Agent";
-import DeviceClassifier from "./src/DeviceClassifier";
-
-export default () => {
-    return (openmct) => {
-        openmct.on("start", () => {
-            const agent = new Agent(window);
-            DeviceClassifier(agent, window.document);
-        });
-    };
-};

src/plugins/DeviceClassifier/src/DeviceClassifier.js

@@ -1,72 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-/**
- * Runs at application startup and adds a subset of the following
- * CSS classes to the body of the document, depending on device
- * attributes:
- *
- * * `mobile`: Phones or tablets.
- * * `phone`: Phones specifically.
- * * `tablet`: Tablets specifically.
- * * `desktop`: Non-mobile devices.
- * * `portrait`: Devices in a portrait-style orientation.
- * * `landscape`: Devices in a landscape-style orientation.
- * * `touch`: Device supports touch events.
- *
- * @param {utils/agent/Agent} agent
- *        the service used to examine the user agent
- * @param document the HTML DOM document object
- * @constructor
- */
-import DeviceMatchers from "./DeviceMatchers";
-
-export default (agent, document) => {
-    const body = document.body;
-
-    Object.keys(DeviceMatchers).forEach((key, index, array) => {
-        if (DeviceMatchers[key](agent)) {
-            body.classList.add(key);
-        }
-    });
-
-    if (agent.isMobile()) {
-        const mediaQuery = window.matchMedia("(orientation: landscape)");
-        function eventHandler(event) {
-            console.log("changed");
-            if (event.matches) {
-                body.classList.remove("portrait");
-                body.classList.add("landscape");
-            } else {
-                body.classList.remove("landscape");
-                body.classList.add("portrait");
-            }
-        }
-
-        if (mediaQuery.addEventListener) {
-            mediaQuery.addEventListener(`change`, eventHandler);
-        } else {
-            // Deprecated 'MediaQueryList' API, <Safari 14, IE, <Edge 16
-            mediaQuery.addListener(eventHandler);
-        }
-    }
-};

src/plugins/DeviceClassifier/src/DeviceClassifierSpec.js

@@ -1,105 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 DeviceClassifier from "./DeviceClassifier";
-import DeviceMatchers from "./DeviceMatchers";
-
-const AGENT_METHODS = [
-    "isMobile",
-    "isPhone",
-    "isTablet",
-    "isPortrait",
-    "isLandscape",
-    "isTouch"
-];
-const TEST_PERMUTATIONS = [
-    ["isMobile", "isPhone", "isTouch", "isPortrait"],
-    ["isMobile", "isPhone", "isTouch", "isLandscape"],
-    ["isMobile", "isTablet", "isTouch", "isPortrait"],
-    ["isMobile", "isTablet", "isTouch", "isLandscape"],
-    ["isTouch"],
-    []
-];
-
-describe("DeviceClassifier", function () {
-    let mockAgent;
-    let mockDocument;
-    let mockClassList;
-
-    beforeEach(function () {
-        mockAgent = jasmine.createSpyObj(
-            "agent",
-            AGENT_METHODS
-        );
-
-        mockClassList = jasmine.createSpyObj("classList", ["add"]);
-
-        mockDocument = jasmine.createSpyObj(
-            "document",
-            {},
-            { body: { classList: mockClassList } }
-        );
-
-        AGENT_METHODS.forEach(function (m) {
-            mockAgent[m].and.returnValue(false);
-        });
-    });
-
-    TEST_PERMUTATIONS.forEach(function (trueMethods) {
-        const summary =
-      trueMethods.length === 0
-          ? "device has no detected characteristics"
-          : "device " + trueMethods.join(", ");
-
-        describe("when " + summary, function () {
-            beforeEach(function () {
-                trueMethods.forEach(function (m) {
-                    mockAgent[m].and.returnValue(true);
-                });
-
-                // eslint-disable-next-line no-new
-                DeviceClassifier(mockAgent, mockDocument);
-            });
-
-            it("adds classes for matching, detected characteristics", function () {
-                Object.keys(DeviceMatchers)
-                    .filter(function (m) {
-                        return DeviceMatchers[m](mockAgent);
-                    })
-                    .forEach(function (key) {
-                        expect(mockDocument.body.classList.add).toHaveBeenCalledWith(key);
-                    });
-            });
-
-            it("does not add classes for non-matching characteristics", function () {
-                Object.keys(DeviceMatchers)
-                    .filter(function (m) {
-                        return !DeviceMatchers[m](mockAgent);
-                    })
-                    .forEach(function (key) {
-                        expect(mockDocument.body.classList.add).not.toHaveBeenCalledWith(
-                            key
-                        );
-                    });
-            });
-        });
-    });
-});

src/plugins/DeviceClassifier/src/DeviceMatchers.js

@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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.
- *****************************************************************************/
-
-/**
- * An object containing key-value pairs, where keys are symbolic of
- * device attributes, and values are functions that take the
- * `agent` as inputs and return boolean values indicating
- * whether or not the current device has these attributes.
- *
- * For internal use by the mobile support bundle.
- *
- * @memberof src/plugins/DeviceClassifier
- * @private
- */
-
-export default {
-    mobile: function (agent) {
-        return agent.isMobile();
-    },
-    phone: function (agent) {
-        return agent.isPhone();
-    },
-    tablet: function (agent) {
-        return agent.isTablet();
-    },
-    desktop: function (agent) {
-        return !agent.isMobile();
-    },
-    portrait: function (agent) {
-        return agent.isPortrait();
-    },
-    landscape: function (agent) {
-        return agent.isLandscape();
-    },
-    touch: function (agent) {
-        return agent.isTouch();
-    }
-};

src/plugins/DeviceClassifier/src/DeviceMatchersSpec.js

@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, 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 DeviceMatchers from "./DeviceMatchers";
-
-describe("DeviceMatchers", function () {
-    let mockAgent;
-
-    beforeEach(function () {
-        mockAgent = jasmine.createSpyObj("agent", [
-            "isMobile",
-            "isPhone",
-            "isTablet",
-            "isPortrait",
-            "isLandscape",
-            "isTouch"
-        ]);
-    });
-
-    it("detects when a device is a desktop device", function () {
-        mockAgent.isMobile.and.returnValue(false);
-        expect(DeviceMatchers.desktop(mockAgent)).toBe(true);
-        mockAgent.isMobile.and.returnValue(true);
-        expect(DeviceMatchers.desktop(mockAgent)).toBe(false);
-    });
-
-    function method(deviceType) {
-        return "is" + deviceType[0].toUpperCase() + deviceType.slice(1);
-    }
-
-    [
-        "mobile",
-        "phone",
-        "tablet",
-        "landscape",
-        "portrait",
-        "landscape",
-        "touch"
-    ].forEach(function (deviceType) {
-        it("detects when a device is a " + deviceType + " device", function () {
-            mockAgent[method(deviceType)].and.returnValue(true);
-            expect(DeviceMatchers[deviceType](mockAgent)).toBe(true);
-            mockAgent[method(deviceType)].and.returnValue(false);
-            expect(DeviceMatchers[deviceType](mockAgent)).toBe(false);
-        });
-    });
-});

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -19,8 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-import LadTableSetView from './LadTableSetView';
+import LadTableSet from './components/LadTableSet.vue';
+import Vue from 'vue';
 
 export default function LADTableSetViewProvider(openmct) {
     return {
@@ -34,7 +34,32 @@ export default function LADTableSetViewProvider(openmct) {
             return domainObject.type === 'LadTableSet';
         },
         view: function (domainObject, objectPath) {
-            return new LadTableSetView(openmct, domainObject, objectPath);
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            LadTableSet: LadTableSet
+                        },
+                        provide: {
+                            openmct,
+                            objectPath
+                        },
+                        data() {
+                            return {
+                                domainObject
+                            };
+                        },
+                        template: '<lad-table-set :domain-object="domainObject"></lad-table-set>'
+                    });
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
         },
         priority: function () {
             return 1;

src/plugins/LADTable/LADTableView.js

@@ -1,45 +0,0 @@
-import LadTable from './components/LADTable.vue';
-
-import Vue from 'vue';
-
-export default class LADTableView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
-    }
-
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                LadTable
-            },
-            provide: {
-                openmct: this.openmct,
-                currentView: this
-            },
-            data: () => {
-                return {
-                    domainObject: this.domainObject,
-                    objectPath: this.objectPath
-                };
-            },
-            template: '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
-        });
-    }
-
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
-
-        return this.component.$refs.ladTable.getViewContext();
-    }
-
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
-    }
-}

src/plugins/LADTable/LADTableViewProvider.js

@@ -19,30 +19,50 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import LadTable from './components/LADTable.vue';
+import Vue from 'vue';
 
-import LADTableView from './LADTableView';
+export default function LADTableViewProvider(openmct) {
+    return {
+        key: 'LadTable',
+        name: 'LAD Table',
+        cssClass: 'icon-tabular-lad',
+        canView: function (domainObject) {
+            return domainObject.type === 'LadTable';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'LadTable';
+        },
+        view: function (domainObject, objectPath) {
+            let component;
 
-export default class LADTableViewProvider {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.name = 'LAD Table';
-        this.key = 'LadTable';
-        this.cssClass = 'icon-tabular-lad';
-    }
-
-    canView(domainObject) {
-        return domainObject.type === 'LadTable';
-    }
-
-    canEdit(domainObject) {
-        return domainObject.type === 'LadTable';
-    }
-
-    view(domainObject, objectPath) {
-        return new LADTableView(this.openmct, domainObject, objectPath);
-    }
-
-    priority(domainObject) {
-        return 1;
-    }
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            LadTableComponent: LadTable
+                        },
+                        provide: {
+                            openmct
+                        },
+                        data: () => {
+                            return {
+                                domainObject,
+                                objectPath
+                            };
+                        },
+                        template: '<lad-table-component :domain-object="domainObject" :object-path="objectPath"></lad-table-component>'
+                    });
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
 }

src/plugins/LADTable/LadTableSetView.js

@@ -1,45 +0,0 @@
-import LadTableSet from './components/LadTableSet.vue';
-
-import Vue from 'vue';
-
-export default class LadTableSetView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
-    }
-
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                LadTableSet
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath,
-                currentView: this
-            },
-            data: () => {
-                return {
-                    domainObject: this.domainObject
-                };
-            },
-            template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
-        });
-    }
-
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
-
-        return this.component.$refs.ladTableSet.getViewContext();
-    }
-
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
-    }
-}

src/plugins/LADTable/components/LADRow.vue

@@ -50,7 +50,7 @@ const CONTEXT_MENU_ACTIONS = [
 ];
 
 export default {
-    inject: ['openmct', 'currentView'],
+    inject: ['openmct'],
     props: {
         domainObject: {
             type: Object,
@@ -167,23 +167,25 @@ export default {
             this.resetValues();
             this.timestampKey = timeSystem.key;
         },
-        updateViewContext() {
-            this.$emit('rowContextClick', {
-                viewHistoricalData: true,
-                viewDatumAction: true,
-                getDatum: () => {
-                    return this.datum;
+        getView() {
+            return {
+                getViewContext: () => {
+                    return {
+                        viewHistoricalData: true,
+                        viewDatumAction: true,
+                        getDatum: () => {
+                            return this.datum;
+                        }
+                    };
                 }
-            });
+            };
         },
         showContextMenu(event) {
-            this.updateViewContext();
+            let actionCollection = this.openmct.actions.get(this.objectPath, this.getView());
+            let allActions = actionCollection.getActionsObject();
+            let applicableActions = CONTEXT_MENU_ACTIONS.map(key => allActions[key]);
 
-            const actions = CONTEXT_MENU_ACTIONS.map(key => this.openmct.actions.getAction(key));
-            const menuItems = this.openmct.menus.actionsToMenuItems(actions, this.objectPath, this.currentView);
-            if (menuItems.length) {
-                this.openmct.menus.showMenu(event.x, event.y, menuItems);
-            }
+            this.openmct.menus.showMenu(event.x, event.y, applicableActions);
         },
         resetValues() {
             this.value = '---';

src/plugins/LADTable/components/LADTable.vue

@@ -38,7 +38,6 @@
                 :domain-object="ladRow.domainObject"
                 :path-to-table="objectPath"
                 :has-units="hasUnits"
-                @rowContextClick="updateViewContext"
             />
         </tbody>
     </table>
@@ -52,7 +51,7 @@ export default {
     components: {
         LadRow
     },
-    inject: ['openmct', 'currentView'],
+    inject: ['openmct'],
     props: {
         domainObject: {
             type: Object,
@@ -65,8 +64,7 @@ export default {
     },
     data() {
         return {
-            items: [],
-            viewContext: {}
+            items: []
         };
     },
     computed: {
@@ -116,12 +114,6 @@ export default {
             let metadataWithUnits = valueMetadatas.filter(metadatum => metadatum.unit);
 
             return metadataWithUnits.length > 0;
-        },
-        updateViewContext(rowContext) {
-            this.viewContext.row = rowContext;
-        },
-        getViewContext() {
-            return this.viewContext;
         }
     }
 };

src/plugins/LADTable/components/LadTableSet.vue

@@ -48,7 +48,6 @@
                 :domain-object="ladRow.domainObject"
                 :path-to-table="ladTable.objectPath"
                 :has-units="hasUnits"
-                @rowContextClick="updateViewContext"
             />
         </template>
     </tbody>
@@ -62,7 +61,7 @@ export default {
     components: {
         LadRow
     },
-    inject: ['openmct', 'objectPath', 'currentView'],
+    inject: ['openmct', 'objectPath'],
     props: {
         domainObject: {
             type: Object,
@@ -73,8 +72,7 @@ export default {
         return {
             ladTableObjects: [],
             ladTelemetryObjects: {},
-            compositions: [],
-            viewContext: {}
+            compositions: []
         };
     },
     computed: {
@@ -168,12 +166,6 @@ export default {
 
                 this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
             };
-        },
-        updateViewContext(rowContext) {
-            this.viewContext.row = rowContext;
-        },
-        getViewContext() {
-            return this.viewContext;
         }
     }
 };

src/plugins/LADTable/pluginSpec.js

@@ -67,6 +67,10 @@ describe("The LAD Table", () => {
 
     // this setups up the app
     beforeEach((done) => {
+        const appHolder = document.createElement('div');
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
+
         openmct = createOpenMct();
 
         parent = document.createElement('div');
@@ -86,7 +90,7 @@ describe("The LAD Table", () => {
         });
 
         openmct.on('start', done);
-        openmct.startHeadless();
+        openmct.startHeadless(appHolder);
     });
 
     afterEach(() => {
@@ -109,8 +113,7 @@ describe("The LAD Table", () => {
 
         beforeEach(() => {
             ladTableCompositionCollection = openmct.composition.get(mockObj.ladTable);
-
-            return ladTableCompositionCollection.load();
+            ladTableCompositionCollection.load();
         });
 
         it("should accept telemetry producing objects", () => {
@@ -189,6 +192,8 @@ describe("The LAD Table", () => {
 
             await Promise.all([telemetryRequestPromise, telemetryObjectPromise, anotherTelemetryObjectPromise]);
             await Vue.nextTick();
+
+            return;
         });
 
         it("should show one row per object in the composition", () => {
@@ -237,6 +242,13 @@ describe("The LAD Table Set", () => {
     let ladPlugin;
     let parent;
     let child;
+    let telemetryCount = 3;
+    let timeFormat = 'utc';
+
+    let mockTelemetry = getMockTelemetry({
+        count: telemetryCount,
+        format: timeFormat
+    });
 
     let mockObj = getMockObjects({
         objectKeyStrings: ['ladTable', 'ladTableSet', 'telemetry']
@@ -252,22 +264,31 @@ describe("The LAD Table Set", () => {
     mockObj.ladTableSet.composition.push(mockObj.ladTable.identifier);
 
     beforeEach((done) => {
+        const appHolder = document.createElement('div');
+
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
+
         openmct = createOpenMct();
 
         parent = document.createElement('div');
         child = document.createElement('div');
         parent.appendChild(child);
 
+        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+
         ladPlugin = new LadPlugin();
         openmct.install(ladPlugin);
 
+        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
         openmct.time.bounds({
             start: bounds.start,
             end: bounds.end
         });
 
         openmct.on('start', done);
-        openmct.startHeadless();
+        openmct.start(appHolder);
     });
 
     afterEach(() => {
@@ -280,8 +301,6 @@ describe("The LAD Table Set", () => {
     });
 
     it("should provide a lad table set view only for lad table set objects", () => {
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
-
         let applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
 
         let ladTableSetView = applicableViews.find(
@@ -296,11 +315,8 @@ describe("The LAD Table Set", () => {
         let ladTableSetCompositionCollection;
 
         beforeEach(() => {
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
-
             ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
-
-            return ladTableSetCompositionCollection.load();
+            ladTableSetCompositionCollection.load();
         });
 
         it("should accept lad table objects", () => {
@@ -338,17 +354,41 @@ describe("The LAD Table Set", () => {
         otherObj.ladTable.composition.push(mockObj.telemetry.identifier);
         mockObj.ladTableSet.composition.push(otherObj.ladTable.identifier);
 
-        beforeEach(() => {
-            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+        beforeEach(async () => {
+            let telemetryRequestResolve;
+            let ladObjectResolve;
+            let anotherLadObjectResolve;
 
-            spyOn(openmct.objects, 'get').and.callFake((obj) => {
+            let telemetryRequestPromise = new Promise((resolve) => {
+                telemetryRequestResolve = resolve;
+            });
+
+            let ladObjectPromise = new Promise((resolve) => {
+                ladObjectResolve = resolve;
+            });
+
+            let anotherLadObjectPromise = new Promise((resolve) => {
+                anotherLadObjectResolve = resolve;
+            });
+
+            openmct.telemetry.request.and.callFake(() => {
+                telemetryRequestResolve(mockTelemetry);
+
+                return telemetryRequestPromise;
+            });
+
+            openmct.objects.get.and.callFake((obj) => {
                 if (obj.key === 'lad-object') {
-                    return Promise.resolve(mockObj.ladTable);
+                    ladObjectResolve(mockObj.ladObject);
+
+                    return ladObjectPromise;
                 } else if (obj.key === 'another-lad-object') {
-                    return Promise.resolve(otherObj.ladTable);
-                } else if (obj.key === 'telemetry-object') {
-                    return Promise.resolve(mockObj.telemetry);
+                    anotherLadObjectResolve(otherObj.ladObject);
+
+                    return anotherLadObjectPromise;
                 }
+
+                return Promise.resolve({});
             });
 
             openmct.time.bounds({
@@ -359,19 +399,20 @@ describe("The LAD Table Set", () => {
             applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
             ladTableSetViewProvider = applicableViews.find((viewProvider) => viewProvider.key === ladTableSetKey);
             ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
-            ladTableSetView.show(child);
+            ladTableSetView.show(child, true);
 
-            return Vue.nextTick();
+            await Promise.all([telemetryRequestPromise, ladObjectPromise, anotherLadObjectPromise]);
+            await Vue.nextTick();
+
+            return;
         });
 
         it("should show one row per lad table object in the composition", () => {
-            const ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
+            const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
 
-            return ladTableSetCompositionCollection.load().then(() => {
-                const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
-
-                expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
-            });
+            expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
+            pending();
         });
     });
 });
+