Add Output Language Handling to Sequence Editor (#1931)

* Refactor output format controls into separate OutputToolbar component

- Add OutputToolbar component with output format selection, copy, download, and preview toggle buttons

* Only show output panel when editing a file matching the adaptation's input extension

* Use output language extensions when editing non-input sequence files

- Add `isInputFile` prop to SequenceEditor to determine if the current file matches the adaptation's input extension
- Apply input editor extensions only when editing an input file; otherwise, find and use the matching output format's extensions
- Show output panel only when editing an input file with available output formats
- Compute `activeFileIsInputSequence` in workspace page to distinguish input files from output files=

* add missing declarations for variables

* fix SequenceEditor to clear existing diagnostics when switching between languages

* add e2e test data for sequence adaptation with multiple output languages

* Add test for sequence adaptation with multiple output languages

* Refactor e2e test to dynamically test all output languages from sequence adaptation file

* Refactor conditional logic for command panel visibility and update empty state message to clarify adaptation requirement

* Add support for .cjs file extension in dictionary upload for sequence adaptations

* Update empty state message in command panel to distinguish between missing dictionary and missing adaptation command mapping

Author: duranb

e2e-tests/data/sequence-adaptation-minimal.js

@@ -17,14 +17,14 @@
 const minimalInputLanguage = {
   fileExtension: '.txt',
   name: 'Minimal Test Language',
-  extension: [],
+  getEditorExtension: () => {},
 };
 
 // Minimal output language
 const minimalOutputLanguage = {
   fileExtension: '.json',
   name: 'JSON Output',
-  extension: [],
+  getEditorExtension: () => {},
 
   // Convert output back to input format
   toInputFormat: function (output) {
@@ -37,7 +37,7 @@ const minimalOutputLanguage = {
   },
 
   // Convert input to output format
-  toOutputFormat: function (input, context, name) {
+  toOutputFormat: function (input, _context, name) {
     // Uncomment the line below to test runtime errors:
     // throw new Error('Intentional adaptation error for testing');
 

e2e-tests/data/sequence-adaptation-multiple-output.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+/**
+ * Minimal Sequence Adaptation for Testing
+ *
+ * This is a bare-bones adaptation useful for testing adaptation loading,
+ * error handling, and the workspace console.
+ *
+ * To test different error scenarios, you can:
+ * 1. Remove `exports.adaptation` - tests "No adaptation export found" error
+ * 2. Set `exports.adaptation = null` - tests null adaptation error
+ * 3. Remove `input` property - tests invalid adaptation structure
+ * 4. Throw an error in toOutputFormat - tests runtime errors
+ */
+
+// Minimal input language - no grammar, just basic structure
+const minimalInputLanguage = {
+  fileExtension: '.seqN.txt',
+  name: 'Minimal Test Input Language',
+  getEditorExtension: (_context, resources) => [
+    resources.linter(() => {
+      // Pass the syntax node as undefined as it's optional in the implementation
+      return [];
+    }),
+  ],
+};
+
+// Minimal output language 1
+const minimalOutputLanguage1 = {
+  fileExtension: '.rml',
+  name: 'Language 1 Output',
+  getEditorExtension: (_context, resources) => {
+    return [
+      resources.linter(() => {
+        // Pass the syntax node as undefined as it's optional in the implementation
+        return [{
+          from: 0,
+          to: 10,
+          severity: "warning",
+          message: "This is a warning lint for output language 1"
+        }];
+      }),
+    ];
+  },
+  // Convert output back to input format
+  toInputFormat: function () {
+    return 'This is the converted input for language 1'
+  },
+
+  // Convert input to output format
+  toOutputFormat: function () {
+    return 'This is the output for language 1'
+  },
+};
+
+// Minimal output language 2
+const minimalOutputLanguage2 = {
+  fileExtension: '.vml',
+  name: 'Language 2 Output',
+  getEditorExtension: (_context, resources) => {
+    return [
+      resources.linter(() => {
+        // Pass the syntax node as undefined as it's optional in the implementation
+          return [{
+            from: 0,
+            to: 10,
+            severity: "warning",
+            message: "This is a warning lint for output language 2"
+          }];
+      }),
+    ];
+  },
+
+  // Convert output back to input format
+  toInputFormat: function () {
+    return 'This is the converted input for language 2';
+  },
+
+  // Convert input to output format
+  toOutputFormat: function () {
+    return 'This is the output for language 2'
+  },
+};
+
+// The main adaptation export
+const adaptation = {
+  input: minimalInputLanguage,
+  outputs: [minimalOutputLanguage1, minimalOutputLanguage2],
+};
+
+// Export the adaptation (required)
+exports.adaptation = adaptation;

e2e-tests/fixtures/Parcels.ts

@@ -3,18 +3,18 @@ import { adjectives, animals, colors, uniqueNamesGenerator } from 'unique-names-
 import { filterAgGridTable } from '../utilities/helpers.js';
 
 export class Parcels {
-  closeButton: Locator;
-  confirmModal: Locator;
-  confirmModalDeleteButton: Locator;
-  createButton: Locator;
-  nameField: Locator;
-  newButton: Locator;
-  pageLoadingLocator: Locator;
+  closeButton!: Locator;
+  confirmModal!: Locator;
+  confirmModalDeleteButton!: Locator;
+  createButton!: Locator;
+  nameField!: Locator;
+  newButton!: Locator;
+  pageLoadingLocator!: Locator;
   parcelName: string;
-  table: Locator;
-  tableRow: (parcelName: string) => Locator;
-  tableRowDeleteButton: (parcelName: string) => Locator;
-  tableRowParcelId: (parcelName: string) => Locator;
+  table!: Locator;
+  tableRow!: (parcelName: string) => Locator;
+  tableRowDeleteButton!: (parcelName: string) => Locator;
+  tableRowParcelId!: (parcelName: string) => Locator;
 
   constructor(public page: Page) {
     this.parcelName = uniqueNamesGenerator({ dictionaries: [adjectives, colors, animals] });
@@ -95,6 +95,94 @@ export class Parcels {
     await this.pageLoadingLocator.waitFor({ state: 'detached' });
   }
 
+  async updateDictionarySelections({
+    channelDictionaryName,
+    commandDictionaryName,
+    parameterDictionaryName,
+    sequenceAdaptationName,
+  }: {
+    channelDictionaryName?: string;
+    commandDictionaryName?: string;
+    parameterDictionaryName?: string;
+    sequenceAdaptationName?: string;
+  }) {
+    const parcelTableRow = this.page.locator(`.ag-row:has-text("${this.parcelName}")`);
+    const parcelTableRowOpenButton = await this.page.locator(
+      `.ag-row:has-text("${this.parcelName}") >> button[aria-label="Open Parcel"]`,
+    );
+
+    parcelTableRow.hover();
+    await parcelTableRowOpenButton.waitFor({ state: 'attached' });
+    await parcelTableRowOpenButton.waitFor({ state: 'visible' });
+    await expect(parcelTableRowOpenButton).toBeVisible();
+    parcelTableRowOpenButton.click();
+
+    this.updatePage(this.page);
+    await expect(this.page.getByText('Edit Parcel')).toBeVisible();
+
+    // Select command dictionary if provided
+    if (commandDictionaryName) {
+      const commandDictionaryTable = await this.page
+        .getByRole('tabpanel')
+        .filter({ hasText: 'Command Dictionaries' })
+        .getByRole('treegrid');
+
+      await filterAgGridTable(this.page, commandDictionaryTable, commandDictionaryName);
+      await commandDictionaryTable
+        .getByRole('row')
+        .filter({ hasText: commandDictionaryName })
+        .getByRole('checkbox')
+        .click();
+    }
+
+    // Select channel dictionary if provided
+    if (channelDictionaryName) {
+      const channelDictionaryTable = await this.page
+        .getByRole('tabpanel')
+        .filter({ hasText: 'Channel Dictionaries' })
+        .getByRole('treegrid');
+
+      await filterAgGridTable(this.page, channelDictionaryTable, channelDictionaryName);
+      await channelDictionaryTable
+        .getByRole('row')
+        .filter({ hasText: channelDictionaryName })
+        .getByRole('checkbox')
+        .click();
+    }
+
+    // Select parameter dictionary if provided
+    if (parameterDictionaryName) {
+      const parameterDictionaryTable = await this.page
+        .getByRole('tabpanel')
+        .filter({ hasText: 'Parameter Dictionaries' })
+        .getByRole('treegrid');
+
+      await filterAgGridTable(this.page, parameterDictionaryTable, parameterDictionaryName);
+      await parameterDictionaryTable
+        .getByRole('row')
+        .filter({ hasText: parameterDictionaryName })
+        .getByRole('checkbox')
+        .click();
+    }
+
+    // Select sequence adaptation if provided
+    if (sequenceAdaptationName) {
+      const sequenceAdaptationTable = await this.page
+        .getByRole('tabpanel')
+        .filter({ hasText: 'Sequence Adaptations' })
+        .getByRole('treegrid');
+
+      await filterAgGridTable(this.page, sequenceAdaptationTable, sequenceAdaptationName);
+      await sequenceAdaptationTable
+        .getByRole('row')
+        .filter({ hasText: sequenceAdaptationName })
+        .getByRole('checkbox')
+        .click();
+    }
+
+    await this.page.getByRole('button', { name: 'Save' }).click();
+  }
+
   updatePage(page: Page): void {
     this.page = page;
 

e2e-tests/fixtures/Workspace.ts

@@ -17,6 +17,7 @@ export class Workspace {
   metadataTabButton!: Locator;
   navButtonSequences!: Locator;
   navButtonSequencesMenu!: Locator;
+  outputPanelCollapseButton!: Locator;
   pageLoadingLocatorWithData!: Locator;
   readOnlyCheckbox!: Locator;
   rightPanelCollapseButton!: Locator;
@@ -237,6 +238,17 @@ export class Workspace {
     await this.page.getByText('User metadata', { exact: true }).waitFor({ state: 'visible', timeout: 5000 });
   }
 
+  async openOutputPanel(): Promise<void> {
+    const initialText = await this.outputPanelCollapseButton.textContent();
+    await this.outputPanelCollapseButton.click();
+
+    if (initialText?.includes('Collapse Editor')) {
+      await expect(this.outputPanelCollapseButton).toHaveText(/Expand Editor/);
+    } else if (initialText?.includes('Expand Editor')) {
+      await expect(this.outputPanelCollapseButton).toHaveText(/Collapse Editor/);
+    }
+  }
+
   async openWorkspaceContextMenu(): Promise<void> {
     await this.workspaceContextMenuButton.click();
     await this.workspaceHeaderMenu.waitFor({ state: 'attached' });
@@ -289,6 +301,7 @@ export class Workspace {
     this.navButtonSequences = page.locator('.nav-button:has-text("Sequences")');
     this.navButtonSequencesMenu = this.navButtonSequences.getByRole('menu');
     this.page = page;
+    this.outputPanelCollapseButton = page.getByRole('button', { name: /Collapse Editor|Expand Editor/ });
     this.pageLoadingLocatorWithData = page.getByText('Loading workspace').first();
     this.readOnlyCheckbox = page.locator('#read-only');
     this.rightPanelCollapseButton = page.getByRole('button', { name: /Collapse panel|Expand panel/ }).last();

e2e-tests/tests/workspace-multiple-output.test.ts

@@ -0,0 +1,116 @@
+import test, { expect } from '@playwright/test';
+import { getWorkspacesUrl } from '../../src/utilities/routes.js';
+import { Dictionaries } from '../fixtures/Dictionaries.js';
+import { Parcels } from '../fixtures/Parcels.js';
+import { Workspace } from '../fixtures/Workspace.js';
+import { Workspaces } from '../fixtures/Workspaces.js';
+import { setupTest, teardownTest, type BrowserSetupResult } from '../utilities/api.js';
+import { generateRandomName } from '../utilities/helpers.js';
+
+// Load the CommonJS module dynamically
+const adaptationModule = await import('../data/sequence-adaptation-multiple-output.cjs');
+const adaptation = adaptationModule.default.adaptation;
+
+// Main setup (uses default 'test' user)
+let setup: BrowserSetupResult;
+let dictionaries: Dictionaries;
+let parcels: Parcels;
+let sequence: { sequenceName: string; sequencePath: string };
+let workspace: Workspace;
+let workspaces: Workspaces;
+let workspaceId: string;
+let workspaceName: string;
+
+test.beforeAll(async ({ baseURL, browser }) => {
+  // Increase global timeout to prevent early test termination
+  test.setTimeout(60000); // 60 seconds
+
+  setup = await setupTest(browser, { model: false });
+
+  dictionaries = new Dictionaries(setup.page);
+  parcels = new Parcels(setup.page);
+  workspaces = new Workspaces(setup.page, parcels, baseURL);
+
+  // Setup dependencies: dictionary and parcel
+  await dictionaries.goto();
+  await dictionaries.createCommandDictionary();
+  await dictionaries.createSequenceAdaptation(undefined, 'e2e-tests/data/sequence-adaptation-multiple-output.cjs');
+  await parcels.goto();
+  await parcels.createParcel(dictionaries.commandDictionaryName, baseURL);
+  await parcels.updateDictionarySelections({
+    sequenceAdaptationName: dictionaries.sequenceAdaptationName,
+  });
+
+  // Create a workspace for testing
+  await workspaces.goto();
+  workspaceId = await workspaces.createWorkspace();
+  workspaceName = workspaces.workspaceName;
+
+  // Initialize workspace fixture
+  workspace = new Workspace(setup.page, workspaceId, workspaceName, baseURL);
+  workspace.updatePage(setup.page);
+  await workspace.goto();
+
+  // Setup workspace
+  sequence = await workspace.createSequence(undefined, `${generateRandomName()}${adaptation.input.fileExtension}`);
+  await workspace.searchForFileAndWait(sequence.sequenceName);
+  await workspace.clickFile(sequence.sequenceName);
+
+  await expect(setup.page).toHaveURL(
+    getWorkspacesUrl(
+      workspace.baseURL,
+      parseInt(workspace.workspaceId),
+      `${sequence.sequencePath}/${sequence.sequenceName}`,
+    ),
+  );
+
+  // Make changes
+  await workspace.fillSequenceContent('// New content');
+
+  // Verify save button is now enabled (unsaved changes detected)
+  await expect(workspace.saveSequenceButton).toBeEnabled();
+
+  // Save and verify button is disabled again
+  await workspace.saveSequence();
+
+  await workspace.openOutputPanel();
+});
+
+test.afterAll(async () => {
+  // Cleanup: delete workspace, parcel, and dictionary
+  await workspaces.goto();
+  await workspaces.deleteWorkspace(workspaceName);
+  await parcels.goto();
+  await parcels.deleteParcel();
+
+  await teardownTest(setup);
+});
+
+for (let i = 0; i < adaptation.outputs.length; i++) {
+  const output = adaptation.outputs[i];
+  const languageOutput = output.toOutputFormat();
+
+  test.describe.serial('Workspace with sequence adaptation with multiple output languages', () => {
+    test(`Convert input to ${output.name}`, async () => {
+      const outputEditor = workspace.page.getByTestId('output-editor');
+
+      await workspace.page.getByRole('combobox', { name: 'Output Format' }).selectOption({ index: i });
+
+      // Validate that the output editor contains the correct output for the selected adaptation output language
+      await expect(outputEditor).toContainText(languageOutput);
+    });
+
+    test(`Copy the output for ${output.name}`, async () => {
+      // Grant clipboard permissions for this test
+      await setup.context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+      await workspace.page.getByRole('button', { name: 'Copy as' }).click();
+
+      // Read from clipboard and verify
+      const clipboardText = await setup.page.evaluate(() => navigator.clipboard.readText());
+
+      // Validate that the clipboard contains the correct output for the selected adaptation output language
+      expect(clipboardText).toContain(languageOutput);
+    });
+  });
+}