Files
twenty/packages/twenty-front/src/utils/title-utils.ts
T
Thomas des Francs 1a60d4eaa3 Add MCP setup screen (#22468)
## Summary

- Add a first-tab MCP setup experience under MCP & APIs with quick
install cards, manual configuration, client logos, and HTTPS gating for
Claude install links.
- Rename API/Webhooks settings surfaces to MCP & APIs and update related
icons, permissions, breadcrumbs, and command menu entries.
- Add the Tabler sparkle-2 icon wrapper and MCP setup visual assets.

## Screenshots

| Before | After |
| --- | --- |
| ![Before: APIs & Webhooks MCP
tab](https://gist.githubusercontent.com/Bonapara/f8a97d31fbc3cab2771d18cbacd53d4c/raw/5838d123bc3aae3df0d37507b3e69135bec86444/before-mcp-settings.png)
| <img alt="image"
src="https://github.com/user-attachments/assets/a6ae2ae6-322b-4370-b9b6-0a3d73ff7fa7"
/> |

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22468?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2026-07-04 16:38:59 +02:00

66 lines
2.4 KiB
TypeScript

import { t } from '@lingui/core/macro';
import { AppBasePath, AppPath, SettingsPath } from 'twenty-shared/types';
enum SettingsPathPrefixes {
Accounts = `${AppBasePath.Settings}/${SettingsPath.Accounts}`,
Billing = `${AppBasePath.Settings}/${SettingsPath.Billing}`,
Experience = `${AppBasePath.Settings}/${SettingsPath.Experience}`,
Profile = `${AppBasePath.Settings}/${SettingsPath.ProfilePage}`,
Objects = `${AppBasePath.Settings}/${SettingsPath.Objects}`,
Members = `${AppBasePath.Settings}/${SettingsPath.WorkspaceMembersPage}`,
ApiWebhooks = `${AppBasePath.Settings}/${SettingsPath.ApiWebhooks}`,
LogicFunctions = `${AppBasePath.Settings}/${SettingsPath.LogicFunctions}`,
Integration = `${AppBasePath.Settings}/${SettingsPath.Integrations}`,
General = `${AppBasePath.Settings}/${SettingsPath.General}`,
Community = `${AppBasePath.Settings}/${SettingsPath.Community}`,
}
const getPathnameOrPrefix = (pathname: string) => {
for (const prefix of Object.values(SettingsPathPrefixes)) {
if (pathname.startsWith(prefix)) {
return prefix;
}
}
return pathname;
};
export const getPageTitleFromPath = (pathname: string): string => {
const pathnameOrPrefix = getPathnameOrPrefix(pathname);
switch (pathnameOrPrefix) {
case AppPath.Verify:
return t`Verify`;
case AppPath.SignInUp:
return t`Sign in or Create an account`;
case AppPath.Invite:
return t`Invite`;
case AppPath.WorkspaceActivation:
return t`Create Workspace`;
case AppPath.CreateProfile:
return t`Create Profile`;
case SettingsPathPrefixes.Experience:
return t`Experience - Settings`;
case SettingsPathPrefixes.Accounts:
return t`Account - Settings`;
case SettingsPathPrefixes.Billing:
return t`Billing - Settings`;
case SettingsPathPrefixes.Profile:
return t`Profile - Settings`;
case SettingsPathPrefixes.Members:
return t`Members - Settings`;
case SettingsPathPrefixes.Objects:
return t`Data model - Settings`;
case SettingsPathPrefixes.ApiWebhooks:
return t`MCP & APIs - Settings`;
case SettingsPathPrefixes.LogicFunctions:
return t`Functions - Settings`;
case SettingsPathPrefixes.Integration:
return t`Integrations - Settings`;
case SettingsPathPrefixes.General:
return t`General - Settings`;
case SettingsPathPrefixes.Community:
return t`Community - Settings`;
default:
return 'Twenty';
}
};