Delete Pipeline

web/src/pages/PipelineList/PipelineList.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { Classes, Menu, MenuItem, Popover, Position } from '@blueprintjs/core'
+import { Classes, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core'
 import {
   Avatar,
   Button,
@@ -8,18 +8,20 @@ import {
   FlexExpander,
   Layout,
   PageBody,
+  StringSubstitute,
   TableV2 as Table,
   Text,
-  Utils
+  Utils,
+  useToaster
 } from '@harnessio/uicore'
 import { Color } from '@harnessio/design-system'
 import cx from 'classnames'
 import type { CellProps, Column } from 'react-table'
 import Keywords from 'react-keywords'
 import { Link, useHistory } from 'react-router-dom'
-import { useGet } from 'restful-react'
+import { useGet, useMutate } from 'restful-react'
 import { Calendar, Timer, GitFork } from 'iconoir-react'
-import { useStrings } from 'framework/strings'
+import { String, useStrings } from 'framework/strings'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/SearchInputWithSpinner'
 import { NoResultCard } from 'components/NoResultCard/NoResultCard'
@@ -37,6 +39,7 @@ import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import useNewPipelineModal from 'components/NewPipelineModal/NewPipelineModal'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import useSpaceSSE from 'hooks/useSpaceSSE'
+import { useConfirmAct } from 'hooks/useConfirmAction'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
 
@@ -205,6 +208,15 @@ const PipelineList = () => {
           const [menuOpen, setMenuOpen] = useState(false)
           const record = row.original
           const { uid } = record
+          const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
+
+          const confirmDeleteSecret = useConfirmAct()
+          const { showSuccess, showError } = useToaster()
+          const { mutate: deletePipeline } = useMutate<TypesPipeline>({
+            verb: 'DELETE',
+            path: `/api/v1/repos/${repoPath}/+/pipelines/${uid}`
+          })
+
           return (
             <Popover
               isOpen={menuOpen}
@@ -228,9 +240,44 @@ const PipelineList = () => {
                   text={getString('edit')}
                   onClick={e => {
                     e.stopPropagation()
-                    history.push(
+                    history.push(routes.toCODEPipelineEdit({ repoPath, pipeline: uid as string }))
-                      routes.toCODEPipelineEdit({ repoPath: repoMetadata?.path || '', pipeline: uid as string })
+                  }}
-                    )
+                />
+                <MenuItem
+                  icon="delete"
+                  text={getString('delete')}
+                  onClick={e => {
+                    e.stopPropagation()
+                    confirmDeleteSecret({
+                      title: getString('pipelines.deletePipelineButton'),
+                      confirmText: getString('delete'),
+                      intent: Intent.DANGER,
+                      message: (
+                        <String
+                          useRichText
+                          stringID="pipelines.deletePipelineConfirm"
+                          vars={{ pipeline: row.original.uid }}
+                        />
+                      ),
+                      action: async () => {
+                        deletePipeline({})
+                          .then(() => {
+                            showSuccess(
+                              <StringSubstitute
+                                str={getString('pipelines.deletePipelineSuccess')}
+                                vars={{
+                                  pipeline: row.original.uid
+                                }}
+                              />,
+                              5000
+                            )
+                            pipelinesRefetch()
+                          })
+                          .catch((pipelineDeleteErr: unknown) => {
+                            showError(getErrorMessage(pipelineDeleteErr), 0, 'pipelines.deletePipelineError')
+                          })
+                      }
+                    })
                   }}
                 />
                 <MenuItem