feat: Add default rule for segments (#4095)

Flagsmith · Jun 11, 2024 · c3bf3bf · c3bf3bf
1 parent d6e115e
commit c3bf3bf
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 44 deletions.
diff --git a/frontend/e2e/helpers.cafe.ts b/frontend/e2e/helpers.cafe.ts
@@ -433,7 +433,6 @@ 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
@@ -114,7 +114,13 @@ const CreateSegment: FC<CreateSegmentType> = ({
     rules: [
       {
         conditions: [],
-        rules: [],
+        rules: [
+          {
+            conditions: [{ ...Constants.defaultRule }],
+            rules: [],
+            type: 'ANY',
+          },
+        ],
         type: 'ALL',
       },
     ],
@@ -313,49 +319,51 @@ const CreateSegment: FC<CreateSegmentType> = ({
   }, [operators, rules])
   //Find any non-deleted rules
   const hasNoRules = !rules[0]?.rules?.find((v) => !v.delete)
-
+  const rulesToShow = rules[0].rules.filter((v) => !v.delete)
   const rulesEl = (
     <div className='overflow-visible'>
       <div>
         <div className='mb-4'>
-          {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={() => {
-                      setValueChanged(true)
-                      removeRule(0, i)
-                    }}
-                    onChange={(v: SegmentRule) => {
-                      setValueChanged(true)
-                      updateRule(0, i, v)
-                    }}
-                  />
-                </div>
-              )
-            })}
+          {rules[0].rules.map((rule, i) => {
+            if (rule.delete) {
+              return null
+            }
+            const displayIndex = rulesToShow.indexOf(rule)
+            return (
+              <div key={i}>
+                <Row
+                  className={classNames('and-divider my-1', {
+                    'text-danger': rule.type !== 'ANY',
+                  })}
+                >
+                  <Flex className='and-divider__line' />
+                  {Format.camelCase(
+                    `${displayIndex > 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-${displayIndex}`}
+                  rule={rule}
+                  operators={operators}
+                  onRemove={() => {
+                    setValueChanged(true)
+                    removeRule(0, i)
+                  }}
+                  onChange={(v: SegmentRule) => {
+                    setValueChanged(true)
+                    updateRule(0, i, v)
+                  }}
+                />
+              </div>
+            )
+          })}
         </div>
         {hasNoRules && (
           <InfoMessage>
@@ -457,9 +465,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             style={{ fontWeight: 'normal', marginLeft: '12px' }}
             className='mb-0 fs-small text-dark'
           >
-            {showDescriptions
-              ? 'Hide condition descriptions'
-              : 'Show condition descriptions'}
+            Show condition descriptions
           </span>
         </Row>
         {metadataEnable && segmentContentType?.id && (