Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add create segment error handling #3413

Merged
merged 1 commit into from
Feb 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions frontend/web/components/ErrorMessage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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}
Expand All @@ -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'
Expand Down
13 changes: 4 additions & 9 deletions frontend/web/components/modals/CreateSegment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
createSegment,
{
data: createSegmentData,
isError: createError,
error: createError,
isLoading: creating,
isSuccess: createSuccess,
},
Expand All @@ -119,7 +119,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
editSegment,
{
data: updateSegmentData,
isError: updateError,
error: updateError,
isLoading: updating,
isSuccess: updateSuccess,
},
Expand All @@ -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()

Expand Down Expand Up @@ -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'>
Expand Down
Loading