added connector listing

[abilpraju-aot]

JIRA Ticket

https://aottech.atlassian.net/browse/M8F-238

Description

Summary

Adds a dedicated Connectors area to improve connector discoverability outside the BPMN modeler. The page is powered by GET /service-tasks (via the connector proxy) and presents connectors as grouped cards with avatars, operation counts, and guidance text. Access to configuration actions is permission-gated to users who can create secrets, matching existing M8Flow integrator and tenant-admin capabilities.

Motivation

Previously, connectors were only discoverable from within Service Task configuration in the BPMN modeler, making integrations difficult to find for new users. This update exposes connectors directly in the primary navigation and provides a clearer onboarding path for integrators and administrators to configure secrets and integrations.

Frontend Changes (m8flow-frontend)

src/views/Connectors.tsx

• Added a new Connectors page.

• Fetches data from /service-tasks.

• Groups operators by plugin prefix (segment before /).

• Includes:

  • loading state
  • empty state
  • error handling
  • page title

• Displays a Configure action only when the user has permission to create secrets:

  • wrapped with <Can I="POST" a={secretListPath}>

• Permission loading now includes:

  • GET /service-tasks
  • POST /secrets

src/utils/connectorCardDisplay.tsx

• Added connector display helpers.

• Display name resolution order:

  • name
  • display_name
  • displayName
  • label
  • title
  • fallback to humanized plugin key

• Added generated initials avatars with stable hue assignment derived from plugin keys.

src/components/SideNav.tsx

• Added Connectors navigation entry at /connectors.
• Uses Hub icon.
• Added active selection handling.
• Visibility gated by GET permission on serviceTaskListPath.

src/hooks/M8flowUriListForPermissions.tsx

• Added:

  • serviceTaskListPath: "/service-tasks"

src/ContainerForExtensions.tsx

• Added lazy-loaded route for /connectors.

• Added permission checks for:

  • GET /service-tasks

• Updated RoleBasedRootGate fallback ordering:

  • /connectors now resolves before configuration routes
  • allows users with both secrets and service-task permissions to land on Connectors by default

• Added navigation highlight styles for /connectors.

src/locales/en_us/translation.json

• Added localization strings for:

  • Connectors page
  • loading/empty/error states
  • helper copy

Backend Changes (m8flow-backend)

src/m8flow_backend/config/permissions/m8flow.yml

• Added integrator role access to:

  • read-service-tasks
  • read-service-tasks-root

• Enables integrators to access the Connectors page and connector metadata.

Type

• Feature
• Bug fix
• Documentation
• Other

Changes

• Backend
• Frontend
• Documentation

Testing

Related Issues

Closes #

[github-actions]

PR Agent Review

Blocking issues

1. Potential stale loading state when permissions deny access (Connectors page)
   • In Connectors.tsx, initial loading is true, and the data-fetch effect exits early when !permissionsLoaded || !ability.can('GET', targetUris.serviceTaskListPath).
   • If permissions load and user is denied, component returns <Navigate to="/" />, so this is mostly masked. However, this can still create brittle state behavior and makes the loading flag semantically incorrect for denied users.
   • Action: Explicitly set loading to false in the denied branch (or initialize loading only when a fetch starts) to avoid hidden state inconsistencies and future regressions if redirect behavior changes.
2. Permissions/UI contract risk: route visibility depends on /service-tasks but backend grants only read-service-tasks and read-service-tasks-root
   • Frontend checks GET /service-tasks (serviceTaskListPath) in multiple places (gate, sidenav, page fetch), while backend permission entries include both /service-tasks and /service-tasks/*.
   • This is correct if the backend auth matcher for root URI is exact and wired as expected. Any mismatch (e.g., only wildcard route evaluated by middleware) would make connectors page inaccessible despite role updates.
   • Action: Confirm auth middleware matching includes exact /service-tasks as used by frontend checks and API call. If uncertain, add/verify integration test (see below).

Non-blocking suggestions

1. Grid API compatibility check
   • Connectors.tsx uses <Grid size={{ xs: 12, sm: 6, md: 4 }}>. Depending on MUI version/config, this may need item xs={12} sm={6} md={4} (or Grid2 import).
   • Suggestion: Verify this compiles/renders with the project’s exact MUI version to avoid runtime/layout regressions.
2. Permission fetch duplication
   • ContainerForExtensions, SideNav, and Connectors all request GET /service-tasks.
   • Not a bug, but could increase permission-check chatter.
   • Suggestion: Consider centralizing/caching permission checks for shared routes.

Recommended tests

1. Backend auth regression test
   • For role integrator, assert:
     • GET /service-tasks is authorized.
     • GET /service-tasks/<id-or-subpath> is authorized.
   • For a role without new grant, assert both are denied.
2. Frontend route-guard test
   • User with GET /service-tasks permission:
     • /connectors route is accessible.
     • SideNav shows “Connectors”.
   • User without permission:
     • /connectors redirects to /.
     • SideNav hides “Connectors”.
3. Connectors page data handling tests
   • Successful /service-tasks response:
     • operators grouped by plugin prefix (id before /),
     • card title fallback behavior (API name fields vs derived humanized key),
     • operation count chip singular/plural.
   • Failed /service-tasks response:
     • error alert appears with connectors_load_failed.
   • Empty array response:
     • “no connectors available” empty state shown.
4. Configure button permission test
   • With POST /secrets permission: configure button rendered and navigates to /configuration/secrets.
   • Without it: button not rendered.

Generated by model gpt-5.3-codex on PR updates via OpenAI Responses API.

[andrepestana-aot]

Looks good.