fix: Add create segment error handling (#3413)

Flagsmith · Feb 13, 2024 · 932c62d · 932c62d
1 parent 7b8c8dc
commit 932c62d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react'
 import Icon from './Icon'
 import Button from './base/forms/Button'
+import Format from 'common/utils/format'
 
 export default class ErrorMessage extends PureComponent {
   static displayName = 'ErrorMessage'
@@ -10,6 +11,7 @@ export default class ErrorMessage extends PureComponent {
     const errorMessageClassName = `alert alert-danger ${
       this.props.errorMessageClass || 'flex-1 align-items-center'
     }`
+    const error = this.props.error?.data || this.props.error
     return this.props.error ? (
       <div
         className={errorMessageClassName}
@@ -18,11 +20,22 @@ export default class ErrorMessage extends PureComponent {
         <span className='icon-alert'>
           <Icon name='close-circle' />
         </span>
-        {typeof this.props.error === 'object'
-          ? Object.keys(this.props.error)
-              .map((v) => `${v}: ${this.props.error[v]}`)
-              .join('\n')
-          : this.props.error}
+        {typeof error === 'object' ? (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: Object.keys(error)
+                .map(
+                  (v) =>
+                    `${Format.camelCase(Format.enumeration.get(v))}: ${
+                      error[v]
+                    }`,
+                )
+                .join('<br/>'),
+            }}
+          />
+        ) : (
+          error
+        )}
         {this.props.enabledButton && (
           <Button
             className='btn ml-3'

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
@@ -110,7 +110,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
     createSegment,
     {
       data: createSegmentData,
-      isError: createError,
+      error: createError,
       isLoading: creating,
       isSuccess: createSuccess,
     },
@@ -119,7 +119,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
     editSegment,
     {
       data: updateSegmentData,
-      isError: updateError,
+      error: updateError,
       isLoading: updating,
       isSuccess: updateSuccess,
     },
@@ -132,7 +132,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const [rules, setRules] = useState<Segment['rules']>(segment.rules)
   const [tab, setTab] = useState(0)
 
-  const isError = createError || updateError
+  const error = createError || updateError
   const isLimitReached =
     ProjectStore.getTotalSegments() >= ProjectStore.getMaxSegmentsAllowed()
 
@@ -416,12 +416,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
         {rulesEl}
       </div>
 
-      {isError && (
-        <ErrorMessage
-          error='Error creating segment, please ensure you have entered a trait and
-          value for each rule.'
-        />
-      )}
+      <ErrorMessage error={error} />
       {isEdit && <JSONReference title={'Segment'} json={segment} />}
       {readOnly ? (
         <div className='text-right'>