feat: adds multiple actions to release pipeline stage (#5767)

Author: tiagoapolo

frontend/common/services/useReleasePipelines.ts

@@ -48,7 +48,9 @@ export const releasePipelinesService = service
         Res['releasePipeline'],
         Req['getReleasePipeline']
       >({
-        providesTags: [{ type: 'ReleasePipelines' }],
+        providesTags: (result, error, { pipelineId }) => [
+          { id: pipelineId, type: 'ReleasePipelines' },
+        ],
         query: (query: Req['getReleasePipeline']) => ({
           url: `projects/${query.projectId}/release-pipelines/${query.pipelineId}/`,
         }),
@@ -91,10 +93,12 @@ export const releasePipelinesService = service
         Res['releasePipeline'],
         Req['updateReleasePipeline']
       >({
-        invalidatesTags: (res) => [
-          { id: 'LIST', type: 'ReleasePipelines' },
-          { id: res?.id, type: 'ReleasePipelines' },
-        ],
+        invalidatesTags: (res) => {
+          return [
+            { id: res?.id, type: 'ReleasePipelines' },
+            { id: 'LIST', type: 'ReleasePipelines' },
+          ]
+        },
         query: (query: Req['updateReleasePipeline']) => ({
           body: {
             description: query.description,

frontend/common/types/requests.ts

@@ -74,9 +74,10 @@ export type RegisterRequest = {
   utm_data?: UtmsType
 }
 
+export type StageActionBody = { enabled: boolean; segment_id?: number }
 export interface StageActionRequest {
-  action_type: StageActionType
-  action_body: { enabled: boolean; segment_id?: number }
+  action_type: StageActionType | ''
+  action_body: StageActionBody
 }
 
 export interface ReleasePipelineRequest {
@@ -90,7 +91,7 @@ export interface UpdateReleasePipelineRequest extends ReleasePipelineRequest {
   id: number
 }
 
-export type PipelineStageRequest = {
+export interface PipelineStageRequest {
   name: string
   environment: number
   order: number

frontend/web/components/release-pipelines/CreatePipelineStage.tsx

@@ -9,14 +9,18 @@ import {
 } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
 import Icon from 'components/Icon'
-import { TIME_UNIT_OPTIONS, TimeUnit, TRIGGER_OPTIONS } from './constants'
-import { StageAction } from 'common/types/responses'
+import {
+  NEW_PIPELINE_STAGE,
+  NEW_PIPELINE_STAGE_ACTION,
+  TIME_UNIT_OPTIONS,
+  TimeUnit,
+  TRIGGER_OPTIONS,
+} from './constants'
 import moment from 'moment'
 import Input from 'components/base/forms/Input'
-import { PipelineStageRequest } from 'common/types/requests'
+import { PipelineStageRequest, StageActionRequest } from 'common/types/requests'
 import PipelineStageActions from './PipelineStageActions'
 
-type DraftStageType = PipelineStageRequest
 type TimeUnitType = (typeof TimeUnit)[keyof typeof TimeUnit]
 
 const CreatePipelineStage = ({
@@ -26,8 +30,8 @@ const CreatePipelineStage = ({
   showRemoveButton,
   stageData,
 }: {
-  stageData: DraftStageType
-  onChange: (stageData: DraftStageType) => void
+  stageData: PipelineStageRequest
+  onChange: (stageData: PipelineStageRequest) => void
   projectId: number
   showRemoveButton?: boolean
   onRemove?: () => void
@@ -73,8 +77,8 @@ const CreatePipelineStage = ({
   }, [environmentsData])
 
   const handleOnChange = (
-    fieldName: keyof DraftStageType,
-    value: string | number | StageTrigger | Omit<StageAction, 'id'>[],
+    fieldName: keyof PipelineStageRequest,
+    value: string | number | StageTrigger | StageActionRequest[],
   ) => {
     onChange({ ...stageData, [fieldName]: value })
   }
@@ -104,25 +108,36 @@ const CreatePipelineStage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [environmentWithFeatureVersioningOptions, stageData])
 
-  const handleSegmentChange = (option: { value: number; label: string }) => {
-    if (option?.value) {
-      const actions = stageData.actions.map((action) => {
-        if (action.action_type === StageActionType.TOGGLE_FEATURE_FOR_SEGMENT) {
-          return {
-            ...action,
-            action_body: { ...action.action_body, segment_id: option?.value },
-          }
+  const handleSegmentChange = (
+    option: { value: number; label: string },
+    actionIndex: number,
+  ) => {
+    if (!option?.value) {
+      return
+    }
+
+    const actions = stageData.actions.map((action, idx) => {
+      if (
+        action.action_type === StageActionType.TOGGLE_FEATURE_FOR_SEGMENT &&
+        idx === actionIndex
+      ) {
+        return {
+          ...action,
+          action_body: { ...action.action_body, segment_id: option?.value },
         }
-        return action
-      })
+      }
+      return action
+    })
 
-      handleOnChange('actions', actions)
-    }
+    handleOnChange('actions', actions)
   }
 
-  const handleActionChange = (option: { value: string; label: string }) => {
+  const handleActionChange = (
+    option: { value: string; label: string },
+    actionIndex: number,
+  ) => {
     if (option.value === '') {
-      return handleOnChange('actions', [])
+      return
     }
 
     const isSegment = option.value.includes('FOR_SEGMENT')
@@ -134,7 +149,23 @@ const CreatePipelineStage = ({
 
     const action_body = { enabled }
 
-    handleOnChange('actions', [{ action_body, action_type }])
+    const actions = stageData.actions.map((action, idx) => {
+      if (idx === actionIndex) {
+        return { action_body, action_type }
+      }
+      return action
+    })
+    handleOnChange('actions', actions)
+  }
+
+  const handleAddAction = () => {
+    const defaultDraftAction = NEW_PIPELINE_STAGE_ACTION
+    handleOnChange('actions', [...stageData.actions, defaultDraftAction])
+  }
+
+  const handleRemoveAction = (index: number) => {
+    const actions = stageData.actions.filter((_, i) => i !== index)
+    handleOnChange('actions', actions)
   }
 
   const setWaitForTrigger = (time: number, unit: TimeUnitType) => {
@@ -281,10 +312,11 @@ const CreatePipelineStage = ({
         projectId={projectId}
         onActionChange={handleActionChange}
         onSegmentChange={handleSegmentChange}
+        onAddAction={handleAddAction}
+        onRemoveAction={handleRemoveAction}
       />
     </div>
   )
 }
 
-export type { DraftStageType }
 export default CreatePipelineStage

frontend/web/components/release-pipelines/CreateReleasePipeline.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useState } from 'react'
-import CreatePipelineStage, { DraftStageType } from './CreatePipelineStage'
+import CreatePipelineStage from './CreatePipelineStage'
 import Breadcrumb from 'components/Breadcrumb'
 import { Button } from 'components/base/forms/Button'
 import PageTitle from 'components/PageTitle'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
-import { StageActionType, StageTriggerType } from 'common/types/responses'
 import Icon from 'components/Icon'
 import {
   useCreateReleasePipelineMutation,
@@ -14,20 +13,14 @@ import {
 } from 'common/services/useReleasePipelines'
 import { useHistory, useParams } from 'react-router-dom'
 import StageArrow from './StageArrow'
-import { ReleasePipelineRequest } from 'common/types/requests'
+import {
+  PipelineStageRequest,
+  ReleasePipelineRequest,
+} from 'common/types/requests'
 import { useRouteContext } from 'components/providers/RouteContext'
 import PlanBasedAccess from 'components/PlanBasedAccess'
-
-const blankStage: DraftStageType = {
-  actions: [],
-  environment: -1,
-  name: '',
-  order: 0,
-  trigger: {
-    trigger_body: null,
-    trigger_type: StageTriggerType.ON_ENTER,
-  },
-}
+import { NEW_PIPELINE_STAGE, NEW_PIPELINE_STAGE_ACTION_TYPE } from './constants'
+import { StageActionType } from 'common/types/responses'
 
 type CreateReleasePipelineParams = {
   id?: string
@@ -72,7 +65,7 @@ function CreateReleasePipeline() {
   const [pipelineData, setPipelineData] = useState<ReleasePipelineRequest>({
     name: '',
     project: Number(projectId),
-    stages: [blankStage],
+    stages: [NEW_PIPELINE_STAGE],
   })
 
   const [isEditingName, setIsEditingName] = useState(
@@ -116,30 +109,42 @@ function CreateReleasePipeline() {
   ])
 
   useEffect(() => {
-    console.log('existingPipeline', existingPipeline)
     if (existingPipeline) {
       setPipelineData(existingPipeline)
     }
   }, [existingPipeline])
 
-  const handleOnChange = (newStageData: DraftStageType, index: number) => {
+  const handleOnChange = (
+    newStageData: PipelineStageRequest,
+    index: number,
+  ) => {
     const updatedStages = pipelineData.stages.map((stage, i) =>
       i === index ? newStageData : stage,
     )
     setPipelineData((prev) => ({ ...prev, stages: updatedStages }))
   }
 
-  const validateStage = (stage: DraftStageType) => {
+  const validateStage = (stage: PipelineStageRequest) => {
     if (!stage.actions.length) {
       return false
     }
 
-    const segment = stage.actions.find(
+    // action in creation state
+    if (
+      stage.actions.some(
+        (action) => action.action_type === NEW_PIPELINE_STAGE_ACTION_TYPE,
+      )
+    ) {
+      return false
+    }
+
+    const segments = stage.actions.filter(
       (action) =>
         action.action_type === StageActionType.TOGGLE_FEATURE_FOR_SEGMENT,
     )
-    if (segment) {
-      return !!segment.action_body.segment_id
+
+    if (segments.length) {
+      return segments.every((segment) => !!segment.action_body.segment_id)
     }
 
     return !!stage.name.length
@@ -196,7 +201,7 @@ function CreateReleasePipeline() {
   }
 
   return (
-    <div className='app-container container'>
+    <div className='app-container container pb-0'>
       <PlanBasedAccess feature={'RELEASE_PIPELINES'} theme={'page'}>
         <Breadcrumb
           items={[
@@ -253,14 +258,14 @@ function CreateReleasePipeline() {
             </Button>
           }
         />
-        <div className='px-2 pb-4 overflow-auto'>
+        <div className='release-pipeline-container px-2 overflow-auto'>
           <Row className='no-wrap'>
             {pipelineData.stages.map((stageData, index) => (
               <Row key={index}>
                 <Row className='align-items-start no-wrap'>
                   <CreatePipelineStage
                     stageData={stageData}
-                    onChange={(stageData: DraftStageType) =>
+                    onChange={(stageData: PipelineStageRequest) =>
                       handleOnChange(stageData, index)
                     }
                     projectId={Number(projectId)}
@@ -275,7 +280,7 @@ function CreateReleasePipeline() {
                       onAddStage={() =>
                         setPipelineData((prev) => ({
                           ...prev,
-                          stages: prev.stages.concat([blankStage]),
+                          stages: prev.stages.concat([NEW_PIPELINE_STAGE]),
                         }))
                       }
                     />

frontend/web/components/release-pipelines/FlagActionDetail.tsx

@@ -4,7 +4,7 @@ import { StageActionBody, StageActionType } from 'common/types/responses'
 type FlagActionDetailProps = {
   actionType: StageActionType
   actionBody: StageActionBody
-  projectId: string
+  projectId: number
 }
 
 const renderActionDetail = (
@@ -41,7 +41,7 @@ const FlagActionDetail = ({
   const { data: segmentData } = useGetSegmentQuery(
     {
       id: `${actionBody.segment_id}`,
-      projectId: projectId,
+      projectId: `${projectId}`,
     },
     {
       skip: !actionBody.segment_id || !isSegmentAction,