Make the tree key unique (#5989)

* fix(#5985): deep merge on create/edit properties

- Perform a deep merge of old and new properties on Create/Edit properties actions

* refactor(e2e): improve selector in appActions

* test(e2e): add tests for gauges

- test creating a non-default gauge (checks only for console errors)
- test updating a gauge (checks only for console errors)

* fix(e2e): use pluginFixtures for gauge tests

* fix(e2e): prevent fail if testNotes is undefined

e2e/appActions.js

@@ -72,17 +72,19 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     await page.click('button:has-text("Create")');
 
     // Click the object specified by 'type'
-    await page.click(`li:text("${type}")`);
+    await page.click(`li[role='menuitem']:text("${type}")`);
 
     // Modify the name input field of the domain object to accept 'name'
     const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
     await nameInput.fill("");
     await nameInput.fill(name);
 
-    // Fill the "Notes" section with information about the
-    // currently running test and its project.
-    const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
-    await notesInput.fill(page.testNotes);
+    if (page.testNotes) {
+        // Fill the "Notes" section with information about the
+        // currently running test and its project.
+        const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
+        await notesInput.fill(page.testNotes);
+    }
 
     // Click OK button and wait for Navigate event
     await Promise.all([

e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js

@@ -24,22 +24,19 @@
 * This test suite is dedicated to testing the Gauge component.
 */
 
-const { test, expect } = require('../../../../baseFixtures');
+const { test, expect } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const uuid = require('uuid').v4;
 
 test.describe('Gauge', () => {
-    let gauge;
-
     test.beforeEach(async ({ page }) => {
         // Open a browser, navigate to the main page, and wait until all networkevents to resolve
         await page.goto('./', { waitUntil: 'networkidle' });
-
-        // Create the gauge
-        gauge = await createDomainObjectWithDefaults(page, { type: 'Gauge' });
     });
 
     test('Can add and remove telemetry sources @unstable', async ({ page }) => {
+        // Create the gauge with defaults
+        const gauge = await createDomainObjectWithDefaults(page, { type: 'Gauge' });
         const editButtonLocator = page.locator('button[title="Edit"]');
         const saveButtonLocator = page.locator('button[title="Save"]');
 
@@ -90,4 +87,38 @@ test.describe('Gauge', () => {
         // Verify that the elements pool shows no elements
         await expect(page.locator('text="No contained elements"')).toBeVisible();
     });
+    test('Can create a non-default Gauge', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5356'
+        });
+        //Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click the object specified by 'type'
+        await page.click(`li[role='menuitem']:text("Gauge")`);
+        // FIXME: We need better selectors for these custom form controls
+        const displayCurrentValueSwitch = page.locator('.c-toggle-switch__slider >> nth=0');
+        await displayCurrentValueSwitch.setChecked(false);
+        await page.click('button[aria-label="Save"]');
+
+        // TODO: Verify changes in the UI
+    });
+    test('Can edit a single Gauge-specific property', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5985'
+        });
+
+        // Create the gauge with defaults
+        await createDomainObjectWithDefaults(page, { type: 'Gauge' });
+        await page.click('button[title="More options"]');
+        await page.click('li[role="menuitem"]:has-text("Edit Properties")');
+        // FIXME: We need better selectors for these custom form controls
+        const displayCurrentValueSwitch = page.locator('.c-toggle-switch__slider >> nth=0');
+        await displayCurrentValueSwitch.setChecked(false);
+        await page.click('button[aria-label="Save"]');
+
+        // TODO: Verify changes in the UI
+    });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "2.1.3-SNAPSHOT",
+  "version": "2.1.3",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",

src/plugins/formActions/CreateAction.js

@@ -53,10 +53,7 @@ export default class CreateAction extends PropertiesAction {
 
             const existingValue = this.domainObject[key];
             if (!(existingValue instanceof Array) && (typeof existingValue === 'object')) {
-                value = {
-                    ...existingValue,
-                    ...value
-                };
+                value = _.merge(existingValue, value);
             }
 
             _.set(this.domainObject, key, value);

src/plugins/formActions/EditPropertiesAction.js

@@ -22,6 +22,7 @@
 
 import PropertiesAction from './PropertiesAction';
 import CreateWizard from './CreateWizard';
+import _ from 'lodash';
 
 export default class EditPropertiesAction extends PropertiesAction {
     constructor(openmct) {
@@ -61,10 +62,7 @@ export default class EditPropertiesAction extends PropertiesAction {
             Object.entries(changes).forEach(([key, value]) => {
                 const existingValue = this.domainObject[key];
                 if (!(Array.isArray(existingValue)) && (typeof existingValue === 'object')) {
-                    value = {
-                        ...existingValue,
-                        ...value
-                    };
+                    value = _.merge(existingValue, value);
                 }
 
                 this.openmct.objects.mutate(this.domainObject, key, value);

src/ui/layout/mct-tree.vue

@@ -76,7 +76,7 @@
             <div :style="childrenHeightStyles">
                 <tree-item
                     v-for="(treeItem, index) in visibleItems"
-                    :key="treeItem.navigationPath"
+                    :key="`${treeItem.navigationPath}-${index}`"
                     :node="treeItem"
                     :is-selector-tree="isSelectorTree"
                     :selected-item="selectedItem"