feat: delete segment from CR (#4469)

frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx

@@ -29,11 +29,19 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                 }
             />
 
-            {changeRequest.segments?.map(segment => (
+            {changeRequest.segments?.map(segmentChange => (
                 <SegmentChange
-                    key={segment.payload.id}
-                    segmentChange={segment}
+                    key={segmentChange.payload.id}
+                    segmentChange={segmentChange}
                     onNavigate={onNavigate}
+                    actions={
+                        <ChangeActions
+                            changeRequest={changeRequest}
+                            feature={'Unused'}
+                            change={segmentChange}
+                            onRefetch={onRefetch}
+                        />
+                    }
                 />
             ))}
             <ConditionallyRender
@@ -55,7 +63,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                     {feature.changes.map((change, index) => (
                         <FeatureChange
                             key={index}
-                            discard={
+                            actions={
                                 <ChangeActions
                                     changeRequest={changeRequest}
                                     feature={feature.name}
@@ -71,7 +79,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                     ))}
                     {feature.defaultChange ? (
                         <FeatureChange
-                            discard={
+                            actions={
                                 <Typography
                                     variant="body2"
                                     color="text.secondary"

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx

@@ -1,17 +1,17 @@
 import React, { FC, useState } from 'react';
 import {
-    IFeatureChange,
     IChangeRequest,
     IChangeRequestAddStrategy,
     IChangeRequestUpdateStrategy,
-} from '../../../changeRequest.types';
+    IChange,
+} from 'component/changeRequest/changeRequest.types';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
-import { changesCount } from '../../../changesCount';
+import { changesCount } from 'component/changeRequest/changesCount';
 import {
     IconButton,
     ListItemIcon,
@@ -26,10 +26,7 @@ import {
 import { Delete, Edit, MoreVert } from '@mui/icons-material';
 import { EditChange } from './EditChange';
 
-const useShowActions = (
-    changeRequest: IChangeRequest,
-    change: IFeatureChange
-) => {
+const useShowActions = (changeRequest: IChangeRequest, change: IChange) => {
     const { isChangeRequestConfigured } = useChangeRequestsEnabled(
         changeRequest.project
     );
@@ -60,7 +57,7 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
 export const ChangeActions: FC<{
     changeRequest: IChangeRequest;
     feature: string;
-    change: IFeatureChange;
+    change: IChange;
     onRefetch?: () => void;
 }> = ({ changeRequest, feature, change, onRefetch }) => {
     const { showDiscard, showEdit } = useShowActions(changeRequest, change);

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx

@@ -40,7 +40,7 @@ interface IEnvironmentStrategyExecutionOrderProps {
     project: string;
     environment: string;
     change: IChangeRequestReorderStrategy;
-    discard?: ReactNode;
+    actions?: ReactNode;
 }
 
 export const EnvironmentStrategyExecutionOrder = ({
@@ -48,7 +48,7 @@ export const EnvironmentStrategyExecutionOrder = ({
     environment,
     change,
     project,
-    discard,
+    actions,
 }: IEnvironmentStrategyExecutionOrderProps) => {
     const { feature: featureData } = useFeature(project, feature);
     const featureEnvironment = featureData.environments.find(
@@ -96,7 +96,7 @@ export const EnvironmentStrategyExecutionOrder = ({
                 >
                     Updating strategy execution order to:
                 </TooltipLink>
-                {discard}
+                {actions}
             </StyledChangeHeader>
             <StyledStrategyExecutionWrapper>
                 {updatedStrategies.map((strategy, index) => (

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/FeatureChange.tsx

@@ -55,12 +55,12 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
 }));
 
 export const FeatureChange: FC<{
-    discard: ReactNode;
+    actions: ReactNode;
     index: number;
     changeRequest: IChangeRequest;
     change: IFeatureChange;
     feature: IChangeRequestFeature;
-}> = ({ index, change, feature, changeRequest, discard }) => {
+}> = ({ index, change, feature, changeRequest, actions }) => {
     const lastIndex = feature.defaultChange
         ? feature.changes.length + 1
         : feature.changes.length;
@@ -87,7 +87,7 @@ export const FeatureChange: FC<{
                 {change.action === 'updateEnabled' && (
                     <ToggleStatusChange
                         enabled={change.payload.enabled}
-                        discard={discard}
+                        actions={actions}
                     />
                 )}
 
@@ -95,7 +95,7 @@ export const FeatureChange: FC<{
                 change.action === 'deleteStrategy' ||
                 change.action === 'updateStrategy' ? (
                     <StrategyChange
-                        discard={discard}
+                        actions={actions}
                         change={change}
                         featureName={feature.name}
                         environmentName={changeRequest.environment}
@@ -108,7 +108,7 @@ export const FeatureChange: FC<{
                         project={changeRequest.project}
                         environment={changeRequest.environment}
                         change={change}
-                        discard={discard}
+                        actions={actions}
                     />
                 )}
                 {change.action === 'reorderStrategy' && (
@@ -117,7 +117,7 @@ export const FeatureChange: FC<{
                         project={changeRequest.project}
                         environment={changeRequest.environment}
                         change={change}
-                        discard={discard}
+                        actions={actions}
                     />
                 )}
             </Box>

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Box, Card, Typography, Link } from '@mui/material';
 import { ISegmentChange } from '../../../changeRequest.types';
@@ -8,11 +8,13 @@ import { ConflictWarning } from './ConflictWarning';
 interface ISegmentChangeProps {
     segmentChange: ISegmentChange;
     onNavigate?: () => void;
+    actions: ReactNode;
 }
 
 export const SegmentChange: FC<ISegmentChangeProps> = ({
     segmentChange,
     onNavigate,
+    actions,
 }) => (
     <Card
         elevation={0}
@@ -64,6 +66,6 @@ export const SegmentChange: FC<ISegmentChangeProps> = ({
                 </Link>
             </Box>
         </Box>
-        <SegmentChangeDetails change={segmentChange} />
+        <SegmentChangeDetails change={segmentChange} actions={actions} />
     </Card>
 );

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx

@@ -46,9 +46,9 @@ const SegmentContainer = styled(Box, {
 }));
 
 export const SegmentChangeDetails: VFC<{
-    discard?: ReactNode;
+    actions?: ReactNode;
     change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
-}> = ({ discard, change }) => {
+}> = ({ actions, change }) => {
     const { segment: currentSegment } = useSegment(change.payload.id);
 
     return (
@@ -70,7 +70,7 @@ export const SegmentChangeDetails: VFC<{
                             />
                         </SegmentTooltipLink>
                     </ChangeItemInfo>
-                    <div>{discard}</div>
+                    <div>{actions}</div>
                 </ChangeItemWrapper>
             )}
             {change.action === 'updateSegment' && (
@@ -85,7 +85,7 @@ export const SegmentChangeDetails: VFC<{
                                 />
                             </SegmentTooltipLink>
                         </ChangeItemInfo>
-                        <div>{discard}</div>
+                        <div>{actions}</div>
                     </ChangeItemCreateEditWrapper>
                 </>
             )}

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -101,7 +101,7 @@ const EditHeader: VFC<{
 };
 
 export const StrategyChange: VFC<{
-    discard?: ReactNode;
+    actions?: ReactNode;
     change:
         | IChangeRequestAddStrategy
         | IChangeRequestDeleteStrategy
@@ -109,7 +109,7 @@ export const StrategyChange: VFC<{
     environmentName: string;
     featureName: string;
     projectId: string;
-}> = ({ discard, change, featureName, environmentName, projectId }) => {
+}> = ({ actions, change, featureName, environmentName, projectId }) => {
     const currentStrategy = useCurrentStrategy(
         change,
         projectId,
@@ -145,7 +145,7 @@ export const StrategyChange: VFC<{
                                 />
                             </div>
                         </ChangeItemInfo>
-                        <div>{discard}</div>
+                        <div>{actions}</div>
                     </ChangeItemCreateEditWrapper>
                     <StrategyExecution strategy={change.payload} />
                 </>
@@ -169,7 +169,7 @@ export const StrategyChange: VFC<{
                             </StrategyTooltipLink>
                         )}
                     </ChangeItemInfo>
-                    <div>{discard}</div>
+                    <div>{actions}</div>
                 </ChangeItemWrapper>
             )}
             {change.action === 'updateStrategy' && (
@@ -190,7 +190,7 @@ export const StrategyChange: VFC<{
                                 />
                             </StrategyTooltipLink>
                         </ChangeItemInfo>
-                        <div>{discard}</div>
+                        <div>{actions}</div>
                     </ChangeItemCreateEditWrapper>
                     <ConditionallyRender
                         condition={

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ToggleStatusChange.tsx

@@ -5,12 +5,12 @@ import { ChangeItemWrapper } from './StrategyChange';
 
 interface IToggleStatusChange {
     enabled: boolean;
-    discard?: ReactNode;
+    actions?: ReactNode;
 }
 
 export const ToggleStatusChange: VFC<IToggleStatusChange> = ({
     enabled,
-    discard,
+    actions,
 }) => {
     return (
         <ChangeItemWrapper>
@@ -23,7 +23,7 @@ export const ToggleStatusChange: VFC<IToggleStatusChange> = ({
                     {enabled ? ' Enabled' : 'Disabled'}
                 </Badge>
             </Box>
-            {discard}
+            {actions}
         </ChangeItemWrapper>
     );
 };

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/VariantPatch/VariantPatch.tsx

@@ -35,7 +35,7 @@ interface IVariantPatchProps {
     project: string;
     environment: string;
     change: IChangeRequestPatchVariant;
-    discard?: ReactNode;
+    actions?: ReactNode;
 }
 
 export const VariantPatch = ({
@@ -43,7 +43,7 @@ export const VariantPatch = ({
     project,
     environment,
     change,
-    discard,
+    actions,
 }: IVariantPatchProps) => {
     const { feature: featureData } = useFeature(project, feature);
 
@@ -68,7 +68,7 @@ export const VariantPatch = ({
                 >
                     Updating variants to:
                 </TooltipLink>
-                {discard}
+                {actions}
             </StyledChangeHeader>
             <EnvironmentVariantsTable variants={change.payload.variants} />
             <ConditionallyRender

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -110,6 +110,7 @@ export interface IChangeRequestReorderStrategy
 }
 
 export interface IChangeRequestUpdateSegment {
+    id: number;
     action: 'updateSegment';
     conflict?: string;
     name: string;
@@ -123,6 +124,7 @@ export interface IChangeRequestUpdateSegment {
 }
 
 export interface IChangeRequestDeleteSegment {
+    id: number;
     action: 'deleteSegment';
     conflict?: string;
     name: string;