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] 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,