refactor: migrate project settings to TS and break into smaller components

Author: talissoncosta

frontend/common/services/useProject.ts

@@ -7,19 +7,52 @@ 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' },
+        ],
+        query: ({ body, id }: Req['updateProject']) => ({
+          body,
+          method: 'PUT',
+          url: `projects/${id}/`,
+        }),
+      }),
       // END OF ENDPOINTS
     }),
   })
@@ -47,8 +80,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

@@ -10,11 +10,11 @@ import {
   Segment,
   Tag,
   ProjectFlag,
+  Project,
   Environment,
   UserGroup,
   AttributeName,
   Identity,
-  ChangeRequest,
   ProjectChangeRequest,
   Role,
   RolePermission,
@@ -580,6 +580,10 @@ export type Req = {
     id: string
   }
   getProject: { id: string }
+  updateProject: { id: string; body: Partial<Project> }
+  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'

frontend/global.d.ts

@@ -70,6 +70,17 @@ declare global {
   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: {