feat: restrict versioning by days

frontend/common/services/useFeatureVersion.ts

@@ -19,6 +19,7 @@ import {
 } from 'components/diff/diff-utils'
 import { getSegments } from './useSegment'
 import { getFeatureStates } from './useFeatureState'
+import moment from 'moment'
 
 const transformFeatureStates = (featureStates: TypedFeatureState[]) =>
   featureStates?.map((v) => ({
@@ -322,6 +323,17 @@ export const {
   // END OF EXPORTS
 } = featureVersionService
 
+export function isVersionOverLimit(
+  versionLimitDays: number | null | undefined,
+  date: string | undefined,
+) {
+  if (!versionLimitDays) {
+    return false
+  }
+  const days = moment().diff(moment(date), 'days') + 1
+  return !!versionLimitDays && days > versionLimitDays
+}
+
 /* Usage examples:
 const { data, isLoading } = useGetFeatureVersionQuery({ id: 2 }, {}) //get hook
 const [createFeatureVersion, { isLoading, data, isSuccess }] = useCreateFeatureVersionMutation() //create hook

frontend/common/services/useSubscriptionMetadata.ts

@@ -7,7 +7,7 @@ export const getSubscriptionMetadataService = service
   .injectEndpoints({
     endpoints: (builder) => ({
       getSubscriptionMetadata: builder.query<
-        Res['getSubscriptionMetadata'],
+        Res['subscriptionMetadata'],
         Req['getSubscriptionMetadata']
       >({
         providesTags: (res) => [

frontend/common/stores/organisation-store.js

@@ -2,6 +2,7 @@ import Constants from 'common/constants'
 import { projectService } from 'common/services/useProject'
 import { getStore } from 'common/store'
 import sortBy from 'lodash/sortBy'
+import { getSubscriptionMetadata } from 'common/services/useSubscriptionMetadata'
 
 const Dispatcher = require('../dispatcher/dispatcher')
 const BaseStore = require('./base/_store')
@@ -139,11 +140,7 @@ const controller = {
           AccountStore.getOrganisationRole(id) === 'ADMIN'
             ? [
                 data.get(`${Project.api}organisations/${id}/invites/`),
-                data
-                  .get(
-                    `${Project.api}organisations/${id}/get-subscription-metadata/`,
-                  )
-                  .catch(() => null),
+                getSubscriptionMetadata(getStore(), { id }),
               ]
             : [],
         ),

frontend/common/types/responses.ts

@@ -458,6 +458,7 @@ export type InviteLink = {
 
 export type SubscriptionMeta = {
   max_seats: number | null
+  feature_history_visibility_days: number | null
   max_api_calls: number | null
   max_projects: number | null
   payment_source: string | null
@@ -671,7 +672,7 @@ export type Res = {
   rolesPermissionUsers: PagedResponse<RolePermissionUser>
   createRolePermissionGroup: RolePermissionGroup
   rolePermissionGroup: PagedResponse<RolePermissionGroup>
-  getSubscriptionMetadata: { id: string; max_api_calls: number }
+  subscriptionMetadata: SubscriptionMeta
   environment: Environment
   metadataModelFieldList: PagedResponse<MetadataModelField>
   metadataModelField: MetadataModelField

frontend/common/utils/utils.tsx

@@ -304,6 +304,9 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   },
   getNextPlan: (skipFree?: boolean) => {
     const currentPlan = Utils.getPlanName(AccountStore.getActiveOrgPlan())
+    if (currentPlan !== planNames.enterprise && !Utils.isSaas()) {
+      return planNames.enterprise
+    }
     switch (currentPlan) {
       case planNames.free: {
         return skipFree ? planNames.startup : planNames.scaleUp

frontend/web/components/AuditLog.tsx

@@ -11,6 +11,10 @@ import PanelSearch from './PanelSearch'
 import JSONReference from './JSONReference'
 import moment from 'moment'
 import PlanBasedBanner from './PlanBasedAccess'
+import { useGetSubscriptionMetadataQuery } from 'common/services/useSubscriptionMetadata'
+import AccountStore from 'common/stores/account-store'
+import { isVersionOverLimit } from 'common/services/useFeatureVersion'
+import Tooltip from './Tooltip'
 
 type AuditLogType = {
   environmentId: string
@@ -36,6 +40,9 @@ const AuditLog: FC<AuditLogType> = (props) => {
       setPage(1)
     },
   )
+  const { data: subscriptionMeta } = useGetSubscriptionMetadataQuery({
+    id: AccountStore.getOrganisation()?.id,
+  })
   const [environments, setEnvironments] = useState(props.environmentId)
 
   useEffect(() => {
@@ -96,17 +103,47 @@ const AuditLog: FC<AuditLogType> = (props) => {
     })
     const colour = index === -1 ? 0 : index
     let link: ReactNode = null
-    if (
-      related_object_uuid &&
-      related_object_type === 'EF_VERSION' &&
-      environment
-    ) {
+    const date = moment(created_date)
+    const isVersionEvent =
+      related_object_uuid && related_object_type === 'EF_VERSION' && environment
+    const versionLimitDays = subscriptionMeta?.feature_history_visibility_days
+    const isOverLimit = isVersionEvent
+      ? isVersionOverLimit(versionLimitDays, created_date)
+      : false
+    const VersionButton = (
+      <Button disabled={isOverLimit} theme='text'>
+        View version
+      </Button>
+    )
+    if (isVersionEvent) {
       link = (
-        <Link
-          to={`/project/${project.id}/environment/${environment.api_key}/history/${related_object_uuid}/`}
+        <Tooltip
+          title={
+            <div className='d-flex gap-2'>
+              {isOverLimit ? (
+                VersionButton
+              ) : (
+                <Link
+                  to={`/project/${project.id}/environment/${environment.api_key}/history/${related_object_uuid}/`}
+                >
+                  {VersionButton}
+                </Link>
+              )}
+              <PlanBasedBanner
+                force={isOverLimit}
+                feature={'VERSIONING'}
+                theme={'badge'}
+              />
+            </div>
+          }
         >
-          <Button theme='text'>View version</Button>
-        </Link>
+          {isOverLimit
+            ? `<div>
+              Unlock your feature's entire history.<br/>Currently limited to${' '}
+              <strong>${versionLimitDays} days</strong>.
+            </div>`
+            : ''}
+        </Tooltip>
       )
     }
     const inner = (
@@ -115,7 +152,7 @@ const AuditLog: FC<AuditLogType> = (props) => {
           className='table-column px-3 fs-small ln-sm'
           style={{ width: widths[0] }}
         >
-          {moment(created_date).format('Do MMM YYYY HH:mma')}
+          {date.format('Do MMM YYYY HH:mma')}
         </div>
         <div
           className='table-column fs-small ln-sm'

frontend/web/components/FeatureHistory.tsx

@@ -1,17 +1,18 @@
-import React, { FC, useState } from 'react'
-import ConfigProvider from 'common/providers/ConfigProvider'
-import { useGetFeatureVersionsQuery } from 'common/services/useFeatureVersion'
-import { useGetUsersQuery } from 'common/services/useUser'
-import AccountStore from 'common/stores/account-store'
-import { FeatureVersion as TFeatureVersion } from 'common/types/responses'
-import Button from './base/forms/Button'
-import FeatureVersion from './FeatureVersion'
-import InlineModal from './InlineModal'
-import TableFilterItem from './tables/TableFilterItem'
-import moment from 'moment'
-import DateList from './DateList'
-import PlanBasedBanner from './PlanBasedAccess'
-import classNames from 'classnames'
+import React, { FC, useState } from 'react';
+import ConfigProvider from 'common/providers/ConfigProvider';
+import { useGetFeatureVersionsQuery } from 'common/services/useFeatureVersion';
+import { useGetUsersQuery } from 'common/services/useUser';
+import AccountStore from 'common/stores/account-store';
+import { FeatureVersion as TFeatureVersion } from 'common/types/responses';
+import Button from './base/forms/Button';
+import FeatureVersion from './FeatureVersion';
+import InlineModal from './InlineModal';
+import TableFilterItem from './tables/TableFilterItem';
+import moment from 'moment';
+import DateList from './DateList';
+import classNames from 'classnames';
+import PlanBasedBanner from 'components/PlanBasedAccess';
+import { useGetSubscriptionMetadataQuery } from 'common/services/useSubscriptionMetadata';
 
 const widths = [250, 150]
 type FeatureHistoryPageType = {
@@ -28,6 +29,12 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
   projectId,
 }) => {
   const [open, setOpen] = useState(false)
+    const { data: subscriptionMeta } = useGetSubscriptionMetadataQuery({
+        id: AccountStore.getOrganisation()?.id,
+    })
+    const versionLimitDays = subscriptionMeta?.feature_history_visibility_days
+
+  // @ts-ignore
   const { data: users } = useGetUsersQuery({
     organisationId: AccountStore.getOrganisation().id,
   })
@@ -45,7 +52,6 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
   const live = data?.results?.[0]
   const [compareToLive, setCompareToLive] = useState(false)
   const [diff, setDiff] = useState<null | string>(null)
-  const versionLimit = 3
   return (
     <div>
       <h5>Change History</h5>
@@ -54,35 +60,39 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
         segment overrides.
       </div>
       <div className='mt-4'>
-        {/*{!!versionLimit && (*/}
-        {/*  <PlanBasedBanner*/}
-        {/*    className='mb-4'*/}
-        {/*    force*/}
-        {/*    feature={'VERSIONING'}*/}
-        {/*    theme={'page'}*/}
-        {/*  />*/}
-        {/*)}*/}
+          {!!versionLimitDays && (
+              <PlanBasedBanner
+                  className='mb-4'
+                  force
+                  feature={'VERSIONING'}
+                  title={
+                      <div>
+                          Unlock your feature's entire history. Currently limited to{' '}
+                          <strong>{versionLimitDays} days</strong>.
+                      </div>
+                  }
+                  theme={'page'}
+              />
+          )}
         <DateList<TFeatureVersion>
           items={data}
           isLoading={isLoading}
           nextPage={() => setPage(page + 1)}
           prevPage={() => setPage(page + 1)}
           goToPage={setPage}
+          dateProperty={'live_from'}
           renderRow={(v: TFeatureVersion, i: number) => {
-            const isOverLimit = false
             const user = users?.find((user) => v.published_by === user.id)
 
             return (
-              <Row
-                className={classNames('list-item py-2 mh-auto', {
-                  'blur no-pointer': isOverLimit,
-                })}
-              >
-                <div
-                  className={classNames('flex-fill', {
-                    'overflow-hidden': !open,
-                  })}
+                <Row
+                    className={'list-item py-2 mh-auto'}
                 >
+                    <div
+                        className={classNames('flex-fill', {
+                            'overflow-hidden': !open,
+                        })}
+                    >
                   <div className='flex-row flex-fill'>
                     <div
                       className='table-column flex-fill'

frontend/web/components/PlanBasedAccess.tsx

@@ -12,7 +12,7 @@ type PlanBasedBannerType = {
   feature: keyof typeof featureDescriptions
   theme: 'page' | 'badge' | 'description'
   children?: ReactNode
-  withoutTooltip?: boolean
+  title?: ReactNode
   force?: boolean
 }
 
@@ -89,14 +89,8 @@ export const featureDescriptions: Record<PaidFeature, any> = {
   },
 }
 
-const PlanBasedBanner: FC<PlanBasedBannerType> = ({
-  children,
-  className,
-  feature,
-  force,
-  theme,
-  withoutTooltip,
-}) => {
+const PlanBasedBanner: FC<PlanBasedBannerType> = ({ children, ...props }) => {
+  const { className, feature, force, theme, title } = props
   const trackFeature = () =>
     API.trackEvent(Constants.events.VIEW_LOCKED_FEATURE(feature))
   const hasPlan = !force && Utils.getPlansPermission(feature)
@@ -182,7 +176,7 @@ const PlanBasedBanner: FC<PlanBasedBannerType> = ({
         )}
       >
         <div className='d-flex gap-2 justify-content-between font-weight-medium align-items-center'>
-          <div>{featureDescriptions[feature].description}</div>
+          <div>{title || featureDescriptions[feature].description}</div>
           {ctas}
         </div>
       </div>
@@ -195,19 +189,9 @@ const PlanBasedBanner: FC<PlanBasedBannerType> = ({
     <div className={className}>
       <h4 className='d-flex align-items-center gap-2'>
         <span>{featureDescriptions[feature].title}</span>
-        <PlanBasedBanner
-          force={force}
-          withoutTooltip
-          feature={feature}
-          theme={'badge'}
-        />
+        <PlanBasedBanner {...props} theme={'badge'} />
       </h4>
-      <PlanBasedBanner
-        force={force}
-        withoutTooltip
-        feature={feature}
-        theme={'description'}
-      />
+      <PlanBasedBanner {...props} theme={'description'} />
     </div>
   )
 }

frontend/web/styles/project/_buttons.scss

@@ -98,7 +98,7 @@ button.btn {
     }
   }
   &-tertiary {
-    color: $primary900;
+    color: $primary900 !important;
     background-color: $btn-tertiary-bg;
     box-shadow: 0 10px 20px rgba(247, 213, 110, .2);
     &:hover,