{intl.formatMessage(messages.tagDesc, {
+ count: enabledTagsLimit,
learnMore: (
{intl.formatMessage(messages.learnMore)}
diff --git a/src/routes/settings/tagDetails/tagToolbar.tsx b/src/routes/settings/tagDetails/tagToolbar.tsx
index 81b0a6688..c99b7d158 100644
--- a/src/routes/settings/tagDetails/tagToolbar.tsx
+++ b/src/routes/settings/tagDetails/tagToolbar.tsx
@@ -16,6 +16,8 @@ import { styles } from './tagDetails.styles';
interface TagToolbarOwnProps {
canWrite?: boolean;
+ enabledTagsCount?: number;
+ enabledTagsLimit?: number;
isAllSelected?: boolean;
isDisabled?: boolean;
isPrimaryActionDisabled?: boolean;
@@ -60,6 +62,8 @@ export class TagToolbarBase extends React.Component {
const {
canWrite,
+ enabledTagsCount = 0,
+ enabledTagsLimit = 0,
intl,
isPrimaryActionDisabled,
isSecondaryActionDisabled,
@@ -68,14 +72,20 @@ export class TagToolbarBase extends React.Component !item.enabled);
+ const isLimit = disabledItems.length + enabledTagsCount > enabledTagsLimit;
const isDisabled = !canWrite || selectedItems.length === 0;
- const tooltip = intl.formatMessage(!canWrite ? messages.readOnlyPermissions : messages.selectTags);
+ const enableTagsTooltip = intl.formatMessage(
+ !canWrite ? messages.readOnlyPermissions : isLimit ? messages.deselectTags : messages.selectTags,
+ { count: enabledTagsLimit }
+ );
+ const disableTagsTooltip = intl.formatMessage(!canWrite ? messages.readOnlyPermissions : messages.selectTags);
return (
<>
-
+
-
+