@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/form/declarative-form/declarative-form.component.ts

@@ -0,0 +1,166 @@
+import {
+  FormFieldChangeEvent,
+  FormFieldDefinition,
+  FormFieldErrors,
+} from '../models';
+import { setPropertyByPath } from '../utils/set-property-by-path';
+import {
+  Component,
+  ViewEncapsulation,
+  effect,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
+import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
+
+@Component({
+  selector: 'mfp-declarative-form',
+  imports: [ReactiveFormsModule, Input, Label, Select, Option],
+  templateUrl: './declarative-form.component.html',
+  styleUrl: './declarative-form.component.scss',
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class DeclarativeForm {
+  readonly fields = input.required<FormFieldDefinition[]>();
+  readonly initialValues = input<Record<string, unknown>>({});
+  readonly fieldErrors = input<FormFieldErrors>({});
+
+  readonly fieldChange = output<FormFieldChangeEvent>();
+  readonly formSubmit = output<Record<string, unknown>>();
+
+  readonly form: FormGroup;
+
+  private readonly fb = inject(FormBuilder);
+
+  constructor() {
+    this.form = this.fb.group({});
+
+    effect(() => {
+      this.rebuildControls(this.fields());
+    });
+
+    effect(() => {
+      this.setInitialValues(this.initialValues());
+    });
+
+    effect(() => {
+      const fields = this.fields();
+      this.initialValues();
+
+      for (const field of fields) {
+        if (field.validation) {
+          this.fieldChange.emit({
+            fieldProperty: field.name,
+            value: this.form.controls[field.name]?.value ?? '',
+          });
+        }
+      }
+    });
+  }
+
+  setFormControlValue($event: Event, field: FormFieldDefinition): void {
+    const target = $event.target as
+      | HTMLInputElement
+      | HTMLTextAreaElement
+      | HTMLSelectElement;
+
+    const control = this.form.controls[field.name];
+    control.setValue(target.value);
+    control.markAsTouched();
+    control.markAsDirty();
+
+    if (field.validation === 'onChange') {
+      this.fieldChange.emit({
+        fieldProperty: field.name,
+        value: control.value,
+      });
+    }
+  }
+
+  getError(name: string): string | null {
+    const control = this.form.controls[name];
+    const error = this.fieldErrors()[name];
+
+    return error && (control.dirty || control.touched) ? error : null;
+  }
+
+  getValueState(name: string): 'None' | 'Negative' {
+    return this.getError(name) ? 'Negative' : 'None';
+  }
+
+  onFieldBlur(field: FormFieldDefinition): void {
+    this.form.controls[field.name]?.markAsTouched();
+
+    if (field.validation === 'onBlur') {
+      this.fieldChange.emit({
+        fieldProperty: field.name,
+        value: this.form.controls[field.name]?.value,
+      });
+    }
+  }
+
+  submit(): void {
+    this.formSubmit.emit(this.buildOutputValue());
+  }
+
+  clear(): void {
+    this.form.reset();
+  }
+
+  private rebuildControls(fields: FormFieldDefinition[]): void {
+    const existingControls = this.form.controls;
+    const nextFieldNames = new Set(fields.map((field) => field.name));
+
+    for (const field of fields) {
+      const existingControl = existingControls[field.name];
+
+      if (existingControl) {
+        existingControl.clearValidators();
+        existingControl.updateValueAndValidity({ emitEvent: false });
+        continue;
+      }
+
+      this.form.addControl(field.name, new FormControl(''));
+    }
+
+    for (const controlName of Object.keys(existingControls)) {
+      if (!nextFieldNames.has(controlName)) {
+        this.form.removeControl(controlName);
+      }
+    }
+
+    this.form.updateValueAndValidity({ emitEvent: false });
+  }
+
+  private setInitialValues(
+    initialValues: Record<string, unknown> | null | undefined,
+  ): void {
+    if (!initialValues) {
+      return;
+    }
+
+    this.form.patchValue(initialValues, { emitEvent: false });
+    this.form.markAsPristine({ emitEvent: false });
+    this.form.updateValueAndValidity({ emitEvent: false });
+  }
+
+  private buildOutputValue(): Record<string, unknown> {
+    const result: Record<string, unknown> = {};
+
+    for (const key of Object.keys(this.form.controls)) {
+      setPropertyByPath(result, key, this.form.controls[key].value);
+    }
+
+    return result;
+  }
+}

package/projects/ngx/declarative-ui/form/declarative-form/index.ts

@@ -0,0 +1 @@
+export * from './declarative-form.component';

package/projects/ngx/declarative-ui/form/index.ts

@@ -0,0 +1,2 @@
+export * from './declarative-form';
+export * from './models';

package/projects/ngx/declarative-ui/form/models/form-field-definition.ts

@@ -0,0 +1,15 @@
+export interface FormFieldDefinition {
+  name: string;
+  label?: string;
+  required?: boolean;
+  values?: string[];
+  disabled?: boolean;
+  validation?: 'onBlur' | 'onChange';
+}
+
+export interface FormFieldChangeEvent {
+  fieldProperty: string;
+  value: unknown;
+}
+
+export type FormFieldErrors = Record<string, string | null>;

package/projects/ngx/declarative-ui/form/models/index.ts

@@ -0,0 +1 @@
+export * from './form-field-definition';

package/projects/ngx/declarative-ui/form/utils/set-property-by-path.ts

@@ -0,0 +1,30 @@
+export function setPropertyByPath<T extends Record<string, unknown>>(
+  object: T,
+  path: string,
+  value: unknown,
+): T {
+  const segments = path.split('.').filter(Boolean);
+  if (segments.length === 0) {
+    return object;
+  }
+
+  let current: Record<string, unknown> = object;
+
+  for (let i = 0; i < segments.length; i += 1) {
+    const key = segments[i];
+    if (i === segments.length - 1) {
+      current[key] = value;
+      break;
+    }
+
+    const existing = current[key];
+
+    if (existing === undefined || existing === null || typeof existing !== 'object') {
+      current[key] = {};
+    }
+
+    current = current[key] as Record<string, unknown>;
+  }
+
+  return object;
+}

package/projects/ngx/declarative-ui/models/index.ts

@@ -0,0 +1,2 @@
+export * from './resource';
+export * from './ui-definition';

package/projects/ngx/declarative-ui/models/resource.ts

@@ -0,0 +1,5 @@
+export interface GenericResource extends Record<string, unknown> {
+  id?: string;
+  isAvailable?: boolean;
+  accessibleName?: string;
+}

package/projects/ngx/declarative-ui/models/ui-definition.ts

@@ -0,0 +1,95 @@
+import { GenericResource } from './resource';
+
+export type TransformType =
+  | 'uppercase'
+  | 'lowercase'
+  | 'capitalize'
+  | 'decode'
+  | 'encode';
+
+export interface PropertyField {
+  key: string;
+  transform?: TransformType[];
+}
+
+export interface UiSettings {
+  labelDisplay?: boolean;
+  displayAs?:
+    | 'secret'
+    | 'boolIcon'
+    | 'link'
+    | 'tooltip'
+    | 'alert'
+    | 'img'
+    | 'button';
+  buttonSettings?: ButtonSettings;
+  tooltipIcon?: string;
+  withCopyButton?: boolean;
+  cssCustomization?: Partial<CSSStyleDeclaration>;
+  cssRules?: CssRule[];
+  columnWidth?: string;
+}
+
+type KnownButtonActions = 'openInModal' | 'navigate' | 'edit' | 'delete';
+type ButtonActions = KnownButtonActions | (string & {});
+
+export interface ButtonSettings {
+  text?: string;
+  icon?: string;
+  endIcon?: string;
+  design?:
+    | 'Default'
+    | 'Positive'
+    | 'Negative'
+    | 'Transparent'
+    | 'Emphasized'
+    | 'Attention';
+  tooltip?: string;
+  action: ButtonActions;
+  modalSettings?: ModalSettings;
+}
+
+export interface ModalSettings {
+  title?: string;
+  size?: 'fullscreen' | 'l' | 'm' | 's'; // ze of the modal
+  width?: string; //updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw
+  height?: string; //updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw
+}
+
+export type CssRuleCondition =
+  | 'equals'
+  | 'notEquals'
+  | 'greaterThan'
+  | 'greaterThanOrEqual'
+  | 'lessThan'
+  | 'lessThanOrEqual'
+  | 'contains';
+
+export interface CssRule {
+  if: { condition: CssRuleCondition; value: string };
+  styles: Partial<CSSStyleDeclaration>;
+}
+
+export interface ValueCellButtonClickEvent<T extends GenericResource> {
+  event: MouseEvent;
+  field: TableFieldDefinition;
+  resource: T | undefined;
+}
+
+export interface FieldDefinition {
+  label?: string;
+  property?: string | string[];
+  propertyField?: PropertyField;
+  jsonPathExpression?: string;
+  value?: string;
+  uiSettings?: UiSettings;
+}
+
+export interface TableFieldDefinition extends FieldDefinition {
+  group?: {
+    name: string;
+    label?: string;
+    delimiter?: string;
+    multiline?: boolean;
+  };
+}

package/projects/ngx/declarative-ui/public-api.ts

@@ -0,0 +1,4 @@
+export * from './table';
+export * from './form';
+export * from './table-card';
+export * from './dashboard';

package/projects/ngx/declarative-ui/stories/add-card-dialog.stories.ts

@@ -0,0 +1,91 @@
+import { AddCardDialog } from '../dashboard/add-card-dialog/add-card-dialog.component';
+import type { CardConfig } from '../dashboard/models';
+import { Component, Input } from '@angular/core';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+const AVAILABLE_CARDS: CardConfig[] = [
+  {
+    id: 'whats-new',
+    component: 'mfp-whats-new',
+    label: "What's New",
+    w: 3,
+    h: 3,
+  },
+  {
+    id: 'recently-visited',
+    component: 'mfp-visited-service-card',
+    label: 'Recently Visited',
+    w: 4,
+    h: 1,
+  },
+];
+
+@Component({
+  selector: 'add-card-dialog-story',
+  imports: [AddCardDialog],
+  template: `
+    <ui5-button (click)="open = true">Open Dialog</ui5-button>
+    <mfp-add-card-dialog
+      [addedCardsIds]="addedComponents"
+      [availableCards]="availableCards"
+      [open]="open"
+      (cancel)="open = false"
+      (confirm)="onConfirm($event)"
+    />
+    @if (lastAdded) {
+      <ui5-message-strip design="Positive" style="margin-top: 1rem;">
+        Added: {{ lastAdded }}
+      </ui5-message-strip>
+    }
+  `,
+})
+class AddCardDialogStory {
+  @Input() availableCards: CardConfig[] = AVAILABLE_CARDS;
+  @Input() addedComponents: Set<string> = new Set<string>();
+
+  open = false;
+  lastAdded = '';
+
+  onConfirm(cards: CardConfig[]): void {
+    this.open = false;
+    this.lastAdded = cards.map((c) => c.label || c.component).join(', ');
+    setTimeout(() => (this.lastAdded = ''), 3000);
+  }
+}
+
+const meta: Meta<AddCardDialogStory> = {
+  title: 'Declarative UI / AddCardDialog',
+  component: AddCardDialogStory,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    availableCards: { control: 'object' },
+    addedComponents: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AddCardDialogStory>;
+
+export const NoneAdded: Story = {
+  args: {
+    availableCards: AVAILABLE_CARDS,
+    addedComponents: new Set<string>(),
+  },
+};
+
+export const SomeAdded: Story = {
+  args: {
+    availableCards: AVAILABLE_CARDS,
+    addedComponents: new Set(['whats-new']),
+  },
+};
+
+export const AllAdded: Story = {
+  args: {
+    availableCards: AVAILABLE_CARDS,
+    addedComponents: new Set(AVAILABLE_CARDS.map((c) => c.id)),
+  },
+};

package/projects/ngx/declarative-ui/stories/dashboard.cards.ts

@@ -0,0 +1,107 @@
+import { Favorites } from '../../cards/favorites/favorites.component';
+import { ServiceStatusCard } from '../../cards/service-status/service-status-card.component';
+import { VisitedServiceCard } from '../../cards/visited-service-card/visited-service-card.component';
+import { WhatsNew } from '../../cards/whats-new/whats-new.component';
+import { Dashboard } from '../dashboard/dashboard/dashboard.component';
+import type { CardConfig, SectionConfig } from '../dashboard/models';
+import { TABLE_CARD_CONFIG, TABLE_RESOURCES } from './pods-table.config';
+
+Dashboard.registerAngularComponents([
+  Favorites,
+  VisitedServiceCard,
+  ServiceStatusCard,
+  WhatsNew,
+]);
+
+export const SECTIONS: SectionConfig[] = [
+  { id: 'ras', title: 'Recently accessed services', editable: false, w: 12 },
+];
+
+const RAS_CARD_TEMPLATES = [
+  {
+    serviceType: 'SAP HANA Cloud',
+    serviceName: 'olc-hana-db',
+    serviceIcon: 'database',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/hana/olc-hana-db',
+  },
+  {
+    serviceType: 'Cloud Identity Service',
+    serviceName: 'Cloud Identity',
+    serviceIcon: 'customer',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/identity/cloud-identity',
+  },
+  {
+    serviceType: 'SAP HANA Cloud',
+    serviceName: 'olc-hana-db-test',
+    serviceIcon: 'database',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/hana/olc-hana-db-test',
+  },
+  {
+    serviceType: 'Application Autoscaler',
+    serviceName: 'applicationtest',
+    serviceIcon: 'accelerated',
+    serviceDescription: 'My Subaccount 2/Space prod',
+    path: '/autoscaler/applicationtest',
+  },
+  {
+    serviceType: 'Cloud Identity Service',
+    serviceName: 'Cloud Identity 2',
+    serviceIcon: 'customer',
+    serviceDescription: 'Long text Subaccount 1/Space',
+    path: '/identity/cloud-identity-2',
+  },
+  {
+    serviceType: 'Audit Log Service',
+    serviceName: 'auditlog-name',
+    serviceIcon: 'log',
+    serviceDescription: 'My Subaccount 4/Space dev',
+    path: '/auditlog/auditlog-name',
+  },
+];
+
+export const CARDS: CardConfig[] = [
+  ...RAS_CARD_TEMPLATES.map((t, i) => ({
+    id: `ras-card-${i}`,
+    w: 4,
+    h: 10,
+    sectionId: 'ras',
+    component: 'mfp-visited-service-card',
+    componentInputs: { ...t },
+  })),
+  {
+    id: 'table-pods',
+    w: 12,
+    h: 50,
+    component: 'mfp-wc-declarative-table-card',
+    componentInputs: {
+      config: TABLE_CARD_CONFIG,
+      header: 'Pods',
+      headerTooltip: 'This table lists all pods running in the cluster.',
+      resources: TABLE_RESOURCES,
+    },
+  },
+  {
+    id: 'whats-new',
+    label: "What's New",
+    w: 5,
+    h: 57,
+    component: 'mfp-whats-new',
+  },
+  {
+    id: 'favorites',
+    label: 'Favorites',
+    w: 4,
+    h: 21,
+    component: 'mfp-favorites',
+  },
+  {
+    id: 'service-status',
+    label: 'Service Status',
+    w: 4,
+    h: 30,
+    component: 'mfp-service-status-card',
+  },
+];