chore: delete ci node component

Author: shivani170

src/Assets/IconV2/ic-add.svg

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react'
+
+import { ERROR_STATUS_CODE } from '@Common/Constants'
+import { Button, ButtonStyleType, ButtonVariantType, DeleteConfirmationModal } from '@Shared/Components'
+import { ComponentSizeType, DeleteComponentsName } from '@Shared/constants'
+import { ToastManager, ToastVariantType } from '@Shared/index'
+import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
+import { deleteWorkflow, savePipeline } from './utils'
+import { DeleteCINodeButtonProps } from './types'
+import { preventDefault, showError, stopPropagation } from '..'
+
+export const DeleteCINodeButton = ({
+    testId,
+    isCIPipeline,
+    disabled,
+    title,
+    isJobView,
+    deletePayloadConfig,
+    onDelete,
+    getWorkflows,
+}: DeleteCINodeButtonProps) => {
+    const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false)
+
+    const closeCIDeleteModal = (): void => {
+        setShowDeleteModal(false)
+    }
+
+    const onClickDeleteShowModal = (e) => {
+        stopPropagation(e)
+        preventDefault(e)
+        setShowDeleteModal(true)
+    }
+
+    const onDeleteWorkflow = async () => {
+        await deleteWorkflow(String(deletePayloadConfig.appId), Number(deletePayloadConfig.appWorkflowId))
+            .then((response) => {
+                if (response.errors) {
+                    const { errors } = response
+                    const { userMessage } = errors[0]
+                    ToastManager.showToast({
+                        variant: ToastVariantType.error,
+                        description: userMessage,
+                    })
+                    return
+                }
+
+                if (response.status.toLowerCase() === 'ok') {
+                    ToastManager.showToast({
+                        variant: ToastVariantType.success,
+                        description: 'Workflow Deleted',
+                    })
+                    getWorkflows()
+                }
+            })
+            .catch((errors) => {
+                showError(errors)
+            })
+    }
+
+    const onClickDelete = async () => {
+        const deletePayload = {
+            action: 2, // To delete the pipeline
+            appId: Number(deletePayloadConfig.appId),
+            appWorkflowId: Number(deletePayloadConfig.appWorkflowId),
+            ciPipeline: {
+                id: Number(deletePayloadConfig.pipelineId),
+                name: deletePayloadConfig.pipelineName,
+            },
+        }
+        await savePipeline(deletePayload)
+        if (typeof onDelete === 'function') {
+            onDelete()
+        }
+
+        await onDeleteWorkflow()
+    }
+
+    const renderDeleteButton = () =>
+        isCIPipeline ? (
+            <Button
+                dataTestId={testId}
+                disabled={disabled}
+                onClick={onClickDeleteShowModal}
+                text="Delete Pipeline"
+                style={ButtonStyleType.negative}
+            />
+        ) : (
+            <Button
+                ariaLabel="Delete pipeline"
+                variant={ButtonVariantType.borderLess}
+                dataTestId={testId}
+                size={ComponentSizeType.xs}
+                showAriaLabelInTippy
+                onClick={onClickDeleteShowModal}
+                style={ButtonStyleType.negativeGrey}
+                icon={<ICDelete />}
+                disabled={disabled}
+            />
+        )
+
+    const renderDeleteCIModal = () =>
+        showDeleteModal && (
+            <DeleteConfirmationModal
+                title={title}
+                component={isJobView ? DeleteComponentsName.Job : DeleteComponentsName.BuildPipeline}
+                subtitle={`Are you sure you want to delete this pipeline from '${title}' ?`}
+                closeConfirmationModal={closeCIDeleteModal}
+                onDelete={onClickDelete}
+                errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.BAD_REQUEST}
+                renderCannotDeleteConfirmationSubTitle="Please delete deployment pipelines for this workflow first and try again."
+                successToastMessage="Pipeline Deleted Successfully"
+            />
+        )
+
+    return (
+        <>
+            {renderDeleteButton()}
+            {renderDeleteCIModal()}
+        </>
+    )
+}

src/Assets/IconV2/ic-delete.svg

@@ -0,0 +1,3 @@
+export * from './DeleteCINodeButton'
+export * from './utils'
+export * from './types'

src/Common/DeleteCINodeButton/DeleteCINodeButton.tsx

@@ -0,0 +1,17 @@
+interface DeletePayloadConfig {
+    appId: string
+    appWorkflowId: number
+    pipelineId: number
+    pipelineName: string
+}
+
+export interface DeleteCINodeButtonProps {
+    testId: string
+    isCIPipeline?: boolean
+    disabled: boolean
+    title: string
+    isJobView?: boolean
+    deletePayloadConfig: DeletePayloadConfig
+    onDelete?: () => void
+    getWorkflows: () => void
+}

src/Common/DeleteCINodeButton/index.tsx

@@ -0,0 +1,17 @@
+import { Routes } from '@Shared/constants'
+import { post, trash } from '..'
+
+export function savePipeline(request, isRegexMaterial = false): Promise<any> {
+    let url
+    if (isRegexMaterial) {
+        url = `${Routes.CI_PIPELINE_PATCH}/regex`
+    } else {
+        url = `${Routes.CI_PIPELINE_PATCH}`
+    }
+    return post(url, request)
+}
+
+export function deleteWorkflow(appId: string, workflowId: number) {
+    const URL = `${Routes.WORKFLOW}/${appId}/${workflowId}`
+    return trash(URL)
+}

src/Common/DeleteCINodeButton/types.ts

@@ -66,3 +66,4 @@ export * from './SegmentedBarChart'
 export * from './CodeEditor/types'
 export * from './Tooltip'
 export * from './SegmentedControl'
+export * from './DeleteCINodeButton'

src/Common/DeleteCINodeButton/utils.tsx

@@ -515,3 +515,14 @@ export const DC_DELETE_SUBTITLES = {
     DELETE_ENVIRONMENT_SUBTITLE: 'Are you sure you want to delete this environment?',
     DELETE_CLUSTER_SUBTITLES: 'Are you sure you want to delete this cluster?',
 }
+
+export const enum DeleteComponentsName {
+    Cluster = 'cluster',
+    Job = 'job pipeline',
+    BuildPipeline = 'build pipeline',
+}
+
+export const Routes = {
+    CI_PIPELINE_PATCH: 'app/ci-pipeline/patch',
+    WORKFLOW: 'app/app-wf',
+}