@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.153 → 2.0.0-next.154

package/src/components/alert-list-details-experimental/alert-list-details-experimental.spec.ts

@@ -0,0 +1,188 @@
+import {describe, it, expect} from 'vitest';
+import {
+  FilterModes,
+  ObcAlertListCellSlotsChangeEvent,
+  ObcAlertListDetailsExperimental,
+  alertListCellSlotName,
+  getAlertRows,
+  statusColumn,
+} from './alert-list-details-experimental.js';
+import {Alert, AlertType} from '../../types.js';
+
+function alert(id: string, overrides: Partial<Alert> = {}): Alert {
+  return {
+    id,
+    tagId: id,
+    source: 'Source',
+    text: id,
+    acknowledged: false,
+    active: true,
+    type: AlertType.Warning,
+    time: new Date('2024-01-15T14:32:15Z'),
+    ...overrides,
+  } as Alert;
+}
+
+const rowIds = (alerts: Alert[], filterMode = FilterModes.ALL) =>
+  getAlertRows(alerts, filterMode).map((row) => row.rowId);
+
+describe('getAlertRows', () => {
+  it('gives an ungrouped alert its encoded id as row id', () => {
+    const rows = getAlertRows([alert('a/b')], FilterModes.ALL);
+    expect(rows).toEqual([
+      {
+        rowId: 'a%2Fb',
+        parentRowId: undefined,
+        alert: expect.objectContaining({id: 'a/b'}),
+        level: 0,
+        expandable: false,
+      },
+    ]);
+  });
+
+  it('nests members under their group path', () => {
+    const rows = getAlertRows(
+      [
+        alert('gyro'),
+        alert('sensor', {memberOf: ['gyro']}),
+        alert('drift', {memberOf: ['sensor']}),
+      ],
+      FilterModes.ALL
+    );
+    expect(
+      rows.map(({rowId, level, expandable}) => [rowId, level, expandable])
+    ).toEqual([
+      ['gyro', 0, true],
+      ['gyro/sensor', 1, true],
+      ['gyro/sensor/drift', 2, false],
+    ]);
+  });
+
+  it('gives an alert in two groups one row under each', () => {
+    expect(
+      rowIds([
+        alert('gyro'),
+        alert('radar'),
+        alert('power', {memberOf: ['gyro', 'radar']}),
+      ])
+    ).toEqual(['gyro', 'gyro/power', 'radar', 'radar/power']);
+  });
+
+  it('makes a member a root when the filter mode hides its group', () => {
+    const alerts = [
+      alert('group', {active: {rectifiedTime: new Date()}}),
+      alert('member', {memberOf: ['group']}),
+    ];
+    expect(rowIds(alerts, FilterModes.ALL)).toEqual(['member']);
+    expect(rowIds(alerts, FilterModes.RECTIFIED)).toEqual(['group']);
+  });
+
+  it('recovers a membership cycle with no root', () => {
+    expect(
+      rowIds([
+        alert('pump-a', {memberOf: ['pump-b']}),
+        alert('pump-b', {memberOf: ['pump-a']}),
+      ])
+    ).toEqual(['pump-a', 'pump-a/pump-b']);
+  });
+});
+
+describe('cellSlots', () => {
+  it('lists every row of each slot column and fires only when it changes', async () => {
+    const el = document.createElement('obc-alert-list-details-experimental');
+    const details: ObcAlertListCellSlotsChangeEvent['detail'][] = [];
+    el.addEventListener('cell-slots-change', (event) =>
+      details.push((event as ObcAlertListCellSlotsChangeEvent).detail)
+    );
+    el.columns = [statusColumn(), {key: 'ack', label: 'ACK', slot: true}];
+    el.alerts = [
+      alert('gyro'),
+      alert('radar'),
+      alert('power', {memberOf: ['gyro', 'radar']}),
+    ];
+    document.body.append(el);
+    await el.updateComplete;
+
+    expect(el.cellSlots.map((slot) => slot.name)).toEqual([
+      'cell-ack:gyro',
+      'cell-ack:gyro/power',
+      'cell-ack:radar',
+      'cell-ack:radar/power',
+    ]);
+    expect(details).toEqual([el.cellSlots]);
+
+    el.defaultExpanded = false;
+    el.alerts = [...el.alerts];
+    await el.updateComplete;
+    expect(details).toHaveLength(1);
+
+    el.columns = [statusColumn()];
+    await el.updateComplete;
+    expect(details[details.length - 1]).toEqual([]);
+    el.remove();
+  });
+});
+
+describe('selectedRowId', () => {
+  const groupedAlerts = () => [
+    alert('gyro'),
+    alert('sensor', {memberOf: ['gyro']}),
+    alert('radar'),
+    alert('power', {memberOf: ['gyro', 'radar']}),
+  ];
+
+  async function selectedTableRowIds(
+    configure: (el: ObcAlertListDetailsExperimental) => void
+  ) {
+    const el = document.createElement('obc-alert-list-details-experimental');
+    el.alerts = groupedAlerts();
+    configure(el);
+    document.body.append(el);
+    await el.updateComplete;
+    const table = el.shadowRoot!.querySelector('obc-table')!;
+    const selected = table.data
+      .filter((row) => row.selected)
+      .map((row) => row.id);
+    el.remove();
+    return selected;
+  }
+
+  it('highlights only the selected row of an alert listed under two groups', async () => {
+    expect(
+      await selectedTableRowIds((el) => (el.selectedRowId = 'radar/power'))
+    ).toEqual(['radar/power']);
+  });
+
+  it('highlights the group row when a collapsed group hides the selected row', async () => {
+    expect(
+      await selectedTableRowIds((el) => {
+        el.defaultExpanded = false;
+        el.selectedRowId = 'gyro/sensor';
+      })
+    ).toEqual(['gyro']);
+  });
+
+  it('highlights nothing when no row has the selected id', async () => {
+    expect(
+      await selectedTableRowIds((el) => (el.selectedRowId = 'gyro/missing'))
+    ).toEqual([]);
+  });
+});
+
+describe('alertListCellSlotName', () => {
+  it('namespaces the column key and row id', () => {
+    expect(alertListCellSlotName('ack', 'gyro/power')).toBe(
+      'cell-ack:gyro/power'
+    );
+  });
+
+  it('keeps names apart when a key or row id contains a dash or colon', () => {
+    const [ackRowId, ackARowId] = rowIds([alert('a-b'), alert('b')]);
+    expect(alertListCellSlotName('ack', ackRowId)).not.toBe(
+      alertListCellSlotName('ack-a', ackARowId)
+    );
+    expect(alertListCellSlotName('ack:a', 'b')).not.toBe(
+      alertListCellSlotName('ack', rowIds([alert('a:b')])[0])
+    );
+  });
+});

