fix: modal router crash, dual permission gate and absolute provider URLs

Author: Zaimwa9

frontend/web/components/modals/ConnectCohortProviderModal/CohortSyncKeyStep.tsx

@@ -1,13 +1,15 @@
 import React, { FC, useState } from 'react'
 import moment from 'moment'
-import { Link } from 'react-router-dom'
 import Constants from 'common/constants'
 import { useHasPermission } from 'common/providers/Permission'
 import {
   useCreateCohortSyncKeyMutation,
   useGetCohortSyncKeysQuery,
 } from 'common/services/useCohort'
-import { EnvironmentPermission } from 'common/types/permissions.types'
+import {
+  EnvironmentPermission,
+  ProjectPermission,
+} from 'common/types/permissions.types'
 import { CohortSyncKey } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
 import InputGroup from 'components/base/forms/InputGroup'
@@ -36,12 +38,24 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
   const [createdKey, setCreatedKey] = useState<string | null>(null)
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
-  const { isLoading: isLoadingPermission, permission: canManage } =
+  // Key writes need both permissions; mirrors the API's CohortPermission.
+  const { isLoading: isLoadingEnvPermission, permission: canManageOverrides } =
     useHasPermission({
       id: environmentApiKey,
       level: 'environment',
       permission: EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
     })
+  const {
+    isLoading: isLoadingProjectPermission,
+    permission: canManageSegments,
+  } = useHasPermission({
+    id: `${projectId}`,
+    level: 'project',
+    permission: ProjectPermission.MANAGE_SEGMENTS,
+  })
+  const isLoadingPermission =
+    isLoadingEnvPermission || isLoadingProjectPermission
+  const canManage = !!canManageOverrides && !!canManageSegments
 
   const { data: syncKeys, isLoading } = useGetCohortSyncKeysQuery(
     { environmentApiKey },
@@ -152,12 +166,13 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
         </div>
         <div className='fs-small text-secondary'>
           You can revoke keys in{' '}
-          <Link
-            to={`/project/${projectId}/environment/${environmentApiKey}/settings?tab=cohort-synchronisation`}
+          {/* Plain anchor: this renders in the modal root, outside the Router. */}
+          <a
+            href={`/project/${projectId}/environment/${environmentApiKey}/settings?tab=cohort-synchronisation`}
             onClick={() => closeModal()}
           >
             Environment Settings
-          </Link>
+          </a>
           .
         </div>
         {canManage ? (

frontend/web/components/modals/ConnectCohortProviderModal/providers.ts

@@ -51,6 +51,12 @@ export const COHORT_PROVIDERS: Record<CohortProviderKey, CohortProviderConfig> =
     },
   }
 
+// Proxied self-hosted deployments configure a relative Project.api ('/api/v1/');
+// providers need an absolute callback URL, so resolve against the page origin.
 export const getCohortProviderEndpoint = (
   provider: CohortProviderKey,
-): string => `${Project.api}${COHORT_PROVIDERS[provider].endpointPath}`
+): string =>
+  new URL(
+    COHORT_PROVIDERS[provider].endpointPath,
+    new URL(Project.api, window.location.origin),
+  ).toString()

frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx

@@ -932,6 +932,7 @@ const EnvironmentSettingsPage: React.FC = () => {
                       <div className='mt-4'>
                         <CohortSyncTab
                           environmentApiKey={match.params.environmentId}
+                          projectId={projectId ?? ''}
                         />
                       </div>
                     </TabItem>

frontend/web/components/pages/environment-settings/tabs/cohort-sync-tab/CohortSyncTab.tsx

@@ -6,7 +6,10 @@ import {
   useGetCohortSyncKeysQuery,
   useRevokeCohortSyncKeyMutation,
 } from 'common/services/useCohort'
-import { EnvironmentPermission } from 'common/types/permissions.types'
+import {
+  EnvironmentPermission,
+  ProjectPermission,
+} from 'common/types/permissions.types'
 import { CohortSyncKey } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
 import Flex from 'components/base/grid/Flex'
@@ -20,14 +23,25 @@ import CreateCohortSyncKeyModal from './CreateCohortSyncKeyModal'
 
 type CohortSyncTabProps = {
   environmentApiKey: string
+  projectId: number | string
 }
 
-const CohortSyncTab: FC<CohortSyncTabProps> = ({ environmentApiKey }) => {
-  const { permission: canManage } = useHasPermission({
+const CohortSyncTab: FC<CohortSyncTabProps> = ({
+  environmentApiKey,
+  projectId,
+}) => {
+  // Key writes need both permissions; mirrors the API's CohortPermission.
+  const { permission: canManageOverrides } = useHasPermission({
     id: environmentApiKey,
     level: 'environment',
     permission: EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
   })
+  const { permission: canManageSegments } = useHasPermission({
+    id: `${projectId}`,
+    level: 'project',
+    permission: ProjectPermission.MANAGE_SEGMENTS,
+  })
+  const canManage = !!canManageOverrides && !!canManageSegments
 
   const { data: syncKeys, isLoading } = useGetCohortSyncKeysQuery(
     { environmentApiKey },