Endpoint modal alignment (Mini API Registry)

[ruwinirathnamalala]

#923

Mini API Registry in Service Flow Editor

Overview

Adds an inline API Registry panel (ApiElementsPanel) inside the Elements dropdown of the service flow editor, replacing the old draggable API endpoint cards. Users can now browse, search, create, edit, delete, and add endpoints to the canvas without leaving the flow editor.

Changes

New Components

• ApiElementsPanel.tsx — Inline mini registry panel with:
  • Collapsible section matching the "All elements" visual style
  • Search bar with debounced filtering
  • Sortable table (name, status, schema columns) with pagination
  • Row-level actions: test, edit, delete
  • + New API button to create endpoints from within the flow
  • Figma-spec styling: tag-style rows (#E7F0F6 background, #B9D2E5 border), HEADER_HEIGHT_PX constant for scroll calculation
• ApiElementsPanel.scss — Extracted styles for the panel (row colours, border-radius, hover state, placeholder)

Modified Components

• CustomEdge.tsx — Replaces draggable endpoint cards with <ApiElementsPanel>
• ApiRegistryTable.tsx — Exported EndpointTooltipContent for reuse in the mini registry
• ApiRegistryPage.tsx — Wired onSaveSuccess on the edit modal to reload the table after saving

i18n

• Added serviceFlow.apiElements.title, serviceFlow.apiElements.searchPlaceholder, serviceFlow.apiElements.newApi keys in en/common.json and et/common.json

[sonarqubecloud]

Quality Gate failed

Failed conditions
5.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud