Merge pull request #1310 from devtron-labs/bulk-source-change

feat: Ability to change branch for all selected applications during bulk build from Application Groups

Author: vikramdevtron

src/components/ApplicationGroup/Constants.ts

@@ -167,3 +167,16 @@ export const CREATE_GROUP_TABS = {
     selectedApps: 'Selected applications',
     allApps: 'Add/Remove applications',
 }
+
+export const GetBranchChangeStatus = (statusText: string): BulkResponseStatus => {
+    switch (statusText) {
+        case BULK_VIRTUAL_RESPONSE_STATUS.pass:
+            return BulkResponseStatus.PASS
+        case BULK_VIRTUAL_RESPONSE_STATUS.fail:
+            return BulkResponseStatus.FAIL
+        case BULK_VIRTUAL_RESPONSE_STATUS.unauthorized:
+            return BulkResponseStatus.UNAUTHORIZE
+        default:
+            return
+    }
+}

src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx

@@ -0,0 +1,150 @@
+import { CustomInput, Drawer, InfoColourBar, Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import React, { useEffect, useRef, useState } from 'react'
+import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
+import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
+import SourceUpdateResponseModal from './SourceUpdateResponseModal'
+
+export default function BulkSourceChange({ closePopup, responseList, changeBranch, loading, selectedAppCount }) {
+    const sourceChangeDetailRef = useRef<HTMLDivElement>(null)
+
+    const [showResponseModal, setShowResponseModal] = useState(false)
+    const [inputError, setInputError] = useState('')
+    const [branchName, setBranchName] = useState('')
+
+    const closeBulkCIModal = (evt) => {
+        closePopup(evt)
+    }
+
+    const escKeyPressHandler = (evt): void => {
+        if (evt && evt.key === 'Escape' && typeof closePopup === 'function') {
+            evt.preventDefault()
+            closeBulkCIModal(evt)
+        }
+    }
+    const outsideClickHandler = (evt): void => {
+        if (
+            sourceChangeDetailRef.current &&
+            !sourceChangeDetailRef.current.contains(evt.target) &&
+            typeof closePopup === 'function'
+        ) {
+            closeBulkCIModal(evt)
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener('keydown', escKeyPressHandler)
+        return (): void => {
+            document.removeEventListener('keydown', escKeyPressHandler)
+        }
+    }, [escKeyPressHandler])
+
+    useEffect(() => {
+        document.addEventListener('click', outsideClickHandler)
+        return (): void => {
+            document.removeEventListener('click', outsideClickHandler)
+        }
+    }, [outsideClickHandler])
+
+    useEffect(() => {
+        setShowResponseModal(responseList.length > 0)
+    }, [responseList])
+
+    const updateBranch = () => {
+        if (branchName.length === 0) {
+            setInputError('This is required')
+            return
+        }
+        changeBranch(branchName)
+    }
+
+    const renderHeaderSection = (): JSX.Element | null => {
+        return (
+            <div className="flex flex-align-center flex-justify dc__border-bottom bcn-0 pt-16 pr-20 pb-16 pl-20">
+                <h2 className="fs-16 fw-6 lh-1-43 m-0">Change branch for {selectedAppCount} applications</h2>
+                <button
+                    type="button"
+                    className="dc__transparent flex icon-dim-24"
+                    disabled={loading}
+                    onClick={closeBulkCIModal}
+                >
+                    <Close className="icon-dim-24" />
+                </button>
+            </div>
+        )
+    }
+
+    const renderInfoBar = (): JSX.Element => {
+        return (
+            <InfoColourBar
+                message="Branch will be changed only for build pipelines with source type as ‘Branch Fixed’ or ‘Branch Regex’."
+                classname="warn dc__no-border-radius dc__no-top-border dc__no-left-border dc__no-right-border"
+                Icon={Warn}
+                iconClass="warning-icon"
+            />
+        )
+    }
+
+    const checkInput = (): boolean => {
+        return branchName === ''
+    }
+
+    const handleInputChange = (e): void => {
+        setBranchName(e.target.value)
+        setInputError('')
+    }
+
+    const renderForm = (): JSX.Element => {
+        const isDisabled = checkInput()
+
+        return (
+            <div className="p-20">
+                <div className="form__row">
+                    <CustomInput
+                        labelClassName="dc__required-field"
+                        autoComplete="off"
+                        name="branch_name"
+                        disabled={false}
+                        value={branchName}
+                        error={inputError}
+                        onChange={handleInputChange}
+                        label="Change to branch"
+                        placeholder="Enter branch name"
+                    />
+                </div>
+                <div className="flexbox">
+                    <button
+                        data-testid="cancel_button"
+                        className="cta cancel h-36 lh-36"
+                        type="button"
+                        onClick={closeBulkCIModal}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        data-testid="save_cluster_after_entering_cluster_details"
+                        className="cta ml-12 h-36 lh-36"
+                        onClick={updateBranch}
+                        disabled={isDisabled}
+                    >
+                        {loading ? <Progressing /> : 'Update branch'}
+                    </button>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <Drawer position="right" width="75%" minWidth={showResponseModal ? '1024px' : '600px'} maxWidth={showResponseModal ? '1200px' : '600px'}>
+            <div className="dc__window-bg h-100 bcn-0 bulk-ci-trigger-container" ref={sourceChangeDetailRef}>
+                {renderHeaderSection()}
+                {showResponseModal ? (
+                    <SourceUpdateResponseModal closePopup={closePopup} isLoading={false} responseList={responseList} />
+                ) : (
+                    <>
+                        {renderInfoBar()}
+                        {renderForm()}
+                    </>
+                )}
+            </div>
+        </Drawer>
+    )
+}

src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.scss

@@ -19,6 +19,14 @@
     }
 }
 
