fix: Adjust segment not rule (#3267)

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]

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<CreateSegmentType> = ({
     rules: [
       {
         conditions: [],
-        rules: [
-          {
-            conditions: [{ ...Constants.defaultRule }],
-            rules: [],
-            type: 'ANY',
-          },
-        ],
+        rules: [],
         type: 'ALL',
       },
     ],
@@ -268,31 +263,38 @@ const CreateSegment: FC<CreateSegmentType> = ({
     <div className='overflow-visible'>
       <div>
         <div className='mb-4'>
-          {rules[0].rules.map((rule, i) => {
-            if (rule.delete) {
-              return null
-            }
-            return (
-              <div key={i}>
-                {i > 0 && (
-                  <Row className='and-divider my-1'>
+          {rules[0].rules
+            ?.filter((v) => !v?.delete)
+            .map((rule, i) => {
+              return (
+                <div key={i}>
+                  <Row
+                    className={classNames('and-divider my-1', {
+                      'text-danger': rule.type !== 'ANY',
+                    })}
+                  >
                     <Flex className='and-divider__line' />
-                    {rule.type === 'ANY' ? 'AND' : 'AND NOT'}
+                    {Format.camelCase(
+                      `${i > 0 ? 'And ' : ''}${
+                        rule.type === 'ANY'
+                          ? 'Any of the following'
+                          : 'None of the following'
+                      }`,
+                    )}
                     <Flex className='and-divider__line' />
                   </Row>
-                )}
-                <Rule
-                  showDescription={showDescriptions}
-                  readOnly={readOnly}
-                  data-test={`rule-${i}`}
-                  rule={rule}
-                  operators={operators}
-                  onRemove={() => removeRule(0, i)}
-                  onChange={(v: SegmentRule) => updateRule(0, i, v)}
-                />
-              </div>
-            )
-          })}
+                  <Rule
+                    showDescription={showDescriptions}
+                    readOnly={readOnly}
+                    data-test={`rule-${i}`}
+                    rule={rule}
+                    operators={operators}
+                    onRemove={() => removeRule(0, i)}
+                    onChange={(v: SegmentRule) => updateRule(0, i, v)}
+                  />
+                </div>
+              )
+            })}
         </div>
         <Row className='justify-content-end'>
           {!readOnly && (
@@ -303,34 +305,15 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           )}
           {!readOnly && Utils.getFlagsmithHasFeature('not_operator') && (
-            <div onClick={() => addRule('NOT')} className='text-center'>
-              {Utils.getFlagsmithValue('not_operator') ? (
-                <Tooltip
-                  title={
-                    <Button
-                      theme='outline'
-                      className='ml-2 btn--outline-danger'
-                      data-test='add-rule'
-                      type='button'
-                    >
-                      Add AND NOT Condition
-                    </Button>
-                  }
-                >
-                  {`Note: If using clientside evaluations on your SDK, this feature is only supported by the following SDKs: ${JSON.parse(
-                    Utils.getFlagsmithValue('not_operator'),
-                  )}`}
-                </Tooltip>
-              ) : (
-                <Button
-                  theme='outline'
-                  className='ml-2 btn--outline-danger'
-                  data-test='add-rule'
-                  type='button'
-                >
-                  Add AND NOT Condition
-                </Button>
-              )}
+            <div onClick={() => addRule('NONE')} className='text-center'>
+              <Button
+                theme='outline'
+                className='ml-2 btn--outline-danger'
+                data-test='add-rule'
+                type='button'
+              >
+                Add AND NOT Condition
+              </Button>
             </div>
           )}
         </Row>
@@ -419,7 +402,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
         </Row>
         <Flex className='mb-3'>
           <label className='cols-sm-2 control-label mb-1'>
-            Include users when the following rules apply:
+            Include users when all of the following rules apply:
           </label>
           <span className='fs-caption text-faint'>
             Note: Trait names are case sensitive

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;