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

feat: ci node delete component added

Author: shivani170

.eslintignore

@@ -393,7 +393,6 @@ src/components/workflowEditor/EmptyWorkflow.tsx
 src/components/workflowEditor/NoGitOpsConfiguredWarning.tsx
 src/components/workflowEditor/NoGitOpsRepoConfiguredWarning.tsx
 src/components/workflowEditor/PipelineSelect.tsx
-src/components/workflowEditor/ToggleCDSelectButton.tsx
 src/components/workflowEditor/Workflow.tsx
 src/components/workflowEditor/nodes/CDNode.tsx
 src/components/workflowEditor/nodes/CINode.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.9.3",
+        "@devtron-labs/devtron-fe-common-lib": "1.9.4",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx

@@ -446,7 +446,7 @@ const K8sListItemCard = ({
                         hideSelectedOptions={false}
                         size={ComponentSizeType.large}
                     />
-                    <div className="dc__grid-row-one-half dc__gap-12 w-100">
+                    <div className="dc__grid-cols-2 dc__gap-12 w-100">
                         <SelectPicker
                             inputId="k8s-permission-select-api-group-dropdown"
                             placeholder="Select API group"

src/components/CIPipelineN/CIPipeline.tsx

@@ -48,8 +48,7 @@ import {
     getGlobalVariables,
     FloatingVariablesSuggestions,
     TriggerType,
-    ERROR_STATUS_CODE,
-    DeleteConfirmationModal,
+    DeleteCINodeButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -60,7 +59,6 @@ import {
 } from '../common'
 import { BuildStageVariable, BuildTabText, JobPipelineTabText, URLS, ViewType } from '../../config'
 import {
-    deleteCIPipeline,
     getInitData,
     getInitDataWithCIPipeline,
     saveCIPipeline,
@@ -73,7 +71,6 @@ import { Sidebar } from './Sidebar'
 import { Build } from './Build'
 import { ReactComponent as WarningTriangle } from '../../assets/icons/ic-warning.svg'
 import { getModuleInfo } from '../v2/devtronStackManager/DevtronStackManager.service'
-import { DeleteComponentsName, MULTI_REQUIRED_FIELDS_MSG } from '../../config/constantMessaging'
 import { LoadingState } from '../ciConfig/types'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
 import { calculateLastStepDetailsLogic, checkUniqueness, validateTask } from '../cdPipeline/cdpipeline.util'
@@ -88,7 +85,6 @@ export default function CIPipeline({
     connectCDPipelines,
     getWorkflows,
     close,
-    deleteWorkflow,
     isJobView,
     isJobCI,
     changeCIPayload,
@@ -120,7 +116,6 @@ export default function CIPipeline({
         failed: false,
     })
     const [apiInProgress, setApiInProgress] = useState<boolean>(false)
-    const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false)
     const [selectedTaskIndex, setSelectedTaskIndex] = useState<number>(0)
     const [globalVariables, setGlobalVariables] = useState<PipelineContext['globalVariables']>([])
     const [inputVariablesListFromPrevStep, setInputVariablesListFromPrevStep] = useState<{
@@ -536,38 +531,11 @@ export default function CIPipeline({
         close()
     }
 
-    const onDelete = async () => {
-        await deleteCIPipeline(
-            formData,
-            ciPipeline,
-            formData.materials,
-            Number(appId),
-            Number(workflowId),
-            false,
-            formData.webhookConditionList,
-        )
+    const onClose = () => {
         setPageState(ViewType.FORM)
         handleClose()
-        deleteWorkflow(appId, Number(workflowId))
-    }
-
-    const closeCIDeleteModal = (): void => {
-        setShowDeleteModal(false)
     }
 
-    const renderDeleteCIModal = () => (
-        <DeleteConfirmationModal
-            title={formData.name}
-            component={isJobView ? DeleteComponentsName.Job : DeleteComponentsName.BuildPipeline}
-            subtitle={`Are you sure you want to delete this pipeline from '${appName}' ?`}
-            closeConfirmationModal={closeCIDeleteModal}
-            onDelete={onDelete}
-            errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.BAD_REQUEST}
-            renderCannotDeleteConfirmationSubTitle="Please delete deployment pipelines for this workflow first and try again."
-            successToastMessage="Pipeline Deleted"
-        />
-    )
-
     const renderSecondaryButton = () => {
         if (ciPipelineId) {
             const canDeletePipeline = connectCDPipelines === 0 && ciPipeline.linkedCount === 0
@@ -584,17 +552,21 @@ export default function CIPipeline({
                         </Tippy>
                     )}
                 >
-                    <button
-                        data-testid="ci-delete-pipeline-button"
-                        type="button"
-                        className="cta cta--workflow delete mr-16"
+                    <DeleteCINodeButton
+                        testId="ci-delete-pipeline-button"
                         disabled={!canDeletePipeline}
-                        onClick={() => {
-                            setShowDeleteModal(true)
+                        showIconOnly={false}
+                        isJobView={isJobView}
+                        title={ciPipeline.name}
+                        deletePayloadConfig={{
+                            appId: appId,
+                            appWorkflowId: Number(workflowId),
+                            pipelineId: Number(ciPipelineId),
+                            pipelineName: ciPipeline.name,
                         }}
-                    >
-                        Delete Pipeline
-                    </button>
+                        onDelete={onClose}
+                        getWorkflows={getWorkflows}
+                    />
                 </ConditionalWrap>
             )
         }
@@ -921,7 +893,6 @@ export default function CIPipeline({
                         )}
                     </div>
                 )}
-                {ciPipelineId && showDeleteModal && renderDeleteCIModal()}
             </>
         )
     }

src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx

@@ -234,7 +234,7 @@ const CreatePluginFormContent = ({
                 />
             )}
 
-            <div className="dc__grid-row-one-half dc__column-gap-12">
+            <div className="dc__grid-cols-2 dc__column-gap-12">
                 {/* Existing plugin / display name */}
                 {renderPluginName()}
 
@@ -265,7 +265,7 @@ const CreatePluginFormContent = ({
                         rootClassName: 'flex-grow-1',
                     }}
                 >
-                    <div className="dc__grid-row-one-half dc__column-gap-12">
+                    <div className="dc__grid-cols-2 dc__column-gap-12">
                         {/* New Version / Plugin Version */}
                         <CreatePluginFormField
                             label={renderPluginVersionLabel()}

src/components/ClusterNodes/ClusterOverview.tsx

@@ -326,7 +326,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             <>
                 {/* Commented to be used in future */}
                 {/* {cardDetailsInBar()} */}
-                <div className="dc__grid-row-one-half dc__gap-16 pb-16">
+                <div className="dc__grid-cols-2 dc__gap-16 pb-16">
                     <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
                         <div>
                             <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Usage</div>

src/components/ciPipeline/LinkedCIPipelineView.tsx

@@ -28,12 +28,14 @@ import {
     ToastVariantType,
     ToastManager,
     TriggerType,
-    DeleteConfirmationModal,
-    ERROR_STATUS_CODE,
+    Button,
+    ButtonVariantType,
+    ButtonStyleType,
+    DeleteCINodeButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
-import { getInitDataWithCIPipeline, deleteCIPipeline } from './ciPipeline.service'
+import { getInitDataWithCIPipeline } from './ciPipeline.service'
 import { ViewType, URLS } from '../../config'
 import { CIPipelineProps, CIPipelineState } from './types'
 import { getCIPipelineURL, Info } from '../common'
@@ -42,7 +44,6 @@ import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as Warning } from '../../assets/icons/ic-warning.svg'
 import { SourceMaterials } from './SourceMaterials'
 import './ciPipeline.scss'
-import { DeleteComponentsName } from '@Config/constantMessaging'
 
 export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIPipelineState> {
     constructor(props) {
@@ -103,7 +104,7 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
             })
             .catch((error: ServerErrors) => {
                 showError(error)
-                this.setState({ loadingData: false })
+                this.setState({ loadingData: false, view: ViewType.FORM })
             })
     }
 
@@ -164,25 +165,6 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
         }
     }
 
-    onDelete = async () => {
-        await deleteCIPipeline(
-            this.state.form,
-            this.state.ciPipeline,
-            this.state.form.materials,
-            +this.props.match.params.appId,
-            +this.props.match.params.workflowId,
-            this.state.ciPipeline.isExternal,
-            this.state.form.webhookConditionList,
-        )
-        this.props.close()
-
-        if (this.props.deleteWorkflow) {
-            this.props.deleteWorkflow(this.props.match.params.appId, +this.props.match.params.workflowId)
-        } else {
-            this.props.getWorkflows()
-        }
-    }
-
     renderInfoDialog() {
         return (
             <div className="dc__info-container info__container--linked-ci mb-16">
@@ -226,23 +208,36 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
         )
     }
 
+    onClose = () => this.props.close() // Need to fix this: while direct use of close in onclick opening What do you want to do next? modal
+
     renderHeader() {
         return (
-            <>
-                <div className="flex left pt-15 pb-15 pl-20 pr-20">
-                    <h2 className="fs-16 fw-6 m-0">Linked build pipeline</h2>
-                    <button type="button" className="dc__transparent ml-auto" onClick={() => this.props.close()}>
-                        <Close className="icon-dim-24" />
-                    </button>
-                </div>
-                <hr className="divider mt-0" />
-            </>
+            <div className="flex left py-16 px-20 dc__content-space dc__border-bottom">
+                <h2 className="fs-16 fw-6 m-0">Linked build pipeline</h2>
+                <Button
+                    dataTestId="linked-ci-pipeline-close-button"
+                    icon={<Close />}
+                    ariaLabel="Close"
+                    showAriaLabelInTippy={false}
+                    onClick={this.onClose}
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.negativeGrey}
+                />
+            </div>
         )
     }
 
-    renderSecondaryButtton() {
+    renderDeleteButton() {
+        const canDeletePipeline = this.props.connectCDPipelines === 0 && this.state.ciPipeline.linkedCount === 0
+
+        const deleteConfig = {
+            appId: this.props.match.params.appId,
+            pipelineId: this.state.ciPipeline.id,
+            pipelineName: this.state.ciPipeline.name,
+            appWorkflowId: Number(this.props.match.params.workflowId),
+        }
+
         if (this.props.match.params.ciPipelineId) {
-            const canDeletePipeline = this.props.connectCDPipelines === 0 && this.state.ciPipeline.linkedCount === 0
             return (
                 <ConditionalWrap
                     condition={!canDeletePipeline}
@@ -255,17 +250,15 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
                         </Tippy>
                     )}
                 >
-                    <button
-                        type="button"
-                        className="cta cta--workflow delete mr-16"
+                    <DeleteCINodeButton
+                        testId="delete-linked-pipeline"
                         disabled={!canDeletePipeline}
-                        onClick={() => {
-                            this.setState({ showDeleteModal: true })
-                        }}
-                        data-testid="delete-linked-pipeline"
-                    >
-                        Delete Pipeline
-                    </button>
+                        deletePayloadConfig={deleteConfig}
+                        title={this.state.form.name}
+                        getWorkflows={this.props.getWorkflows}
+                        showIconOnly={false}
+                        onDelete={this.onClose}
+                    />
                 </ConditionalWrap>
             )
         }
@@ -297,17 +290,6 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
                 </label>
                 {this.renderTriggerType()}
                 {this.renderMaterials()}
-                {this.props.match.params.ciPipelineId && this.state.showDeleteModal && (
-                    <DeleteConfirmationModal
-                        title={this.state.form.name}
-                        component={DeleteComponentsName.LinkedBuildPipeline}
-                        subtitle={`Are you sure you want to delete this linked CI Pipeline from '${this.props.appName}' ?`}
-                        closeConfirmationModal={this.closeCIDeleteModal}
-                        onDelete={this.onDelete}
-                        successToastMessage="Pipeline Deleted"
-                        errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.BAD_REQUEST}
-                    />
-                )}
             </>
         )
     }
