feat: add save and publish pipeline (#5827)

Author: tiagoapolo

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

@@ -9,6 +9,7 @@ import Icon from 'components/Icon'
 import {
   useCreateReleasePipelineMutation,
   useGetReleasePipelineQuery,
+  usePublishReleasePipelineMutation,
   useUpdateReleasePipelineMutation,
 } from 'common/services/useReleasePipelines'
 import { useHistory, useParams } from 'react-router-dom'
@@ -21,6 +22,7 @@ import { useRouteContext } from 'components/providers/RouteContext'
 import PlanBasedAccess from 'components/PlanBasedAccess'
 import { NEW_PIPELINE_STAGE, NEW_PIPELINE_STAGE_ACTION_TYPE } from './constants'
 import { StageActionType } from 'common/types/responses'
+import ButtonDropdown from 'components/base/forms/ButtonDropdown'
 
 type CreateReleasePipelineParams = {
   id?: string
@@ -62,6 +64,8 @@ function CreateReleasePipeline() {
     },
   ] = useUpdateReleasePipelineMutation()
 
+  const [publishReleasePipeline] = usePublishReleasePipelineMutation()
+
   const [pipelineData, setPipelineData] = useState<ReleasePipelineRequest>({
     name: '',
     project: Number(projectId),
@@ -80,17 +84,32 @@ function CreateReleasePipeline() {
     [history, projectId],
   )
 
+  const [isSavingAndPublishing, setIsSavingAndPublishing] = useState(false)
+
   useEffect(() => {
+    if (isSavingAndPublishing) {
+      return
+    }
+
     if (isCreatingPipelineSuccess) {
       return handleSuccess()
     }
 
     if (isUpdatingPipelineSuccess) {
       return handleSuccess(true)
     }
-  }, [isCreatingPipelineSuccess, isUpdatingPipelineSuccess, handleSuccess])
+  }, [
+    isCreatingPipelineSuccess,
+    isUpdatingPipelineSuccess,
+    handleSuccess,
+    isSavingAndPublishing,
+  ])
 
   useEffect(() => {
+    if (isSavingAndPublishing) {
+      return
+    }
+
     if (isCreatingPipelineError) {
       toast('Error creating release pipeline', 'danger')
     }
@@ -106,6 +125,7 @@ function CreateReleasePipeline() {
     createPipelineError,
     isUpdatingPipelineError,
     updatePipelineError,
+    isSavingAndPublishing,
   ])
 
   useEffect(() => {
@@ -158,27 +178,46 @@ function CreateReleasePipeline() {
     return pipelineData.stages.every(validateStage)
   }
 
-  const handleSave = () => {
-    createReleasePipeline({
+  const handleSubmit = async (id?: number) => {
+    if (id) {
+      return await updateReleasePipeline({
+        id,
+        name: pipelineData.name,
+        project: Number(projectId),
+        stages: pipelineData.stages.map((stage, index) => ({
+          ...stage,
+          order: index,
+        })),
+      }).unwrap()
+    }
+
+    return await createReleasePipeline({
       name: pipelineData.name,
       project: Number(projectId),
       stages: pipelineData.stages.map((stage, index) => ({
         ...stage,
         order: index,
       })),
-    })
+    }).unwrap()
   }
 
-  const handleUpdate = (id: number) => {
-    updateReleasePipeline({
-      id,
-      name: pipelineData.name,
-      project: Number(projectId),
-      stages: pipelineData.stages.map((stage, index) => ({
-        ...stage,
-        order: index,
-      })),
-    })
+  const handleSubmitAndPublish = async (id?: number) => {
+    try {
+      setIsSavingAndPublishing(true)
+      const response = await handleSubmit(id)
+      await publishReleasePipeline({
+        pipelineId: response.id,
+        projectId: Number(projectId),
+      })
+      toast(`Release pipeline published successfully`)
+    } catch (error) {
+      toast(
+        `Error ${id ? 'updating' : 'creating'} and publishing pipeline`,
+        'danger',
+      )
+    } finally {
+      setIsSavingAndPublishing(false)
+    }
   }
 
   const handleRemoveStage = (index: number) => {
@@ -188,6 +227,7 @@ function CreateReleasePipeline() {
 
   const isSaveDisabled =
     !validatePipelineData() || isCreatingPipeline || isUpdatingPipeline
+
   const saveButtonText = existingPipeline?.id ? 'Update' : 'Save'
 
   if (isLoadingExistingPipeline) {
@@ -246,16 +286,20 @@ function CreateReleasePipeline() {
             </Row>
           }
           cta={
-            <Button
+            <ButtonDropdown
+              type='button'
+              data-test='create-update-release-pipeline-btn'
               disabled={isSaveDisabled}
-              onClick={() =>
-                existingPipeline?.id
-                  ? handleUpdate(existingPipeline.id)
-                  : handleSave()
-              }
+              dropdownItems={[
+                {
+                  label: `${saveButtonText} & Publish`,
+                  onClick: () => handleSubmitAndPublish(existingPipeline?.id),
+                },
+              ]}
+              onClick={() => handleSubmit(existingPipeline?.id)}
             >
-              {saveButtonText}
-            </Button>
+              {saveButtonText} as Draft
+            </ButtonDropdown>
           }
         />
         <div className='release-pipeline-container px-2 overflow-auto'>