feat: change ci v2

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

@@ -39,8 +39,6 @@
     width: 1px;
     height: 20px;
     background-color: var(--N200);
-    margin-left: 12px;
-    margin-right: 12px;
 }
 
 .bulk-ci-trigger-container {

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

@@ -52,15 +52,13 @@ import {
     CIPipelineNodeType,
     DEFAULT_ROUTE_PROMPT_MESSAGE,
     triggerCDNode,
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
-import {
-    BUILD_STATUS,
-    DEFAULT_GIT_BRANCH_VALUE,
-    NO_COMMIT_SELECTED,
-    URLS,
-    ViewType,
-} from '../../../../config'
+import { BUILD_STATUS, DEFAULT_GIT_BRANCH_VALUE, NO_COMMIT_SELECTED, URLS, ViewType } from '../../../../config'
 import CDMaterial from '../../../app/details/triggerView/cdMaterial'
 import { TriggerViewContext } from '../../../app/details/triggerView/config'
 import {
@@ -147,6 +145,7 @@ const validateRuntimeParameters = importComponentFromFELibrary(
     () => ({ isValid: true, cellError: {} }),
     'function',
 )
+const ChangeImageSource = importComponentFromFELibrary('ChangeImageSource', null, 'function')
 
 // FIXME: IN CIMaterials we are sending isCDLoading while in CD materials we are sending isCILoading
 let inprogressStatusTimer
@@ -197,6 +196,8 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const [runtimeParamsErrorState, setRuntimeParamsErrorState] = useState<Record<string, RuntimeParamsErrorState>>({})
     const [isBulkTriggerLoading, setIsBulkTriggerLoading] = useState<boolean>(false)
 
+    const selectedWorkflows = filteredWorkflows.filter((wf) => wf.isSelected)
+
     const enableRoutePrompt = isBranchChangeLoading || isBulkTriggerLoading
     usePrompt({ shouldPrompt: enableRoutePrompt })
 
@@ -1304,12 +1305,6 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         preventBodyScroll(false)
     }
 
-    const hideWebhookModal = (e?) => {
-        if (e) {
-            stopPropagation(e)
-        }
-    }
-
     const onClickWebhookTimeStamp = () => {
         if (webhookTimeStampOrder === TIME_STAMP_ORDER.DESCENDING) {
             setWebhookTimeStampOrder(TIME_STAMP_ORDER.ASCENDING)
@@ -1386,6 +1381,11 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         preventBodyScroll(false)
     }
 
+    const handleCloseChangeImageSource = () => {
+        setPageViewType(ViewType.LOADING)
+        getWorkflowsData()
+    }
+
     const onShowChangeSourceModal = () => {
         setShowBulkSourceChangeModal(true)
     }
@@ -1496,11 +1496,9 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                         ciArtifactId: Number(ciArtifact.id),
                         appId: Number(currentAppId),
                         stageType: bulkTriggerType,
-                        ...(
-                            getRuntimeParamsPayload
-                                ? { runtimeParamsPayload: getRuntimeParamsPayload(runtimeParams[currentAppId] ?? [])}
-                                : {}
-                        ),
+                        ...(getRuntimeParamsPayload
+                            ? { runtimeParamsPayload: getRuntimeParamsPayload(runtimeParams[currentAppId] ?? []) }
+                            : {}),
                     }),
                 )
             } else {
@@ -2285,7 +2283,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
             <PopupMenu autoClose>
                 <PopupMenu.Button
                     isKebab
-                    rootClassName="h-36 popup-button-kebab dc__border-left-b4 pl-8 pr-8 dc__no-left-radius flex bcb-5"
+                    rootClassName="h-32 popup-button-kebab dc__border-left-b4 pl-8 pr-8 dc__no-left-radius flex bcb-5"
                     dataTestId="deploy-popup"
                 >
                     <Dropdown className="icon-dim-20 fcn-0" />
@@ -2327,42 +2325,46 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const renderBulkTriggerActionButtons = (): JSX.Element => {
         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' }}
+            <div className="flex dc__min-width-fit-content dc__gap-12">
+                {ChangeImageSource && <ChangeImageSource
+                    selectedWorkflows={selectedWorkflows}
+                    handleCloseChangeImageSource={handleCloseChangeImageSource}
+                />}
+                <Button
+                    dataTestId="change-branch-bulk"
+                    text="Change branch"
+                    startIcon={<Pencil />}
                     onClick={onShowChangeSourceModal}
-                >
-                    <span className="flex dc__align-items-center">
-                        <Pencil className="icon-dim-16 scb-5 mr-4" />
-                        Change branch
-                    </span>
-                </button>
+                    size={ComponentSizeType.medium}
+                    style={ButtonStyleType.neutral}
+                    variant={ButtonVariantType.secondary}
+                />
                 <span className="filter-divider-env" />
-                <button
-                    className="cta flex h-36 mr-12"
-                    data-testid="bulk-build-image-button"
+                <Button
+                    dataTestId="bulk-build-image-button"
+                    text="Build image"
                     onClick={onShowBulkCIModal}
-                >
-                    {isCILoading ? <Progressing /> : 'Build image'}
-                </button>
-                <button
-                    className={`cta flex h-36 ${_showPopupMenu ? 'dc__no-right-radius' : ''}`}
-                    data-trigger-type="CD"
-                    data-testid="bulk-deploy-button"
-                    onClick={onShowBulkCDModal}
-                >
-                    {isCDLoading ? (
-                        <Progressing />
-                    ) : (
-                        <>
-                            <DeployIcon className="icon-dim-16 dc__no-svg-fill mr-8" />
-                            Deploy
-                        </>
-                    )}
-                </button>
-                {_showPopupMenu && renderDeployPopupMenu()}
+                    size={ComponentSizeType.medium}
+                    isLoading={isCILoading}
+                />
+                <div className="flex">
+                    <button
+                        className={`cta flex h-32 ${_showPopupMenu ? 'dc__no-right-radius' : ''}`}
+                        data-trigger-type="CD"
+                        data-testid="bulk-deploy-button"
+                        onClick={onShowBulkCDModal}
+                    >
+                        {isCDLoading ? (
+                            <Progressing />
+                        ) : (
+                            <>
+                                <DeployIcon className="icon-dim-16 dc__no-svg-fill mr-8" />
+                                Deploy
+                            </>
+                        )}
+                    </button>
+                    {_showPopupMenu && renderDeployPopupMenu()}
+                </div>
             </div>
         )
     }

src/components/workflowEditor/workflowEditor.scss

@@ -125,11 +125,3 @@
     bottom: 108px;
     right: 96px;
 }
-
-.workflow-options-modal {
-    margin: 0 auto;
-    width: 650px;
-    margin-top: 40px;
-    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
-    background: var(--bg-primary);
-}