requires name for clone release pipeline

adds modal

Author: tiagoapolo

frontend/common/services/useReleasePipelines.ts

@@ -26,6 +26,9 @@ export const releasePipelinesService = service
       >({
         invalidatesTags: [{ id: 'LIST', type: 'ReleasePipelines' }],
         query: (query: Req['cloneReleasePipeline']) => ({
+          body: {
+            name: query.name,
+          },
           method: 'POST',
           url: `projects/${query.projectId}/release-pipelines/${query.pipelineId}/clone/`,
         }),

frontend/common/types/requests.ts

@@ -744,6 +744,7 @@ export type Req = {
   cloneReleasePipeline: {
     projectId: number
     pipelineId: number
+    name: string
   }
   // END OF TYPES
 }

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

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+import { useCloneReleasePipelineMutation } from 'common/services/useReleasePipelines'
+import Utils from 'common/utils/utils'
+import Button from 'components/base/forms/Button'
+import InputGroup from 'components/base/forms/InputGroup'
+
+type CloneReleasePipelineModalProps = {
+  projectId: number
+  pipelineId: number
+}
+
+const CloneReleasePipelineModal = ({
+  pipelineId,
+  projectId,
+}: CloneReleasePipelineModalProps) => {
+  const [name, setName] = useState<string>('')
+
+  const [
+    cloneReleasePipeline,
+    {
+      error: cloneReleasePipelineError,
+      isError: isCloningError,
+      isLoading: isCloning,
+      isSuccess: isCloningSuccess,
+    },
+  ] = useCloneReleasePipelineMutation()
+
+  useEffect(() => {
+    if (isCloningSuccess) {
+      closeModal2()
+      toast('Release pipeline cloned successfully')
+      return
+    }
+
+    if (isCloningError) {
+      toast(
+        cloneReleasePipelineError?.data?.detail ??
+          'Error cloning release pipeline',
+        'danger',
+      )
+      return
+    }
+  }, [isCloningSuccess, isCloningError, cloneReleasePipelineError])
+
+  return (
+    <div className='p-4'>
+      {/* <p>Add a name for the cloned release pipeline.</p> */}
+      <InputGroup
+        title='New Release Pipeline Name'
+        inputProps={{
+          className: 'full-width',
+          error: !name,
+          name: 'name',
+        }}
+        value={name}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          setName(Utils.safeParseEventValue(event))
+        }}
+        isValid={name && name.length}
+        type='text'
+        name='name'
+        id='name'
+        placeholder='E.g. Beta Release'
+      />
+      <div className='text-right mt-4'>
+        <Button
+          theme='secondary'
+          className='mr-2'
+          onClick={() => closeModal2()}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={() => cloneReleasePipeline({ name, pipelineId, projectId })}
+          disabled={isCloning || !name}
+        >
+          Clone
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export type { CloneReleasePipelineModalProps }
+export default CloneReleasePipelineModal

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

@@ -1,5 +1,4 @@
 import {
-  useCloneReleasePipelineMutation,
   useDeleteReleasePipelineMutation,
   usePublishReleasePipelineMutation,
 } from 'common/services/useReleasePipelines'
@@ -11,6 +10,7 @@ import DropdownMenu from 'components/base/DropdownMenu'
 import PanelSearch from 'components/PanelSearch'
 import Tag from 'components/tags/Tag'
 import { useEffect } from 'react'
+import CloneReleasePipelineModal from './CloneReleasePipelineModal'
 
 const NoReleasePipelines = ({ projectId }: { projectId: string }) => {
   const history = useHistory()
@@ -76,16 +76,6 @@ const ReleasePipelinesList = ({
     },
   ] = useDeleteReleasePipelineMutation()
 
-  const [
-    cloneReleasePipeline,
-    {
-      error: cloneReleasePipelineError,
-      isError: isCloningError,
-      isLoading: isCloning,
-      isSuccess: isCloningSuccess,
-    },
-  ] = useCloneReleasePipelineMutation()
-
   const [
     publishReleasePipeline,
     {
@@ -102,23 +92,14 @@ const ReleasePipelinesList = ({
       return toast('Release pipeline published successfully')
     }
 
-    if (isCloningSuccess) {
-      return toast('Release pipeline cloned successfully')
-    }
-
     if (isPublishingError) {
       return toast(
         publishReleasePipelineError?.data?.detail ??
           'Something went wrong while publishing the release pipeline',
         'danger',
       )
     }
-  }, [
-    isPublishingSuccess,
-    isPublishingError,
-    publishReleasePipelineError,
-    isCloningSuccess,
-  ])
+  }, [isPublishingSuccess, isPublishingError, publishReleasePipelineError])
 
   useEffect(() => {
     if (isDeletingSuccess) {
@@ -132,21 +113,7 @@ const ReleasePipelinesList = ({
         'danger',
       )
     }
-
-    if (isCloningError) {
-      return toast(
-        cloneReleasePipelineError?.data?.detail ??
-          'Something went wrong while cloning the release pipeline',
-        'danger',
-      )
-    }
-  }, [
-    isDeletingSuccess,
-    isDeletingError,
-    deleteReleasePipelineError,
-    isCloningError,
-    cloneReleasePipelineError,
-  ])
+  }, [isDeletingSuccess, isDeletingError, deleteReleasePipelineError])
 
   if (isLoading) {
     return (
@@ -235,14 +202,16 @@ const ReleasePipelinesList = ({
                     tooltip: getTooltip('edit'),
                   },
                   {
-                    disabled: isCloning,
                     icon: 'copy' as IconName,
                     label: 'Clone',
                     onClick: () =>
-                      cloneReleasePipeline({
-                        pipelineId: id,
-                        projectId: Number(projectId),
-                      }),
+                      openModal2(
+                        'Clone Release Pipeline',
+                        <CloneReleasePipelineModal
+                          pipelineId={id}
+                          projectId={Number(projectId)}
+                        />,
+                      ),
                   },
                   ...(!isPublished
                     ? [