Issue #3834 Reimplement New Tab action in vanilla JS (#3876)

* [Reimplement] create new action plugin for issue #3834

Co-authored-by mariuszr mariusz.rosinski@gmail.com
Co-authored-by: Henry Hsu <henryhsu@henrys-air.lan>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

platform/commonUI/browse/bundle.js

@@ -24,7 +24,6 @@ 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",
@@ -37,7 +36,6 @@ define([
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
-    NewTabAction,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -128,23 +126,6 @@ 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/test/windowing/NewTabActionSpec.js

@@ -1,75 +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/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();
-            });
-
-        });
-    }
-);

src/MCT.js

@@ -274,6 +274,7 @@ define([
         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());

src/plugins/openInNewTabAction/openInNewTabAction.js

@@ -0,0 +1,38 @@
+/*****************************************************************************
+ * 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 objectPathToUrl from '/src/tools/url';
+export default class OpenInNewTab {
+    constructor(openmct) {
+        this.name = 'Open In New Tab';
+        this.key = 'newTab';
+        this.description = 'Open in a new browser tab';
+        this.group = "windowing";
+        this.priority = 10;
+        this.cssClass = "icon-new-window";
+
+        this._openmct = openmct;
+    }
+    invoke(objectPath) {
+        let url = objectPathToUrl(this._openmct, objectPath);
+        window.open(url);
+    }
+}

src/plugins/openInNewTabAction/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * 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 OpenInNewTabAction from './openInNewTabAction';
+
+export default function () {
+    return function (openmct) {
+        openmct.actions.register(new OpenInNewTabAction(openmct));
+    };
+}

src/plugins/openInNewTabAction/pluginSpec.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.
+ *****************************************************************************/
+import {
+    createOpenMct,
+    resetApplicationState,
+    spyOnBuiltins
+} from 'utils/testing';
+
+describe("the plugin", () => {
+    let openmct;
+    let openInNewTabAction;
+    let mockObjectPath;
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        openInNewTabAction = openmct.actions._allActions.newTab;
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it('installs the open in new tab action', () => {
+        expect(openInNewTabAction).toBeDefined();
+    });
+
+    describe('when invoked', () => {
+
+        beforeEach(async () => {
+            mockObjectPath = [{
+                name: 'mock folder',
+                type: 'folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            }];
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
+                identifier: {
+                    namespace: '',
+                    key: 'test'
+                }
+            }));
+            spyOnBuiltins(['open']);
+            await openInNewTabAction.invoke(mockObjectPath);
+        });
+
+        afterEach(() => {
+            return resetApplicationState(openmct);
+        });
+        it('it opens in a new tab', () => {
+            expect(window.open).toHaveBeenCalled();
+        });
+    });
+});

src/plugins/plugins.js

@@ -46,6 +46,7 @@ define([
     './filters/plugin',
     './objectMigration/plugin',
     './goToOriginalAction/plugin',
+    './openInNewTabAction/plugin',
     './clearData/plugin',
     './webPage/plugin',
     './condition/plugin',
@@ -91,6 +92,7 @@ define([
     Filters,
     ObjectMigration,
     GoToOriginalAction,
+    OpenInNewTabAction,
     ClearData,
     WebPagePlugin,
     ConditionPlugin,
@@ -190,6 +192,7 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
+    plugins.OpenInNewTabAction = OpenInNewTabAction.default;
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
     plugins.Espresso = Espresso.default;

src/tools/url.js

@@ -21,38 +21,39 @@
  *****************************************************************************/
 
 /**
- * Module defining NewTabAction (Originally NewWindowAction). Created by vwoeltje on 11/18/14.
+ * Module defining url handling.
  */
-define(
-    [],
-    function () {
-        /**
-         * The new tab action allows a domain object to be opened
-         * into a new browser tab.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         * @implements {Action}
-         */
-        function NewTabAction(urlService, $window, context) {
-            context = context || {};
 
-            this.urlService = urlService;
+export function paramsToArray(openmct) {
-            this.open = function () {
+    // parse urParams from an object to an array.
-                arguments[0] += "&hideTree=true&hideInspector=true";
+    let urlParams = openmct.router.getParams();
-                $window.open.apply($window, arguments);
+    let newTabParams = [];
-            };
+    for (let key in urlParams) {
-
+        if ({}.hasOwnProperty.call(urlParams, key)) {
-            // Choose the object to be opened into a new tab
+            let param = `${key}=${urlParams[key]}`;
-            this.domainObject = context.selectedObject || context.domainObject;
+            newTabParams.push(param);
         }
-
-        NewTabAction.prototype.perform = function () {
-            this.open(
-                this.urlService.urlForNewTab("browse", this.domainObject),
-                "_blank"
-            );
-        };
-
-        return NewTabAction;
     }
-);
+
+    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;
+}

src/ui/mixins/object-link.js

@@ -1,3 +1,5 @@
+import objectPathToUrl from '/src/tools/url';
+
 export default {
     inject: ['openmct'],
     props: {
@@ -18,10 +20,9 @@ export default {
                 return '#' + this.navigateToPath;
             }
 
-            return '#/browse/' + this.objectPath
+            let url = objectPathToUrl(this.openmct, this.objectPath);
-                .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+
-                .reverse()
+            return url;
-                .join('/');
         }
     }
 };