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/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/package.json

@@ -184,6 +184,6 @@
     "typescript": "4.6.4"
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": "eslint"
+    "*.{js,ts,tsx}": "eslint --fix"
   }
 }