feat: freeze flag editing when flag is in a running experiment

frontend/common/hooks/__tests__/useFeatureExperimentFreeze.test.ts

@@ -0,0 +1,125 @@
+jest.mock('common/services/useExperiment', () => ({
+  useGetExperimentsQuery: jest.fn(),
+}))
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useMemo: (fn: () => any) => fn(),
+}))
+
+import { useFeatureExperimentFreeze } from 'common/hooks/useFeatureExperimentFreeze'
+import { useGetExperimentsQuery } from 'common/services/useExperiment'
+import { Experiment } from 'common/types/responses'
+
+const mockUseGetExperimentsQuery =
+  useGetExperimentsQuery as jest.MockedFunction<typeof useGetExperimentsQuery>
+
+const makeExperiment = (
+  overrides: Partial<Experiment> & { featureId: number },
+): Experiment => ({
+  created_at: '',
+  ended_at: null,
+  feature: {
+    id: overrides.featureId,
+    initial_value: null,
+    multivariate_options: [],
+    name: 'test-flag',
+    type: 'MULTIVARIATE',
+  },
+  hypothesis: '',
+  id: 1,
+  metrics: [],
+  name: 'Test Experiment',
+  started_at: null,
+  status: overrides.status ?? 'running',
+  updated_at: '',
+  ...overrides,
+})
+
+const empty = { data: { results: [] }, isLoading: false } as any
+const loading = { data: undefined, isLoading: true } as any
+
+const withResults = (experiments: Experiment[]) =>
+  ({ data: { results: experiments }, isLoading: false } as any)
+
+describe('useFeatureExperimentFreeze', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('returns isFrozen true when a running experiment exists for the feature', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(
+      withResults([makeExperiment({ featureId: 42, status: 'running' })]),
+    )
+
+    const result = useFeatureExperimentFreeze(42, 'env-123')
+
+    expect(result.isFrozen).toBe(true)
+    expect(result.experiment?.id).toBe(1)
+    expect(result.isLoading).toBe(false)
+  })
+
+  it('returns isFrozen false when no experiments exist', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(empty)
+
+    const result = useFeatureExperimentFreeze(42, 'env-123')
+
+    expect(result.isFrozen).toBe(false)
+    expect(result.experiment).toBeNull()
+  })
+
+  it('returns isFrozen false when experiment belongs to a different feature', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(
+      withResults([makeExperiment({ featureId: 99, status: 'running' })]),
+    )
+
+    const result = useFeatureExperimentFreeze(42, 'env-123')
+
+    expect(result.isFrozen).toBe(false)
+  })
+
+  it('returns isLoading true while the query is loading', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(loading)
+
+    const result = useFeatureExperimentFreeze(42, 'env-123')
+
+    expect(result.isFrozen).toBe(false)
+    expect(result.isLoading).toBe(true)
+  })
+
+  it('skips query when featureId is undefined', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(empty)
+
+    const result = useFeatureExperimentFreeze(undefined, 'env-123')
+
+    expect(result.isFrozen).toBe(false)
+    expect(mockUseGetExperimentsQuery).toHaveBeenCalledWith(
+      { environmentId: 'env-123', status: 'running' },
+      { skip: true },
+    )
+  })
+
+  it('skips query when environmentId is empty', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(empty)
+
+    const result = useFeatureExperimentFreeze(42, '')
+
+    expect(result.isFrozen).toBe(false)
+    expect(mockUseGetExperimentsQuery).toHaveBeenCalledWith(
+      { environmentId: '', status: 'running' },
+      { skip: true },
+    )
+  })
+
+  it('queries only running experiments', () => {
+    mockUseGetExperimentsQuery.mockReturnValue(empty)
+
+    useFeatureExperimentFreeze(42, 'env-123')
+
+    expect(mockUseGetExperimentsQuery).toHaveBeenCalledTimes(1)
+    expect(mockUseGetExperimentsQuery).toHaveBeenCalledWith(
+      { environmentId: 'env-123', status: 'running' },
+      { skip: false },
+    )
+  })
+})

frontend/common/hooks/useFeatureExperimentFreeze.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useGetExperimentsQuery } from 'common/services/useExperiment'
+import type { Experiment } from 'common/types/responses'
+
+export type FeatureExperimentFreeze = {
+  isFrozen: boolean
+  experiment: Experiment | null
+  isLoading: boolean
+}
+
+export function useFeatureExperimentFreeze(
+  featureId: number | undefined,
+  environmentId: string,
+): FeatureExperimentFreeze {
+  const skip = !featureId || !environmentId
+  const { data, isLoading } = useGetExperimentsQuery(
+    { environmentId, status: 'running' },
+    { skip },
+  )
+
+  const experiment = useMemo(() => {
+    if (!featureId || !data?.results) return null
+    return data.results.find((e) => e.feature?.id === featureId) ?? null
+  }, [data?.results, featureId])
+
+  return {
+    experiment,
+    isFrozen: experiment !== null,
+    isLoading,
+  }
+}

