WIP: bd7d3d2 Merge pull request #1269 from devtron-labs/feat(scoped-variables)/floater-suggestions

Author: AbhishekA1509

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/SourceUpdateResponseModal.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { TriggerModalRow } from './TriggerModalTableRow'
+
+export default function SourceUpdateResponseModal({ closePopup, responseList, isLoading }) {
+    const renderResponseBodySection = (): JSX.Element => {
+        if (isLoading) {
+            return <Progressing pageLoader />
+        }
+        return (
+            <div className="response-list-container bcn-0 dc__height-inherit dc__overflow-auto pr-20 pb-16 pl-20">
+                <div
+                    className="dc__position-sticky dc__top-0 bcn-0 dc__border-bottom response-row dc__border-bottom pt-24 pb-8 dc__uppercase"
+                    style={{ zIndex: 1 }}
+                >
+                    <div className="fs-12 fw-6 cn-7 ">Application</div>
+                    <div className="fs-12 fw-6 cn-7 ">Branch Change status</div>
+                    <div className="fs-12 fw-6 cn-7 ">Message</div>
+                </div>
+                {responseList
+                    .map((response, index) => (
+                        <TriggerModalRow key={response.appId} rowData={response} index={index} />
+                    ))}
+            </div>
+        )
+    }
+
+    const renderFooterSection = (): JSX.Element => {
+        return (
+            <div
+                className={`dc__border-top flex bcn-0 pt-16 pr-20 pb-16 pl-20 dc__position-fixed dc__bottom-0 env-modal-width right`}
+            >
+                <button className="cta cancel flex h-36" data-testid="close-popup" onClick={closePopup}>
+                    Close
+                </button>
+            </div>
+        )
+    }
+
+    return (
+        <>
+            {renderResponseBodySection()}
+            {renderFooterSection()}
+        </>
+    )
+}