chore: Change feature id to name/id, allow segment name to be editable (

#3895)
Flagsmith · May 8, 2024 · d7db267 · d7db267
1 parent efd3714
commit d7db267
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
@@ -836,7 +836,9 @@ const CreateFlag = class extends Component {
                   <Tooltip
                     title={
                       <Row>
-                        <span className={'mr-1'}>{isEdit ? 'ID' : 'ID*'}</span>
+                        <span className={'mr-1'}>
+                          {isEdit ? 'ID / Name' : 'ID / Name*'}
+                        </span>
                         <Icon name='info-outlined' />
                       </Row>
                     }

diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
@@ -345,32 +345,28 @@ const CreateSegment: FC<CreateSegmentType> = ({
         </div>
       )}
 
-      {!isEdit && (
-        <div className='mb-3'>
-          <label htmlFor='segmentID'>ID</label>
-          <Flex>
-            <Input
-              data-test='segmentID'
-              name='id'
-              id='segmentID'
-              readOnly={isEdit}
-              maxLength={SEGMENT_ID_MAXLENGTH}
-              value={name}
-              onChange={(e: InputEvent) =>
-                setName(
-                  Format.enumeration
-                    .set(Utils.safeParseEventValue(e))
-                    .toLowerCase(),
-                )
-              }
-              isValid={name && name.length}
-              type='text'
-              title={isEdit ? 'ID' : 'ID*'}
-              placeholder='E.g. power_users'
-            />
-          </Flex>
-        </div>
-      )}
+      <div className='mb-3'>
+        <label htmlFor='segmentID'>Name*</label>
+        <Flex>
+          <Input
+            data-test='segmentID'
+            name='id'
+            id='segmentID'
+            maxLength={SEGMENT_ID_MAXLENGTH}
+            value={name}
+            onChange={(e: InputEvent) =>
+              setName(
+                Format.enumeration
+                  .set(Utils.safeParseEventValue(e))
+                  .toLowerCase(),
+              )
+            }
+            isValid={name && name.length}
+            type='text'
+            placeholder='E.g. power_users'
+          />
+        </Flex>
+      </div>
       {!condensed && (
         <InputGroup
           className='mb-3'