feat(composio): format trigger slugs into human-readable labels (#1129)

[oxoxDev]

Summary

Add a shared formatTriggerLabel util and route every Composio trigger render through it. Stops leaking raw provider enum slugs (GOOGLECALENDAR_GOOGLE_CALENDAR_EVENT_CREATED_TRIGGER) to users.

Problem

Composio trigger labels currently render as raw all-caps slugs in two surfaces:

• app/src/components/composio/TriggerToggles.tsx — primary label, github sub-label, aria-label, error toast (4 sites)
• app/src/components/webhooks/ComposeioTriggerHistory.tsx — history badge text

Users see strings like GOOGLECALENDAR_GOOGLE_CALENDAR_EVENT_CREATED_TRIGGER instead of Google Calendar Event Created. Looks unfinished, leaks implementation detail, hurts readability.

Solution

• New util app/src/lib/composio/formatters.ts exporting formatTriggerLabel(slug, { overrides? }):
  • Empty/null guard returns ''
  • overrides[slug] shortcuts past the heuristic for custom mappings
  • Strips trailing _TRIGGER suffix (case-insensitive)
  • Dedupes leading provider prefix when it reappears (e.g. GOOGLECALENDAR_GOOGLE_CALENDAR_* → drops the leading GOOGLECALENDAR_ because the next two tokens concatenate to it; also handles SLACK_SLACK_* form)
  • Special-cases GITHUB → GitHub
  • Title-cases remaining tokens, joins with space
• Replaced 4 raw-slug render sites in TriggerToggles.tsx (lines 125 / 180 / 183 / 201) and 1 in ComposeioTriggerHistory.tsx:55
• Raw slug stays in component state and props for enable/disable signature/lookup logic — only the rendered text changes
• New Vitest cases at app/src/lib/composio/formatters.test.ts covering provider-prefix dedup, _TRIGGER stripping, override map, empty/undefined input, GitHub casing, multi-underscore, case-insensitive _trigger
• Existing TriggerToggles.test.tsx updated to assert formatted labels in the rendered output

Submission Checklist

• Tests added — formatters.test.ts covers 8 representative cases; TriggerToggles.test.tsx updated to assert formatted output
• Lint, typecheck, format clean — pnpm typecheck, pnpm lint (0 errors), pnpm format:check
• Existing tests pass — pnpm test:unit 1282 pass / 4 skipped / 1 todo
• Diff coverage ≥ 80%
• [N/A: pure UI label change, no Rust touch] — no cargo check impact
• [N/A: no schema/RPC change] — no migration

Impact

User-facing trigger labels become readable across Composio toggle UI and trigger-history badge. No data-model, RPC, or backend change. Raw slug still backs all signature/enable-disable logic — zero risk of toggle regression.

Related

Closes #1129.

Co-authored by Google Jules; reviewed locally by oxoxDev (commit re-signed with GPG before force-push).

Summary by CodeRabbit

• Improvements

  • Trigger labels in toggles, switch controls, and history are now shown in human-readable form (e.g., "Enable GitHub Push Event" and include repository context), improving clarity and error messages.

• Tests

  • Added tests verifying human-readable formatting, deduplication/normalization rules, overrides, and updated UI tests to use the new labels.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 84a6522b-b5e0-4f7e-9d6a-5a9e514e7b8d

📥 Commits

Reviewing files that changed from the base of the PR and between d6e281e and d7cfe18.

📒 Files selected for processing (3)

• app/src/components/composio/TriggerToggles.tsx
• app/src/lib/composio/formatters.test.ts
• app/src/lib/composio/formatters.ts

✅ Files skipped from review due to trivial changes (2)

• app/src/lib/composio/formatters.ts
• app/src/lib/composio/formatters.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• app/src/components/composio/TriggerToggles.tsx

---

📝 Walkthrough

Walkthrough

A new utility, formatTriggerLabel, converts raw Composio trigger slugs into human-readable labels. The formatter is applied in trigger toggles and trigger history components; tests are updated to assert the new labels. Raw slugs remain unchanged for internal API calls.

Changes

Trigger Label Formatting

Layer / File(s)	Summary
Formatter Core app/src/lib/composio/formatters.ts	Adds formatTriggerLabel(slug, opts?): handles null/empty input, opts.overrides, case-insensitive _TRIGGER suffix stripping, repeated-provider-token deduplication, token normalization/title-casing (special-case GITHUB → GitHub), and joins tokens with spaces.
Formatter Tests app/src/lib/composio/formatters.test.ts	New Vitest suite verifying standard formatting, empty/null handling, overrides precedence, provider-prefix deduplication, _TRIGGER suffix case-insensitivity, and multi-underscore normalization.
Component Integration app/src/components/composio/TriggerToggles.tsx, app/src/components/webhooks/ComposeioTriggerHistory.tsx	Replace direct rendering of slug/entry.trigger with formatTriggerLabel(...) for row labels, switch aria-labels, github_repo subtext (including owner/repo context), and error messages; internal use of slugs for enable/disable calls preserved.
Component Tests app/src/components/composio/TriggerToggles.test.tsx	Update test lookups, click targets, and assertions to use the formatted human-readable labels (e.g., Enable GitHub Push Event); mock call args (slugs, triggerConfig) remain unchanged; error message expectation updated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰
I hopped through slugs of caps and underscores,
nudged them soft into tidy words,
now toggles sing and histories hum,
no more SCREAMING_TEXT — just gentle fun. 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(composio): format trigger slugs into human-readable labels (#1129)' directly and clearly summarizes the main change—converting raw Composio trigger slugs into user-friendly labels across UI components.
Linked Issues check	✅ Passed	The PR fully implements all acceptance criteria from #1129: stops exposing raw slugs in TriggerToggles.tsx and ComposeioTriggerHistory.tsx, centralizes formatting in a shared formatTriggerLabel function with override support, maintains raw slugs internally for logic, and includes comprehensive unit tests with ≥80% coverage.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to #1129 objectives: the new formatters.ts/formatters.test.ts files implement the formatter, updates to TriggerToggles.tsx and ComposeioTriggerHistory.tsx apply it, and TriggerToggles.test.tsx validates the new behavior. No unrelated changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Review rate limit: 4/5 reviews remaining, refill in 12 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

app/src/components/composio/TriggerToggles.tsx (1)

180-204: ⚡ Quick win

Include repo context in switch aria-label for github_repo entries.

When multiple repos share the same trigger slug, labels like “Enable GitHub Push Event” become indistinguishable to screen-reader users.

Proposed refactor

           const sub =
             entry.scope === 'github_repo'
               ? formatTriggerLabel(entry.slug)
               : requiresConfig
                 ? 'Needs configuration'
                 : '';
+          const action = enabled ? 'Disable' : 'Enable';
+          const triggerName = formatTriggerLabel(entry.slug);
+          const ariaLabel =
+            entry.scope === 'github_repo' && entry.repo
+              ? `${action} ${triggerName} for ${entry.repo.owner}/${entry.repo.repo}`
+              : `${action} ${triggerName}`;
...
-                aria-label={`${enabled ? 'Disable' : 'Enable'} ${formatTriggerLabel(entry.slug)}`}
+                aria-label={ariaLabel}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/src/components/composio/TriggerToggles.tsx` around lines 180 - 204, The
switch aria-label is ambiguous for github_repo entries; change the aria-label
construction in TriggerToggles (where formatTriggerLabel(entry.slug) is used) to
include repo context when entry.scope === 'github_repo' (e.g., owner/repo or the
already-computed label variable) so screen readers read "Enable/Disable
<trigger> for <owner/repo>" instead of just the trigger name; update the
aria-label prop on the button (role="switch") to conditionally append the repo
owner/repo from entry.repo for github_repo entries.

app/src/lib/composio/formatters.ts (1)

16-16: ⚡ Quick win

Extract the formatter options shape into an interface.

Using an inline object type here goes against the repo typing convention and makes reuse harder.

Proposed refactor

+interface FormatTriggerLabelOptions {
+  overrides?: Record<string, string>;
+}
+
 export function formatTriggerLabel(
   slug: string | null | undefined,
-  opts?: { overrides?: Record<string, string> }
+  opts?: FormatTriggerLabelOptions
 ): string {

As per coding guidelines: "**/*.{ts,tsx}: Prefer interface for defining object shapes in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/src/lib/composio/formatters.ts` at line 16, The inline object type for
formatter options should be extracted into a named interface (e.g.,
FormatterOptions) and used instead of the inline type; change the parameter
declaration from opts?: { overrides?: Record<string,string> } to opts?:
FormatterOptions, define interface FormatterOptions { overrides?:
Record<string,string> } near the top of app/src/lib/composio/formatters.ts, and
export the interface if it will be reused elsewhere (update any references to
opts, overrides, or functions/methods in this file such as the formatter
function that accepts opts to use the new interface).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/src/lib/composio/formatters.test.ts`:
- Around line 39-41: The test in formatters.test.ts named that checks "handles
tokens with multiple underscores correctly" uses 'LINEAR_ISSUE_CREATED' which
only has single underscores; update the test to use a token with consecutive
underscores (e.g., include a segment like 'FOO__BAR' or
'LINEAR__ISSUE__CREATED') so formatTriggerLabel is exercised with multiple
underscores and the expected output reflects collapsed/handled spacing
accordingly; locate the test case referencing formatTriggerLabel and change the
input string and expected result to match the intended behavior.

In `@app/src/lib/composio/formatters.ts`:
- Line 19: The current check in the formatter uses truthiness on
opts.overrides[slug], which ignores explicit falsy overrides (e.g., empty
string); change the condition to test property existence instead so mapped
values are honored: locate the conditional that references
opts?.overrides?.[slug] and replace the truthy check with a key-existence check
(e.g., using Object.prototype.hasOwnProperty.call(opts.overrides, slug) or slug
in opts.overrides) and then return opts.overrides[slug] when the key exists;
ensure you reference the same variables slug and opts.overrides in the updated
condition.
- Around line 42-48: The current tokens -> map -> join pipeline can produce
extra spaces when tokens contain empty strings; update the logic in the
formatter (the tokens handling in this function in formatters.ts) to filter out
empty/falsy tokens before mapping/joining (e.g., use tokens.filter(...) or
filter the mapped results) so that repeated, leading, or trailing underscores
that produce empty tokens are removed and do not render double spaces; keep the
existing capitalization logic (the token.toUpperCase() === 'GITHUB' check and
charAt(0).toUpperCase() + slice(1).toLowerCase()) but operate only on non-empty
tokens.

---

Nitpick comments:
In `@app/src/components/composio/TriggerToggles.tsx`:
- Around line 180-204: The switch aria-label is ambiguous for github_repo
entries; change the aria-label construction in TriggerToggles (where
formatTriggerLabel(entry.slug) is used) to include repo context when entry.scope
=== 'github_repo' (e.g., owner/repo or the already-computed label variable) so
screen readers read "Enable/Disable <trigger> for <owner/repo>" instead of just
the trigger name; update the aria-label prop on the button (role="switch") to
conditionally append the repo owner/repo from entry.repo for github_repo
entries.

In `@app/src/lib/composio/formatters.ts`:
- Line 16: The inline object type for formatter options should be extracted into
a named interface (e.g., FormatterOptions) and used instead of the inline type;
change the parameter declaration from opts?: { overrides?: Record<string,string>
} to opts?: FormatterOptions, define interface FormatterOptions { overrides?:
Record<string,string> } near the top of app/src/lib/composio/formatters.ts, and
export the interface if it will be reused elsewhere (update any references to
opts, overrides, or functions/methods in this file such as the formatter
function that accepts opts to use the new interface).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f5c66926-7bb3-4d2b-94cd-0079f82c7d0b

📥 Commits

Reviewing files that changed from the base of the PR and between 995e5cc and d6e281e.

📒 Files selected for processing (5)

• app/src/components/composio/TriggerToggles.test.tsx
• app/src/components/composio/TriggerToggles.tsx
• app/src/components/webhooks/ComposeioTriggerHistory.tsx
• app/src/lib/composio/formatters.test.ts
• app/src/lib/composio/formatters.ts