From 7cab19d9d2869bab5c7255f7cc0e5618581f6017 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Thu, 3 Aug 2023 14:34:38 +0200
Subject: [PATCH] #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.
---
 .../common/UpdateButton/UpdateButton.tsx      |  7 ++--
 .../segments/EditSegment/EditSegment.tsx      | 36 +++++++++++++------
 frontend/src/interfaces/uiConfig.ts           |  1 +
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/common/UpdateButton/UpdateButton.tsx b/frontend/src/component/common/UpdateButton/UpdateButton.tsx
index de4db8e6d7..c1270233ad 100644
--- a/frontend/src/component/common/UpdateButton/UpdateButton.tsx
+++ b/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>
     );
 };
diff --git a/frontend/src/component/segments/EditSegment/EditSegment.tsx b/frontend/src/component/segments/EditSegment/EditSegment.tsx
index 37a2a3a1e0..22f65d1c3b 100644
--- a/frontend/src/component/segments/EditSegment/EditSegment.tsx
+++ b/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,17 +83,23 @@ export const EditSegment = ({ modal }: IEditSegmentProps) => {
             e.preventDefault();
             clearErrors();
             try {
-                await updateSegment(segment.id, getSegmentPayload());
-                await refetchSegments();
-                if (projectId) {
-                    navigate(`/projects/${projectId}/settings/segments/`);
+                if (activateSegmentChangeRequests) {
+                    throw new Error(
+                        "You can't add segments to change requests just yet."
+                    );
                 } else {
-                    navigate('/segments/');
+                    await updateSegment(segment.id, getSegmentPayload());
+                    refetchSegments();
+                    if (projectId) {
+                        navigate(`/projects/${projectId}/settings/segments/`);
+                    } else {
+                        navigate('/segments/');
+                    }
+                    setToastData({
+                        title: 'Segment updated',
+                        type: 'success',
+                    });
                 }
-                setToastData({
-                    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>
     );
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 6e46f14795..7c1ed3f843 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -55,6 +55,7 @@ export interface IFlags {
     newProjectLayout?: boolean;
     configurableFeatureTypeLifetimes?: boolean;
     frontendNavigationUpdate?: boolean;
+    segmentChangeRequests?: boolean;
 }
 
 export interface IVersionInfo {