diff --git a/frontend/e2e/helpers.cafe.ts b/frontend/e2e/helpers.cafe.ts index ca0557311cd5..3512feb57f0c 100644 --- a/frontend/e2e/helpers.cafe.ts +++ b/frontend/e2e/helpers.cafe.ts @@ -342,6 +342,7 @@ export const createSegment = async ( rules?: Rule[], ) => { await click(byId('show-create-segment-btn')) + await click(byId('add-rule')) await setText(byId('segmentID'), id) for (let x = 0; x < rules.length; x++) { const rule = rules[x] diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx index 029770232d2d..8ea9c7cd1dc9 100644 --- a/frontend/web/components/modals/CreateSegment.tsx +++ b/frontend/web/components/modals/CreateSegment.tsx @@ -38,6 +38,7 @@ import ErrorMessage from 'components/ErrorMessage' import ProjectStore from 'common/stores/project-store' import Icon from 'components/Icon' import Permission from 'common/providers/Permission' +import classNames from 'classnames' type PageType = { number: number @@ -99,13 +100,7 @@ const CreateSegment: FC = ({ rules: [ { conditions: [], - rules: [ - { - conditions: [{ ...Constants.defaultRule }], - rules: [], - type: 'ANY', - }, - ], + rules: [], type: 'ALL', }, ], @@ -268,31 +263,38 @@ const CreateSegment: FC = ({
- {rules[0].rules.map((rule, i) => { - if (rule.delete) { - return null - } - return ( -
- {i > 0 && ( - + {rules[0].rules + ?.filter((v) => !v?.delete) + .map((rule, i) => { + return ( +
+ - {rule.type === 'ANY' ? 'AND' : 'AND NOT'} + {Format.camelCase( + `${i > 0 ? 'And ' : ''}${ + rule.type === 'ANY' + ? 'Any of the following' + : 'None of the following' + }`, + )} - )} - removeRule(0, i)} - onChange={(v: SegmentRule) => updateRule(0, i, v)} - /> -
- ) - })} + removeRule(0, i)} + onChange={(v: SegmentRule) => updateRule(0, i, v)} + /> +
+ ) + })}
{!readOnly && ( @@ -303,34 +305,15 @@ const CreateSegment: FC = ({
)} {!readOnly && Utils.getFlagsmithHasFeature('not_operator') && ( -
addRule('NOT')} className='text-center'> - {Utils.getFlagsmithValue('not_operator') ? ( - - Add AND NOT Condition - - } - > - {`Note: If using clientside evaluations on your SDK, this feature is only supported by the following SDKs: ${JSON.parse( - Utils.getFlagsmithValue('not_operator'), - )}`} - - ) : ( - - )} +
addRule('NONE')} className='text-center'> +
)} @@ -419,7 +402,7 @@ const CreateSegment: FC = ({ Note: Trait names are case sensitive diff --git a/frontend/web/styles/project/_forms.scss b/frontend/web/styles/project/_forms.scss index 0483c18579a8..6cbbd8109a94 100644 --- a/frontend/web/styles/project/_forms.scss +++ b/frontend/web/styles/project/_forms.scss @@ -25,7 +25,6 @@ } .and-divider { color: $text-icon-light-grey; - text-transform: uppercase; font-weight: 400; font-size: $font-caption; line-height: $line-height-xsm;