Merge pull request #620 from devtron-labs/feat/ci-node-delete

feat: CI Node add & delete button

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.3",
+    "version": "1.9.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -0,0 +1,141 @@
+/*
+ * 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, Icon } from '@Shared/Components'
+import { ComponentSizeType, DeleteComponentsName } from '@Shared/constants'
+import { ToastManager, ToastVariantType } from '@Shared/index'
+import { deleteWorkflow, savePipeline } from './utils'
+import { DeleteCINodeButtonProps } from './types'
+import { preventDefault, showError, stopPropagation } from '..'
+
+export const DeleteCINodeButton = ({
+    testId,
+    showIconOnly = true,
+    disabled = false,
+    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 () => {
+        try {
+            const response = await deleteWorkflow(
+                String(deletePayloadConfig.appId),
+                Number(deletePayloadConfig.appWorkflowId),
+            )
+            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 (error) {
+            showError(error)
+        }
+    }
+
+    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 = () =>
+        showIconOnly ? (
+            <Button
+                ariaLabel="Delete pipeline"
+                variant={ButtonVariantType.borderLess}
+                dataTestId={testId}
+                size={ComponentSizeType.xxs_small_icon}
+                showAriaLabelInTippy
+                onClick={onClickDeleteShowModal}
+                style={ButtonStyleType.negativeGrey}
+                icon={<Icon name="ic-delete" color={null} strokeWidth={1} size={12} />}
+                disabled={disabled}
+                showTooltip
+                tooltipProps={{
+                    placement: 'right',
+                    content: 'Delete Pipeline',
+                }}
+            />
+        ) : (
+            <Button
+                dataTestId={testId}
+                disabled={disabled}
+                onClick={onClickDeleteShowModal}
+                text="Delete Pipeline"
+                style={ButtonStyleType.negative}
+            />
+        )
+
+    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-add.svg

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

src/Assets/IconV2/ic-delete.svg

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

src/Common/DeleteCINodeButton/DeleteCINodeButton.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/index.tsx

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

src/Common/DeleteCINodeButton/types.ts

@@ -19,6 +19,7 @@ import { ProgressingProps } from '@Common/Types'
 import { ButtonProps } from './types'
 
 export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
+    [ComponentSizeType.xxs_small_icon]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xxs]} px-9 fw-6 dc__gap-6 mw-48`,
     [ComponentSizeType.xxs]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xxs]} px-9 fw-6 dc__gap-6 mw-48`,
     [ComponentSizeType.xs]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xs]} px-9 fw-6 dc__gap-6 mw-48`,
     [ComponentSizeType.small]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.small]} px-9 fw-6 dc__gap-8 mw-48`,
@@ -28,6 +29,7 @@ export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>
 } as const
 
 export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
+    [ComponentSizeType.xxs_small_icon]: 'p-4',
     [ComponentSizeType.xxs]: 'p-1',
     [ComponentSizeType.xs]: 'p-3',
     [ComponentSizeType.small]: 'p-5',
@@ -37,6 +39,7 @@ export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], str
 } as const
 
 export const BUTTON_SIZE_TO_ICON_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
+    [ComponentSizeType.xxs_small_icon]: 12,
     [ComponentSizeType.xxs]: 14,
     [ComponentSizeType.xs]: 14,
     [ComponentSizeType.small]: 16,
@@ -46,6 +49,7 @@ export const BUTTON_SIZE_TO_ICON_SIZE_MAP: Record<ButtonProps['size'], Progressi
 } as const
 
 export const ICON_BUTTON_SIZE_TO_ICON_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
+    [ComponentSizeType.xxs_small_icon]: 12,
     [ComponentSizeType.xxs]: 16,
     [ComponentSizeType.xs]: 16,
     [ComponentSizeType.small]: 16,

src/Common/DeleteCINodeButton/utils.tsx

@@ -1,6 +1,7 @@
 // NOTE: This file is auto-generated. Do not edit directly. Run the script `npm run generate-icon` to update.
 
 import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg'
+import { ReactComponent as ICAdd } from '@IconsV2/ic-add.svg'
 import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg'
 import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
 import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
@@ -18,6 +19,7 @@ import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg'
 import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
+import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
 import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
@@ -72,6 +74,7 @@ import { IconBaseProps } from './types'
 
 export const iconMap = {
     'ic-aborted': ICAborted,
+    'ic-add': ICAdd,
     'ic-app-group': ICAppGroup,
     'ic-arrow-right': ICArrowRight,
     'ic-azure': ICAzure,
@@ -89,6 +92,7 @@ export const iconMap = {
     'ic-container': ICContainer,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,
+    'ic-delete': ICDelete,
     'ic-dockerhub': ICDockerhub,
     'ic-ecr': ICEcr,
     'ic-env': ICEnv,

src/Common/index.ts

@@ -424,6 +424,7 @@ export const ANSI_UP_REGEX = /\x1B\[.*?m/g
  * Size variants for components
  */
 export enum ComponentSizeType {
+    xxs_small_icon = 'xxs-small-icon',
     xxs = 'xxs',
     xs = 'xs',
     small = 'small',
@@ -433,6 +434,7 @@ export enum ComponentSizeType {
 }
 
 export const COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP: Record<ComponentSizeType, string> = {
+    [ComponentSizeType.xxs_small_icon]: 'py-1 fs-12 lh-20',
     [ComponentSizeType.xxs]: 'py-1 fs-12 lh-20',
     [ComponentSizeType.xs]: 'py-1 fs-12 lh-20',
     [ComponentSizeType.small]: 'py-3 fs-12 lh-20',
@@ -442,6 +444,7 @@ export const COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP: Record<Component
 } as const
 
 export const COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP: Record<ComponentSizeType, string> = {
+    [ComponentSizeType.xxs_small_icon]: 'px-4',
     [ComponentSizeType.xxs]: 'px-5',
     [ComponentSizeType.xs]: 'px-5',
     [ComponentSizeType.small]: 'px-5',
@@ -451,6 +454,7 @@ export const COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP: Record<ComponentSizeType
 } as const
 
 export const COMPONENT_SIZE_TYPE_TO_ICON_SIZE_MAP: Record<ComponentSizeType, number> = {
+    [ComponentSizeType.xxs_small_icon]: 12,
     [ComponentSizeType.xxs]: 14,
     [ComponentSizeType.xs]: 14,
     [ComponentSizeType.small]: 16,
@@ -515,3 +519,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',
+}