fix: address cohort sync keys review feedback

Author: Zaimwa9

frontend/common/services/useCohort.ts

@@ -23,7 +23,7 @@ export const cohortService = service
         }),
       }),
       createCohortSyncKey: builder.mutation<
-        Res['cohortSyncKey'],
+        Res['cohortSyncKeyCreated'],
         Req['createCohortSyncKey']
       >({
         invalidatesTags: [{ id: 'LIST', type: 'CohortSyncKey' }],

frontend/common/types/responses.ts

@@ -1044,6 +1044,9 @@ export type CohortSyncKey = {
   key: string | null
 }
 
+// The plaintext key only exists in the create response.
+export type CohortSyncKeyCreated = CohortSyncKey & { key: string }
+
 export type CohortCsvSyncResult = {
   version: number
   added: number
@@ -1387,7 +1390,7 @@ export type Res = {
   segment: Segment
   cohort: Cohort
   cohortSyncKeys: CohortSyncKey[]
-  cohortSyncKey: CohortSyncKey
+  cohortSyncKeyCreated: CohortSyncKeyCreated
   cohortCsvSync: CohortCsvSyncResult
   segmentMembers: SegmentMembersResponse
   auditLogs: PagedResponse<AuditLogItem>

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

@@ -1,16 +1,19 @@
 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 { CohortSyncKey } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
 import InputGroup from 'components/base/forms/InputGroup'
 import CopyField from 'components/CopyField'
 import ErrorMessage from 'components/ErrorMessage'
-import Loader from 'components/Loader'
+import Tooltip from 'components/Tooltip'
 import WarningMessage from 'components/WarningMessage'
 import ConnectCohortProviderStep from './ConnectCohortProviderStep'
 
@@ -33,6 +36,13 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
   const [createdKey, setCreatedKey] = useState<string | null>(null)
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
+  const { isLoading: isLoadingPermission, permission: canManage } =
+    useHasPermission({
+      id: environmentApiKey,
+      level: 'environment',
+      permission: EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
+    })
+
   const { data: syncKeys, isLoading } = useGetCohortSyncKeysQuery(
     { environmentApiKey },
     { skip: !environmentApiKey },
@@ -56,11 +66,12 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
   const getTitle = () => {
     if (createdKey) return 'Synchronisation key'
     if (hasKeys && !isCreateFormOpen) return 'Use your existing key'
+    if (!canManage) return 'Synchronisation key'
     return 'Create a synchronisation key'
   }
 
   const renderBody = () => {
-    if (isLoading && !syncKeys) {
+    if ((isLoading && !syncKeys) || isLoadingPermission) {
       return <Loader />
     }
 
@@ -80,6 +91,15 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
       )
     }
 
+    if (!hasKeys && !canManage) {
+      return (
+        <div className='fs-small text-secondary'>
+          You do not have permission to create synchronisation keys in this
+          environment.
+        </div>
+      )
+    }
+
     if (!hasKeys || isCreateFormOpen) {
       return (
         <form onSubmit={handleSubmit}>
@@ -127,7 +147,8 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
           ))}
         </div>
         <div className='fs-small text-secondary mt-2'>
-          Key values are shown only at creation. Lost it? Create a new key.
+          Key values are shown only at creation.
+          {canManage && ' Lost it? Create a new key.'}
         </div>
         <div className='fs-small text-secondary'>
           You can revoke keys in{' '}
@@ -139,14 +160,29 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
           </Link>
           .
         </div>
-        <Button
-          theme='secondary'
-          className='mt-3'
-          onClick={() => setIsCreateFormOpen(true)}
-          data-test='connect-provider-new-key'
-        >
-          Create a new key
-        </Button>
+        {canManage ? (
+          <Button
+            theme='secondary'
+            className='mt-3'
+            onClick={() => setIsCreateFormOpen(true)}
+            data-test='connect-provider-new-key'
+          >
+            Create a new key
+          </Button>
+        ) : (
+          <Tooltip
+            title={
+              <Button theme='secondary' className='mt-3' disabled>
+                Create a new key
+              </Button>
+            }
+            place='right'
+          >
+            {Constants.environmentPermissions(
+              EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
+            )}
+          </Tooltip>
+        )}
       </>
     )
   }

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

@@ -4,7 +4,6 @@ import Button from 'components/base/forms/Button'
 import FieldLabel from 'components/base/forms/FieldLabel'
 import CopyField from 'components/CopyField'
 import EnvironmentSelect from 'components/EnvironmentSelect'
-import Loader from 'components/Loader'
 import ModalHR from 'components/modals/ModalHR'
 import CohortSyncKeyStep from './CohortSyncKeyStep'
 import ConnectCohortProviderStep from './ConnectCohortProviderStep'
@@ -78,6 +77,7 @@ const ConnectCohortProviderModal: FC<ConnectCohortProviderModalProps> = ({
               title={config.endpointStepTitle}
             >
               <CopyField
+                title={config.endpointFieldTitle}
                 value={getCohortProviderEndpoint(provider)}
                 className='font-monospace'
                 data-test='connect-provider-url'

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

@@ -11,6 +11,7 @@ export type CohortProviderAuthRow = {
 export type CohortProviderConfig = {
   label: string
   authRows: CohortProviderAuthRow[]
+  endpointFieldTitle: string
   endpointPath: string
   endpointStepTitle: string
   exportStepTitle: string
@@ -24,7 +25,10 @@ export const COHORT_PROVIDERS: Record<CohortProviderKey, CohortProviderConfig> =
         { label: 'Authentication', value: 'Bearer token' },
         { label: 'Token', mono: true, value: '{YOUR_SYNCHRONISATION_KEY}' },
       ],
-      endpointPath: 'cohort-sync/amplitude',
+      // Amplitude posts cohort list creation here, then adds and removes
+      // members under `lists/{list_id}/add` and `lists/{list_id}/remove`.
+      endpointFieldTitle: 'List endpoint URL',
+      endpointPath: 'cohort-sync/amplitude/lists/',
       endpointStepTitle: 'Add Flagsmith as a destination in Amplitude',
       exportStepBody:
         'In Amplitude, open the cohort you want to target and synchronise it to the Flagsmith destination. Flagsmith creates the managed segment automatically on the first synchronisation, then keeps its members up to date as people enter and leave the cohort.',
@@ -37,6 +41,7 @@ export const COHORT_PROVIDERS: Record<CohortProviderKey, CohortProviderConfig> =
         { label: 'Username', value: 'Any value' },
         { label: 'Password', mono: true, value: '{YOUR_SYNCHRONISATION_KEY}' },
       ],
+      endpointFieldTitle: 'Webhook URL',
       endpointPath: 'cohort-sync/mixpanel/webhook/',
       endpointStepTitle: 'Create a webhook in Mixpanel',
       exportStepBody:

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

@@ -14,7 +14,6 @@ import FormGroup from 'components/base/grid/FormGroup'
 import Panel from 'components/base/grid/Panel'
 import Row from 'components/base/grid/Row'
 import Icon from 'components/icons/Icon'
-import Loader from 'components/Loader'
 import PanelSearch from 'components/PanelSearch'
 import Tooltip from 'components/Tooltip'
 import CreateCohortSyncKeyModal from './CreateCohortSyncKeyModal'
@@ -84,14 +83,16 @@ const CohortSyncTab: FC<CohortSyncTabProps> = ({ environmentApiKey }) => {
         </span>
       </div>
       <div className='table-column'>
-        <Button
-          type='button'
-          onClick={() => handleRevoke(syncKey)}
-          className='btn btn-with-icon'
-          aria-label={`Revoke ${syncKey.name}`}
-        >
-          <Icon name='trash-2' width={20} fill='#656D7B' />
-        </Button>
+        {canManage && (
+          <Button
+            type='button'
+            onClick={() => handleRevoke(syncKey)}
+            className='btn btn-with-icon'
+            aria-label={`Revoke ${syncKey.name}`}
+          >
+            <Icon name='trash-2' width={20} fill='#656D7B' />
+          </Button>
+        )}
       </div>
     </Row>
   )