refactor: Modernize ProjectSettingsPage

frontend/common/services/useProject.ts

@@ -7,19 +7,71 @@ export const projectService = service
   .enhanceEndpoints({ addTagTypes: ['Project'] })
   .injectEndpoints({
     endpoints: (builder) => ({
+      deleteProject: builder.mutation<void, Req['deleteProject']>({
+        invalidatesTags: [{ id: 'LIST', type: 'Project' }],
+        query: ({ id }: Req['deleteProject']) => ({
+          method: 'DELETE',
+          url: `projects/${id}/`,
+        }),
+      }),
       getProject: builder.query<Res['project'], Req['getProject']>({
         providesTags: (res) => [{ id: res?.id, type: 'Project' }],
         query: (query: Req['getProject']) => ({
           url: `projects/${query.id}/`,
         }),
       }),
+      getProjectPermissions: builder.query<
+        Res['userPermissions'],
+        Req['getProjectPermissions']
+      >({
+        query: ({ projectId }: Req['getProjectPermissions']) => ({
+          url: `projects/${projectId}/user-permissions/`,
+        }),
+      }),
       getProjects: builder.query<Res['projects'], Req['getProjects']>({
         providesTags: [{ id: 'LIST', type: 'Project' }],
         query: (data) => ({
           url: `projects/?organisation=${data.organisationId}`,
         }),
         transformResponse: (res) => sortBy(res, (v) => v.name.toLowerCase()),
       }),
+      migrateProject: builder.mutation<void, Req['migrateProject']>({
+        invalidatesTags: (res, error, { id }) => [{ id, type: 'Project' }],
+        query: ({ id }: Req['migrateProject']) => ({
+          method: 'POST',
+          url: `projects/${id}/migrate-to-edge/`,
+        }),
+      }),
+      updateProject: builder.mutation<Res['project'], Req['updateProject']>({
+        invalidatesTags: (res) => [
+          { id: res?.id, type: 'Project' },
+          { id: 'LIST', type: 'Project' },
+        ],
+        async onQueryStarted({ body, id }, { dispatch, queryFulfilled }) {
+          // Optimistically update the cache before server responds
+          const patchResult = dispatch(
+            projectService.util.updateQueryData(
+              'getProject',
+              { id },
+              (draft) => {
+                Object.assign(draft, body)
+              },
+            ),
+          )
+
+          try {
+            await queryFulfilled
+          } catch {
+            // Automatically rollback on error
+            patchResult.undo()
+          }
+        },
+        query: ({ body, id }: Req['updateProject']) => ({
+          body,
+          method: 'PUT',
+          url: `projects/${id}/`,
+        }),
+      }),
       // END OF ENDPOINTS
     }),
   })
