feat: adds unpublish release pipeline action

frontend/common/services/useReleasePipelines.ts

@@ -89,6 +89,16 @@ export const releasePipelinesService = service
           url: `projects/${query.projectId}/release-pipelines/${query.pipelineId}/remove-feature/`,
         }),
       }),
+      unpublishReleasePipeline: builder.mutation<
+        Res['releasePipeline'],
+        Req['publishReleasePipeline']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'ReleasePipelines' }],
+        query: (query: Req['publishReleasePipeline']) => ({
+          method: 'POST',
+          url: `projects/${query.projectId}/release-pipelines/${query.pipelineId}/unpublish-pipeline/`,
+        }),
+      }),
       updateReleasePipeline: builder.mutation<
         Res['releasePipeline'],
         Req['updateReleasePipeline']
@@ -164,6 +174,7 @@ export const {
   useGetReleasePipelinesQuery,
   usePublishReleasePipelineMutation,
   useRemoveFeatureMutation,
+  useUnpublishReleasePipelineMutation,
   useUpdateReleasePipelineMutation,
   // END OF EXPORTS
 } = releasePipelinesService

frontend/web/components/pages/ReleasePipelinesPage.tsx

@@ -1,22 +1,19 @@
 import PageTitle from 'components/PageTitle'
 import { useGetReleasePipelinesQuery } from 'common/services/useReleasePipelines'
 import { Button } from 'components/base/forms/Button'
-import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import ReleasePipelinesList from 'components/release-pipelines/ReleasePipelinesList'
 import { useState } from 'react'
 import PlanBasedAccess from 'components/PlanBasedAccess'