+.filter-divider {
+    width: 1px;
+    height: 20px;
+    background-color: var(--N200);
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
 .bulk-ci-trigger-container {
     .bulk-ci-trigger {
         display: grid;

src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx

@@ -39,6 +39,7 @@ import {
     refreshGitMaterial,
     triggerCDNode,
     triggerCINode,
+    triggerBranchChange,
 } from '../../../app/service'
 import {
     createGitCommitUrl,
@@ -47,6 +48,7 @@ import {
     preventBodyScroll,
     sortObjectArrayAlphabetically,
 } from '../../../common'
+import { ReactComponent as Pencil } from '../../../../assets/icons/ic-pencil.svg'
 import { getWorkflows, getWorkflowStatus } from '../../AppGroup.service'
 import { CI_MATERIAL_EMPTY_STATE_MESSAGING, TIME_STAMP_ORDER } from '../../../app/details/triggerView/Constants'
 import { toast } from 'react-toastify'
@@ -59,8 +61,8 @@ import {
     BulkResponseStatus,
     ENV_TRIGGER_VIEW_GA_EVENTS,
     BULK_CD_RESPONSE_STATUS_TEXT,
-    responseListOrder,
     BULK_VIRTUAL_RESPONSE_STATUS,
+    GetBranchChangeStatus,
 } from '../../Constants'
 import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
@@ -88,6 +90,7 @@ import Tippy from '@tippyjs/react'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import GitCommitInfoGeneric from '../../../common/GitCommitInfoGeneric'
 import { getDefaultConfig } from '../../../notifications/notifications.service'
+import BulkSourceChange from './BulkSourceChange'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const getDeployManifestDownload = importComponentFromFELibrary('getDeployManifestDownload', null, 'function')
@@ -102,6 +105,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const [pageViewType, setPageViewType] = useState<string>(ViewType.LOADING)
     const [isCILoading, setCILoading] = useState(false)
     const [isCDLoading, setCDLoading] = useState(false)
+    const [isBranchChangeLoading, setIsBranchChangeLoading] = useState(false);
     const [showPreDeployment, setShowPreDeployment] = useState(false)
     const [showPostDeployment, setShowPostDeployment] = useState(false)
     const [errorCode, setErrorCode] = useState(0)
@@ -110,6 +114,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const [showApprovalModal, setShowApprovalModal] = useState(false)
     const [showBulkCDModal, setShowBulkCDModal] = useState(false)
     const [showBulkCIModal, setShowBulkCIModal] = useState(false)
+    const [showBulkSourceChangeModal, setShowBulkSourceChangeModal] = useState(false)
     const [showWebhookModal, setShowWebhookModal] = useState(false)
     const [isWebhookPayloadLoading, setWebhookPayloadLoading] = useState(false)
     const [invalidateCache, setInvalidateCache] = useState(false)
@@ -176,6 +181,19 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
             })
     }
 
+    const preserveSelection = (_workflows: WorkflowType[]) => {
+        if (!workflows || !_workflows) {
+            return
+        }
+        const workflowMap = new Map()
+        workflows.forEach((wf) => {
+            workflowMap.set(wf.id, wf.isSelected)
+        })
+        _workflows.forEach((wf) => {
+            wf.isSelected = workflowMap.get(wf.id)
+        })
+    }
+
     const getWorkflowsData = async (): Promise<void> => {
         try {
             const { workflows: _workflows, filteredCIPipelines } = await getWorkflows(envId, filteredAppIds)
@@ -194,6 +212,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                     }),
                 )
             }
