#4209: add 'add to draft' button for segments. (#4400)

Note: it doesn't work yet! It just throws an error.

This PR adds some logic to conditionally display "Add to draft" button
for segments if the segment is part of a project that has change
requests enabled and the flag is enabled.

Also adds a flag (`segmentChangeRequests`) to the frontend.

Holding off on actually adding the change to a draft until the API/orval
has been updated with the most recent changes.

frontend/src/component/common/UpdateButton/UpdateButton.tsx

@@ -2,10 +2,13 @@ import PermissionButton, {
     IPermissionButtonProps,
 } from 'component/common/PermissionButton/PermissionButton';
 
-export const UpdateButton = ({ ...rest }: IPermissionButtonProps) => {
+export const UpdateButton = ({
+    children = 'Save',
+    ...rest
+}: IPermissionButtonProps) => {
     return (
         <PermissionButton type="submit" {...rest}>
-            Save
+            {children}
         </PermissionButton>
     );
 };

frontend/src/component/segments/EditSegment/EditSegment.tsx

@@ -19,6 +19,7 @@ import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValues
 import { SEGMENT_SAVE_BTN_ID } from 'utils/testIds';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 
 interface IEditSegmentProps {
     modal?: boolean;
@@ -57,6 +58,13 @@ export const EditSegment = ({ modal }: IEditSegmentProps) => {
     const segmentValuesCount = useSegmentValuesCount(constraints);
     const { segmentValuesLimit } = useSegmentLimits();
 
+    const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
+        segment?.project || ''
+    );
+    const activateSegmentChangeRequests =
+        uiConfig?.flags?.segmentChangeRequests &&
+        isChangeRequestConfiguredInAnyEnv();
+
     const overSegmentValuesLimit: boolean = Boolean(
         segmentValuesLimit && segmentValuesCount > segmentValuesLimit
     );
@@ -75,8 +83,13 @@ export const EditSegment = ({ modal }: IEditSegmentProps) => {
             e.preventDefault();
             clearErrors();
             try {
+                if (activateSegmentChangeRequests) {
+                    throw new Error(
+                        "You can't add segments to change requests just yet."
+                    );
+                } else {
                     await updateSegment(segment.id, getSegmentPayload());
-                await refetchSegments();
+                    refetchSegments();
                     if (projectId) {
                         navigate(`/projects/${projectId}/settings/segments/`);
                     } else {
@@ -86,6 +99,7 @@ export const EditSegment = ({ modal }: IEditSegmentProps) => {
                         title: 'Segment updated',
                         type: 'success',
                     });
+                }
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));
             }
@@ -120,7 +134,9 @@ export const EditSegment = ({ modal }: IEditSegmentProps) => {
                     permission={UPDATE_SEGMENT}
                     disabled={!hasValidConstraints || overSegmentValuesLimit}
                     data-testid={SEGMENT_SAVE_BTN_ID}
-                />
+                >
+                    {activateSegmentChangeRequests ? 'Add to draft' : 'Save'}
+                </UpdateButton>
             </SegmentForm>
         </FormTemplate>
     );

frontend/src/interfaces/uiConfig.ts

@@ -55,6 +55,7 @@ export interface IFlags {
     newProjectLayout?: boolean;
     configurableFeatureTypeLifetimes?: boolean;
     frontendNavigationUpdate?: boolean;
+    segmentChangeRequests?: boolean;
 }
 
 export interface IVersionInfo {