-
-interface RouteParams {
-  projectId: string
-}
+import { useRouteContext } from 'components/providers/RouteContext'
 
 const ReleasePipelinesPage = () => {
   const history = useHistory()
-  const match = useRouteMatch<RouteParams>()
+
+  const { projectId } = useRouteContext()
   const [page, setPage] = useState(1)
   const pageSize = 10
-  const { projectId } = match.params
   const { data, isLoading } = useGetReleasePipelinesQuery({
     page,
     page_size: pageSize,
@@ -48,7 +45,7 @@ const ReleasePipelinesPage = () => {
         <ReleasePipelinesList
           data={data}
           isLoading={isLoading}
-          projectId={projectId}
+          projectId={projectId ?? NaN}
           page={page}
           pageSize={pageSize}
           onPageChange={setPage}

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

@@ -0,0 +1,111 @@
+import { useEffect } from 'react'
+import {
+  usePublishReleasePipelineMutation,
+  useUnpublishReleasePipelineMutation,
+} from 'common/services/useReleasePipelines'
+import Button from 'components/base/forms/Button'
+
+type ChangeReleasePipelineStatusModalProps = {
+  projectId: number
+  isPublished: boolean
+  pipelineId: number
+}
+
+const ChangeReleasePipelineStatusModal = ({
+  isPublished,
+  pipelineId,
+  projectId,
+}: ChangeReleasePipelineStatusModalProps) => {
+  const [
+    publishReleasePipeline,
+    {
+      error: publishReleasePipelineError,
+      isError: isPublishingError,
+      isLoading: isPublishing,
+      isSuccess: isPublishingSuccess,
+    },
+  ] = usePublishReleasePipelineMutation()
+
+  const [
+    unpublishReleasePipeline,
+    {
+      error: unpublishReleasePipelineError,
+      isError: isUnpublishingError,
+      isLoading: isUnpublishing,
+      isSuccess: isUnpublishingSuccess,
+    },
+  ] = useUnpublishReleasePipelineMutation()
+
+  useEffect(() => {
+    if (isPublishingSuccess) {
+      closeModal2()
+      toast('Release pipeline published successfully')
+      return
+    }
+
+    if (isPublishingError) {
+      toast('Error publishing release pipeline', 'danger')
+      return
+    }
+  }, [isPublishingSuccess, isPublishingError, publishReleasePipelineError])
+
+  useEffect(() => {
+    if (isUnpublishingSuccess) {
+      closeModal2()
+      toast('Release pipeline unpublished successfully')
+      return
+    }
+
+    if (isUnpublishingError) {
+      toast('Error unpublishing release pipeline', 'danger')
+      return
+    }
+  }, [
+    isUnpublishingSuccess,
+    isUnpublishingError,
+    unpublishReleasePipelineError,
+  ])
+
+  const handleConfirm = () => {
+    if (isPublished) {
+      unpublishReleasePipeline({
+        pipelineId,
+        projectId,
+      })
+
+      return
+    }
+
+    publishReleasePipeline({
+      pipelineId,
+      projectId,
+    })
+  }
+
+  const isLoading = isPublishing || isUnpublishing
+
+  return (
+    <div className='p-0'>
+      <p>
+        Are you sure you want to{' '}
+        <strong>{isPublished ? 'unpublish' : 'publish'}</strong> this release
+        pipeline?
+      </p>
+      <div className='text-right mt-5'>
+        <Button
+          theme='secondary'
+          className='mr-2'
+          onClick={() => closeModal2()}
+        >
+          Cancel
+        </Button>
+        <Button onClick={handleConfirm} disabled={isLoading}>
+          {isPublished ? 'Unpublish' : 'Publish'}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export type { ChangeReleasePipelineStatusModalProps }
+export default ChangeReleasePipelineStatusModal

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

@@ -1,7 +1,4 @@
-import {
-  useDeleteReleasePipelineMutation,
-  usePublishReleasePipelineMutation,
-} from 'common/services/useReleasePipelines'
+import { useDeleteReleasePipelineMutation } from 'common/services/useReleasePipelines'
 import { PagedResponse, ReleasePipeline } from 'common/types/responses'
 import { useHistory } from 'react-router-dom'
 import Button from 'components/base/forms/Button'
@@ -10,8 +7,9 @@ import DropdownMenu from 'components/base/DropdownMenu'
 import PanelSearch from 'components/PanelSearch'
 import Tag from 'components/tags/Tag'
 import { useEffect } from 'react'
+import ChangeReleasePipelineStatusModal from './ChangeReleasePipelineStatusModal'
 
-const NoReleasePipelines = ({ projectId }: { projectId: string }) => {
+const NoReleasePipelines = ({ projectId }: { projectId: number }) => {
   const history = useHistory()
 
   return (
@@ -50,7 +48,7 @@ const NoReleasePipelines = ({ projectId }: { projectId: string }) => {
 type ReleasePipelinesListProps = {
   data: PagedResponse<ReleasePipeline> | undefined
   isLoading: boolean
-  projectId: string
+  projectId: number
   page: number
   pageSize: number
   onPageChange: (page: number) => void
@@ -74,30 +72,8 @@ const ReleasePipelinesList = ({
       isSuccess: isDeletingSuccess,
     },
   ] = useDeleteReleasePipelineMutation()
-  const [
-    publishReleasePipeline,
-    {
-      error: publishReleasePipelineError,
-      isError: isPublishingError,
-      isLoading: isPublishing,
-      isSuccess: isPublishingSuccess,
-    },
-  ] = usePublishReleasePipelineMutation()
-  const pipelinesList = data?.results
-
-  useEffect(() => {
-    if (isPublishingSuccess) {
-      return toast('Release pipeline published successfully')
-    }
 
-    if (isPublishingError) {
-      return toast(
-        publishReleasePipelineError?.data?.detail ??
-          'Something went wrong while publishing the release pipeline',
-        'danger',
-      )
-    }
-  }, [isPublishingSuccess, isPublishingError, publishReleasePipelineError])
+  const pipelinesList = data?.results
 
   useEffect(() => {
     if (isDeletingSuccess) {
@@ -113,6 +89,21 @@ const ReleasePipelinesList = ({
     }
   }, [isDeletingSuccess, isDeletingError, deleteReleasePipelineError])
 
+  const openChangeReleasePipelineStatusModal = (
+    projectId: number,
+    pipelineId: number,
+    isPublished: boolean,
+  ) => {
+    openModal2(
+      isPublished ? 'Unpublish Release Pipeline' : 'Publish Release Pipeline',
+      <ChangeReleasePipelineStatusModal
+        isPublished={isPublished}
+        pipelineId={pipelineId}
+        projectId={projectId}
+      />,
+    )
+  }
+
   if (isLoading) {
     return (
       <div className='text-center'>
@@ -150,6 +141,14 @@ const ReleasePipelinesList = ({
         stages_count,
       }: ReleasePipeline) => {
         const isPublished = !!published_at
+        const canUnpublish = isPublished && !features?.length
+
+        const getTooltip = (action: string) => {
+          if (isPublished) {
+            return `Cannot ${action} a published release pipeline`
+          }
+          return undefined
+        }
 
         return (
           <Row key={id} className='list-item'>
@@ -182,43 +181,44 @@ const ReleasePipelinesList = ({
               <DropdownMenu
                 items={[
                   {
-                    disabled: isPublishing || !!published_at,
+                    disabled: isPublished,
                     icon: 'edit' as IconName,
-                    label: 'Edit Release Pipeline',
+                    label: 'Edit',
                     onClick: () => {
                       history.push(
                         `/project/${projectId}/release-pipelines/${id}/edit`,
                       )
                     },
-                    tooltip: published_at
-                      ? 'Cannot edit a published release pipeline'
-                      : undefined,
+                    tooltip: getTooltip('edit'),
+                  },
+                  {
+                    disabled: isPublished && !canUnpublish,
+                    icon: isPublished
+                      ? 'minus-circle'
+                      : ('checkmark-circle' as IconName),
+                    label: isPublished ? 'Unpublish' : 'Publish',
+                    onClick: () =>
+                      openChangeReleasePipelineStatusModal(
+                        projectId,
+                        id,
+                        isPublished,
+                      ),
+                    tooltip:
+                      isPublished && !canUnpublish
+                        ? 'Cannot unpublish a release pipeline with in-flight features'
+                        : undefined,
                   },
-                  ...(!isPublished
-                    ? [
-                        {
-                          disabled: isPublishing,
-                          icon: 'checkmark-circle' as IconName,
-                          label: 'Publish Release Pipeline',
-                          onClick: () => {
-                            publishReleasePipeline({
-                              pipelineId: id,
-                              projectId: Number(projectId),
-                            })
-                          },
-                        },
-                      ]
-                    : []),
                   {
-                    disabled: isDeleting,
+                    disabled: isDeleting || isPublished,
                     icon: 'trash-2',
-                    label: 'Remove Release Pipeline',
+                    label: 'Remove',
                     onClick: () => {
                       deleteReleasePipeline({
                         pipelineId: id,
                         projectId: Number(projectId),
                       })
                     },
+                    tooltip: getTooltip('remove'),
                   },
                 ]}
               />