From 4f0a11edc492da949bfb52a785ac0983462e955d Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Fri, 3 Jan 2025 00:14:32 -0300
Subject: [PATCH 1/6] fix: Updates user segment tab when a segment is
 created/updated

---
 .../web/components/modals/CreateSegment.tsx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 55085c7bf7bb..f5abb2cbf9fc 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -52,6 +52,7 @@ import AddMetadataToEntity, {
 } from 'components/metadata/AddMetadataToEntity'
 import { useGetSupportedContentTypeQuery } from 'common/services/useSupportedContentType'
 import { setInterceptClose } from './base/ModalDefault'
+import AppActions from 'common/dispatcher/app-actions'
 
 type PageType = {
   number: number
@@ -127,6 +128,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const [description, setDescription] = useState(segment.description)
   const [name, setName] = useState<Segment['name']>(segment.name)
   const [rules, setRules] = useState<Segment['rules']>(segment.rules)
+  const [shouldUpdateIdentities, setShouldUpdateIdentities] = useState(false)
   useEffect(() => {
     if (segment) {
       setRules(segment.rules)
@@ -282,6 +284,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (createSuccess && createSegmentData) {
       setSegment(createSegmentData)
       onComplete?.(createSegmentData)
+      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [createSuccess])
@@ -289,9 +292,25 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (updateSuccess && updateSegmentData) {
       setSegment(updateSegmentData)
       onComplete?.(updateSegmentData)
+      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [updateSuccess])
+
+  useEffect(() => {
+    if (
+      shouldUpdateIdentities &&
+      tab === 2 &&
+      environmentId &&
+      environmentId !== 'ENVIRONMENT_API_KEY'
+    ) {
+      identities?.results.forEach((identity) =>
+        AppActions.getIdentitySegments(projectId, identity.id),
+      )
+      setShouldUpdateIdentities(false)
+    }
+  }, [shouldUpdateIdentities, tab, identities, projectId, environmentId])
+
   const operators: Operator[] | null = _operators || Utils.getSegmentOperators()
   if (operators) {
     _operators = operators

From 3416afacb6687f81409d4ce39b2b43e384697cb0 Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Fri, 3 Jan 2025 00:25:35 -0300
Subject: [PATCH 2/6] split into smaller components

---
 .../web/components/modals/CreateSegment.tsx   | 380 ++++--------------
 .../modals/CreateSegmentRulesTabForm.tsx      | 217 ++++++++++
 .../modals/CreateSegmentUsersTabContent.tsx   | 161 ++++++++
 3 files changed, 467 insertions(+), 291 deletions(-)
 create mode 100644 frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
 create mode 100644 frontend/web/components/modals/CreateSegmentUsersTabContent.tsx

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index f5abb2cbf9fc..c3dbb6890184 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -25,27 +25,19 @@ import {
   useGetSegmentQuery,
   useUpdateSegmentMutation,
 } from 'common/services/useSegment'
-import IdentitySegmentsProvider from 'common/providers/IdentitySegmentsProvider'
 import Format from 'common/utils/format'
 import Utils from 'common/utils/utils'
 
 import AssociatedSegmentOverrides from './AssociatedSegmentOverrides'
 import Button from 'components/base/forms/Button'
-import EnvironmentSelect from 'components/EnvironmentSelect'
 import InfoMessage from 'components/InfoMessage'
-import Input from 'components/base/forms/Input'
 import InputGroup from 'components/base/forms/InputGroup'
-import PanelSearch from 'components/PanelSearch'
 import Rule from './Rule'
-import Switch from 'components/Switch'
 import TabItem from 'components/base/forms/TabItem'
 import Tabs from 'components/base/forms/Tabs'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import JSONReference from 'components/JSONReference'
 import { cloneDeep } from 'lodash'
-import ErrorMessage from 'components/ErrorMessage'
 import ProjectStore from 'common/stores/project-store'
-import Icon from 'components/Icon'
 import classNames from 'classnames'
 import AddMetadataToEntity, {
   CustomMetadataField,
@@ -53,6 +45,8 @@ import AddMetadataToEntity, {
 import { useGetSupportedContentTypeQuery } from 'common/services/useSupportedContentType'
 import { setInterceptClose } from './base/ModalDefault'
 import AppActions from 'common/dispatcher/app-actions'
+import CreateSegmentRulesTabForm from './CreateSegmentRulesTabForm'
+import CreateSegmentUsersTabContent from './CreateSegmentUsersTabContent'
 
 type PageType = {
   number: number
@@ -101,8 +95,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
   setPage,
   setSearchInput,
 }) => {
-  const SEGMENT_ID_MAXLENGTH = Constants.forms.maxLength.SEGMENT_ID
-
   const defaultSegment: Omit<Segment, 'id' | 'uuid' | 'project'> & {
     id?: number
     uuid?: string
@@ -418,154 +410,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
     </div>
   )
 
-  const Tab1 = (
-    <form id='create-segment-modal' onSubmit={save}>
-      {!condensed && (
-        <div className='mt-3'>
-          <InfoMessage collapseId={'value-type-conversions'}>
-            Learn more about rule and trait value type conversions{' '}
-            <a href='https://docs.flagsmith.com/basic-features/segments#rule-typing'>
-              here
-            </a>
-            .
-          </InfoMessage>
-          {segmentsLimitAlert.percentage &&
-            Utils.displayLimitAlert('segments', segmentsLimitAlert.percentage)}
-        </div>
-      )}
-
-      <div className='mb-3'>
-        <label htmlFor='segmentID'>Name*</label>
-        <Flex>
-          <Input
-            data-test='segmentID'
-            name='id'
-            id='segmentID'
-            maxLength={SEGMENT_ID_MAXLENGTH}
-            value={name}
-            onChange={(e: InputEvent) => {
-              setValueChanged(true)
-              setName(
-                Format.enumeration
-                  .set(Utils.safeParseEventValue(e))
-                  .toLowerCase(),
-              )
-            }}
-            isValid={name && name.length}
-            type='text'
-            placeholder='E.g. power_users'
-          />
-        </Flex>
-      </div>
-      {!condensed && (
-        <InputGroup
-          className='mb-3'
-          value={description}
-          inputProps={{
-            className: 'full-width',
-            name: 'featureDesc',
-            readOnly: !!identity || readOnly,
-          }}
-          onChange={(e: InputEvent) => {
-            setValueChanged(true)
-            setDescription(Utils.safeParseEventValue(e))
-          }}
-          isValid={name && name.length}
-          type='text'
-          title='Description'
-          placeholder="e.g. 'People who have spent over $100' "
-        />
-      )}
-
-      <div className='form-group '>
-        <Row className='mb-3'>
-          <Switch
-            checked={showDescriptions}
-            onChange={() => {
-              setShowDescriptions(!showDescriptions)
-            }}
-            className={'ml-0'}
-          />
-          <span
-            style={{ fontWeight: 'normal', marginLeft: '12px' }}
-            className='mb-0 fs-small text-dark'
-          >
-            Show condition descriptions
-          </span>
-        </Row>
-        <Flex className='mb-3'>
-          <label className='cols-sm-2 control-label mb-1'>
-            Include users when all of the following rules apply:
-          </label>
-          <span className='fs-caption text-faint'>
-            Note: Trait names are case sensitive
-          </span>
-        </Flex>
-        {allWarnings?.map((warning, i) => (
-          <InfoMessage key={i}>
-            <div dangerouslySetInnerHTML={{ __html: warning }} />
-          </InfoMessage>
-        ))}
-        {rulesEl}
-      </div>
-
-      <ErrorMessage error={error} />
-      {isEdit && <JSONReference title={'Segment'} json={segment} />}
-      {readOnly ? (
-        <div className='text-right'>
-          <Tooltip
-            title={
-              <Button
-                disabled
-                data-test='show-create-feature-btn'
-                id='show-create-feature-btn'
-              >
-                Update Segment
-              </Button>
-            }
-            place='left'
-          >
-            {Constants.projectPermissions('Admin')}
-          </Tooltip>
-        </div>
-      ) : (
-        <div className='text-right' style={{ marginTop: '32px' }}>
-          <Row className='justify-content-end'>
-            {condensed && (
-              <Button
-                theme='secondary'
-                type='button'
-                onClick={onCancel}
-                className='mr-2'
-              >
-                Cancel
-              </Button>
-            )}
-            {isEdit ? (
-              <Button
-                type='submit'
-                data-test='update-segment'
-                id='update-feature-btn'
-                disabled={isSaving || !name || !isValid}
-              >
-                {isSaving ? 'Creating' : 'Update Segment'}
-              </Button>
-            ) : (
-              <Button
-                disabled={isSaving || !name || !isValid || isLimitReached}
-                type='submit'
-                data-test='create-segment'
-                id='create-feature-btn'
-              >
-                {isSaving ? 'Creating' : 'Create Segment'}
-              </Button>
-            )}
-          </Row>
-        </div>
-      )}
-    </form>
-  )
-
   const MetadataTab = (
     <FormGroup className='mt-5 setting'>
       <InputGroup
@@ -601,7 +445,31 @@ const CreateSegment: FC<CreateSegmentType> = ({
               </Row>
             }
           >
-            <div className='my-4'>{Tab1}</div>
+            <div className='my-4'>
+              <CreateSegmentRulesTabForm
+                save={save}
+                condensed={condensed}
+                segmentsLimitAlert={segmentsLimitAlert}
+                name={name}
+                setName={setName}
+                setValueChanged={setValueChanged}
+                description={description}
+                setDescription={setDescription}
+                identity={identity}
+                readOnly={readOnly}
+                showDescriptions={showDescriptions}
+                setShowDescriptions={setShowDescriptions}
+                allWarnings={allWarnings}
+                rulesEl={rulesEl}
+                error={error}
+                isEdit={isEdit}
+                segment={segment}
+                isSaving={isSaving}
+                isValid={isValid}
+                isLimitReached={isLimitReached}
+                onCancel={onCancel}
+              />
+            </div>
           </TabItem>
           <TabItem tabLabel='Features'>
             <div className='my-4'>
@@ -617,136 +485,18 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           </TabItem>
           <TabItem tabLabel='Users'>
-            <div className='my-4'>
-              <InfoMessage collapseId={'random-identity-sample'}>
-                This is a random sample of Identities who are either in or out
-                of this Segment based on the current Segment rules.
-              </InfoMessage>
-              <div className='mt-2'>
-                <FormGroup>
-                  <InputGroup
-                    title='Environment'
-                    component={
-                      <EnvironmentSelect
-                        projectId={`${projectId}`}
-                        value={environmentId}
-                        onChange={(environmentId: string) => {
-                          setEnvironmentId(environmentId)
-                        }}
-                      />
-                    }
-                  />
-                  <PanelSearch
-                    renderSearchWithNoResults
-                    id='users-list'
-                    title='Segment Users'
-                    className='no-pad'
-                    isLoading={identitiesLoading}
-                    items={identities?.results}
-                    paging={identities}
-                    showExactFilter
-                    nextPage={() => {
-                      setPage({
-                        number: page.number + 1,
-                        pageType: 'NEXT',
-                        pages: identities?.last_evaluated_key
-                          ? (page.pages || []).concat([
-                              identities?.last_evaluated_key,
-                            ])
-                          : undefined,
-                      })
-                    }}
-                    prevPage={() => {
-                      setPage({
-                        number: page.number - 1,
-                        pageType: 'PREVIOUS',
-                        pages: page.pages
-                          ? Utils.removeElementFromArray(
-                              page.pages,
-                              page.pages.length - 1,
-                            )
-                          : undefined,
-                      })
-                    }}
-                    goToPage={(newPage: number) => {
-                      setPage({
-                        number: newPage,
-                        pageType: undefined,
-                        pages: undefined,
-                      })
-                    }}
-                    renderRow={(
-                      { id, identifier }: { id: string; identifier: string },
-                      index: number,
-                    ) => (
-                      <Row
-                        key={id}
-                        className='list-item list-item-sm clickable'
-                      >
-                        <IdentitySegmentsProvider
-                          fetch
-                          id={id}
-                          projectId={projectId}
-                        >
-                          {({ segments }: { segments?: Segment[] }) => {
-                            let inSegment = false
-                            if (segments?.find((v) => v.name === name)) {
-                              inSegment = true
-                            }
-                            return (
-                              <Row
-                                space
-                                className='px-3'
-                                key={id}
-                                data-test={`user-item-${index}`}
-                              >
-                                <div className='font-weight-medium'>
-                                  {identifier}
-                                </div>
-                                <Row
-                                  className={`font-weight-medium fs-small lh-sm ${
-                                    inSegment ? 'text-primary' : 'faint'
-                                  }`}
-                                >
-                                  {inSegment ? (
-                                    <>
-                                      <Icon
-                                        name='checkmark-circle'
-                                        width={20}
-                                        fill='#6837FC'
-                                      />
-                                      <span className='ml-1'>
-                                        User in segment
-                                      </span>
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Icon
-                                        name='minus-circle'
-                                        width={20}
-                                        fill='#9DA4AE'
-                                      />
-                                      <span className='ml-1'>
-                                        Not in segment
-                                      </span>
-                                    </>
-                                  )}
-                                </Row>
-                              </Row>
-                            )
-                          }}
-                        </IdentitySegmentsProvider>
-                      </Row>
-                    )}
-                    filterRow={() => true}
-                    search={searchInput}
-                    onChange={(e: InputEvent) => {
-                      setSearchInput(Utils.safeParseEventValue(e))
-                    }}
-                  />
-                </FormGroup>
-              </div>
-            </div>
+            <CreateSegmentUsersTabContent
+              projectId={projectId}
+              environmentId={environmentId}
+              setEnvironmentId={setEnvironmentId}
+              identitiesLoading={identitiesLoading}
+              identities={identities}
+              page={page}
+              setPage={setPage}
+              name={name}
+              searchInput={searchInput}
+              setSearchInput={setSearchInput}
+            />
           </TabItem>
           {metadataEnable && segmentContentType?.id && (
             <TabItem
@@ -770,7 +520,31 @@ const CreateSegment: FC<CreateSegmentType> = ({
             tabLabelString='Basic configuration'
             tabLabel={'Basic configuration'}
           >
-            <div className={className || 'my-3 mx-4'}>{Tab1}</div>
+            <div className={className || 'my-3 mx-4'}>
+              <CreateSegmentRulesTabForm
+                save={save}
+                condensed={condensed}
+                segmentsLimitAlert={segmentsLimitAlert}
+                name={name}
+                setName={setName}
+                setValueChanged={setValueChanged}
+                description={description}
+                setDescription={setDescription}
+                identity={identity}
+                readOnly={readOnly}
+                showDescriptions={showDescriptions}
+                setShowDescriptions={setShowDescriptions}
+                allWarnings={allWarnings}
+                rulesEl={rulesEl}
+                error={error}
+                isEdit={isEdit}
+                segment={segment}
+                isSaving={isSaving}
+                isValid={isValid}
+                isLimitReached={isLimitReached}
+                onCancel={onCancel}
+              />
+            </div>
           </TabItem>
           <TabItem
             tabLabelString='Custom Fields'
@@ -782,7 +556,31 @@ const CreateSegment: FC<CreateSegmentType> = ({
           </TabItem>
         </Tabs>
       ) : (
-        <div className={className || 'my-3 mx-4'}>{Tab1}</div>
+        <div className={className || 'my-3 mx-4'}>
+          <CreateSegmentRulesTabForm
+            save={save}
+            condensed={condensed}
+            segmentsLimitAlert={segmentsLimitAlert}
+            name={name}
+            setName={setName}
+            setValueChanged={setValueChanged}
+            description={description}
+            setDescription={setDescription}
+            identity={identity}
+            readOnly={readOnly}
+            showDescriptions={showDescriptions}
+            setShowDescriptions={setShowDescriptions}
+            allWarnings={allWarnings}
+            rulesEl={rulesEl}
+            error={error}
+            isEdit={isEdit}
+            segment={segment}
+            isSaving={isSaving}
+            isValid={isValid}
+            isLimitReached={isLimitReached}
+            onCancel={onCancel}
+          />
+        </div>
       )}
     </>
   )
diff --git a/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
new file mode 100644
index 000000000000..08be998643a6
--- /dev/null
+++ b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import InfoMessage from 'components/InfoMessage'
+import Input from 'components/base/forms/Input'
+import InputGroup from 'components/base/forms/InputGroup'
+import Switch from 'components/Switch'
+import Button from 'components/base/forms/Button'
+import Format from 'common/utils/format'
+import Utils from 'common/utils/utils'
+import Constants from 'common/constants'
+import JSONReference from 'components/JSONReference'
+import ErrorMessage from 'components/ErrorMessage'
+import { Segment } from 'common/types/responses'
+
+type DefaultSegmentType = Omit<Segment, 'id' | 'project' | 'uuid'> & {
+  id?: number
+  uuid?: string
+  project?: number
+}
+
+interface CreateSegmentRulesTabFormProps {
+  save: (e: React.FormEvent<HTMLFormElement>) => void
+  condensed?: boolean
+  segmentsLimitAlert: { percentage: number }
+  name: string
+  setName: (name: string) => void
+  setValueChanged: (value: boolean) => void
+  description: string
+  setDescription: (description: string) => void
+  identity?: boolean
+  readOnly?: boolean
+  showDescriptions: boolean
+  setShowDescriptions: (show: boolean) => void
+  allWarnings: string[]
+  rulesEl: React.ReactNode
+  error: string
+  isEdit: boolean
+  segment: Segment | DefaultSegmentType
+  isSaving: boolean
+  isValid: boolean
+  isLimitReached: boolean
+  onCancel?: () => void
+}
+
+const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
+  allWarnings,
+  condensed,
+  description,
+  error,
+  identity,
+  isEdit,
+  isLimitReached,
+  isSaving,
+  isValid,
+  name,
+  onCancel,
+  readOnly,
+  rulesEl,
+  save,
+  segment,
+  segmentsLimitAlert,
+  setDescription,
+  setName,
+  setShowDescriptions,
+  setValueChanged,
+  showDescriptions,
+}) => {
+  const SEGMENT_ID_MAXLENGTH = Constants.forms.maxLength.SEGMENT_ID
+  return (
+    <form id='create-segment-modal' onSubmit={save}>
+      {!condensed && (
+        <div className='mt-3'>
+          <InfoMessage collapseId={'value-type-conversions'}>
+            Learn more about rule and trait value type conversions{' '}
+            <a href='https://docs.flagsmith.com/basic-features/segments#rule-typing'>
+              here
+            </a>
+            .
+          </InfoMessage>
+          {segmentsLimitAlert.percentage &&
+            Utils.displayLimitAlert('segments', segmentsLimitAlert.percentage)}
+        </div>
+      )}
+
+      <div className='mb-3'>
+        <label htmlFor='segmentID'>Name*</label>
+        <Flex>
+          <Input
+            data-test='segmentID'
+            name='id'
+            id='segmentID'
+            maxLength={SEGMENT_ID_MAXLENGTH}
+            value={name}
+            onChange={(e: InputEvent) => {
+              setValueChanged(true)
+              setName(
+                Format.enumeration
+                  .set(Utils.safeParseEventValue(e))
+                  .toLowerCase(),
+              )
+            }}
+            isValid={name && name.length}
+            type='text'
+            placeholder='E.g. power_users'
+          />
+        </Flex>
+      </div>
+      {!condensed && (
+        <InputGroup
+          className='mb-3'
+          value={description}
+          inputProps={{
+            className: 'full-width',
+            name: 'featureDesc',
+            readOnly: !!identity || readOnly,
+          }}
+          onChange={(e: InputEvent) => {
+            setValueChanged(true)
+            setDescription(Utils.safeParseEventValue(e))
+          }}
+          isValid={name && name.length}
+          type='text'
+          title='Description'
+          placeholder="e.g. 'People who have spent over $100' "
+        />
+      )}
+
+      <div className='form-group '>
+        <Row className='mb-3'>
+          <Switch
+            checked={showDescriptions}
+            onChange={() => {
+              setShowDescriptions(!showDescriptions)
+            }}
+            className={'ml-0'}
+          />
+          <span
+            style={{ fontWeight: 'normal', marginLeft: '12px' }}
+            className='mb-0 fs-small text-dark'
+          >
+            Show condition descriptions
+          </span>
+        </Row>
+        <Flex className='mb-3'>
+          <label className='cols-sm-2 control-label mb-1'>
+            Include users when all of the following rules apply:
+          </label>
+          <span className='fs-caption text-faint'>
+            Note: Trait names are case sensitive
+          </span>
+        </Flex>
+        {allWarnings?.map((warning, i) => (
+          <InfoMessage key={i}>
+            <div dangerouslySetInnerHTML={{ __html: warning }} />
+          </InfoMessage>
+        ))}
+        {rulesEl}
+      </div>
+
+      <ErrorMessage error={error} />
+      {isEdit && <JSONReference title={'Segment'} json={segment} />}
+      {readOnly ? (
+        <div className='text-right'>
+          <Tooltip
+            title={
+              <Button
+                disabled
+                data-test='show-create-feature-btn'
+                id='show-create-feature-btn'
+              >
+                Update Segment
+              </Button>
+            }
+            place='left'
+          >
+            {Constants.projectPermissions('Admin')}
+          </Tooltip>
+        </div>
+      ) : (
+        <div className='text-right' style={{ marginTop: '32px' }}>
+          <Row className='justify-content-end'>
+            {condensed && (
+              <Button
+                theme='secondary'
+                type='button'
+                onClick={onCancel}
+                className='mr-2'
+              >
+                Cancel
+              </Button>
+            )}
+            {isEdit ? (
+              <Button
+                type='submit'
+                data-test='update-segment'
+                id='update-feature-btn'
+                disabled={isSaving || !name || !isValid}
+              >
+                {isSaving ? 'Updating' : 'Update Segment'}
+              </Button>
+            ) : (
+              <Button
+                disabled={isSaving || !name || !isValid || isLimitReached}
+                type='submit'
+                data-test='create-segment'
+                id='create-feature-btn'
+              >
+                {isSaving ? 'Creating' : 'Create Segment'}
+              </Button>
+            )}
+          </Row>
+        </div>
+      )}
+    </form>
+  )
+}
+
+export default CreateSegmentRulesTabForm
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
new file mode 100644
index 000000000000..9d9e31a38484
--- /dev/null
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -0,0 +1,161 @@
+import React, { useEffect } from 'react'
+import EnvironmentSelect from 'components/EnvironmentSelect'
+import IdentitySegmentsProvider from 'common/providers/IdentitySegmentsProvider'
+import PanelSearch from 'components/PanelSearch'
+import InfoMessage from 'components/InfoMessage'
+import InputGroup from 'components/base/forms/InputGroup'
+import Utils from 'common/utils/utils'
+import { Segment } from 'common/types/responses'
+import Icon from 'components/Icon'
+
+interface CreateSegmentUsersTabContentProps {
+  projectId: string | number
+  environmentId: string
+  setEnvironmentId: (environmentId: string) => void
+  identitiesLoading: boolean
+  identities: any
+  page: any
+  setPage: (page: any) => void
+  name: string
+  searchInput: string
+  setSearchInput: (input: string) => void
+}
+
+const CreateSegmentUsersTabContent: React.FC<
+  CreateSegmentUsersTabContentProps
+> = ({
+  environmentId,
+  identities,
+  identitiesLoading,
+  name,
+  page,
+  projectId,
+  searchInput,
+  setEnvironmentId,
+  setPage,
+  setSearchInput,
+}) => {
+  useEffect(() => {
+    console.log({ identities })
+  }, [identities])
+
+  return (
+    <div className='my-4'>
+      <InfoMessage collapseId={'random-identity-sample'}>
+        This is a random sample of Identities who are either in or out of this
+        Segment based on the current Segment rules.
+      </InfoMessage>
+      <div className='mt-2'>
+        <FormGroup>
+          <InputGroup
+            title='Environment'
+            component={
+              <EnvironmentSelect
+                projectId={`${projectId}`}
+                value={environmentId}
+                onChange={(environmentId: string) => {
+                  setEnvironmentId(environmentId)
+                }}
+              />
+            }
+          />
+          <PanelSearch
+            renderSearchWithNoResults
+            id='users-list'
+            title='Segment Users'
+            className='no-pad'
+            isLoading={identitiesLoading}
+            items={identities?.results}
+            paging={identities}
+            showExactFilter
+            nextPage={() => {
+              setPage({
+                number: page.number + 1,
+                pageType: 'NEXT',
+                pages: identities?.last_evaluated_key
+                  ? (page.pages || []).concat([identities?.last_evaluated_key])
+                  : undefined,
+              })
+            }}
+            prevPage={() => {
+              setPage({
+                number: page.number - 1,
+                pageType: 'PREVIOUS',
+                pages: page.pages
+                  ? Utils.removeElementFromArray(
+                      page.pages,
+                      page.pages.length - 1,
+                    )
+                  : undefined,
+              })
+            }}
+            goToPage={(newPage: number) => {
+              setPage({
+                number: newPage,
+                pageType: undefined,
+                pages: undefined,
+              })
+            }}
+            renderRow={(
+              { id, identifier }: { id: string; identifier: string },
+              index: number,
+            ) => (
+              <Row key={id} className='list-item list-item-sm clickable'>
+                <IdentitySegmentsProvider fetch id={id} projectId={projectId}>
+                  {({ segments }: { segments?: Segment[] }) => {
+                    let inSegment = false
+                    if (segments?.find((v) => v.name === name)) {
+                      inSegment = true
+                    }
+                    return (
+                      <Row
+                        space
+                        className='px-3'
+                        key={id}
+                        data-test={`user-item-${index}`}
+                      >
+                        <div className='font-weight-medium'>{identifier}</div>
+                        <Row
+                          className={`font-weight-medium fs-small lh-sm ${
+                            inSegment ? 'text-primary' : 'faint'
+                          }`}
+                        >
+                          {inSegment ? (
+                            <>
+                              <Icon
+                                name='checkmark-circle'
+                                width={20}
+                                fill='#6837FC'
+                              />
+                              <span className='ml-1'>User in segment</span>
+                            </>
+                          ) : (
+                            <>
+                              <Icon
+                                name='minus-circle'
+                                width={20}
+                                fill='#9DA4AE'
+                              />
+                              <span className='ml-1'>Not in segment</span>
+                            </>
+                          )}
+                        </Row>
+                      </Row>
+                    )
+                  }}
+                </IdentitySegmentsProvider>
+              </Row>
+            )}
+            filterRow={() => true}
+            search={searchInput}
+            onChange={(e: InputEvent) => {
+              setSearchInput(Utils.safeParseEventValue(e))
+            }}
+          />
+        </FormGroup>
+      </div>
+    </div>
+  )
+}
+
+export default CreateSegmentUsersTabContent

From 087aca129a921d928fff0ed0716aebd4fa35778a Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Fri, 3 Jan 2025 16:14:31 -0300
Subject: [PATCH 3/6] pull segments when user tab is selected

---
 .../web/components/modals/CreateSegment.tsx   | 37 ++++++++-----------
 .../modals/CreateSegmentUsersTabContent.tsx   |  6 +--
 .../web/components/pages/SegmentsPage.tsx     |  3 +-
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index c3dbb6890184..2247e0206139 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -120,7 +120,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const [description, setDescription] = useState(segment.description)
   const [name, setName] = useState<Segment['name']>(segment.name)
   const [rules, setRules] = useState<Segment['rules']>(segment.rules)
-  const [shouldUpdateIdentities, setShouldUpdateIdentities] = useState(false)
   useEffect(() => {
     if (segment) {
       setRules(segment.rules)
@@ -251,7 +250,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
         resolve(true)
       }
     })
-    return Promise.resolve(true)
   }, [valueChanged, isEdit])
   useEffect(() => {
     setInterceptClose(onClosing)
@@ -276,7 +274,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (createSuccess && createSegmentData) {
       setSegment(createSegmentData)
       onComplete?.(createSegmentData)
-      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [createSuccess])
@@ -284,24 +281,17 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (updateSuccess && updateSegmentData) {
       setSegment(updateSegmentData)
       onComplete?.(updateSegmentData)
-      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [updateSuccess])
 
   useEffect(() => {
-    if (
-      shouldUpdateIdentities &&
-      tab === 2 &&
-      environmentId &&
-      environmentId !== 'ENVIRONMENT_API_KEY'
-    ) {
+    if (tab === 2 && environmentId) {
       identities?.results.forEach((identity) =>
         AppActions.getIdentitySegments(projectId, identity.id),
       )
-      setShouldUpdateIdentities(false)
     }
-  }, [shouldUpdateIdentities, tab, identities, projectId, environmentId])
+  }, [tab, identities, projectId, environmentId])
 
   const operators: Operator[] | null = _operators || Utils.getSegmentOperators()
   if (operators) {
@@ -632,15 +622,20 @@ const LoadingCreateSegment: FC<LoadingCreateSegmentType> = (props) => {
   const isEdge = Utils.getIsEdge()
 
   const { data: identities, isLoading: identitiesLoading } =
-    useGetIdentitiesQuery({
-      environmentId,
-      isEdge,
-      page: page.number,
-      pageType: page.pageType,
-      page_size: 10,
-      pages: page.pages,
-      search,
-    })
+    useGetIdentitiesQuery(
+      {
+        environmentId,
+        isEdge,
+        page: page.number,
+        pageType: page.pageType,
+        page_size: 10,
+        pages: page.pages,
+        search,
+      },
+      {
+        skip: !environmentId,
+      },
+    )
 
   return isLoading ? (
     <div className='text-center'>
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index 9d9e31a38484..79ad7e7a0134 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import EnvironmentSelect from 'components/EnvironmentSelect'
 import IdentitySegmentsProvider from 'common/providers/IdentitySegmentsProvider'
 import PanelSearch from 'components/PanelSearch'
@@ -35,10 +35,6 @@ const CreateSegmentUsersTabContent: React.FC<
   setPage,
   setSearchInput,
 }) => {
-  useEffect(() => {
-    console.log({ identities })
-  }, [identities])
-
   return (
     <div className='my-4'>
       <InfoMessage collapseId={'random-identity-sample'}>
diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx
index 53cef1cfc359..ed348134af2d 100644
--- a/frontend/web/components/pages/SegmentsPage.tsx
+++ b/frontend/web/components/pages/SegmentsPage.tsx
@@ -40,8 +40,7 @@ type SegmentsPageType = {
 
 const SegmentsPage: FC<SegmentsPageType> = (props) => {
   const { projectId } = props.match.params
-  const environmentId =
-    ProjectStore.getEnvironment()?.api_key || 'ENVIRONMENT_API_KEY'
+  const environmentId = ProjectStore.getEnvironment()?.api_key
   const params = Utils.fromParam()
   const id = params.id
   const { search, searchInput, setSearchInput } = useSearchThrottle('')

From 32154df52580ed53ec2d46040b9e61fd952e7d2a Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Fri, 3 Jan 2025 16:21:06 -0300
Subject: [PATCH 4/6] adds enum

---
 frontend/web/components/modals/CreateSegment.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 2247e0206139..2ea601dd04cc 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -75,7 +75,14 @@ type CreateSegmentType = {
   segment?: Segment
 }
 
+enum UserTabs {
+  RULES = 0,
+  FEATURES = 1,
+  USERS = 2,
+}
+
 let _operators: Operator[] | null = null
+
 const CreateSegment: FC<CreateSegmentType> = ({
   className,
   condensed,
@@ -149,7 +156,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
 
   const isSaving = creating || updating
   const [showDescriptions, setShowDescriptions] = useState(false)
-  const [tab, setTab] = useState(0)
+  const [tab, setTab] = useState(UserTabs.RULES)
   const [metadata, setMetadata] = useState<CustomMetadataField[]>(
     segment.metadata,
   )
@@ -286,7 +293,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   }, [updateSuccess])
 
   useEffect(() => {
-    if (tab === 2 && environmentId) {
+    if (tab === UserTabs.USERS && environmentId) {
       identities?.results.forEach((identity) =>
         AppActions.getIdentitySegments(projectId, identity.id),
       )
@@ -425,7 +432,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   return (
     <>
       {isEdit && !condensed ? (
-        <Tabs value={tab} onChange={(tab: number) => setTab(tab)}>
+        <Tabs value={tab} onChange={(tab: UserTabs) => setTab(tab)}>
           <TabItem
             tabLabelString='Rules'
             tabLabel={
@@ -505,7 +512,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
           )}
         </Tabs>
       ) : metadataEnable && segmentContentType?.id ? (
-        <Tabs value={tab} onChange={(tab: number) => setTab(tab)}>
+        <Tabs value={tab} onChange={(tab: UserTabs) => setTab(tab)}>
           <TabItem
             tabLabelString='Basic configuration'
             tabLabel={'Basic configuration'}

From e16ae16a1bdb7e0b9c5608cef828faabbd084a31 Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Wed, 8 Jan 2025 09:18:51 -0300
Subject: [PATCH 5/6] 1. adds refresh button 2. updates user identity list
 after segment update/creation

---
 frontend/web/components/PanelSearch.js          | 11 +++++++++++
 .../web/components/modals/CreateSegment.tsx     | 17 +++++++++--------
 .../modals/CreateSegmentUsersTabContent.tsx     | 11 +++++++++--
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/web/components/PanelSearch.js b/frontend/web/components/PanelSearch.js
index 8d5bd17747f1..9193a8f83544 100644
--- a/frontend/web/components/PanelSearch.js
+++ b/frontend/web/components/PanelSearch.js
@@ -6,6 +6,7 @@ import Icon from './Icon'
 import classNames from 'classnames'
 import { IonIcon } from '@ionic/react'
 import { chevronDown, chevronUp } from 'ionicons/icons'
+import Button from './base/forms/Button'
 const PanelSearch = class extends Component {
   static displayName = 'PanelSearch'
 
@@ -19,6 +20,7 @@ const PanelSearch = class extends Component {
     listClassName: OptionalString,
     nextPage: OptionalFunc,
     noResultsText: OptionalString,
+    onRefresh: OptionalFunc,
     paging: OptionalObject,
     renderNoResults: propTypes.any,
     renderRow: RequiredFunc,
@@ -209,6 +211,15 @@ const PanelSearch = class extends Component {
                   </Popover>
                 </Row>
               )}
+              {this.props.onRefresh && (
+                <Button
+                  theme='text'
+                  size='xSmall'
+                  onClick={() => this.props.onRefresh()}
+                >
+                  <Icon name='refresh' fill='#6837FC' width={16} /> Refresh
+                </Button>
+              )}
               {!!this.props.filterRow && (
                 <Row>
                   <Row onClick={() => this.input.focus()}>
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 2ea601dd04cc..280e7abacec7 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -240,6 +240,13 @@ const CreateSegment: FC<CreateSegmentType> = ({
     }
   }
 
+  const fetchUserIdentityList = () => {
+    if (!environmentId) return
+    identities?.results.forEach((identity) =>
+      AppActions.getIdentitySegments(projectId, identity.id),
+    )
+  }
+
   const [valueChanged, setValueChanged] = useState(false)
   const [metadataValueChanged, setMetadataValueChanged] = useState(false)
   const onClosing = useCallback(() => {
@@ -281,6 +288,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (createSuccess && createSegmentData) {
       setSegment(createSegmentData)
       onComplete?.(createSegmentData)
+      fetchUserIdentityList()
     }
     //eslint-disable-next-line
   }, [createSuccess])
@@ -288,18 +296,11 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (updateSuccess && updateSegmentData) {
       setSegment(updateSegmentData)
       onComplete?.(updateSegmentData)
+      fetchUserIdentityList()
     }
     //eslint-disable-next-line
   }, [updateSuccess])
 
-  useEffect(() => {
-    if (tab === UserTabs.USERS && environmentId) {
-      identities?.results.forEach((identity) =>
-        AppActions.getIdentitySegments(projectId, identity.id),
-      )
-    }
-  }, [tab, identities, projectId, environmentId])
-
   const operators: Operator[] | null = _operators || Utils.getSegmentOperators()
   if (operators) {
     _operators = operators
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index 79ad7e7a0134..6357716dad16 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -5,15 +5,16 @@ import PanelSearch from 'components/PanelSearch'
 import InfoMessage from 'components/InfoMessage'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
-import { Segment } from 'common/types/responses'
+import { Res, Segment } from 'common/types/responses'
 import Icon from 'components/Icon'
+import AppActions from 'common/dispatcher/app-actions'
 
 interface CreateSegmentUsersTabContentProps {
   projectId: string | number
   environmentId: string
   setEnvironmentId: (environmentId: string) => void
   identitiesLoading: boolean
-  identities: any
+  identities: Res['identities']
   page: any
   setPage: (page: any) => void
   name: string
@@ -92,6 +93,12 @@ const CreateSegmentUsersTabContent: React.FC<
                 pages: undefined,
               })
             }}
+            onRefresh={() => {
+              if (!environmentId) return
+              identities?.results.forEach((identity) =>
+                AppActions.getIdentitySegments(projectId, identity.id),
+              )
+            }}
             renderRow={(
               { id, identifier }: { id: string; identifier: string },
               index: number,

From 0b0e28f7192cdb39aa7e83b787ac256a89c7ce17 Mon Sep 17 00:00:00 2001
From: Tiago Fonseca <tiago@tiagopaiva.me>
Date: Wed, 8 Jan 2025 09:37:56 -0300
Subject: [PATCH 6/6] only show refresh when env id exists

---
 .../modals/CreateSegmentUsersTabContent.tsx        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index 6357716dad16..5b10da5e69a8 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -93,12 +93,14 @@ const CreateSegmentUsersTabContent: React.FC<
                 pages: undefined,
               })
             }}
-            onRefresh={() => {
-              if (!environmentId) return
-              identities?.results.forEach((identity) =>
-                AppActions.getIdentitySegments(projectId, identity.id),
-              )
-            }}
+            onRefresh={
+              environmentId
+                ? () =>
+                    identities?.results.forEach((identity) =>
+                      AppActions.getIdentitySegments(projectId, identity.id),
+                    )
+                : undefined
+            }
             renderRow={(
               { id, identifier }: { id: string; identifier: string },
               index: number,