@@ -317,13 +299,13 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
             <VisibleModal className="">
                 <div className="modal__body p-0 br-0 modal__body--ci">
                     {this.renderHeader()}
-                    <div className="pl-20 pr-20 pb-20">
+                    <div className="px-20 py-16">
                         {this.renderInfoDialog()}
                         {this.renderCIPipelineBody()}
                     </div>
                     {this.state.view !== ViewType.LOADING && (
-                        <div className="ci-button-container bg__primary pt-12 pb-12 pl-20 pr-20 flex flex-justify">
-                            {this.renderSecondaryButtton()}
+                        <div className="ci-button-container py-12 px-20 flex flex-justify dc__gap-16">
+                            {this.renderDeleteButton()}
                             <Link
                                 to={this.state.sourcePipelineURL}
                                 target="_blank"

src/components/ciPipeline/ciPipeline.service.ts

@@ -293,12 +293,15 @@ export function deleteCIPipeline(
     isExternalCI: boolean,
     webhookConditionList,
 ) {
-    const ci = createCIPatchRequest(ciPipeline, formData, isExternalCI, webhookConditionList)
+    const updatedCI = {
+        id: ciPipeline.id,
+        name: formData.name,
+    }
     const request = {
         appId,
         appWorkflowId: workflowId,
         action: PatchAction.DELETE,
-        ciPipeline: ci,
+        ciPipeline: updatedCI,
     }
     return savePipeline(request).then((response) => {
         return parseCIResponse(

src/components/ciPipeline/types.ts

@@ -278,7 +278,6 @@ export interface CIPipelineType {
     connectCDPipelines: number
     getWorkflows: () => void
     close: () => void
-    deleteWorkflow: (appId?: string, workflowId?: number) => any
     isJobView?: boolean
     isJobCI?: boolean
     changeCIPayload?: ChangeCIPayloadType
@@ -344,7 +343,6 @@ export interface CIPipelineProps
     connectCDPipelines: number
     getWorkflows: () => void
     close: () => void
-    deleteWorkflow?: (appId?: string, workflowId?: number) => any
     changeCIPayload?: ChangeCIPayloadType
 }
 

src/components/globalConfigurations/GlobalConfiguration.tsx

@@ -157,7 +157,7 @@ export default function GlobalConfiguration(props) {
                     <section className="global-configuration__navigation">
                         <NavItem serverMode={serverMode} />
                     </section>
-                    <section className="global-configuration__component-wrapper">
+                    <section className="global-configuration__component-wrapper bg__secondary">
                         <Suspense fallback={<Progressing pageLoader />}>
                             <ErrorBoundary>
                                 <Body