Merge pull request #569 from devtron-labs/workflow__esc

ci workflow esacpe fixed

Author: shivani170

src/components/CIPipelineN/CIPipeline.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, createContext } from 'react'
 import { NavLink } from 'react-router-dom'
-import { ButtonWithLoader, ConditionalWrap, DeleteDialog, showError, VisibleModal } from '../common'
+import { ButtonWithLoader, ConditionalWrap, DeleteDialog, showError, useKeyDown, VisibleModal } from '../common'
 import { Redirect, Route, Switch, useParams, useRouteMatch, useLocation, useHistory } from 'react-router'
 import { BuildStageVariable, BuildTabText, ModuleNameMap, SourceTypeMap, TriggerType, ViewType } from '../../config'
 import {
@@ -200,11 +200,11 @@ export default function CIPipeline({
             })
     }, [])
 
-    const getSecurityModuleStatus = async(): Promise<void> => {
+    const getSecurityModuleStatus = async (): Promise<void> => {
         try {
             const { result } = await getModuleInfo(ModuleNameMap.SECURITY)
             if (result?.status === ModuleStatus.INSTALLED) {
-              setSecurityModuleInstalled(true)
+                setSecurityModuleInstalled(true)
             }
         } catch (error) {}
     }
@@ -354,7 +354,8 @@ export default function CIPipeline({
         validateStage(BuildStageVariable.PreBuild, formData)
         validateStage(BuildStageVariable.Build, formData)
         validateStage(BuildStageVariable.PostBuild, formData)
-        const scanValidation = !isSecurityModuleInstalled || (formData.scanEnabled || !window._env_.FORCE_SECURITY_SCANNING)
+        const scanValidation =
+            !isSecurityModuleInstalled || formData.scanEnabled || !window._env_.FORCE_SECURITY_SCANNING
         if (!scanValidation) {
             setLoadingData(false)
             toast.error('Scanning is mandatory, please enable scanning')
@@ -377,7 +378,7 @@ export default function CIPipeline({
         }
 
         saveCIPipeline(
-            {...formData, scanEnabled: isSecurityModuleInstalled ? formData.scanEnabled: false },
+            { ...formData, scanEnabled: isSecurityModuleInstalled ? formData.scanEnabled : false },
             ciPipeline,
             formData.materials,
             +appId,
@@ -511,9 +512,7 @@ export default function CIPipeline({
             _formDataErrorObj.name = validationRules.name(_formData.name)
             _formDataErrorObj[BuildStageVariable.Build].isValid = _formDataErrorObj.name.isValid
             let valid = _formData.materials.reduce((isValid, mat) => {
-                isValid =
-                    isValid &&
-                    validationRules.sourceValue( mat.regex || mat.value).isValid
+                isValid = isValid && validationRules.sourceValue(mat.regex || mat.value).isValid
                 return isValid
             }, true)
             _formDataErrorObj[BuildStageVariable.Build].isValid = _formDataErrorObj.name.isValid && valid
@@ -639,6 +638,7 @@ export default function CIPipeline({
     const addNewTask = () => {
         const _formData = { ...formData }
         const detailsFromLastStep = calculateLastStepDetail(true, _formData, activeStageName)
+
         const stage = {
             id: detailsFromLastStep.index,
             index: detailsFromLastStep.index,
@@ -677,6 +677,14 @@ export default function CIPipeline({
         )
     }
 
+    const keys = useKeyDown()
+
+    useEffect(() => {
+      if (keys.join('') === 'Escape' && typeof close === 'function') {
+          close()
+      }
+    }, [keys])
+
     return (
         <VisibleModal className="">
             <div

src/components/cdPipeline/CDPipeline.tsx

@@ -119,10 +119,22 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
         this.handleRunInEnvCheckbox = this.handleRunInEnvCheckbox.bind(this)
         this.savePipeline = this.savePipeline.bind(this)
         this.selectEnvironment = this.selectEnvironment.bind(this)
+        this.escFunction = this.escFunction.bind(this)
     }
 
     componentDidMount() {
         this.getDeploymentStrategies()
+        document.addEventListener('keydown', this.escFunction)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.escFunction)
+    }
+
+    escFunction(event) {
+        if ((event.keyCode === 27 || event.key === 'Escape') && typeof this.props.close === 'function') {
+          this.props.close()
+        }
     }
 
     getDeploymentStrategies(): void {

src/components/ciPipeline/ExternalCIPipeline.tsx

@@ -67,12 +67,13 @@ export default class ExternalCIPipeline extends Component<CIPipelineProps, Exter
         this.copyToClipboard = this.copyToClipboard.bind(this);
         this.validationRules = new ValidationRules();
         this.handleSourceChange = this.handleSourceChange.bind(this);
-
+        this.escFunction = this.escFunction.bind(this);
     }
 
     componentDidMount() {
         this.getHostURLConfig();
         if (this.props.match.params.ciPipelineId) {
+             document.addEventListener("keydown", this.escFunction);
             getInitDataWithCIPipeline(this.props.match.params.appId, this.props.match.params.ciPipelineId).then((response) => {
                 this.setState({ ...response });
             }).catch((error: ServerErrors) => {
@@ -96,6 +97,16 @@ export default class ExternalCIPipeline extends Component<CIPipelineProps, Exter
         }
     }
 
+  componentWillUnmount() {
+      document.removeEventListener('keydown', this.escFunction)
+    }
+
+  escFunction(event) {
+    if ((event.keyCode === 27 || event.key === 'Escape') && typeof this.props.close === 'function') {
+        this.props.close()
+    }
+  }
+
     getHostURLConfig() {
         getHostURLConfiguration().then((response) => {
             this.setState({ hostURLConfig: response.result, })

src/components/ciPipeline/LinkedCIPipelineEdit.tsx

@@ -52,6 +52,21 @@ export default class LinkedCIPipeline extends Component<CIPipelineProps, LinkedC
         this.selectApp = this.selectApp.bind(this)
         this.handleName = this.handleName.bind(this)
         this.validationRules = new ValidationRules()
+        this.escFunction = this.escFunction.bind(this);
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.escFunction)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.escFunction)
+    }
+
+    escFunction(event) {
+        if (event.keyCode === 27 || event.key === 'Escape') {
+             this.props.close()
+        }
     }
 
     selectApp({ value }): void {

src/components/ciPipeline/LinkedCIPipelineView.tsx

@@ -58,17 +58,31 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
         }
         this.deletePipeline = this.deletePipeline.bind(this);
         this.closeCIDeleteModal = this.closeCIDeleteModal.bind(this);
+        this.escFunction = this.escFunction.bind(this)
     }
 
     componentDidMount() {
-        getInitDataWithCIPipeline(this.props.match.params.appId, this.props.match.params.ciPipelineId, true).then((response) => {
-            this.setState({ ...response, loadingData: false }, () => {
-                this.generateSourceUrl();
-            });
-        }).catch((error: ServerErrors) => {
-            showError(error);
-            this.setState({ loadingData: false });
-        })
+      document.addEventListener('keydown', this.escFunction)
+      getInitDataWithCIPipeline(this.props.match.params.appId, this.props.match.params.ciPipelineId, true)
+          .then((response) => {
+              this.setState({ ...response, loadingData: false }, () => {
+                  this.generateSourceUrl()
+              })
+          })
+          .catch((error: ServerErrors) => {
+              showError(error)
+              this.setState({ loadingData: false })
+          })
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('keydown', this.escFunction)
+    }
+
+    escFunction(event) {
+        if ((event.keyCode === 27 || event.key === 'Escape') && typeof this.props.close === 'function') {
+           this.props.close()
+        }
     }
 
     async generateSourceUrl() {