feat(content-sidebar): add data-target-id to integrations tabs

[EdDaWord]

Problem

The integrations rail in the ContentSidebar nav — the app icons below the primary tabs, plus the overflow "more" tab — has no data-target-id. Analytics tooling therefore falls back to CSS selectors (hashed module classnames, nth-child chains) that break silently on any refactor or build-hash change.

Tagging the rail is only useful if each app is distinguishable: a single shared id across Slack, Adobe Sign, Adobe Acrobat, Outlook and Gmail would make the attribute unusable for measuring which integrations users actually open.

Change

Every icon in the rail is one instance of the shared AdditionalTab button, so the id is derived per tab rather than hardcoded:

1. serviceName → slug. AdditionalTab derives the id from the integration's backend serviceName via lodash/camelCase, which consumers already supply per tab:

   serviceName	data-target-id
   Slack	AdditionalTab-slack
   Adobe Sign	AdditionalTab-adobeSign
   Adobe Acrobat	AdditionalTab-adobeAcrobat
   Microsoft Outlook	AdditionalTab-microsoftOutlook
   Gmail	AdditionalTab-gmail

   serviceName is a backend identifier, not a localized display name, so the id is stable across locales.

2. Optional targetId override. A consumer can set targetId on the tab data to pin an exact value, taking precedence over the derived one. It is excluded from callbackData so it does not reach consumer click handlers; serviceName is deliberately left in place, since consumers read it from there.

3. Overflow and fallback. The overflow tab (id < 0) gets AdditionalTab-moreButton — it has no service of its own. A tab with no serviceName falls back to the shared AdditionalTab-integrationButton rather than an empty or malformed id.

4. Rail container. SidebarNav.js gets SidebarNav-additionalTabsOverflow, matching the existing data-testid="additional-tabs-overflow".

serviceName and targetId are added to the AdditionalSidebarTab flow type. Names follow the SidebarNavButton-* convention already used for the primary tabs, and sit alongside the existing data-resin-target attributes rather than replacing them.

Verification

• yarn flow check src/elements/content-sidebar — 0 errors
• yarn test src/elements/content-sidebar/additional-tabs — 22 passed, 8 snapshots passed
• yarn test src/elements/content-sidebar/__tests__/SidebarNav — 82 passed
• eslint on all touched files — clean

New test coverage: slug derivation across several serviceName shapes (including zoom.us → zoomUs), the overflow id, the missing-serviceName fallback, targetId precedence, and an assertion that targetId does not leak into callbackData while serviceName still does.

Not verified in a running app. No visual or behavioral change is expected — only DOM attributes were added.

Internal ref: UXF-1331

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ff96f697-7a37-44f8-a31d-4dd4b05159da

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Edward Wang seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}