@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/stories/declarative-table.stories.ts

@@ -0,0 +1,363 @@
+import type { GenericResource } from '../models';
+import type { TableFieldDefinition } from '../table/models';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+// ---------------------------------------------------------------------------
+// Sample data
+// ---------------------------------------------------------------------------
+
+interface Pod extends GenericResource {
+  id: string;
+  metadata: { name: string; namespace: string; uid: string };
+  status: { phase: string; ready: boolean; restarts: number; message?: string };
+  spec: { nodeName: string; image: string };
+}
+
+const PODS: Pod[] = [
+  {
+    id: 'abc-001',
+    metadata: { name: 'api-server-7d9f', namespace: 'default', uid: 'abc-001' },
+    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
+    spec: { nodeName: 'node-1', image: 'nginx:1.25' },
+    isAvailable: true,
+  },
+  {
+    id: 'abc-002',
+    metadata: { name: 'worker-5bc8', namespace: 'default', uid: 'abc-002' },
+    status: {
+      phase: 'Pending',
+      ready: false,
+      restarts: 3,
+      message: 'ImagePullBackOff',
+    },
+    spec: { nodeName: 'node-2', image: 'myapp:latest' },
+    isAvailable: false,
+    accessibleName: 'Pod unavailable: ImagePullBackOff',
+  },
+  {
+    id: 'abc-003',
+    metadata: {
+      name: 'cache-redis-0',
+      namespace: 'kube-system',
+      uid: 'abc-003',
+    },
+    status: { phase: 'Running', ready: true, restarts: 1, message: undefined },
+    spec: { nodeName: 'node-1', image: 'redis:7' },
+    isAvailable: true,
+  },
+  {
+    id: 'abc-004',
+    metadata: {
+      name: 'db-postgres-0',
+      namespace: 'production',
+      uid: 'abc-004',
+    },
+    status: {
+      phase: 'Failed',
+      ready: false,
+      restarts: 5,
+      message: 'CrashLoopBackOff',
+    },
+    spec: { nodeName: 'node-3', image: 'postgres:16' },
+    isAvailable: false,
+    accessibleName: 'Pod unavailable: CrashLoopBackOff',
+  },
+  {
+    id: 'abc-005',
+    metadata: {
+      name: 'ingress-ctrl-xkp',
+      namespace: 'default',
+      uid: 'abc-005',
+    },
+    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
+    spec: { nodeName: 'node-2', image: 'nginx-ingress:1.9' },
+    isAvailable: true,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Wrapper component (avoids attachShadow conflict)
+// ---------------------------------------------------------------------------
+
+@Component({
+  selector: 'mfp-declarative-table-story',
+  template: `
+    <mfp-wc-declarative-table
+      [columns]="columns"
+      [hasMore]="hasMore"
+      [paginationLimit]="paginationLimit"
+      [resources]="resources"
+      [totalItemsCount]="totalItemsCount"
+      [trackByProperty]="trackByProperty"
+    />
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DeclarativeTableStory {
+  @Input() columns: TableFieldDefinition[] = [];
+  @Input() resources: GenericResource[] = PODS;
+  @Input() trackByProperty = 'metadata.uid';
+  @Input() hasMore = false;
+  @Input() paginationLimit = 5;
+  @Input() totalItemsCount?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<DeclarativeTableStory> = {
+  title: 'Declarative UI / DeclarativeTable',
+  component: DeclarativeTableStory,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    columns: { control: 'object' },
+    resources: { control: 'object' },
+    trackByProperty: { control: 'text' },
+    hasMore: { control: 'boolean' },
+    paginationLimit: { control: 'number' },
+    totalItemsCount: { control: 'number' },
+  },
+  args: {
+    resources: PODS,
+    trackByProperty: 'metadata.uid',
+    hasMore: false,
+    paginationLimit: 5,
+  },
+};
+
+export default meta;
+type Story = StoryObj<DeclarativeTableStory>;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/** Minimal setup: three plain-text columns. */
+export const Basic: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Namespace', property: 'metadata.namespace' },
+      { label: 'Node', property: 'spec.nodeName' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/**
+ * Boolean icons, secret cell with inline copy button, and conditional colour
+ * rules. The copy icon appears next to the masked value on the same line.
+ */
+export const CellDisplayModes: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      {
+        label: 'Ready',
+        property: 'status.ready',
+        uiSettings: { displayAs: 'boolIcon' },
+      },
+      {
+        label: 'Phase',
+        property: 'status.phase',
+        uiSettings: {
+          cssRules: [
+            {
+              if: { condition: 'equals', value: 'Running' },
+              styles: { color: 'green' },
+            },
+            {
+              if: { condition: 'equals', value: 'Pending' },
+              styles: { color: 'darkorange' },
+            },
+            {
+              if: { condition: 'equals', value: 'Failed' },
+              styles: { color: 'red', fontWeight: 'bold' },
+            },
+          ],
+        },
+      },
+      {
+        label: 'UID',
+        property: 'metadata.uid',
+        uiSettings: { displayAs: 'secret', withCopyButton: true },
+      },
+      {
+        label: 'Image',
+        property: 'spec.image',
+        uiSettings: { displayAs: 'tooltip', tooltipIcon: 'information' },
+      },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/** Two columns sharing the same group name are merged into one header. */
+export const GroupedColumns: Story = {
+  args: {
+    columns: [
+      {
+        label: 'Name',
+        property: 'metadata.name',
+        group: { name: 'identity', label: 'Identity', delimiter: ' / ' },
+      },
+      {
+        label: 'Namespace',
+        property: 'metadata.namespace',
+        group: { name: 'identity' },
+      },
+      { label: 'Phase', property: 'status.phase' },
+      { label: 'Node', property: 'spec.nodeName' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/**
+ * Group with a space delimiter and labelDisplay — values rendered as blue
+ * badge labels, separated by a single space. Also demonstrates the alert
+ * display type: a warning icon appears when the field value is falsy.
+ */
+export const GroupedWithLabelsAndAlert: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      {
+        property: 'spec.nodeName',
+        uiSettings: { labelDisplay: true },
+        group: {
+          name: 'placement',
+          label: 'Placement',
+          delimiter: ' ',
+          multiline: false,
+        },
+      },
+      {
+        property: 'spec.image',
+        uiSettings: { labelDisplay: true },
+        group: { name: 'placement' },
+      },
+      {
+        label: 'OK',
+        property: 'status.message',
+        uiSettings: { displayAs: 'alert' },
+      },
+      { label: 'Message', property: 'status.message', value: '—' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/**
+ * `uiSettings.columnWidth` sets the width of the header cell (and thus the
+ * whole column). Useful for icon-only columns like `alert` or `boolIcon` where
+ * the default `auto` width is wider than necessary.
+ */
+export const ColumnWidth: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      {
+        label: 'Alert',
+        property: 'status.message',
+        uiSettings: { displayAs: 'alert', columnWidth: '60px' },
+      },
+      {
+        label: 'Ready',
+        property: 'status.ready',
+        uiSettings: { displayAs: 'boolIcon', columnWidth: '60px' },
+      },
+      { label: 'Phase', property: 'status.phase' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/** JSONPath expression for deeply nested or array values. */
+export const JsonPathExpression: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Namespace', jsonPathExpression: '$.metadata.namespace' },
+      { label: 'Image', jsonPathExpression: '$.spec.image' },
+      { label: 'Restarts', jsonPathExpression: '$.status.restarts' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/** Static fallback value shown when the resource field is absent. */
+export const StaticFallback: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Message', property: 'status.message', value: '—' },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/** Load-more pagination trigger. Click "Load More" to fire loadMoreResources. */
+export const Pagination: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Namespace', property: 'metadata.namespace' },
+      { label: 'Phase', property: 'status.phase' },
+    ] satisfies TableFieldDefinition[],
+    hasMore: true,
+    paginationLimit: 5,
+    totalItemsCount: 20,
+  },
+};
+
+/** Button cell that fires buttonClick with { event, field, resource }. */
+export const ButtonCell: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Phase', property: 'status.phase' },
+      {
+        label: 'Actions',
+        property: 'metadata.name',
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: {
+            text: 'Inspect',
+            icon: 'inspect',
+            design: 'Emphasized',
+            action: 'navigate',
+          },
+        },
+      },
+    ] satisfies TableFieldDefinition[],
+  },
+};
+
+/** Empty resources array triggers the illustrated empty-state message. */
+export const EmptyState: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Namespace', property: 'metadata.namespace' },
+    ] satisfies TableFieldDefinition[],
+    resources: [],
+  },
+};
+
+/**
+ * isAvailable=false greys out the row and disables interaction.
+ * accessibleName is used as the tooltip text on the alert icon for unavailable pods.
+ */
+export const RowAvailability: Story = {
+  args: {
+    columns: [
+      { label: 'Name', property: 'metadata.name' },
+      { label: 'Phase', property: 'status.phase' },
+      { label: 'Node', property: 'spec.nodeName' },
+      {
+        label: 'Status',
+        property: 'isAvailable',
+        uiSettings: { displayAs: 'alert' },
+      },
+    ] satisfies TableFieldDefinition[],
+  },
+};

package/projects/ngx/declarative-ui/stories/pods-table.config.ts

@@ -0,0 +1,188 @@
+import type { TableFieldDefinition } from '../../declarative-ui/table/models';
+import type {
+  DeleteResourceConfirmationConfig,
+  ResourceFormConfig,
+  TableCardConfig,
+  TableConfig,
+} from '..//table-card/models/configs';
+
+export const TABLE_RESOURCES = [
+  {
+    id: 'abc-001',
+    metadata: { name: 'api-server-7d9f', namespace: 'default', uid: 'abc-001' },
+    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
+    spec: { nodeName: 'node-1', image: 'nginx:1.25' },
+    isAvailable: true,
+  },
+  {
+    id: 'abc-002',
+    metadata: { name: 'worker-5bc8', namespace: 'default', uid: 'abc-002' },
+    status: {
+      phase: 'Pending',
+      ready: false,
+      restarts: 3,
+      message: 'ImagePullBackOff',
+    },
+    spec: { nodeName: 'node-2', image: 'myapp:latest' },
+    isAvailable: false,
+    accessibleName: 'Pod unavailable: ImagePullBackOff',
+  },
+  {
+    id: 'abc-003',
+    metadata: {
+      name: 'cache-redis-0',
+      namespace: 'kube-system',
+      uid: 'abc-003',
+    },
+    status: { phase: 'Running', ready: true, restarts: 1, message: undefined },
+    spec: { nodeName: 'node-1', image: 'redis:7' },
+    isAvailable: true,
+  },
+  {
+    id: 'abc-004',
+    metadata: {
+      name: 'db-postgres-0',
+      namespace: 'production',
+      uid: 'abc-004',
+    },
+    status: {
+      phase: 'Failed',
+      ready: false,
+      restarts: 5,
+      message: 'CrashLoopBackOff',
+    },
+    spec: { nodeName: 'node-3', image: 'postgres:16' },
+    isAvailable: false,
+    accessibleName: 'Pod unavailable: CrashLoopBackOff',
+  },
+  {
+    id: 'abc-005',
+    metadata: {
+      name: 'ingress-ctrl-xkp',
+      namespace: 'default',
+      uid: 'abc-005',
+    },
+    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
+    spec: { nodeName: 'node-2', image: 'nginx-ingress:1.9' },
+    isAvailable: true,
+  },
+];
+
+export const TABLE_COLUMNS: TableFieldDefinition[] = [
+  { label: 'Name', property: 'metadata.name' },
+  { label: 'Namespace', property: 'metadata.namespace' },
+  {
+    label: 'Ready',
+    property: 'status.ready',
+    uiSettings: { displayAs: 'boolIcon', columnWidth: '56px' },
+  },
+  {
+    label: 'Phase',
+    property: 'status.phase',
+    uiSettings: {
+      cssRules: [
+        {
+          if: { condition: 'equals', value: 'Running' },
+          styles: { color: 'green' },
+        },
+        {
+          if: { condition: 'equals', value: 'Pending' },
+          styles: { color: 'darkorange' },
+        },
+        {
+          if: { condition: 'equals', value: 'Failed' },
+          styles: { color: 'red', fontWeight: 'bold' },
+        },
+      ],
+    },
+  },
+  {
+    label: 'UID',
+    property: 'metadata.uid',
+    uiSettings: { displayAs: 'secret', withCopyButton: true },
+  },
+  {
+    property: 'spec.image',
+    uiSettings: { labelDisplay: true },
+    group: { name: 'placement', label: 'Placement', delimiter: ' ' },
+  },
+  {
+    property: 'spec.nodeName',
+    uiSettings: { labelDisplay: true },
+    group: { name: 'placement' },
+  },
+  {
+    label: 'Alert',
+    property: 'status.message',
+    uiSettings: { displayAs: 'alert', columnWidth: '42px' },
+  },
+  { label: 'Message', property: 'status.message', value: '—' },
+  {
+    property: 'metadata.name',
+    uiSettings: {
+      displayAs: 'button',
+      buttonSettings: {
+        icon: 'inspect',
+        design: 'Transparent',
+        action: 'navigate',
+      },
+    },
+    group: { name: 'actions', label: 'Actions', multiline: false },
+  },
+];
+
+export const POD_FORM_FIELDS = [
+  { name: 'metadata.name', label: 'Name', required: true },
+  {
+    name: 'metadata.namespace',
+    label: 'Namespace',
+    required: true,
+    values: ['default', 'kube-system', 'production'],
+  },
+];
+
+export const POD_EDIT_FORM_FIELDS = [
+  { name: 'metadata.name', label: 'Name', required: true, disabled: true },
+  {
+    name: 'metadata.namespace',
+    label: 'Namespace',
+    required: true,
+    values: ['default', 'kube-system', 'production'],
+  },
+];
+
+export const BASE_TABLE_CONFIG: TableConfig = {
+  fields: TABLE_COLUMNS,
+  paginationLimit: 5,
+  hasMore: false,
+};
+
+export const DELETE_CONFIRMATION_CONFIG: DeleteResourceConfirmationConfig = {
+  title: 'Delete Pod?',
+  message: 'This action cannot be undone. The pod will be permanently removed.',
+  confirmLabel: 'Delete',
+  cancelLabel: 'Cancel',
+};
+
+export const CREATE_FORM_CONFIG: ResourceFormConfig = {
+  fields: POD_FORM_FIELDS,
+  title: 'Create Pod',
+  confirmLabel: 'Create',
+  cancelLabel: 'Cancel',
+};
+
+export const EDIT_FORM_CONFIG: ResourceFormConfig = {
+  fields: POD_EDIT_FORM_FIELDS,
+  title: 'Edit Pod',
+  confirmLabel: 'Save',
+  cancelLabel: 'Cancel',
+};
+
+export const TABLE_CARD_CONFIG: TableCardConfig = {
+  header: 'Pods',
+  headerTooltip: 'This table lists all pods running in the cluster.',
+  tableConfig: BASE_TABLE_CONFIG,
+  createResourceFormConfig: CREATE_FORM_CONFIG,
+  editResourceFormConfig: EDIT_FORM_CONFIG,
+  deleteResourceConfirmationConfig: DELETE_CONFIRMATION_CONFIG,
+};

package/projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html

@@ -0,0 +1,138 @@
+<ui5-table test-id="generic-table">
+  <ui5-table-header-row slot="headerRow">
+    @for (column of viewColumns(); track columnTrackBy(column, $index)) {
+      @if (column.group) {
+        <ui5-table-header-cell
+          [attr.test-id]="'generic-table-header-' + column.property"
+          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell
+        >
+      } @else {
+        <ui5-table-header-cell
+          [attr.test-id]="'generic-table-header-' + column.property"
+          [width]="column.uiSettings?.columnWidth ?? 'auto'"
+          >{{ column.label }}</ui5-table-header-cell
+        >
+      }
+    }
+  </ui5-table-header-row>
+
+  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {
+    <ui5-table-row
+      [attr.test-id]="'generic-table-row-' + i"
+      [class.disabled]="!(item.isAvailable ?? true)"
+      [interactive]="item.isAvailable ?? true"
+      (click)="tableRowClicked.emit(item)"
+    >
+      @for (column of viewColumns(); track columnTrackBy(column, $index)) {
+        @if (column.group) {
+          <ui5-table-cell
+            [attr.test-id]="'generic-table-cell-' + i + '-' + column.property"
+            [class.multiline]="column.group.multiline ?? true"
+          >
+            @for (
+              field of column.group.fields;
+              let last = $last;
+              track columnTrackBy(field, $index)
+            ) {
+              <span
+                class="group-value"
+                [attr.test-id]="
+                  'generic-table-cell-' +
+                  i +
+                  '-' +
+                  column.property +
+                  '-' +
+                  field.property
+                "
+              >
+                @if (field.label) {
+                  <span>{{ field.label }}: </span>
+                }
+                <mfp-value-cell
+                  [fieldDefinition]="field"
+                  [resource]="item"
+                  (buttonClick)="buttonClick.emit($event)"
+                />
+              </span>
+              @if (!last && column.group.delimiter) {
+                <span>{{ column.group.delimiter }}</span>
+              }
+            }
+          </ui5-table-cell>
+        } @else {
+          <ui5-table-cell
+            [attr.test-id]="'generic-table-cell-' + i + '-' + column.property"
+          >
+            <mfp-value-cell
+              [fieldDefinition]="column"
+              [resource]="item"
+              (buttonClick)="buttonClick.emit($event)"
+            />
+          </ui5-table-cell>
+        }
+      }
+    </ui5-table-row>
+  } @empty {
+    <ui5-illustrated-message
+      name="NoData"
+      slot="noData"
+      test-id="generic-table-view-nodata"
+    >
+      <span slot="title">No Resources</span>
+      <span slot="subtitle">There are currently no items to show.</span>
+    </ui5-illustrated-message>
+  }
+
+  @if (hasMore()) {
+    <ui5-table-growing
+      id="growing"
+      mode="Button"
+      slot="features"
+      text="Load more"
+      (ui5LoadMore)="loadMoreResources.emit()"
+    />
+  }
+</ui5-table>
+
+<!-- Pagination Control -->
+<div
+  class="pagination-footer"
+  style="
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0rem 1rem;
+    min-height: 3rem;
+    border-top: 1px solid var(--sapList_BorderColor);
+  "
+>
+  <div style="display: flex; align-items: center; gap: 1.5rem">
+    <div style="display: flex; align-items: center; gap: 0.5rem">
+      <span
+        style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
+        >Items per load:</span
+      >
+      <ui5-select
+        style="width: 5rem"
+        (change)="paginationLimitChanged.emit(+$any($event)?.target?.value)"
+        [value]="paginationLimit().toString()"
+      >
+        <ui5-option value="5">5</ui5-option>
+        <ui5-option value="10">10</ui5-option>
+        <ui5-option value="50">50</ui5-option>
+        <ui5-option value="100">100</ui5-option>
+      </ui5-select>
+    </div>
+
+    <span
+      style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
+    >
+      Items loaded:
+      <b>{{
+        totalItemsCount() !== undefined
+          ? resources().length + ' / ' + totalItemsCount()
+          : resources().length
+      }}</b>
+    </span>
+  </div>
+</div>

package/projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.scss

@@ -0,0 +1,21 @@
+.multiline {
+  display: block;
+}
+
+.disabled {
+  filter: brightness(0.92);
+  pointer-events: none;
+
+  ui5-table-cell:not(:first-child) {
+    color: var(--sapContent_DisabledTextColor, #6a6d70);
+
+    ui5-icon {
+      color: var(--sapContent_DisabledTextColor, #6a6d70);
+    }
+  }
+}
+
+.group-value {
+  display: flex;
+  align-items: center;
+}