From 97175525d30f7e0cd8ae28535d072b36f2191cb2 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 6 May 2026 10:20:13 -0300 Subject: [PATCH 1/2] refactor: extract DocsLink component, migrate 4 of 17 callers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a dedicated DocsLink component for the repeated docs-link pattern that was being shoehorned into + +

= (props) => {

{title}

- {description}{' '} - {docs && ( - - )} + {description} {docs && View docs}
{renderActions()}
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx index 5f48e66113f3..656f945ec2c5 100644 --- a/frontend/web/components/modals/InviteUsers.tsx +++ b/frontend/web/components/modals/InviteUsers.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useRef, FC } from 'react' import Button from 'components/base/forms/Button' +import DocsLink from 'components/DocsLink' import ConfigProvider from 'common/providers/ConfigProvider' import Constants from 'common/constants' import Icon from 'components/icons/Icon' @@ -297,14 +298,9 @@ const InviteUsers: FC = () => { Users without administrator privileges will need to be invited to individual projects.
- +
{error && } From f3d3e486751a8526b4ecb433a1b9e4e95cead481 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 6 May 2026 13:46:30 -0300 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20rename=20DocsLink=20=E2=86=92?= =?UTF-8?q?=20Link,=20migrate=20all=2017=20docs-link=20callers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Following design-system review, replaces the narrow `DocsLink` extraction with a generic `Link` component. Children-only API — no `iconLeft`/ `iconRight` props (icons compose via children + the link's flex wrapper). API: type LinkProps = { href: string children: ReactNode external?: boolean // default: auto-detect from `http(s)://` href noUnderline?: boolean className?: string target?: HTMLAttributeAnchorTarget rel?: string onClick?: ... } `external` auto-detects from absolute http(s) URLs and adds `target="_blank"` + `rel="noreferrer"`. The narrow `DocsLink` preset is unnecessary — Link does the right thing automatically. Migrations in this PR: - All 17 docs-link sites previously rendering as ` +

diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx index 656f945ec2c5..b5e90295fe0f 100644 --- a/frontend/web/components/modals/InviteUsers.tsx +++ b/frontend/web/components/modals/InviteUsers.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef, FC } from 'react' import Button from 'components/base/forms/Button' -import DocsLink from 'components/DocsLink' +import Link from 'components/Link' import ConfigProvider from 'common/providers/ConfigProvider' import Constants from 'common/constants' import Icon from 'components/icons/Icon' @@ -298,9 +298,9 @@ const InviteUsers: FC = () => { Users without administrator privileges will need to be invited to individual projects.
- + Learn about User Roles. - +
{error && } diff --git a/frontend/web/components/pages/AccountSettingsPage.tsx b/frontend/web/components/pages/AccountSettingsPage.tsx index b3ada04700e0..5a3f9dc9c6b9 100644 --- a/frontend/web/components/pages/AccountSettingsPage.tsx +++ b/frontend/web/components/pages/AccountSettingsPage.tsx @@ -316,14 +316,9 @@ const AccountSettingsPage: FC = () => {

You can use this token to securely integrate with the private endpoints of our{' '} - + .

diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.tsx b/frontend/web/components/pages/EnvironmentSettingsPage.tsx index c7a465892b48..1ca26b05b4ef 100644 --- a/frontend/web/components/pages/EnvironmentSettingsPage.tsx +++ b/frontend/web/components/pages/EnvironmentSettingsPage.tsx @@ -18,7 +18,7 @@ import PageTitle from 'components/PageTitle' import { getStore } from 'common/store' import { getRoles } from 'common/services/useRole' import AccountStore from 'common/stores/account-store' -import { Link, useHistory, useRouteMatch } from 'react-router-dom' +import { Link as RouterLink, useHistory, useRouteMatch } from 'react-router-dom' import { enableFeatureVersioning } from 'common/services/useEnableFeatureVersioning' import AddMetadataToEntity from 'components/metadata/AddMetadataToEntity' import { getSupportedContentType } from 'common/services/useSupportedContentType' @@ -41,6 +41,7 @@ import { useUpdateWebhookMutation, } from 'common/services/useWebhooks' import Button from 'components/base/forms/Button' +import Link from 'components/Link' import Input from 'components/base/forms/Input' import { useGetEnvironmentQuery } from 'common/services/useEnvironment' import { useRouteContext } from 'components/providers/RouteContext' @@ -658,9 +659,9 @@ const EnvironmentSettingsPage: React.FC = () => { enabling this will prevent the API from returning features that are disabled. You can also manage this in{' '} - + Project settings - + .

@@ -729,14 +730,9 @@ const EnvironmentSettingsPage: React.FC = () => {
For full information on the excluded fields see documentation{' '} - +
Enabling this feature will change the response from the API and could break your existing @@ -795,14 +791,9 @@ const EnvironmentSettingsPage: React.FC = () => { Feature webhooks let you know when features have changed. You can configure 1 or more Feature Webhooks per Environment.{' '} - +

+
@@ -246,7 +242,7 @@ const IdentitiesPage: FC<{ props: any }> = (props) => { key={id} data-test={`user-item-${index}`} > - = (props) => {
)} - +
+ . Segments can be used to override features within the features page for any environment.{' '} - +
{isLoading && !segments && !searchInput && ( diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx index e958bd489964..86357a2d0a4a 100644 --- a/frontend/web/components/pages/UsersAndPermissionsPage.tsx +++ b/frontend/web/components/pages/UsersAndPermissionsPage.tsx @@ -1,6 +1,7 @@ import React, { FC, useState } from 'react' import JSONReference from 'components/JSONReference' import Button from 'components/base/forms/Button' +import Link from 'components/Link' import Tabs from 'components/navigation/TabMenu/Tabs' import TabItem from 'components/navigation/TabMenu/TabItem' import Utils from 'common/utils/utils' @@ -170,14 +171,9 @@ const UsersAndPermissionsInner: FC = ({ Flagsmith lets you manage fine-grained permissions for your projects and environments, invite members as a user or an administrator and then set permission in your Project and Environment settings.{' '} - +

@@ -234,6 +230,7 @@ const UsersAndPermissionsInner: FC = ({ for your plan.{' '} {usedSeats && ( <> + {/* eslint-disable-next-line no-nested-ternary */} {overSeats && (!verifySeatsLimit || !autoSeats) ? ( @@ -402,14 +399,9 @@ const UsersAndPermissionsInner: FC = ({ Anyone with link can join as a standard user, once they have joined you can edit their role from the team members panel.{' '} - +

{error && } diff --git a/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx b/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx index 604857c6b1ef..3e1c045f99f4 100644 --- a/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx +++ b/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react' import Button from 'components/base/forms/Button' +import Link from 'components/Link' import Input from 'components/base/forms/Input' import Icon from 'components/icons/Icon' import PageTitle from 'components/PageTitle' @@ -37,13 +38,9 @@ const SDKKeysPage: FC = () => { > Use this key to initialise{' '} - {' '} + {' '} SDKs.
diff --git a/frontend/web/components/pages/sdk-keys/components/ServerSideSDKKeys.tsx b/frontend/web/components/pages/sdk-keys/components/ServerSideSDKKeys.tsx index 6a21a8585ad0..e683130051f8 100644 --- a/frontend/web/components/pages/sdk-keys/components/ServerSideSDKKeys.tsx +++ b/frontend/web/components/pages/sdk-keys/components/ServerSideSDKKeys.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react' import Button from 'components/base/forms/Button' +import Link from 'components/Link' import Tooltip from 'components/Tooltip' import Constants from 'common/constants' import { useHasPermission } from 'common/providers/Permission' @@ -63,13 +64,9 @@ const ServerSideSDKKeys: FC = ({

Flags can be evaluated locally within your own Server environments using our{' '} - + .