(null)
+ const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
+
+ // 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 },
+ { skip: !environmentApiKey },
+ )
+ const [createCohortSyncKey, { error, isLoading: isCreating }] =
+ useCreateCohortSyncKeyMutation()
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault()
+ createCohortSyncKey({ environmentApiKey, name: name.trim() })
+ .unwrap()
+ .then((syncKey) => {
+ setCreatedKey(syncKey.key)
+ setIsCreateFormOpen(false)
+ setName('')
+ })
+ .catch(() => {})
+ }
+
+ const hasKeys = !!syncKeys?.length
+ const getTitle = () => {
+ if (createdKey) return 'Synchronisation key'
+ if (hasKeys && !isCreateFormOpen) return 'Use your existing key'
+ if (!canManage) return 'Synchronisation key'
+ return 'Generate a synchronisation key'
+ }
+
+ const renderBody = () => {
+ if ((isLoading && !syncKeys) || isLoadingPermission) {
+ return
+ }
+
+ if (createdKey) {
+ return (
+ <>
+
+
+
+
+
+ )
+ }
+
+ if (!hasKeys && !canManage) {
+ return (
+
+ Creating synchronisation keys needs the Manage segment overrides
+ permission for this environment and the Manage segments permission for
+ this project.
+
+ )
+ }
+
+ if (!hasKeys || isCreateFormOpen) {
+ return (
+
+ )
+ }
+
+ return (
+ <>
+
+ {syncKeys?.map((syncKey: CohortSyncKey) => (
+
+ {syncKey.name}
+
+ {syncKey.prefix}
+ {moment(syncKey.created).format('D MMM YYYY')}
+
+
+ ))}
+
+ Key values are shown only at creation.
+ {canManage && ' Lost it? Create a new key.'}
+
+
+ You can revoke keys in{' '}
+ {/* href, not to: this renders in the modal root, outside the Router. */}
+ closeModal()}
+ >
+ Environment Settings
+
+ .
+
+ {canManage ? (
+
+ ) : (
+
+ Create a new key
+