Problem Statement

Currently, the Generic List and Detail views only support the hardcoded Create action. There is no mechanism to trigger custom logic or open external microfrontends via custom buttons in the toolbar.

Proposed Change

We need to introduce an actions array to the listView and detailView definitions as an generic action component. These actions will render as UI5 Buttons in the toolbar and, when clicked, open a custom microfrontend within a Luigi Modal, configured via a dialog settings object.

Technical Specification

1. Interface Definitions
Rename UiSettings to UiFieldSettings and updated the action models.

/** * renamed from UiSettings 
 */
export interface UiFieldSettings {
  // ... existing field settings
}

export interface UiButtonSettings {
  icon?: string;
  endIcon?: string;
  design?:
    | 'Default'
    | 'Positive'
    | 'Negative'
    | 'Transparent'
    | 'Emphasized'
    | 'Attention';
  tooltip?: string;
}

export interface UiDialogSettings {
  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 interface GroupDefinition {
  name: string;
  label?: string;
  delimiter?: string;
  multiline?: boolean;
}

export interface ActionDefinition {
  label?: string;
  path: string;
  group?: GroupDefinition;
  uiButtonSettings?: UiButtonSettings;
  uiDialogSettings?: UiDialogSettings;
}

export interface FieldDefinition {
  label?: string;
  property: string | string[];
  propertyField?: PropertyField;
  jsonPathExpression?: string;
  required?: boolean;
  values?: string[];
  group?: GroupDefinition;
  uiSettings?: UiSettings;
  dynamicValuesDefinition?: {
    operation: string;
    gqlQuery: string;
    value: string;
    key: string;
  };
}

interface UiView {
  fields: (FieldDefinition | ActionDefinition)[]; // field/entity level actions
  actions: ActionDefinition[]; // view/resource level actions
}

The properties of the UiButtonSettings or UiDialogSettings don't exhaust the list of possibles properties and options, and with time and need will get extended.

2. Rendering Requirements

• Default Create Action: The existing Create button should be refactored to use this new component. It should only be displayed if the user has appropriate permissions (out of scope now) and the createView is defined.
• Custom Actions Component: Should be able to be rendered in the Table Column/Field (List View) or the DynamicPage header (Detail View).
• Integration: Clicking a custom action should trigger LuigiClient.linkManager().openAsModal(path, {title:'Users', size:'m'}), see Luigi

Definition of Done

• Implement a generic action component
• Refactor ListViewComponent and DetailViewComponent to read the actions array.
• Ensure the Create button remains functional as the "default" action.
• Support UI5 button designs (Emphasized, Positive, etc.) as defined in UiButtonSettings.
• Update documentation

Out of scope

• The configuration should provide means to overrite the default delete/edit modals