fix: cohort key modal polish, identities env pre-fill and env-scoped override segments

Author: Zaimwa9

frontend/web/components/PanelSearch.tsx

@@ -319,7 +319,12 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
               </Row>
             )}
             {onRefresh && (
-              <Button theme='text' size='xSmall' onClick={onRefresh}>
+              <Button
+                theme='text'
+                size='xSmall'
+                className='mr-2'
+                onClick={onRefresh}
+              >
                 <Icon name='refresh' fill='#6837FC' width={16} /> Refresh
               </Button>
             )}

frontend/web/components/SegmentOverrides.js

@@ -739,6 +739,12 @@ class TheComponent extends Component {
     const filter = (segment) => {
       if (segment.feature && segment.feature !== this.props.feature)
         return false
+      // A cohort-managed segment only has members in its own environment.
+      if (
+        segment.cohort &&
+        segment.cohort.environment_api_key !== this.props.environmentId
+      )
+        return false
       if (this.props.id && this.props.id !== segment.id) return null
       const foundSegment = find(value, (v) => v.segment === segment.id)
       return !value || !foundSegment || (foundSegment && foundSegment.toRemove)

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

@@ -81,7 +81,7 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
     if (createdKey) return 'Synchronisation key'
     if (hasKeys && !isCreateFormOpen) return 'Use your existing key'
     if (!canManage) return 'Synchronisation key'
-    return 'Create a synchronisation key'
+    return 'Generate a synchronisation key'
   }
 
   const renderBody = () => {
@@ -97,10 +97,9 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
             className='font-monospace'
             data-test='connect-provider-key-value'
           />
-          <WarningMessage
-            warningMessage='This key is shown only once. Store it securely — you will not be able to see it again.'
-            warningMessageClass='mt-4'
-          />
+          <div className='mt-4'>
+            <WarningMessage warningMessage='This key is shown only once. Store it securely — you will not be able to see it again.' />
+          </div>
         </>
       )
     }
@@ -119,6 +118,7 @@ const CohortSyncKeyStep: FC<CohortSyncKeyStepProps> = ({
       return (
         <form onSubmit={handleSubmit}>
           <InputGroup
+            title='Name'
             value={name}
             data-test='connect-provider-key-name'
             inputProps={{

frontend/web/components/modals/CreateSegment.tsx

@@ -827,6 +827,9 @@ const LoadingCreateSegment: FC<LoadingCreateSegmentType> = (props) => {
   useEffect(() => {
     if (segmentData) {
       props.onSegmentRetrieved?.(segmentData)
+      if (segmentData.cohort?.environment_api_key) {
+        setEnvironmentId(segmentData.cohort.environment_api_key)
+      }
     }
     //eslint-disable-next-line
   }, [segmentData])

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

@@ -39,10 +39,9 @@ const CreateCohortSyncKeyModal: FC<CreateCohortSyncKeyModalProps> = ({
             className='font-monospace'
             data-test='cohort-sync-key-value'
           />
-          <WarningMessage
-            warningMessage='This key is shown only once. Store it securely — you will not be able to see it again.'
-            warningMessageClass='mt-4'
-          />
+          <div className='mt-4'>
+            <WarningMessage warningMessage='This key is shown only once. Store it securely — you will not be able to see it again.' />
+          </div>
         </div>
         <ModalHR />
         <div className='modal-footer'>