From 1258e18638e43ae8d8e1ad29eb360d5cc91cb50e Mon Sep 17 00:00:00 2001
From: kyle-ssg <kyle@solidstategroup.com>
Date: Wed, 10 Jan 2024 14:58:36 +0000
Subject: [PATCH 1/3] Adjust segment not rule

---
 frontend/web/components/modals/CreateSegment.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 029770232d2d..5892eeb383ad 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -303,7 +303,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           )}
           {!readOnly && Utils.getFlagsmithHasFeature('not_operator') && (
-            <div onClick={() => addRule('NOT')} className='text-center'>
+            <div onClick={() => addRule('NONE')} className='text-center'>
               {Utils.getFlagsmithValue('not_operator') ? (
                 <Tooltip
                   title={

From 29e93b96284fd4ee6e121fe32f67683e3d797c7c Mon Sep 17 00:00:00 2001
From: kyle-ssg <kyle@solidstategroup.com>
Date: Wed, 10 Jan 2024 15:56:37 +0000
Subject: [PATCH 2/3] Adjust segment not rule

---
 frontend/e2e/helpers.cafe.ts                  |  1 +
 .../web/components/modals/CreateSegment.tsx   | 68 +++++++------------
 frontend/web/styles/project/_forms.scss       |  1 -
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/frontend/e2e/helpers.cafe.ts b/frontend/e2e/helpers.cafe.ts
index 041af36818cb..bc1fdbfa55a9 100644
--- a/frontend/e2e/helpers.cafe.ts
+++ b/frontend/e2e/helpers.cafe.ts
@@ -340,6 +340,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 5892eeb383ad..09c33589eeb6 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<CreateSegmentType> = ({
     rules: [
       {
         conditions: [],
-        rules: [
-          {
-            conditions: [{ ...Constants.defaultRule }],
-            rules: [],
-            type: 'ANY',
-          },
-        ],
+        rules: [],
         type: 'ALL',
       },
     ],
@@ -274,13 +269,21 @@ const CreateSegment: FC<CreateSegmentType> = ({
             }
             return (
               <div key={i}>
-                {i > 0 && (
-                  <Row className='and-divider my-1'>
-                    <Flex className='and-divider__line' />
-                    {rule.type === 'ANY' ? 'AND' : 'AND NOT'}
-                    <Flex className='and-divider__line' />
-                  </Row>
-                )}
+                <Row
+                  className={classNames('and-divider my-1', {
+                    'text-danger': rule.type !== 'ANY',
+                  })}
+                >
+                  <Flex className='and-divider__line' />
+                  {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}
@@ -304,33 +307,14 @@ const CreateSegment: FC<CreateSegmentType> = ({
           )}
           {!readOnly && Utils.getFlagsmithHasFeature('not_operator') && (
             <div onClick={() => addRule('NONE')} 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>
-              )}
+              <Button
+                theme='outline'
+                className='ml-2 btn--outline-danger'
+                data-test='add-rule'
+                type='button'
+              >
+                Add AND NOT Condition
+              </Button>
             </div>
           )}
         </Row>
@@ -419,7 +403,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
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;

From 54617d9eb518aa20162896a058b89e1d054afdda Mon Sep 17 00:00:00 2001
From: kyle-ssg <kyle@solidstategroup.com>
Date: Thu, 11 Jan 2024 10:19:29 +0000
Subject: [PATCH 3/3] Fix incorrect "AND" wording when deleting rules

---
 .../web/components/modals/CreateSegment.tsx   | 65 +++++++++----------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 09c33589eeb6..8ea9c7cd1dc9 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -263,39 +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}>
-                <Row
-                  className={classNames('and-divider my-1', {
-                    'text-danger': rule.type !== 'ANY',
-                  })}
-                >
-                  <Flex className='and-divider__line' />
-                  {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>
-            )
-          })}
+          {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' />
+                    {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>
+              )
+            })}
         </div>
         <Row className='justify-content-end'>
           {!readOnly && (