refactor: standardize organisationId type and improve error handling

Author: talissoncosta

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

@@ -17,7 +17,7 @@ import { CustomFieldsTab } from './tabs/CustomFieldsTab'
 import { ImportTab } from './tabs/ImportTab'
 
 const ProjectSettingsPage = () => {
-  const { environmentId, organisationId, projectId } = useRouteContext()
+  const { environmentId, projectId } = useRouteContext()
   const { data: project, isLoading } = useGetProjectQuery(
     { id: String(projectId) },
     { skip: !projectId },
@@ -30,7 +30,10 @@ const ProjectSettingsPage = () => {
   const hasEnvironments = !!project?.environments?.length
   const hasFeatureHealth = Utils.getFlagsmithHasFeature('feature_health')
 
-  if (isLoading || !project || !projectId) {
+  // Derive organisationId from project data
+  const organisationId = project?.organisation
+
+  if (isLoading || !project || !projectId || !organisationId) {
     return (
       <div className='app-container container'>
         <PageTitle title='Project Settings' />
@@ -50,7 +53,6 @@ const ProjectSettingsPage = () => {
             project={project}
             projectId={projectId}
             environmentId={environmentId}
-            organisationId={organisationId}
           />
         </TabItem>
 
@@ -59,7 +61,6 @@ const ProjectSettingsPage = () => {
             project={project}
             projectId={projectId}
             environmentId={environmentId}
-            organisationId={organisationId}
           />
         </TabItem>
 
@@ -85,26 +86,17 @@ const ProjectSettingsPage = () => {
         <TabItem tabLabel='Permissions'>
           <PermissionsTab
             projectId={projectId}
-            environmentId={environmentId}
             organisationId={organisationId}
           />
         </TabItem>
 
         <TabItem tabLabel='Custom Fields'>
-          <CustomFieldsTab
-            projectId={projectId}
-            environmentId={environmentId}
-            organisationId={organisationId}
-          />
+          <CustomFieldsTab organisationId={organisationId} />
         </TabItem>
 
         {hasEnvironments && (
           <TabItem data-test='js-import-page' tabLabel='Import'>
-            <ImportTab
-              projectId={projectId}
-              environmentId={environmentId}
-              organisationId={organisationId}
-            />
+            <ImportTab projectId={projectId} environmentId={environmentId} />
           </TabItem>
         )}
 

frontend/web/components/pages/project-settings/shared/types.ts

@@ -1,5 +1,5 @@
 export type ProjectSettingsTabProps = {
   projectId: number
   environmentId?: string
-  organisationId?: number
+  organisationId: number
 }

frontend/web/components/pages/project-settings/tabs/CustomFieldsTab.tsx

@@ -1,26 +1,39 @@
+import InfoMessage from 'components/InfoMessage'
 import WarningMessage from 'components/WarningMessage'
 import React from 'react'
-import { ProjectSettingsTabProps } from 'components/pages/project-settings/shared/types'
 
-export const CustomFieldsTab = ({
-  organisationId,
-}: ProjectSettingsTabProps) => (
-  <div className='mt-4'>
-    <h5>Custom Fields</h5>
+type CustomFieldsTabProps = {
+  organisationId: number
+}
 
-    <WarningMessage
-      warningMessage={
-        <span>
-          Custom fields have been moved to{' '}
-          <a
-            href={`/organisation/${organisationId}/settings?tab=custom-fields`}
-            rel='noreferrer'
-          >
-            Organisation Settings
-          </a>
-          .
-        </span>
-      }
-    />
-  </div>
-)
+export const CustomFieldsTab = ({ organisationId }: CustomFieldsTabProps) => {
+  // Runtime safety check
+  if (!organisationId) {
+    return (
+      <div className='mt-4'>
+        <InfoMessage>Unable to load organisation settings</InfoMessage>
+      </div>
+    )
+  }
+
+  return (
+    <div className='mt-4'>
+      <h5>Custom Fields</h5>
+
+      <WarningMessage
+        warningMessage={
+          <span>
+            Custom fields have been moved to{' '}
+            <a
+              href={`/organisation/${organisationId}/settings?tab=custom-fields`}
+              rel='noreferrer'
+            >
+              Organisation Settings
+            </a>
+            .
+          </span>
+        }
+      />
+    </div>
+  )
+}

frontend/web/components/pages/project-settings/tabs/GeneralTab/index.tsx

@@ -15,7 +15,6 @@ type GeneralTabProps = {
   project: Project
   projectId: number
   environmentId?: string
-  organisationId?: number
 }
 
 export const GeneralTab = ({ project, projectId }: GeneralTabProps) => {

frontend/web/components/pages/project-settings/tabs/ImportTab.tsx

@@ -1,16 +1,34 @@
 import ImportPage from 'components/import-export/ImportPage'
+import InfoMessage from 'components/InfoMessage'
 import React from 'react'
 import { useGetProjectQuery } from 'common/services/useProject'
-import { ProjectSettingsTabProps } from 'components/pages/project-settings/shared/types'
 
-export const ImportTab = ({
-  environmentId,
-  projectId,
-}: ProjectSettingsTabProps) => {
-  const { data: project } = useGetProjectQuery({ id: String(projectId) })
+type ImportTabProps = {
+  projectId: number
+  environmentId?: string
+}
+
+export const ImportTab = ({ environmentId, projectId }: ImportTabProps) => {
+  const { data: project, isLoading } = useGetProjectQuery({
+    id: String(projectId),
+  })
+
+  if (isLoading) {
+    return (
+      <div className='text-center mt-4'>
+        <Loader />
+      </div>
+    )
+  }
 
   if (!environmentId) {
-    return null
+    return (
+      <div className='mt-4'>
+        <InfoMessage>
+          Please select an environment to import features
+        </InfoMessage>
+      </div>
+    )
   }
 
   return (

frontend/web/components/pages/project-settings/tabs/PermissionsTab.tsx

@@ -1,25 +1,51 @@
 import EditPermissions from 'components/EditPermissions'
+import InfoMessage from 'components/InfoMessage'
 import React from 'react'
 import { useGetRolesQuery } from 'common/services/useRole'
 import { useGetProjectPermissionsQuery } from 'common/services/useProject'
-import { ProjectSettingsTabProps } from 'components/pages/project-settings/shared/types'
+
+type PermissionsTabProps = {
+  projectId: number
+  organisationId: number
+}
 
 export const PermissionsTab = ({
   organisationId,
   projectId,
-}: ProjectSettingsTabProps) => {
-  const { data: rolesData } = useGetRolesQuery(
-    { organisation_id: organisationId || 0 },
-    { skip: !organisationId },
-  )
+}: PermissionsTabProps) => {
+  const {
+    data: rolesData,
+    error: rolesError,
+    isLoading: rolesLoading,
+  } = useGetRolesQuery({ organisation_id: organisationId })
 
-  const { data: permissionsData, refetch: refetchPermissions } =
-    useGetProjectPermissionsQuery({ projectId: String(projectId) })
+  const {
+    data: permissionsData,
+    error: permissionsError,
+    isLoading: permissionsLoading,
+    refetch: refetchPermissions,
+  } = useGetProjectPermissionsQuery({ projectId: String(projectId) })
 
   const handleSaveUser = () => {
     refetchPermissions()
   }
 
+  if (rolesLoading || permissionsLoading) {
+    return (
+      <div className='text-center'>
+        <Loader />
+      </div>
+    )
+  }
+
+  if (rolesError || permissionsError) {
+    return (
+      <div className='mt-4'>
+        <InfoMessage>Error loading permissions data</InfoMessage>
+      </div>
+    )
+  }
+
   return (
     <EditPermissions
       tabClassName='flat-panel'

frontend/web/components/pages/project-settings/tabs/SDKSettingsTab.tsx

@@ -8,7 +8,6 @@ type SDKSettingsTabProps = {
   project: Project
   projectId: number
   environmentId?: string
-  organisationId?: number
 }
 
 export const SDKSettingsTab = ({ project, projectId }: SDKSettingsTabProps) => {