package/src/components/alert-list-details-experimental/alert-list-details-experimental.stories.ts

@@ -1,9 +1,17 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {
-  AlertListMode,
-  ObcAckClickEvent,
+  FilterModes,
+  ObcAlertListCellClickEvent,
   ObcAlertListDetailsExperimental,
+  ObcRowClickEvent,
+  ackColumn,
+  alertListCellSlotName,
+  getAlertRows,
+  statusColumn,
+  tagIdColumn,
+  timeColumn,
 } from './alert-list-details-experimental.js';
+import type {ObcButton} from '../button/button.js';
 import '../alert-icon/alert-icon.js';
 import '../../icons/icon-alarm-unacknowledged-iec.js';
 import '../../icons/icon-warning-unacknowledged-iec.js';
@@ -11,13 +19,14 @@ import '../../icons/icon-caution-color-iec.js';
 import '../../icons/icon-alarm-acknowledged-iec.js';
 
 import {html} from 'lit';
-import {Alert, AlertType} from '../../types.js';
+import {Alert, AlertType, isAcknowledged} from '../../types.js';
 
-// Handler for ack-click events, this is a demo solution for the storybook
-// Normally the ack-click is handled by the backend and the component is updated
-const handleAck = (e: ObcAckClickEvent) => {
-  const item = e.detail.alert;
-  ack(item);
+// Handler for ACK clicks, this is a demo solution for the storybook
+// Normally the click is handled by the backend and the component is updated
+const handleAck = (e: ObcAlertListCellClickEvent) => {
+  if (e.detail.columnKey === 'ack') {
+    ack(e.detail.alert);
+  }
 };
 
 const ack = (item: Alert) => {
@@ -43,8 +52,14 @@ const meta: Meta<typeof ObcAlertListDetailsExperimental> = {
   tags: ['6.0', 'experimental'],
   component: 'obc-alert-list-details-experimental',
   args: {
-    selectedMode: AlertListMode.ALL,
-    showTime: true,
+    filterMode: FilterModes.ALL,
+    showHeader: true,
+    columns: [
+      statusColumn(),
+      ackColumn({dividerRight: true}),
+      timeColumn(),
+      tagIdColumn(),
+    ],
     alerts: [
       {
         id: '1',
@@ -129,14 +144,20 @@ const meta: Meta<typeof ObcAlertListDetailsExperimental> = {
   parameters: {
     layout: 'fullscreen',
   },
-  argTypes: {},
+  argTypes: {
+    columns: {control: false},
+    filterMode: {
+      control: {type: 'select'},
+      options: Object.values(FilterModes),
+    },
+  },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
       data-testid="alert-menu"
-      .selectedMode=${args.selectedMode}
-      .showTime=${args.showTime}
-      .small=${args.small}
-      @ack-click=${handleAck}
+      .filterMode=${args.filterMode}
+      .columns=${args.columns}
+      .showHeader=${args.showHeader}
+      @cell-click=${handleAck}
       .alerts=${args.alerts}
       style="height: 100vh; display: block; max-height: 100%;"
     >
@@ -153,7 +174,15 @@ export const Regular: Story = {
 
 export const Small: Story = {
   args: {
-    small: true,
+    showHeader: false,
+    columns: [
+      statusColumn(),
+      timeColumn(),
+      ackColumn({
+        width:
+          'var(--app-components-alert-table-row-ack-container-width-small)',
+      }),
+    ],
   },
 };
 
@@ -182,8 +211,8 @@ export const OneItem: Story = {
   },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
-      @ack-click=${handleAck}
-      .selectedMode=${args.selectedMode}
+      @cell-click=${handleAck}
+      .filterMode=${args.filterMode}
       .alerts=${args.alerts}
       style="height: 100vh; display: block;"
     >
@@ -248,10 +277,10 @@ export const LevelCategories: Story = {
   },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
-      @ack-click=${handleAck}
-      .selectedMode=${args.selectedMode}
+      @cell-click=${handleAck}
+      .filterMode=${args.filterMode}
       .alerts=${args.alerts}
-      .showTime=${args.showTime}
+      .columns=${args.columns}
       style="height: 100vh; display: block;"
     >
     </obc-alert-list-details-experimental>`;
@@ -260,7 +289,6 @@ export const LevelCategories: Story = {
 
 export const GroupedAlerts: Story = {
   args: {
-    showTime: true,
     alerts: [
       {
         id: 'gyro',
@@ -349,10 +377,44 @@ export const GroupedAlerts: Story = {
   },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
-      @ack-click=${handleAck}
-      .selectedMode=${args.selectedMode}
+      @cell-click=${handleAck}
+      .filterMode=${args.filterMode}
       .alerts=${args.alerts}
-      .showTime=${args.showTime}
+      .columns=${args.columns}
+      style="height: 100vh; display: block;"
+    >
+    </obc-alert-list-details-experimental>`;
+  },
+};
+
+export const SelectedRow: Story = {
+  args: {
+    alerts: GroupedAlerts.args?.alerts as Alert[],
+    selectedRowId: 'gyro/sensor',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The consumer owns the selection. Clicking a row sets `selectedRowId` to its row id, and clicking it again sets it back to `undefined`. Collapse the gyroscope group and the group row is highlighted instead of the hidden sensor row. `PWR-01` has a row under each group, and only the clicked one is highlighted.',
+      },
+    },
+  },
+  render: (args) => {
+    const toggleSelection = (event: ObcRowClickEvent) => {
+      const list = event.currentTarget as ObcAlertListDetailsExperimental;
+      list.selectedRowId =
+        list.selectedRowId === event.detail.rowId
+          ? undefined
+          : event.detail.rowId;
+    };
+    return html` <obc-alert-list-details-experimental
+      @cell-click=${handleAck}
+      @row-click=${toggleSelection}
+      .filterMode=${args.filterMode}
+      .alerts=${args.alerts}
+      .columns=${args.columns}
+      .selectedRowId=${args.selectedRowId}
       style="height: 100vh; display: block;"
     >
     </obc-alert-list-details-experimental>`;
@@ -361,7 +423,6 @@ export const GroupedAlerts: Story = {
 
 export const CyclicGrouping: Story = {
   args: {
-    showTime: true,
     alerts: [
       {
         id: 'standalone',
@@ -407,10 +468,10 @@ export const CyclicGrouping: Story = {
   },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
-      @ack-click=${handleAck}
-      .selectedMode=${args.selectedMode}
+      @cell-click=${handleAck}
+      .filterMode=${args.filterMode}
       .alerts=${args.alerts}
-      .showTime=${args.showTime}
+      .columns=${args.columns}
       style="height: 100vh; display: block;"
     >
     </obc-alert-list-details-experimental>`;
@@ -419,7 +480,6 @@ export const CyclicGrouping: Story = {
 
 export const CycleWithDescendants: Story = {
   args: {
-    showTime: true,
     alerts: [
       {
         id: 'reachable-group',
@@ -499,12 +559,61 @@ export const CycleWithDescendants: Story = {
   },
   render: (args) => {
     return html` <obc-alert-list-details-experimental
-      @ack-click=${handleAck}
-      .selectedMode=${args.selectedMode}
+      @cell-click=${handleAck}
+      .filterMode=${args.filterMode}
+      .alerts=${args.alerts}
+      .columns=${args.columns}
+      style="height: 100vh; display: block;"
+    >
+    </obc-alert-list-details-experimental>`;
+  },
+};
+
+export const SlottedAckButtons: Story = {
+  args: {
+    alerts: GroupedAlerts.args?.alerts as Alert[],
+    columns: [
+      statusColumn(),
+      {key: 'ack', label: 'ACK-status', slot: true, dividerRight: true},
+      timeColumn(),
+      tagIdColumn(),
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The ACK column is a slot column. The consumer creates each button, gives it its own `id`, and places it in slot `cell-ack:<rowId>`, with the row ids from `getAlertRows()`. `PWR-01` is a member of two groups, so it has two rows and two buttons. Clicking ACK looks up every button for that alert in the DOM and disables it.',
+      },
+    },
+  },
+  render: (args) => {
+    const disableAckButtons = (alert: Alert) => {
+      document
+        .querySelectorAll<ObcButton>(
+          `obc-button[data-alert-id="${CSS.escape(alert.id)}"]`
+        )
+        .forEach((button) => (button.disabled = true));
+    };
+    return html` <obc-alert-list-details-experimental
+      .filterMode=${args.filterMode}
       .alerts=${args.alerts}
-      .showTime=${args.showTime}
+      .columns=${args.columns}
       style="height: 100vh; display: block;"
     >
+      ${getAlertRows(args.alerts, args.filterMode)
+        .filter(({alert}) => !isAcknowledged(alert) && !alert.noAck)
+        .map(
+          (row) =>
+            html`<obc-button
+              slot=${alertListCellSlotName('ack', row.rowId)}
+              id=${`ack-${row.rowId}`}
+              data-alert-id=${row.alert.id}
+              fullWidth
+              @click=${() => disableAckButtons(row.alert)}
+              >ACK</obc-button
+            >`
+        )}
     </obc-alert-list-details-experimental>`;
   },
 };