Disable actions if selections exceed tag limit

https://issues.redhat.com/browse/COST-4272

locales/data.json

@@ -14827,6 +14827,20 @@
         "value": "Description"
       }
     ],
+    "deselectTags": [
+      {
+        "type": 0,
+        "value": "Your account is limited to "
+      },
+      {
+        "type": 1,
+        "value": "count"
+      },
+      {
+        "type": 0,
+        "value": " active tags at a time. You must disable some tags to enable others"
+      }
+    ],
     "detailsActionsExport": [
       {
         "type": 0,
@@ -24382,7 +24396,15 @@
     "tagDesc": [
       {
         "type": 0,
-        "value": "Enable your tags and labels to be used as tag keys for report grouping and filtering. Changes will be reflected within 24 hours. "
+        "value": "Enable your tags and labels to be used as tag keys for report grouping and filtering. Your account is limited to "
+      },
+      {
+        "type": 1,
+        "value": "count"
+      },
+      {
+        "type": 0,
+        "value": " active tags at a time. Changes will be reflected within 24 hours. "
       },
       {
         "type": 1,

locales/translations.json

@@ -204,6 +204,7 @@
   "default": "Default",
   "delete": "Delete",
   "description": "Description",
+  "deselectTags": "Your account is limited to {count} active tags at a time. You must disable some tags to enable others",
   "detailsActionsExport": "Export data",
   "detailsActionsPriceList": "View all price lists",
   "detailsClustersModalTitle": "{groupBy, select, account {account {name} clusters} aws_category {cost category {name} clusters} cluster {cluster {name} clusters} gcp_project {GCP project {name} clusters} node {node {name} clusters} org_unit_id {organizational unit {name} clusters} payer_tenant_id {account {name} clusters} product_service {service {name} clusters} project {project {name} clusters} region {region {name} clusters} resource_location {region {name} clusters} service {service {name} clusters} service_name {service {name} clusters} subscription_guid {account {name} clusters} tag {tags {name} clusters} other {}}",
@@ -546,7 +547,7 @@
   "sumPlatformCosts": "Sum platform costs",
   "summary": "Summary",
   "supplementary": "Supplementary",
-  "tagDesc": "Enable your tags and labels to be used as tag keys for report grouping and filtering. Changes will be reflected within 24 hours. {learnMore}",
+  "tagDesc": "Enable your tags and labels to be used as tag keys for report grouping and filtering. Your account is limited to {count} active tags at a time. Changes will be reflected within 24 hours. {learnMore}",
   "tagHeadingKey": "Key",
   "tagHeadingTitle": "Tags ({value})",
   "tagHeadingValue": "Value",

src/api/settings.ts

@@ -11,6 +11,8 @@ export interface SettingsData {
 export interface PagedMetaDataExt extends PagedMetaData {
   limit?: number;
   offset?: number;
+  enabled_tags_count?: number;
+  enabled_tags_limit?: number;
 }
 
 export interface Settings {

src/locales/messages.ts

@@ -1152,6 +1152,12 @@ export default defineMessages({
     description: 'Description',
     id: 'description',
   },
+  deselectTags: {
+    defaultMessage:
+      'Your account is limited to {count} active tags at a time. You must disable some tags to enable others',
+    description: 'Your account is limited to 200 active tags at a time. You must disable some tags to enable others',
+    id: 'deselectTags',
+  },
   detailsActionsExport: {
     defaultMessage: 'Export data',
     description: 'Export data',
@@ -3348,9 +3354,9 @@ export default defineMessages({
   },
   tagDesc: {
     defaultMessage:
-      'Enable your tags and labels to be used as tag keys for report grouping and filtering. Changes will be reflected within 24 hours. {learnMore}',
+      'Enable your tags and labels to be used as tag keys for report grouping and filtering. Your account is limited to {count} active tags at a time. Changes will be reflected within 24 hours. {learnMore}',
     description:
-      'Enable your tags and labels to be used as tag keys for report grouping and filtering. Changes will be reflected within 24 hours. {learnMore}',
+      'Enable your tags and labels to be used as tag keys for report grouping and filtering. Your account is limited to 200 active tags at a time. Changes will be reflected within 24 hours. {learnMore}',
     id: 'tagDesc',
   },
   tagHeadingKey: {

src/routes/settings/tagDetails/tagDetails.tsx

@@ -109,10 +109,14 @@ const TagDetails: React.FC<TagDetailsProps> = ({ canWrite }) => {
     const hasEnabledItem = selectedItems.find(item => item.enabled);
     const hasDisabledItem = selectedItems.find(item => !item.enabled);
     const itemsTotal = settings?.meta ? settings.meta.count : 0;
+    const enabledTagsCount = settings?.meta ? settings.meta.enabled_tags_count : 0;
+    const enabledTagsLimit = settings?.meta ? settings.meta.enabled_tags_limit : 0;
 
     return (
       <TagToolbar
         canWrite={canWrite}
+        enabledTagsCount={enabledTagsCount}
+        enabledTagsLimit={enabledTagsLimit}
         isDisabled={tags.length === 0}
         isPrimaryActionDisabled={!hasDisabledItem}
         isSecondaryActionDisabled={!hasEnabledItem}
@@ -208,16 +212,19 @@ const TagDetails: React.FC<TagDetailsProps> = ({ canWrite }) => {
     setQuery(newQuery);
   };
 
-  const tags = getTags();
-  const isDisabled = tags.length === 0;
-
   if (settingsError) {
     return <NotAvailable />;
   }
+
+  const tags = getTags();
+  const isDisabled = tags.length === 0;
+  const enabledTagsLimit = settings?.meta ? settings.meta.enabled_tags_limit : 0;
+
   return (
     <PageSection isFilled>
       <div style={styles.descContainer}>
         {intl.formatMessage(messages.tagDesc, {
+          count: enabledTagsLimit,
           learnMore: (
             <a href={intl.formatMessage(messages.docsConfigTags)} rel="noreferrer" target="_blank">
               {intl.formatMessage(messages.learnMore)}

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<TagToolbarProps, TagToolbarS
   private getActions = () => {
     const {
       canWrite,
+      enabledTagsCount = 0,
+      enabledTagsLimit = 0,
       intl,
       isPrimaryActionDisabled,
       isSecondaryActionDisabled,
@@ -68,22 +72,28 @@ export class TagToolbarBase extends React.Component<TagToolbarProps, TagToolbarS
       selectedItems,
     } = this.props;
 
+    const disabledItems = selectedItems.filter((item: any) => !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 (
       <>
-        <Tooltip content={tooltip}>
+        <Tooltip content={enableTagsTooltip}>
           <Button
-            isAriaDisabled={isDisabled || isPrimaryActionDisabled}
+            isAriaDisabled={isDisabled || isPrimaryActionDisabled || isLimit}
             key="save"
             onClick={onEnableTags}
             variant={ButtonVariant.primary}
           >
             {intl.formatMessage(messages.enableTags)}
           </Button>
         </Tooltip>
-        <Tooltip content={tooltip}>
+        <Tooltip content={disableTagsTooltip}>
           <Button
             isAriaDisabled={isDisabled || isSecondaryActionDisabled}
             key="reset"