+            preserveSelection(_workflows)
             setWorkflows(_workflows)
             setFilteredCIPipelines(filteredCIPipelines)
             setErrorCode(0)
@@ -1032,6 +1051,41 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         setFilteredWorkflows(_workflows)
     }
 
+    const changeBranch = (value): void => {
+        let appIds = []
+        let appNameMap = new Map()
+        selectedAppList.map((app) => {
+            appIds.push(app.id)
+            appNameMap.set(app.id, app.name)
+        })
+        setIsBranchChangeLoading(true)
+        triggerBranchChange(appIds, +envId, value)
+            .then((response: any) => {
+                console.log(response)
+                const _responseList = []
+                response.result.apps.map((res) => {
+                    _responseList.push({
+                        appId: res.appId,
+                        appName: appNameMap.get(res.appId),
+                        statusText: res.status,
+                        status: GetBranchChangeStatus(res.status),
+                        envId: +envId,
+                        message: res.message,
+                    })
+                })
+                updateResponseListData(_responseList)
+                setCDLoading(false)
+                setCILoading(false)
+                preventBodyScroll(false)
+            })
+            .catch((error) => {
+                showError(error)
+            })
+            .finally(() => {
+                setIsBranchChangeLoading(false)
+            })
+    }
+
     const selectMaterial = (materialId, pipelineId?: number): void => {
         const _workflows = [...filteredWorkflows].map((workflow) => {
             const nodes = workflow.nodes.map((node) => {
@@ -1295,8 +1349,19 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         }, 100)
     }
 
-    const sortResponseList = (a, b) => {
-        return responseListOrder[a.status] - responseListOrder[b.status]
+    const hideChangeSourceModal = () => {
+        if (responseList.length > 0) {
+            setPageViewType(ViewType.LOADING)
+            inprogressStatusTimer && clearTimeout(inprogressStatusTimer)
+            getWorkflowsData()
+        }
+        setIsBranchChangeLoading(false)
+        setShowBulkSourceChangeModal(false)
+        setResponseList([])
+    }
+
+    const onShowChangeSourceModal = () => {
+        setShowBulkSourceChangeModal(true)
     }
 
     const updateBulkCDInputMaterial = (cdMaterialResponse: Record<string, CDMaterialResponseType>): void => {
@@ -1380,7 +1445,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         setResponseList((prevList) => {
             const resultMap = new Map(_responseList.map((data) => [data.appId, data]))
             const updatedArray = prevList?.map((prevItem) => resultMap.get(prevItem.appId) || prevItem)
-            return (updatedArray?.length > 0 ? updatedArray : _responseList).sort(sortResponseList)
+            return (updatedArray?.length > 0 ? updatedArray : _responseList).sort((a, b) => sortCallback('appName', a, b))
         })
     }
 
@@ -1862,6 +1927,22 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         )
     }
 
+    const renderBulkSourchChange = (): JSX.Element | null => {
+        if (!showBulkSourceChangeModal) {
+            return null
+        }
+
+        return (
+            <BulkSourceChange
+                closePopup={hideChangeSourceModal}
+                responseList={responseList}
+                changeBranch={changeBranch}
+                loading={isBranchChangeLoading}
+                selectedAppCount={selectedAppList.length}
+            />
+        )
+    }
+
     const renderCDMaterial = (): JSX.Element | null => {
         if (showCDModal) {
             let node: NodeAttr, _appID
@@ -2030,6 +2111,18 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         const _showPopupMenu = showPreDeployment || showPostDeployment
         return (
             <div className="flex dc__min-width-fit-content">
+                <button
+                    className="dc__edit_button h-36 lh-36"
+                    type="button"
+                    style={{ marginRight: 'auto' }}
+                    onClick={onShowChangeSourceModal}
+                >
+                    <span className="flex dc__align-items-center">
+                        <Pencil className="icon-dim-16 scb-5 mr-4" />
+                        Change branch
+                    </span>
+                </button>
+                <span className="filter-divider"></span>
                 <button
                     className="cta flex h-36 mr-12"
                     data-testid="bulk-build-image-button"
@@ -2157,6 +2250,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                 {renderBulkCDMaterial()}
                 {renderBulkCIMaterial()}
                 {renderApprovalMaterial()}
+                {renderBulkSourchChange()}
             </TriggerViewContext.Provider>
             <div></div>
         </div>