feat: Keep segment modal open on create / edit, add segment name to m…

…odal (#4109)
Flagsmith · Jun 13, 2024 · 1daedc2 · 1daedc2
1 parent d4f948d
commit 1daedc2
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/frontend/e2e/helpers.cafe.ts b/frontend/e2e/helpers.cafe.ts
@@ -457,6 +457,7 @@ export const createSegment = async (
   await click(byId('create-segment'))
   await waitForElementVisible(byId(`segment-${index}-name`))
   await assertTextContent(byId(`segment-${index}-name`), id)
+  await closeModal()
 }
 
 export const waitAndRefresh = async (waitFor = 3000) => {

diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
@@ -649,7 +649,6 @@ class TheComponent extends Component {
                   <CreateSegmentModal
                     className='my-2'
                     segment={this.state.segmentEditId}
-                    isEdit
                     condensed
                     onComplete={() => {
                       this.setState({

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
@@ -52,7 +52,7 @@ import AddMetadataToEntity, {
   CustomMetadataField,
 } from 'components/metadata/AddMetadataToEntity'
 import { useGetSupportedContentTypeQuery } from 'common/services/useSupportedContentType'
-import { setInterceptClose } from './base/ModalDefault'
+import { setInterceptClose, setModalTitle } from './base/ModalDefault'
 
 type PageType = {
   number: number
@@ -90,7 +90,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
   identities,
   identitiesLoading,
   identity,
-  isEdit,
   onCancel,
   onComplete,
   page,
@@ -125,7 +124,8 @@ const CreateSegment: FC<CreateSegmentType> = ({
       },
     ],
   }
-  const segment = _segment || defaultSegment
+  const [segment, setSegment] = useState(_segment || defaultSegment)
+  const isEdit = !!segment.id
   const [
     createSegment,
     {
@@ -273,6 +273,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   }, [])
   useEffect(() => {
     if (createSuccess && createSegmentData) {
+      setSegment(createSegmentData)
       onComplete?.(createSegmentData)
     }
     //eslint-disable-next-line
@@ -746,7 +747,8 @@ type LoadingCreateSegmentType = {
   environmentId: string
   isEdit?: boolean
   readOnly?: boolean
-  onComplete?: () => void
+  onSegmentRetrieved?: (segment: Segment) => void
+  onComplete?: (segment: Segment) => void
   projectId: string
   segment?: number
 }
@@ -778,6 +780,11 @@ const LoadingCreateSegment: FC<LoadingCreateSegmentType> = (props) => {
     },
   )
 
+  useEffect(() => {
+    if (segmentData) {
+      props.onSegmentRetrieved?.(segmentData)
+    }
+  }, [segmentData])
   const isEdge = Utils.getIsEdge()
 
   const { data: identities, isLoading: identitiesLoading } =

diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx
@@ -23,6 +23,7 @@ import Icon from 'components/Icon'
 import PageTitle from 'components/PageTitle'
 import Switch from 'components/Switch'
 import Panel from 'components/base/grid/Panel'
+import { setModalTitle } from 'components/modals/base/ModalDefault'
 
 const CodeHelp = require('../../components/CodeHelp')
 type SegmentsPageType = {
@@ -91,10 +92,10 @@ const SegmentsPage: FC<SegmentsPageType> = (props) => {
     openModal(
       'New Segment',
       <CreateSegmentModal
-        onComplete={() => {
+        onComplete={(segment) => {
           //todo: remove when CreateSegment uses hooks
-          closeModal()
-          refetch()
+          setModalTitle(`Edit Segment: ${segment.name}`)
+          toast('Created segment')
         }}
         environmentId={environmentId}
         projectId={projectId}
@@ -124,11 +125,13 @@ const SegmentsPage: FC<SegmentsPageType> = (props) => {
       `Edit Segment`,
       <CreateSegmentModal
         segment={id}
-        isEdit
+        onSegmentRetrieved={(segment) =>
+          setModalTitle(`Edit Segment: ${segment.name}`)
+        }
         readOnly={readOnly}
         onComplete={() => {
           refetch()
-          closeModal()
+          toast('Updated Segment')
         }}
         environmentId={environmentId}
         projectId={projectId}

diff --git a/frontend/web/components/pages/UserPage.js b/frontend/web/components/pages/UserPage.js
@@ -143,7 +143,6 @@ const UserPage = class extends Component {
       <CreateSegmentModal
         segment={segment.id}
         readOnly
-        isEdit
         environmentId={this.props.match.params.environmentId}
         projectId={this.props.match.params.projectId}
       />,