Migrate to Vue 3 Migration Build

[ozyx]

Closes #6721
Closes #5713

Describe your changes:

This PR contains the changes necessary to upgrade Open MCT from Vue 2 to the Vue 3 Migration Build. It resolves all incompatibilities between Vue 2 and this migration build. Some of the notable changes include:

• Replacing all instances of the new Vue() component creation pattern
  • In Vue 3, components cannot be created on the fly and mounted off-DOM. The suggested fix from Vue is to use createApp, but in the context of Open MCT this means dozens of Vue apps being created and destroyed at any given moment. Instead, we have used a community hack for creating individual components.
• beforeDestroy() -> beforeUnmount()
• destroyed() -> unmounted()
• The addition of deep: true option on Array listeners is now required to detect Array changes
• Open MCT is now mounted on a child div instead of directly on document.body

All Submissions:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

• Changes address original issue?
• Tests included and/or updated with changes?
• Command line build passes?
• Has this been smoke tested?
• Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

• Changes appear to address issue?
• Reviewer has tested changes by following the provided instructions?
• Changes appear not to be breaking changes?
• Appropriate automated tests included?
• Code style and in-line documentation are appropriate?
• Has associated issue been labelled unverified? (only applicable if this PR closes the issue)
• Has associated issue been labelled bug? (only applicable if this PR is for a bug fix)

[deploysentinel]

Current Playwright Test Results Summary

✅ 13 Passing - ❌ 1 Failing

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 07/19/2023 06:28:15pm UTC)

Run Details

Running Workflow e2e-couchdb on Github Actions

Commit: fdfca3a

Started: 07/19/2023 06:23:31pm UTC

❌ Failures

📄   functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Notebook Tests with CouchDB @couchdb Inspect Notebook Entry Network Requests Retry 2 • Retry 1 • Initial Attempt Error: Test timeout of 60000ms exceeded. Test timeout of 60000ms exceeded.	6.38% (3) 3 / 47 runs failed over last 7 days	59.57% (28) 28 / 47 runs flaked over last 7 days

---

View Detailed Build Results

---

Current Playwright Test Results Summary

✅ 44 Passing - ❌ 5 Failing - ⚠️ 2 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 07/19/2023 06:28:15pm UTC)

Run Details

Running Job e2e-stable on CircleCI

Commit: fdfca3a

Started: 07/19/2023 04:03:30pm UTC

❌ Failures

📄   functional/plugins/plot/logPlot.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Log plot tests Log Plot ticks are functionally correct in regular and log mode and after refresh Retry 2 • Retry 1 • Initial Attempt Error: Test timeout of 180000ms exceeded. Test timeout of 180000ms exceeded.	34.13% (57) 57 / 167 runs failed over last 7 days	2.40% (4) 4 / 167 runs flaked over last 7 days

---

📄   functional/plugins/conditionSet/conditionSet.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Basic Condition Set Use ConditionSet should output blank instead of the default value Initial Attempt Error: expect(received).toHaveText(expected)... expect(received).toHaveText(expected) Expected string: "---" Received string: "false" Call log: - expect.toHaveText with timeout 5000ms - waiting for locator('[aria-label="Current Output Value"]') - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>Default</span> - unexpected value "Default" - waiting for locator('[aria-label="Current Output Value"]') - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>Default</span> - unexpected value "Default" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>Default</span> - unexpected value "Default" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>Default</span> - unexpected value "Default" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>false</span> - unexpected value "false" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>false</span> - unexpected value "false" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>false</span> - unexpected value "false" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>false</span> - unexpected value "false" - locator resolved to <span aria-label="Current Output Value" class="c-cs__c…>false</span> - unexpected value "false"	1.48% (2) 2 / 135 runs failed over last 7 days	0% (0) 0 / 135 runs flaked over last 7 days

---

📄   functional/plugins/imagery/exampleImagery.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Example Imagery Object Can use independent time conductor to change time Retry 1 • Initial Attempt Error: Test timeout of 60000ms exceeded. Test timeout of 60000ms exceeded.	100% (25) 25 / 25 runs failed over last 7 days	0% (0) 0 / 25 runs flaked over last 7 days

---

📄   functional/plugins/notebook/tags.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Tagging in Notebooks @addinit Can add tags Retry 2 • Retry 1 • Initial Attempt Error: Test timeout of 60000ms exceeded. Test timeout of 60000ms exceeded.	10.58% (20) 20 / 189 runs failed over last 7 days	0% (0) 0 / 189 runs flaked over last 7 days

---

📄   functional/notification.e2e.spec.js • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Notifications List Notifications can be dismissed individually Retry 2 • Retry 1 • Initial Attempt Error: expect(received).toBe(expected) // Object.is equality... expect(received).toBe(expected) // Object.is equality Expected: 1 Received: 0	24.42% (53) 53 / 217 runs failed over last 7 days	0% (0) 0 / 217 runs flaked over last 7 days

---

⚠️ Flakes

📄   functional/planning/ganttChart.e2e.spec.js • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Gantt Chart Displays all plan events Retry 1 • Initial Attempt	10.28% (22) 22 / 214 runs failed over last 7 days	4.67% (10) 10 / 214 runs flaked over last 7 days

---

📄   functional/plugins/imagery/exampleImagery.e2e.spec.js • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Example Imagery Object Can use Mouse Wheel to zoom in and out of latest image Retry 1 • Initial Attempt	0% (0) 0 / 190 runs failed over last 7 days	81.58% (155) 155 / 190 runs flaked over last 7 days

---

View Detailed Build Results

---

[davetsay]

okay okay

[khalidadil]

Reviewed the files I indicated on the spreadsheet - good work on this huge change!!