chore: Add plan based access to stale tag filtering

frontend/common/utils/utils.tsx

@@ -11,6 +11,7 @@ import {
  Project as ProjectType,
  ProjectFlag,
  SegmentCondition,
+ Tag,
 } from 'common/types/responses'
 import flagsmith from 'flagsmith'
 import { ReactNode } from 'react'
@@ -380,10 +381,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  )
  return !!found
  },
+
  getProjectColour(index: number) {
  return Constants.projectColors[index % (Constants.projectColors.length - 1)]
  },
-
  getSDKEndpoint(_project: ProjectType) {
  const project = _project || ProjectStore.model
 
@@ -490,6 +491,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  getViewIdentitiesPermission() {
  return 'VIEW_IDENTITIES'
  },
+
  isMigrating() {
  const model = ProjectStore.model as null | ProjectType
  if (
@@ -522,7 +524,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  if (typeof x !== 'number') return ''
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  },
-
  openChat() {
  // @ts-ignore
  if (typeof $crisp !== 'undefined') {
@@ -539,6 +540,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  removeElementFromArray(array: any[], index: number) {
  return array.slice(0, index).concat(array.slice(index + 1))
  },
+
  renderWithPermission(permission: boolean, name: string, el: ReactNode) {
  return permission ? (
  el
@@ -554,6 +556,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  }
  return `${value}`
  },
+ tagDisabled: (tag: Tag | undefined) => {
+ const hasStaleFlagsPermission = Utils.getPlansPermission('STALE_FLAGS')
+ return tag?.type === 'STALE' && !hasStaleFlagsPermission
+ },
  validateRule(rule: SegmentCondition) {
  if (!rule) return false
 

frontend/web/components/tables/TableTagFilter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import TableFilter from './TableFilter'
 import Input from 'components/base/forms/Input'
 import Utils from 'common/utils/utils'
@@ -7,7 +7,6 @@ import Tag from 'components/tags/Tag'
 import TableFilterItem from './TableFilterItem'
 import Constants from 'common/constants'
 import { TagStrategy } from 'common/types/responses'
-import { AsyncStorage } from 'polyfill-react-native'
 import TagContent from 'components/tags/TagContent'
 
 type TableFilterType = {
@@ -149,6 +148,10 @@ const TableTagFilter: FC<TableFilterType> = ({
  {filteredTags?.map((tag) => (
  <TableFilterItem
  onClick={() => {
+ const disabled = Utils.tagDisabled(tag)
+ if (disabled) {
+ return
+ }
  if (isLoading) {
  return
  }

frontend/web/components/tags/Tag.tsx

@@ -46,12 +46,18 @@ const Tag: FC<TagType> = ({
  )
  }
 
+ const disabled = Utils.tagDisabled(tag)
+
  if (!hideNames && !!onClick) {
  return (
  <ToggleChip
  color={tagColor}
  active={selected}
- onClick={onClick ? () => onClick(tag as TTag) : null}
+ onClick={() => {
+ if (!disabled) {
+ onClick?.(tag as TTag)
+ }
+ }}
  >
  {!!tag.label && <TagContent tag={tag} />}
  </ToggleChip>
@@ -60,7 +66,11 @@ const Tag: FC<TagType> = ({
 
  return (
  <div
- onClick={() => onClick?.(tag as TTag)}
+ onClick={() => {
+ if (!disabled) {
+ onClick?.(tag as TTag)
+ }
+ }}
  style={{
  backgroundColor: `${color(tagColor).fade(0.92)}`,
  border: `1px solid ${color(tagColor).fade(0.76)}`,

frontend/web/components/tags/TagContent.tsx

@@ -7,6 +7,8 @@ import { alarmOutline, lockClosed } from 'ionicons/icons'
 import Tooltip from 'components/Tooltip'
 import { getTagColor } from './Tag'
 import OrganisationStore from 'common/stores/organisation-store'
+import Utils from 'common/utils/utils'
+import classNames from 'classnames'
 type TagContent = {
  tag: Partial<TTag>
 }
@@ -18,12 +20,17 @@ const getTooltip = (tag: TTag | undefined) => {
  const stale_flags_limit_days = OrganisationStore.getProject(
  tag.project,
  )?.stale_flags_limit_days
+ const disabled = Utils.tagDisabled(tag)
  const truncated = Format.truncateText(tag.label, 12)
  const isTruncated = truncated !== tag.label ? tag.label : null
  let tooltip = null
  switch (tag.type) {
  case 'STALE': {
- tooltip = `A feature is marked as stale if no changes have been made to it in any environment within ${stale_flags_limit_days} days. This is automatically applied and will be re-evaluated if you remove this tag unless you apply a permanent tag to the feature.`
+ tooltip = `${
+ disabled
+ ? 'This feature is available with our <strong>Enterprise</strong> plan. '
+ : ''
+ }A feature is marked as stale if no changes have been made to it in any environment within ${stale_flags_limit_days} days. This is automatically applied and will be re-evaluated if you remove this tag unless you apply a permanent tag to the feature.`
  break
  }
  default:
@@ -43,7 +50,9 @@ const getTooltip = (tag: TTag | undefined) => {
  )}; border: 1px solid ${color(tagColor).fade(0.76)}; color: ${color(
  tagColor,
  ).darken(0.1)};'
- class="chip d-inline-block chip--xs me-1"
+ class="chip d-inline-block chip--xs me-1${
+ disabled ? ' disabled' : ''
+ }"
  >
  ${tag.label}
  </span>
@@ -59,10 +68,17 @@ const TagContent: FC<TagContent> = ({ tag }) => {
  if (!tagLabel) {
  return null
  }
+
+ const disabled = Utils.tagDisabled(tag)
+
  return (
  <Tooltip
  title={
- <span className={'mr-1 flex-row align-items-center'}>
+ <span
+ className={classNames('mr-1 flex-row align-items-center', {
+ 'opacity-50': disabled,
+ })}
+ >
  {tagLabel}
  {tag.type === 'STALE' ? (
  <IonIcon