LAD Tables now disallow user-select (#6322)

* Closes #6321
- Set `user-select: none` on LAD Table td elements.
- Added hover effect to LAD Table rows as affordance of the Action
menu's availability.

* Add test to ensure rows cannot be selected but do show context menus

---------

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

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

@@ -27,26 +27,29 @@ test.describe('Testing LAD table configuration', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('./', { waitUntil: 'networkidle' });
 
-        // Create Sine Wave Generator
-        await createDomainObjectWithDefaults(page, {
-            type: 'Sine Wave Generator',
-            name: "Test Sine Wave Generator"
-        });
-
         // Create LAD table
-        await createDomainObjectWithDefaults(page, {
+        const ladTable = await createDomainObjectWithDefaults(page, {
             type: 'LAD Table',
             name: "Test LAD Table"
         });
+
+        // Create Sine Wave Generator
+        await createDomainObjectWithDefaults(page, {
+            type: 'Sine Wave Generator',
+            name: "Test Sine Wave Generator",
+            parent: ladTable.uuid
+        });
+
+        await page.goto(ladTable.url);
     });
     test('in edit mode, LAD Tables provide ability to hide columns', async ({ page }) => {
         // Edit LAD table
         await page.locator('[title="Edit"]').click();
 
-        // Expand the 'My Items' folder in the left tree
+        // // Expand the 'My Items' folder in the left tree
-        await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+        // await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
-        // Add the Sine Wave Generator to the LAD table and save changes
+        // // Add the Sine Wave Generator to the LAD table and save changes
-        await page.dragAndDrop('role=treeitem[name=/Test Sine Wave Generator/]', '.c-lad-table-wrapper');
+        // await page.dragAndDrop('role=treeitem[name=/Test Sine Wave Generator/]', '.c-lad-table-wrapper');
         // select configuration tab in inspector
         await selectInspectorTab(page, 'LAD Table Configuration');
 
@@ -113,6 +116,24 @@ test.describe('Testing LAD table configuration', () => {
         await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
         await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
     });
+
+    test('LAD Tables don\'t allow selection of rows but does show context click menus', async ({ page }) => {
+        const cell = await page.locator('.js-first-data');
+        const userSelectable = await cell.evaluate((el) => {
+            return window.getComputedStyle(el).getPropertyValue('user-select');
+        });
+
+        expect(userSelectable).toBe('none');
+        // Right-click on the LAD table row
+        await cell.click({
+            button: 'right'
+        });
+        const menuOptions = page.locator('.c-menu ul');
+        await expect.soft(menuOptions).toContainText('View Full Datum');
+        await expect.soft(menuOptions).toContainText('View Historical Data');
+        await expect.soft(menuOptions).toContainText('Remove');
+        // await page.locator('li[title="Remove this object from its containing object."]').click();
+    });
 });
 
 test.describe('Testing LAD table @unstable', () => {

src/styles/_table.scss

@@ -212,7 +212,15 @@ div.c-table {
         text-overflow: ellipsis;
     }
 
+    tbody tr {
+        &:hover {
+            background: $colorItemTreeHoverBg;
+        }
+    }
+
     td {
+        user-select: none; // Table supports context-click to display Actions menu, don't allow text selection.
+
         &.is-stale {
             @include isStaleElement();
         }