@@ -47,8 +99,12 @@ export async function getProject(
 // END OF FUNCTION_EXPORTS
 
 export const {
+  useDeleteProjectMutation,
+  useGetProjectPermissionsQuery,
   useGetProjectQuery,
   useGetProjectsQuery,
+  useMigrateProjectMutation,
+  useUpdateProjectMutation,
   // END OF EXPORTS
 } = projectService
 

frontend/common/types/requests.ts

@@ -14,7 +14,6 @@ import {
   UserGroup,
   AttributeName,
   Identity,
-  ChangeRequest,
   ProjectChangeRequest,
   Role,
   RolePermission,
@@ -27,6 +26,17 @@ import {
 } from './responses'
 import { UtmsType } from './utms'
 
+export type UpdateProjectBody = {
+  name: string
+  hide_disabled_flags?: boolean
+  prevent_flag_defaults?: boolean
+  enable_realtime_updates?: boolean
+  minimum_change_request_approvals?: number | null
+  stale_flags_limit_days?: number | null
+  only_allow_lower_case_feature_names?: boolean
+  feature_name_regex?: string | null
+}
+
 export type PagedRequest<T> = T & {
   page?: number
   page_size?: number
@@ -580,6 +590,10 @@ export type Req = {
     id: string
   }
   getProject: { id: string }
+  updateProject: { id: string; body: UpdateProjectBody }
+  deleteProject: { id: string }
+  migrateProject: { id: string }
+  getProjectPermissions: { projectId: string }
   createGroup: {
     orgId: string
     data: Omit<UserGroup, 'id' | 'users'>

frontend/common/types/responses.ts

@@ -136,6 +136,8 @@ export type Project = {
   total_features?: number
   stale_flags_limit_days?: number
   total_segments?: number
+  only_allow_lower_case_feature_names?: boolean
+  feature_name_regex?: string | null
   environments: Environment[]
 }
 export type ImportStrategy = 'SKIP' | 'OVERWRITE_DESTRUCTIVE'
@@ -1104,7 +1106,7 @@ export type Res = {
   }
   profile: User
   onboarding: {}
-  userPermissions: UserPermissions
+  userPermissions: UserPermission[]
   releasePipelines: PagedResponse<ReleasePipeline>
   releasePipeline: SingleReleasePipeline
   pipelineStages: PagedResponse<PipelineStage>

frontend/e2e/tests/project-test.ts

@@ -1,15 +1,21 @@
 import {
+  assertInputValue,
   assertTextContent,
   byId,
   click,
+  getFlagsmith,
   log,
   login,
   setText,
+  waitForElementNotExist,
   waitForElementVisible,
 } from '../helpers.cafe';
 import { E2E_USER, PASSWORD } from '../config'
 
 export default async function () {
+  const flagsmith = await getFlagsmith()
+  const hasSegmentChangeRequests = flagsmith.hasFeature('segment_change_requests')
+
   log('Login')
   await login(E2E_USER, PASSWORD)
   await click('#project-select-0')
@@ -20,4 +26,43 @@ export default async function () {
   await click('#save-proj-btn')
   await assertTextContent(`#project-link`, 'Test Project')
 
+  if (hasSegmentChangeRequests) {
+    log('Test Change Requests Approvals Setting')
+
+    log('Test 1: Enable change requests (auto-save on toggle)')
+    await click('[data-test="js-change-request-approvals"]')
+    await waitForElementVisible('[name="env-name"]')
+    log('Verify auto-save persisted after navigation')
+    await click('#features-link')
+    await click('#project-settings-link')
+    await waitForElementVisible('[name="env-name"]')
+
+    log('Test 2: Change minimum approvals to 3 (manual save)')
+    await setText('[name="env-name"]', '3')
+    await click('#save-env-btn')
+    log('Verify value 3 persisted after navigation')
+    await click('#features-link')
+    await click('#project-settings-link')
+    await waitForElementVisible('[name="env-name"]')
+    await assertInputValue('[name="env-name"]', '3')
+
+    log('Test 3: Disable change requests (auto-save on toggle)')
+    await click('[data-test="js-change-request-approvals"]')
+    log('Verify disabled state persisted after navigation')
+    await click('#features-link')
+    await click('#project-settings-link')
+    await waitForElementNotExist('[name="env-name"]')
+
+    log('Test 4: Re-enable and change to 5 (manual save)')
+    await click('[data-test="js-change-request-approvals"]')
+    await waitForElementVisible('[name="env-name"]')
+    await setText('[name="env-name"]', '5')
+    await click('#save-env-btn')
+    log('Verify value 5 persisted after navigation')
+    await click('#features-link')
+    await click('#project-settings-link')
+    await waitForElementVisible('[name="env-name"]')
+    await assertInputValue('[name="env-name"]', '5')
+  }
+
 }

frontend/global.d.ts

@@ -65,11 +65,24 @@ declare global {
   const Select: typeof _Select
   const Column: typeof Component
   const Loader: typeof Component
+  const Input: typeof Component
+  const Button: typeof Component
   const E2E: boolean
   const closeModal: () => void
   const closeModal2: () => void
   const toast: (message: string) => void
   const Tooltip: FC<TooltipProps>
+  const API: {
+    trackPage: (title: string) => void
+    trackEvent: (data: {
+      category: string
+      event: string
+      label?: string
+      extra?: Record<string, any>
+    }) => void
+    trackTraits: (traits: Record<string, any>) => void
+    [key: string]: any
+  }
   interface Window {
     $crisp: Crisp
     engagement: {

frontend/web/components/ChangeRequestsSetting.tsx

@@ -11,9 +11,11 @@ type ChangeRequestsSettingType = {
   onChange: (value: number | null) => void
   isLoading: boolean
   feature: '4_EYES' | '4_EYES_PROJECT'
+  'data-test'?: string
 }
 
 const ChangeRequestsSetting: FC<ChangeRequestsSettingType> = ({
+  'data-test': dataTest,
   feature,
   isLoading,
   onChange,
@@ -26,6 +28,7 @@ const ChangeRequestsSetting: FC<ChangeRequestsSettingType> = ({
   return (
     <FormGroup className='mt-4 col-md-8'>
       <Setting
+        data-test={dataTest}
         feature={feature}
         checked={has4EyesPermission && Utils.changeRequestsEnabled(value)}
         onChange={(v) => onToggle(v ? 0 : null)}