fix: address PR review comments - type safety and code organization

Author: talissoncosta

frontend/common/types/requests.ts

@@ -10,7 +10,6 @@ import {
   Segment,
   Tag,
   ProjectFlag,
-  Project,
   Environment,
   UserGroup,
   AttributeName,
@@ -29,18 +28,14 @@ import { UtmsType } from './utms'
 
 export type UpdateProjectBody = {
   name: string
-} & Partial<
-  Pick<
-    Project,
-    | 'hide_disabled_flags'
-    | 'prevent_flag_defaults'
-    | 'enable_realtime_updates'
-    | 'minimum_change_request_approvals'
-    | 'stale_flags_limit_days'
-    | 'only_allow_lower_case_feature_names'
-    | 'feature_name_regex'
-  >
->
+  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

frontend/global.d.ts

@@ -65,6 +65,8 @@ 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

frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 import PageTitle from 'components/PageTitle'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
@@ -16,10 +16,19 @@ import { PermissionsTab } from './tabs/PermissionsTab'
 import { CustomFieldsTab } from './tabs/CustomFieldsTab'
 import { ImportTab } from './tabs/ImportTab'
 
+type ProjectSettingsTab = {
+  component: ReactNode
+  isVisible: boolean
+  key: string
+  label: ReactNode
+  labelString?: string
+}
+
 const ProjectSettingsPage = () => {
   const { environmentId, projectId } = useRouteContext()
   const {
     data: project,
+    error,
     isLoading,
     isUninitialized,
   } = useGetProjectQuery({ id: String(projectId) }, { skip: !projectId })
@@ -28,7 +37,6 @@ const ProjectSettingsPage = () => {
     API.trackPage(Constants.pages.PROJECT_SETTINGS)
   }, [])
 
-  // Show loader only on initial load (not during refetches from mutations)
   const isInitialLoading = isUninitialized || (isLoading && !project)
 
   if (isInitialLoading) {
@@ -42,24 +50,23 @@ const ProjectSettingsPage = () => {
     )
   }
 
-  const hasEnvironments = !!project?.environments?.length
-  const hasFeatureHealth = Utils.getFlagsmithHasFeature('feature_health')
-
-  // Derive organisationId from project data (not available in route params)
-  const organisationId = project?.organisation
-
-  if (!project || !projectId || !organisationId) {
+  if (error || !project || !projectId || !project?.organisation) {
     return (
       <div className='app-container container'>
         <PageTitle title='Project Settings' />
-        <div className='text-center'>
-          <Loader />
+        <div className='alert alert-danger mt-4 text-center'>
+          Failed to load project settings. Please try again.
         </div>
       </div>
     )
   }
 
-  const tabs = [
+  // Derive data from project after all early returns
+  const hasEnvironments = !!project.environments?.length
+  const hasFeatureHealth = Utils.getFlagsmithHasFeature('feature_health')
+  const organisationId = project.organisation
+
+  const tabs: ProjectSettingsTab[] = [
     {
       component: <GeneralTab project={project} environmentId={environmentId} />,
       isVisible: true,
@@ -122,25 +129,22 @@ const ProjectSettingsPage = () => {
       key: 'export',
       label: 'Export',
     },
-  ]
+  ].filter(({ isVisible }) => isVisible)
 
   return (
     <div className='app-container container'>
       <PageTitle title='Project Settings' />
       <Tabs urlParam='tab' className='mt-0' uncontrolled>
-        {tabs.map(
-          ({ component, isVisible, key, label, labelString }) =>
-            isVisible && (
-              <TabItem
-                key={key}
-                tabLabel={label}
-                data-test={key}
-                tabLabelString={labelString}
-              >
-                {component}
-              </TabItem>
-            ),
-        )}
+        {tabs.map(({ component, key, label, labelString }) => (
+          <TabItem
+            key={key}
+            tabLabel={label}
+            data-test={key}
+            tabLabelString={labelString}
+          >
+            {component}
+          </TabItem>
+        ))}
       </Tabs>
     </div>
   )

frontend/web/components/pages/project-settings/tabs/general-tab/sections/ProjectInformation.tsx

@@ -53,7 +53,6 @@ export const ProjectInformation = ({ project }: ProjectInformationProps) => {
               }
               isValid={!!name && name.length > 0}
               type='text'
-              title={<label>Project Name</label>}
               placeholder='My Project Name'
             />
           </Flex>