refactor: migrate to ESM (#7331)

* refactor: move package.json to type: module

this is where the fun begins

* chore: move webpack common and prod to esm

* chore: move webpack to esm, eslint to explicit cjs

* refactor: migrate all files to esm

* style: lint

* refactor: begin moving karma to cjs, use dynamic esm import

* refactor: move index-test to cjs

* refactor: begin moving e2e to ESM

this was manual. I'm committing this because I'm about to try the `cjstoesm` tool

* refactor: move all to esm

* fix: make all e2e tests use .js imports

* refactor: begin moving exports to esm

* refactor: use URL transforms instead of __dirname

* fix: use libraryExport: default to properly handle openmct

* fix: export all playwright configs as modules

* refactor: move all instances of __dirname to import.meta.url

* refactor: lint, drop unnecessary URL call

* fix: use correct URL path on helper/addNoneditableObject.js

* fix: more incorrect URL resolve issues

* fix: parse json after reading it

e2e/tests/visual-a11y/a11y.visual.spec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('a11y - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/components/about.visual.spec.js

@@ -24,9 +24,10 @@
 Tests the branding associated with the default deployment. At least the about modal for now
 */
 
-const { test, expect } = require('../../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
-const VISUAL_URL = require('../../../constants').VISUAL_URL;
+import percySnapshot from '@percy/playwright';
+
+import { VISUAL_URL } from '../../../constants.js';
+import { expect, test } from '../../../pluginFixtures.js';
 
 test.describe('Visual - Branding', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/components/inspector.visual.spec.js

@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test } = require('../../../pluginFixtures.js');
-const { VISUAL_URL, MISSION_TIME } = require('../../../constants.js');
-const percySnapshot = require('@percy/playwright');
+import percySnapshot from '@percy/playwright';
+
+import { MISSION_TIME, VISUAL_URL } from '../../../constants.js';
+import { test } from '../../../pluginFixtures.js';
 
 //Declare the scope of the visual test
 const inspectorPane = '.l-shell__pane-inspector';

e2e/tests/visual-a11y/components/tree.visual.spec.js

@@ -20,13 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test } = require('../../../pluginFixtures.js');
-const {
-  expandTreePaneItemByName,
-  createDomainObjectWithDefaults
-} = require('../../../appActions.js');
-const VISUAL_URL = require('../../../constants.js').VISUAL_URL;
-const percySnapshot = require('@percy/playwright');
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../../appActions.js';
+import { VISUAL_URL } from '../../../constants.js';
+import { test } from '../../../pluginFixtures.js';
 
 //Declare the scope of the visual test
 const treePane = "[role=tree][aria-label='Main Tree']";

e2e/tests/visual-a11y/controlledClock.visual.spec.js

@@ -25,9 +25,10 @@ Collection of Visual Tests set to run with browser clock manipulate made possibl
 clockOptions plugin fixture.
 */
 
-const { VISUAL_URL, MISSION_TIME } = require('../../constants');
-const { test, expect } = require('../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
+import percySnapshot from '@percy/playwright';
+
+import { MISSION_TIME, VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Visual - Controlled Clock', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/defaultPlugins.visual.spec.js

@@ -26,10 +26,11 @@ are only meant to run against openmct's app.js started by `npm run start` within
 `./e2e/playwright-visual.config.js` file.
 */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const { VISUAL_URL } = require('../../constants');
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('Visual - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/displayLayout.visual.spec.js

@@ -26,10 +26,11 @@
  * @property {Object<string, import('@playwright/test').Locator>} LayoutLocator
  */
 
-const { test } = require('../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const VISUAL_URL = require('../../constants').VISUAL_URL;
-const percySnapshot = require('@percy/playwright');
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { test } from '../../pluginFixtures.js';
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 
 test.describe('Visual - Display Layout', () => {

e2e/tests/visual-a11y/faultManagement.visual.spec.js

@@ -19,17 +19,16 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
-const path = require('path');
-const { test } = require('../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
+import percySnapshot from '@percy/playwright';
+import { fileURLToPath } from 'url';
 
-const utils = require('../../helper/faultUtils');
+import * as utils from '../../helper/faultUtils.js';
+import { test } from '../../pluginFixtures.js';
 
 test.describe('Fault Management Visual Tests', () => {
   test('icon test', async ({ page, theme }) => {
     await page.addInitScript({
-      path: path.join(__dirname, '../../helper/', 'addInitFaultManagementPlugin.js')
+      path: fileURLToPath(new URL('../../helper/addInitFaultManagementPlugin.js', import.meta.url))
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 

e2e/tests/visual-a11y/ladTable.visual.spec.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { expect, test } = require('../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Visual - LAD Table', () => {
   /** @type {import('@playwright/test').Locator} */

e2e/tests/visual-a11y/notebook.visual.spec.js

@@ -20,14 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
-const percySnapshot = require('@percy/playwright');
-const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
-const {
-  startAndAddRestrictedNotebookObject,
-  enterTextEntry
-} = require('../../helper/notebookUtils');
-const { VISUAL_URL } = require('../../constants');
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
 
 test.describe('Visual - Restricted Notebook', () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/notification.visual.spec.js

@@ -24,10 +24,11 @@
  * This test is dedicated to test notification banner functionality and its accessibility attributes.
  */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const VISUAL_URL = require('../../constants').VISUAL_URL;
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11y", () => {
   test.beforeEach(async ({ page }) => {

e2e/tests/visual-a11y/planning.visual.spec.js

@@ -20,15 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, scanForA11yViolations } = require('../../avpFixtures');
-const {
-  setBoundsToSpanAllActivities,
-  setDraftStatusForPlan
-} = require('../../helper/planningUtils');
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
-const percySnapshot = require('@percy/playwright');
-const VISUAL_URL = require('../../constants').VISUAL_URL;
-const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small2.json');
+import percySnapshot from '@percy/playwright';
+import fs from 'fs';
+
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+import { setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js';
+
+const examplePlanSmall = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
+);
 
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 

e2e/tests/visual-a11y/search.visual.spec.js

@@ -24,11 +24,11 @@
 This test suite is dedicated to tests which verify search functionality.
 */
 
-const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const { VISUAL_URL } = require('../../constants');
+import percySnapshot from '@percy/playwright';
 
-const percySnapshot = require('@percy/playwright');
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
 
 test.describe('Grand Search @a11y', () => {
   let conditionWidget;