frontend/web/components/modals/create-feature/components/ExperimentFreezeNotice/ExperimentFreezeNotice.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import InfoMessage from 'components/InfoMessage'
+
+type FreezeExperiment = {
+  id: number
+  name: string
+  status: string
+}
+
+type ExperimentFreezeNoticeProps = {
+  experiment: FreezeExperiment
+  projectId: number | string
+  environmentId: string
+}
+
+const ExperimentFreezeNotice: FC<ExperimentFreezeNoticeProps> = ({
+  environmentId,
+  experiment,
+  projectId,
+}) => {
+  const experimentUrl = `/project/${projectId}/environment/${environmentId}/experiments/${experiment.id}`
+
+  return (
+    <InfoMessage>
+      This flag is part of the experiment{' '}
+      <a href={experimentUrl}>
+        <strong>{experiment.name}</strong>
+      </a>{' '}
+      which is currently {experiment.status}. Editing is restricted to prevent
+      skewing experiment results.
+    </InfoMessage>
+  )
+}
+
+export default ExperimentFreezeNotice

frontend/web/components/modals/create-feature/components/ExperimentFreezeNotice/index.ts

@@ -0,0 +1 @@
+export { default } from './ExperimentFreezeNotice'

frontend/web/components/modals/create-feature/index.tsx

@@ -11,6 +11,7 @@ import moment from 'moment'
 import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
 import { useHasGithubIntegration } from 'common/hooks/useHasGithubIntegration'
 import { useHasGitLabIntegration } from 'common/hooks/useHasGitLabIntegration'
+import { useFeatureExperimentFreeze } from 'common/hooks/useFeatureExperimentFreeze'
 import FeatureListStore from 'common/stores/feature-list-store'
 import IdentityProvider from 'common/providers/IdentityProvider'
 import FeatureListProvider from 'common/providers/FeatureListProvider'
@@ -109,6 +110,11 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
   } = props
   const flagId = props.environmentFlag?.id
 
+  const freeze = useFeatureExperimentFreeze(
+    props.projectFlag?.id,
+    environmentId,
+  )
+
   const [projectFlag, setProjectFlag] = useState<any>(() =>
     props.projectFlag
       ? cloneDeep(props.projectFlag)
@@ -655,6 +661,7 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                       error={error}
                       projectId={projectId}
                       noPermissions={!!noPermissions}
+                      freeze={freeze}
                       featureState={environmentFlag}
                       projectFlag={projectFlag}
                       environmentFlag={props.environmentFlag}
@@ -692,6 +699,7 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                         <SegmentOverridesTab
                           projectId={projectId}
                           environmentId={environmentId}
+                          freeze={freeze}
                           projectFlag={projectFlag}
                           segmentOverrides={segmentOverrides}
                           updateSegments={updateSegments}
@@ -803,6 +811,8 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                       <FeatureSettings
                         identity={identity}
                         projectId={projectId}
+                        environmentId={environmentId}
+                        freeze={freeze}
                         projectFlag={projectFlag}
                         isSaving={isSaving}
                         invalid={invalid}

frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx

@@ -2,6 +2,8 @@ import React, { FC, useEffect, useState } from 'react'
 import { ProjectFlag } from 'common/types/responses'
 import Constants from 'common/constants'
 import InfoMessage from 'components/InfoMessage'
+import { FeatureExperimentFreeze } from 'common/hooks/useFeatureExperimentFreeze'
+import ExperimentFreezeNotice from 'components/modals/create-feature/components/ExperimentFreezeNotice'
 import InputGroup from 'components/base/forms/InputGroup'
 import AddEditTags from 'components/tags/AddEditTags'
 import AddMetadataToEntity from 'components/metadata/AddMetadataToEntity'
@@ -34,6 +36,8 @@ import { getSupportedContentType } from 'common/services/useSupportedContentType
 type FeatureSettingsTabProps = {
   identity?: string
   projectId: number | string
+  environmentId?: string
+  freeze?: FeatureExperimentFreeze
   projectFlag: ProjectFlag | null
   isSaving?: boolean
   invalid?: boolean
@@ -48,6 +52,8 @@ type FeatureSettingsTabProps = {
 }
 
 const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
+  environmentId,
+  freeze,
   groupOwnerIds,
   hasMetadataRequired,
   identity,
@@ -121,6 +127,13 @@ const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
 
   return (
     <div className={`${identity ? 'mx-3' : ''}`}>
+      {freeze?.isFrozen && freeze.experiment && environmentId && (
+        <ExperimentFreezeNotice
+          experiment={freeze.experiment}
+          projectId={projectId}
+          environmentId={environmentId}
+        />
+      )}
       {!identity && projectFlag?.tags && (
         <FormGroup className='mb-3 setting'>
           <InputGroup
@@ -175,10 +188,7 @@ const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
                 })
                   .unwrap()
                   .catch((e) =>
-                    toast(
-                      e?.data?.[0] || 'Failed to remove owner.',
-                      'danger',
-                    ),
+                    toast(e?.data?.[0] || 'Failed to remove owner.', 'danger'),
                   )
               }
             />
@@ -282,6 +292,7 @@ const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
               onChange={(is_server_key_only) =>
                 onChange({ ...projectFlag, is_server_key_only })
               }
+              disabled={!!freeze?.isFrozen || !!freeze?.isLoading}
               className='ml-0'
             />
             <Tooltip
@@ -305,6 +316,7 @@ const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
               onChange={(is_archived) =>
                 onChange({ ...projectFlag, is_archived })
               }
+              disabled={!!freeze?.isFrozen || !!freeze?.isLoading}
               className='ml-0'
             />
             <Tooltip