feat: Multiple identifiers (#210)

* Feature: Multiple identifiers - a separate collection - in entity form

* Fix: Display identifiers in Attributes section, stay checked in editing, and allow remove identifiers

* Fix: Delete identifier if exists before deleting attribute

* Fix: add multiple attributes; added description; entity key to primary rename; etc. (WIP)

* Improvements: WIP - Identifiers to use similar add default functionality like other grids with prevent to save default; working on syncing primary status between entity attributes and identifiers section

* Fix: Syncing of entity attributes primary status with entity identifiers and vice-versa

* Test: Updated test case for attributes identifier property to identifiers section changes, other minor updates

* Fix: Delete attribute to delete only the attribute from all the identifiers, keeping the empty identifier to retain name; validation of attribute count removed; playwright delete test case updated

* Fix: Identifier ID and naming convention

* feat(e2e): add comprehensive identifier management tests

* fix: break down identifier tests into focused test cases

* Fix: Add Idenfier to default empty including first row; Playwright test - attributes optional in identifier save

* Removed atribute identifer property from grammer and where used.

* Updated all example and test workspaces to remove the identifier property on an attribute and specify separate identifier.

* Added validation for identifiers having at least one attribute.

* Fix: Lint warning

* Fix: remove only attribute from the identifier even when it was primary, retaining other properties - including primary

* fix:improve identifier tests

* fix(tests): harden flaky Playwright tests on Ubuntu CI

* fix: replace custom tab closure

* fix: replace save() with saveAndClose()

* fix: restore and improve identifier management tests with timing fixes

* Disabled autosave during e2e-tests
Remove unneeded attributes form Customer example entity
Updated getting attributes to always return string array
Updated PlayWright scenarios for diagram attributes/identifiers and identifiers via entity form

* Updated e2e test names and scripts

* Updated autosave settings

---------

Co-authored-by: Hardiksinh Gohil <[email protected]>
Co-authored-by: Harmen Wessels <[email protected]>

Author: 3 people

e2e-tests/src/page-objects/form/entity-form.ts

@@ -7,16 +7,19 @@ import { Locator } from '@playwright/test';
 import { TheiaPageObject } from '@theia/playwright';
 import { TheiaView } from '@theia/playwright/lib/theia-view';
 import { CMForm, FormIcons, FormSection, FormType } from './cm-form';
+import { LogicalEntityIdentifiersSection } from './sections/identifiers-section';
 
 export class LogicalEntityForm extends CMForm {
    readonly iconClass = FormIcons.LogicalEntity;
    readonly generalSection: LogicalEntityGeneralSection;
    readonly attributesSection: LogicalEntityAttributesSection;
+   readonly identifiersSection: LogicalEntityIdentifiersSection;
 
    constructor(view: TheiaView, baseSelector: string, formType: FormType) {
       super(view, baseSelector, formType);
       this.generalSection = new LogicalEntityGeneralSection(this);
       this.attributesSection = new LogicalEntityAttributesSection(this);
+      this.identifiersSection = new LogicalEntityIdentifiersSection(this);
    }
 }
 
@@ -99,7 +102,7 @@ export class LogicalEntityAttributesSection extends FormSection {
 
       // Wait for the edit mode to end using a direct selector
       const editingCell = this.locator.locator('td input[role="textbox"]');
-      await editingCell.waitFor({ state: 'hidden', timeout: 5000 });
+      await editingCell.waitFor({ state: 'hidden', timeout: 500 });
 
       // Give a little more time for the table to refresh
       await this.page.waitForTimeout(500);
@@ -153,7 +156,6 @@ export class LogicalEntityAttributesSection extends FormSection {
 export interface LogicalAttributeProperties {
    name: string;
    datatype: string;
-   identifier: boolean;
    description: string;
 }
 
@@ -211,7 +213,6 @@ export class LogicalAttribute extends TheiaPageObject {
       return {
          name: await this.getName(),
          datatype: await this.getDatatype(),
-         identifier: await this.isIdentifier(),
          description: await this.getDescription()
       };
    }
@@ -291,6 +292,8 @@ export class LogicalAttribute extends TheiaPageObject {
    }
 
    async setDescription(description: string): Promise<void> {
+      // Enter edit mode for the row
+      await this.actionsLocator.locator('button:has(.pi-pencil)').click(); // Re-enter edit mode
       const inputLocator = this.descriptionLocator.locator('input');
       await inputLocator.waitFor({ state: 'visible' });
       await inputLocator.fill(description);

e2e-tests/src/page-objects/form/logical-identifier.ts

@@ -0,0 +1,199 @@
+/********************************************************************************
+ * Copyright (c) 2025 CrossBreeze.
+ ********************************************************************************/
+
+import { waitForFunction } from '@eclipse-glsp/glsp-playwright';
+import { Locator } from '@playwright/test';
+import { TheiaPageObject } from '@theia/playwright';
+
+export class LogicalIdentifier extends TheiaPageObject {
+   constructor(
+      readonly locator: Locator,
+      section: any
+   ) {
+      super(section.app);
+   }
+
+   protected get nameLocator(): Locator {
+      return this.locator.locator('td').first();
+   }
+
+   protected get primaryLocator(): Locator {
+      return this.locator.locator('td').nth(1);
+   }
+
+   protected get attributeIdsLocator(): Locator {
+      return this.locator.locator('td:nth-child(3)'); // More reliable than nth(2)
+   }
+
+   protected get descriptionLocator(): Locator {
+      return this.locator.locator('td').nth(3);
+   }
+
+   protected get actionsLocator(): Locator {
+      return this.locator.locator('td').last();
+   }
+
+   async getName(): Promise<string> {
+      // First check if we're in edit mode
+      const inputLocator = this.nameLocator.locator('input');
+      if (await inputLocator.isVisible()) {
+         // If in edit mode, get value from input
+         const value = await inputLocator.inputValue();
+         return value;
+      }
+      // Otherwise get text content
+      return (await this.nameLocator.textContent()) ?? '';
+   }
+
+   async setName(name: string): Promise<void> {
+      const inputLocator = this.nameLocator.locator('input');
+
+      // If input is not immediately visible, enter edit mode
+      if (!(await inputLocator.isVisible())) {
+         await this.actionsLocator.locator('button:has(.pi-pencil)').click();
+         await inputLocator.waitFor({ state: 'visible' });
+      }
+
+      // Just fill the name without saving
+      await inputLocator.fill(name);
+   }
+
+   async isPrimary(): Promise<boolean> {
+      const checkboxBox = this.primaryLocator.locator('.p-checkbox-box');
+      try {
+         await checkboxBox.waitFor({ state: 'attached', timeout: 300 });
+         return (await checkboxBox.getAttribute('data-p-highlight')) === 'true';
+      } catch (error) {
+         return (await this.primaryLocator.locator('.pi-check').count()) === 1;
+      }
+   }
+
+   async setPrimary(primary: boolean): Promise<void> {
+      const checkbox = this.primaryLocator.locator('input[type="checkbox"]');
+
+      // If checkbox is not immediately visible, enter edit mode
+      if (!(await checkbox.isVisible())) {
+         await this.actionsLocator.locator('button:has(.pi-pencil)').click();
+         await checkbox.waitFor({ state: 'visible' });
+      }
+
+      const currentPrimary = await this.isPrimary();
+      if (currentPrimary !== primary) {
+         await checkbox.click();
+
+         // Wait for the checkbox state to update
+         const checkIcon = this.primaryLocator.locator('.p-checkbox-icon');
+         if (primary) {
+            await checkIcon.waitFor({ state: 'visible' });
+         } else {
+            await checkIcon.waitFor({ state: 'hidden' });
+         }
+      }
+
+      await waitForFunction(async () => (await this.isPrimary()) === primary);
+   }
+
+   async save(): Promise<void> {
+      const inputLocator = this.nameLocator.locator('input');
+      const name = await this.getName();
+
+      if (!name) {
+         throw new Error('Cannot save identifier without a name');
+      }
+
+      // Only proceed if we're in edit mode
+      if (!(await inputLocator.isVisible())) {
+         throw new Error('Cannot save identifier - not in edit mode');
+      }
+
+      // Save when we have both name and attributes
+      await inputLocator.press('Enter');
+
+      // Wait for edit mode to end
+      await inputLocator.waitFor({ state: 'hidden', timeout: 5000 });
+   }
+
+   async getAttributes(): Promise<string[]> {
+      try {
+         await this.attributeIdsLocator.waitFor({ state: 'visible', timeout: 5000 });
+
+         // If we're in edit mode, get from multiselect
+         const multiselect = this.attributeIdsLocator.locator('.p-multiselect');
+         if (await multiselect.isVisible()) {
+            const tokens = await multiselect.locator('.p-multiselect-token');
+            const labels = await tokens.locator('.p-multiselect-token-label').allTextContents();
+            return labels;
+         }
+
+         // Otherwise get from the view mode cell content
+         const text = await this.attributeIdsLocator.textContent();
+         return text ? text.trim().split(', ') : [];
+      } catch (error) {
+         return [];
+      }
+   }
+
+   async setAttributes(attributeIds: string[]): Promise<void> {
+      // First ensure we can interact with the multiselect
+      const multiSelect = this.attributeIdsLocator.locator('.p-multiselect');
+
+      // If multiselect is not immediately visible or clickable, enter edit mode
+      if (!(await multiSelect.isVisible()) || !(await multiSelect.isEnabled())) {
+         await this.actionsLocator.locator('button:has(.pi-pencil)').click();
+         await multiSelect.waitFor({ state: 'visible' });
+         await this.page.waitForTimeout(300); // Wait for edit mode transition
+      }
+
+      // Click the multiselect to open the dropdown
+      await multiSelect.click();
+
+      // Wait for the panel and verify it's visible
+      const panel = this.page.locator('.p-multiselect-panel');
+      await panel.waitFor({ state: 'visible', timeout: 5000 });
+
+      // Select or unselect attributes as needed
+      const options = await panel.getByRole('option').all();
+      for (const option of options) {
+         const optionName = (await option.textContent())?.trim() ?? '';
+         const isSelected = (await option.getAttribute('aria-selected')) === 'true';
+         const shouldBeSelected = attributeIds.includes(optionName);
+
+         // Toggle selection if needed
+         if (isSelected !== shouldBeSelected) {
+            await option.click();
+            // Wait for the selection to register
+            await this.page.waitForTimeout(100);
+         }
+      }
+
+      // Close the panel
+      const closeButton = panel.locator('.p-multiselect-close');
+      await closeButton.waitFor({ state: 'visible' });
+      await closeButton.click();
+      await panel.waitFor({ state: 'hidden', timeout: 5000 });
+   }
+
+   async getDescription(): Promise<string> {
+      return (await this.descriptionLocator.textContent()) ?? '';
+   }
+
+   async setDescription(description: string): Promise<void> {
+      const inputLocator = this.descriptionLocator.locator('input');
+
+      // If input is not immediately visible, enter edit mode
+      if (!(await inputLocator.isVisible())) {
+         await this.actionsLocator.locator('button:has(.pi-pencil)').click();
+         await inputLocator.waitFor({ state: 'visible' });
+      }
+
+      await inputLocator.fill(description);
+      await this.descriptionLocator.press('Enter');
+      await waitForFunction(async () => (await this.getDescription()) === description);
+   }
+
+   async delete(): Promise<void> {
+      const deleteButton = this.actionsLocator.locator('button:has(.pi-trash)');
+      await deleteButton.click();
+   }
+}