chore: Create flag migration

frontend/common/featureValuesEqual.ts

@@ -0,0 +1,14 @@
+import { FlagsmithValue } from './types/responses'
+
+export default function featureValuesEqual(
+  actualValue: FlagsmithValue | undefined,
+  flagValue: FlagsmithValue | undefined,
+) {
+  const nullFalseyA =
+    actualValue == null ||
+    actualValue === '' ||
+    typeof actualValue === 'undefined'
+  const nullFalseyB =
+    flagValue == null || flagValue === '' || typeof flagValue === 'undefined'
+  return nullFalseyA && nullFalseyB ? true : actualValue === flagValue
+}

frontend/common/providers/FeatureListProvider.js

@@ -62,7 +62,7 @@ const FeatureListProvider = class extends React.Component {
         multivariate_options: projectFlag.multivariate_options.map((mv) => {
           const matching =
             environmentFlag.multivariate_feature_state_values.find(
-              (v) => v.multivariate_feature_option == mv.id,
+              (v) => v.multivariate_feature_option === mv.id,
             )
           return {
             ...mv,

frontend/common/providers/withSegmentOverrides.js

@@ -27,6 +27,7 @@ export default (WrappedComponent) => {
 
     getOverrides = () => {
       if (this.props.projectFlag) {
+        //todo: migrate to useSegmentFeatureState
         Promise.all([
           data.get(
             `${

frontend/common/services/useProjectFlag.ts

@@ -53,7 +53,10 @@ export const projectFlagService = service
         Req['getProjectFlags']
       >({
         providesTags: (res, _, req) => [
-          { id: req?.project, type: 'ProjectFlag' },
+          {
+            id: `${req?.project}-${req?.environment}-${req?.segment}`,
+            type: 'ProjectFlag',
+          },
         ],
         queryFn: async (args, _, _2, baseQuery) => {
           return await recursivePageGet(

frontend/common/services/useSegmentOverride.ts

@@ -1,6 +1,8 @@
 import { Res } from 'common/types/responses'
 import { Req } from 'common/types/requests'
 import { service } from 'common/service'
+import { projectFlagService } from './useProjectFlag'
+import { getStore } from 'common/store'
 
 export const segmentOverrideService = service
   .enhanceEndpoints({ addTagTypes: ['SegmentOverride'] })
@@ -16,6 +18,12 @@ export const segmentOverrideService = service
           method: 'POST',
           url: `environments/${query.environmentId}/features/${query.featureId}/create-segment-override/`,
         }),
+        transformResponse: (res) => {
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
+          return res
+        },
       }),
       // END OF ENDPOINTS
     }),

frontend/common/stores/feature-list-store.ts

@@ -12,6 +12,7 @@ import {
   updateProjectFlag,
 } from 'common/services/useProjectFlag'
 import OrganisationStore from './organisation-store'
+import { SortOrder } from 'common/types/requests'
 import {
   ChangeRequest,
   Environment,
@@ -170,7 +171,7 @@ const controller = {
         if (onComplete) {
           onComplete(res)
         }
-        if (store.model) {
+        if (store.model?.features) {
           const index = _.findIndex(store.model.features, { id: flag.id })
           store.model.features[index] = controller.parseFlag(flag)
           store.model.lastSaved = new Date().valueOf()
@@ -438,7 +439,7 @@ const controller = {
 
         Promise.all([prom, segmentOverridesRequest])
           .then(([res, segmentRes]) => {
-            if (store.model) {
+            if (store.model?.keyedEnvironmentFeatures) {
               store.model.keyedEnvironmentFeatures[projectFlag.id] = res
               if (segmentRes) {
                 const feature = _.find(
@@ -729,6 +730,12 @@ const controller = {
           if (version.error) {
             throw version.error
           }
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
+          if(!store.model) {
+            return
+          }
           // Fetch and update the latest environment feature state
           return getVersionFeatureState(getStore(), {
             environmentId: ProjectStore.getEnvironmentIdFromKey(environmentId),
@@ -809,7 +816,7 @@ const controller = {
     }
 
     prom
-      .then((res) => {
+      .then(() => {
         if (store.model) {
           store.model.lastSaved = new Date().valueOf()
         }
@@ -977,7 +984,12 @@ const store = Object.assign({}, BaseStore, {
   },
   id: 'features',
   paging: {},
-  sort: { default: true, label: 'Name', sortBy: 'name', sortOrder: 'asc' },
+  sort: {
+    default: true,
+    label: 'Name',
+    sortBy: 'name',
+    sortOrder: SortOrder.ASC,
+  },
 })
 
 store.dispatcherIndex = Dispatcher.register(store, (payload) => {

frontend/common/types/requests.ts

@@ -23,6 +23,7 @@ import {
   StageTrigger,
   StageActionType,
   StageActionBody,
+  TagStrategy,
 } from './responses'
 import { UtmsType } from './utms'
 
@@ -102,7 +103,10 @@ export type RegisterRequest = {
   marketing_consent_given?: boolean
   utm_data?: UtmsType
 }
-
+export enum SortOrder {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
 export interface StageActionRequest {
   action_type: StageActionType | ''
   action_body: StageActionBody
@@ -340,10 +344,21 @@ export type Req = {
     user: string
   }
   getProjectFlags: {
-    project: number
-    environmentId?: string
-    tags?: string[]
+    project: string
+    environment?: number
+    segment?: number
+    search?: string | null
+    releasePipelines?: number[]
+    page?: number
+    tag_strategy?: TagStrategy
+    tags?: string
     is_archived?: boolean
+    value_search?: string | null
+    is_enabled?: boolean | null
+    owners?: number[]
+    group_owners?: number[]
+    sort_field?: string
+    sort_direction?: SortOrder
   }
   getProjectFlag: { project: number; id: number }
   getRolesPermissionUsers: { organisation_id: number; role_id: number }

frontend/common/types/responses.ts

@@ -506,6 +506,8 @@ export type ProjectFlag = {
   created_date: string
   default_enabled: boolean
   description?: string
+  environment_feature_state?: FeatureState
+  segment_feature_state?: FeatureState
   id: number
   initial_value: FlagsmithValue
   is_archived: boolean

frontend/common/utils/utils.tsx

@@ -2,7 +2,6 @@ import AccountStore from 'common/stores/account-store'
 import ProjectStore from 'common/stores/project-store'
 import Project from 'common/project'
 import {
-  AccountModel,
   ContentType,
   FeatureState,
   FeatureStateValue,
@@ -29,7 +28,6 @@ import { selectBuildVersion } from 'common/services/useBuildVersion'
 import { getStore } from 'common/store'
 import { TRACKED_UTMS, UtmsType } from 'common/types/utms'
 import { TimeUnit } from 'components/release-pipelines/constants'
-import getUserDisplayName from './getUserDisplayName'
 
 const semver = require('semver')
 
@@ -244,7 +242,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
 
     const timeParts = waitFor.split(':')
 
-    if (timeParts.length != 3) return
+    if (timeParts.length !== 3) return
 
     const [hours, minutes, seconds] = timeParts
 
@@ -425,6 +423,21 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     const organisationId = match?.params?.organisationId
     return organisationId ? parseInt(organisationId) : null
   },
+  getOverridePermission: (level: 'identity' | 'segment') => {
+    switch (level) {
+      case 'identity':
+        return {
+          permission: Utils.getManageFeaturePermission(false),
+          permissionDescription:
+            Utils.getManageFeaturePermissionDescription(false),
+        }
+      default:
+        return {
+          permission: 'MANAGE_SEGMENT_OVERRIDES',
+          permissionDescription: 'Manage Segment Overrides',
+        }
+    }
+  },
   getPlanName: (plan: string) => {
     if (plan && plan.includes('free')) {
       return planNames.free
@@ -676,7 +689,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   },
 
   sanitiseDiffString: (value: FlagsmithValue) => {
-    if (value === undefined || value == null) {
+    if (value === undefined || value === null) {
       return ''
     }
     return `${value}`

frontend/package.json

@@ -155,6 +155,7 @@
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
     "@types/dompurify": "^3.0.2",
+    "@types/rc-switch": "^1.9.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^2.0.3",

frontend/web/components/AuditLog.tsx

@@ -88,7 +88,6 @@ const AuditLog: FC<AuditLogType> = (props) => {
     id,
     log,
     project,
-    related_feature_id,
     related_object_type,
     related_object_uuid,
   }: AuditLogItem) => {

frontend/web/components/Breadcrumb.tsx

@@ -1,31 +1,39 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 type BreadcrumbType = {
   items: { title: string; url: string }[]
-  currentPage: string
+  currentPage: ReactNode
+  isCurrentPageMuted?: boolean
 }
 
-const Breadcrumb: FC<BreadcrumbType> = ({ currentPage, items }) => {
+const Breadcrumb: FC<BreadcrumbType> = ({
+  currentPage,
+  isCurrentPageMuted = true,
+  items,
+}) => {
   return (
-    <nav aria-label='breadcrumb'>
-      <ol className='breadcrumb my-2 py-1'>
-        {items?.map((item) => (
-          <li key={item.url} className='breadcrumb-item h6 fs-lg lh-sm'>
-            <Link className='text-primary' to={item.url}>
-              {item.title}
-            </Link>
-          </li>
-        ))}
-        <li
-          className='breadcrumb-item active h6 text-muted lh-sm '
+    <div className='d-flex align-items-center my-2 py-1'>
+      {items?.map((item) => (
+        <>
+          <Link className='text-primary h6 mb-0' to={item.url}>
+            {item.title}
+          </Link>
+          <div className='text-muted mx-2 h6 mb-0'>/</div>
+        </>
+      ))}
+      {isCurrentPageMuted ? (
+        <div
+          className='active h6 text-muted lh-sm '
           aria-current='page'
           style={{ opacity: 0.6 }}
         >
           {currentPage}
-        </li>
-      </ol>
-    </nav>
+        </div>
+      ) : (
+        currentPage
+      )}
+    </div>
   )
 }
 

frontend/web/components/EnvironmentSelect.tsx

@@ -1,12 +1,13 @@
 import React, { FC, useMemo } from 'react'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { Props } from 'react-select/lib/Select'
+import { Environment } from 'common/types/responses'
 
 export type EnvironmentSelectType = Partial<Omit<Props, 'value'>> & {
   projectId: number
   value?: string
   label?: string
-  onChange: (value: string) => void
+  onChange: (value: string, environment: Environment | null) => void
   showAll?: boolean
   readOnly?: boolean
   idField?: 'id' | 'api_key'
@@ -30,6 +31,7 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
   const environments = useMemo(() => {
     return (data?.results || [])
       ?.map((v) => ({
+        environment: v,
         label: v.name,
         value: `${v[idField]}`,
       }))
@@ -66,12 +68,14 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
               }
         }
         options={(showAll
-          ? [{ label: 'All Environments', value: '' }]
+          ? [{ environment: null, label: 'All Environments', value: '' }]
           : []
         ).concat(environments)}
-        onChange={(value: { value: string; label: string }) =>
-          onChange(value?.value || '')
-        }
+        onChange={(value: {
+          value: string
+          label: string
+          environment: Environment
+        }) => onChange(value?.value || '', value?.environment)}
       />
     </div>
   )