Skip to content

Commit 6aef199

Browse files
AbhishekA1509AbhishekA1509
committed
feat: Refactor DeployImageModal and related components for improved navigation and layout
1 parent e4c362f commit 6aef199

File tree

6 files changed

+80
-78
lines changed

6 files changed

+80
-78
lines changed

‎src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ import { getIsMaterialApproved } from '@Components/app/details/triggerView/cdMat
6464
import emptyPreDeploy from '../../../../assets/img/empty-pre-deploy.webp'
6565
import { ReactComponent as MechanicalOperation } from '../../../../assets/img/ic-mechanical-operation.svg'
6666
import notAuthorized from '../../../../assets/img/ic-not-authorized.svg'
67-
import CDMaterial from '../../../app/details/triggerView/cdMaterial'
6867
import { BulkSelectionEvents, MATERIAL_TYPE, RuntimeParamsErrorState } from '../../../app/details/triggerView/types'
6968
import { importComponentFromFELibrary } from '../../../common'
7069
import { BulkCDDetailType, BulkCDTriggerType } from '../../AppGroup.types'
@@ -856,7 +855,8 @@ const BulkCDTrigger = ({
856855
warningMessage={appDeploymentWindowMap[selectedApp.appId].warningMessage}
857856
/>
858857
)}
859-
<CDMaterial
858+
{/* TODO: Replace with BulkDeployModal */}
859+
{/* <CDMaterial
860860
key={selectedApp.appId}
861861
materialType={MATERIAL_TYPE.inputMaterialList}
862862
appId={selectedApp.appId}
@@ -885,7 +885,8 @@ const BulkCDTrigger = ({
885885
bulkUploadFile={bulkUploadFile}
886886
bulkSidebarTab={currentSidebarTab}
887887
selectedAppName={selectedApp.name}
888-
/>
888+
/> */}
889+
<div/>
889890
</>
890891
)}
891892
</div>

‎src/components/app/details/triggerView/DeployImageModal/DeployImageContent.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ButtonVariantType,
88
CDMaterialSidebarType,
99
CDMaterialType,
10+
ComponentSizeType,
1011
ConditionalWrap,
1112
DEPLOYMENT_WINDOW_TYPE,
1213
DeploymentNodeType,
@@ -417,8 +418,8 @@ const DeployImageContent = ({
417418
<span className="flex dc__align-start">{titleText}</span>
418419
)}
419420

420-
<span className="flexbox dc__align-items-center h-32 dc__gap-16">
421-
{showSearchBar ? (
421+
<span className="flexbox dc__align-items-center h-32 dc__gap-4">
422+
{showSearchBar || isSearchApplied ? (
422423
renderSearch()
423424
) : (
424425
<Button
@@ -429,6 +430,7 @@ const DeployImageContent = ({
429430
icon={<Icon name="ic-magnifying-glass" color={null} />}
430431
ariaLabel="Show search bar"
431432
showAriaLabelInTippy={false}
433+
size={ComponentSizeType.small}
432434
/>
433435
)}
434436
<Button
@@ -439,6 +441,7 @@ const DeployImageContent = ({
439441
icon={<Icon name="ic-arrows-clockwise" color={null} />}
440442
ariaLabel="Refresh material list"
441443
showAriaLabelInTippy={false}
444+
size={ComponentSizeType.small}
442445
/>
443446
</span>
444447
</div>

‎src/components/app/details/triggerView/DeployImageModal/DeployImageHeader.tsx

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,35 @@ const DeployImageHeader = ({
1515
stageType,
1616
isRollbackTrigger,
1717
isVirtualEnvironment,
18+
handleNavigateToMaterialListView,
19+
children,
1820
}: DeployImageHeaderProps) => (
1921
<div className="px-20 py-12 flexbox dc__content-space dc__align-items-center border__primary--bottom">
20-
<h2 className="m-0 fs-16 fw-4 lh-24 cn-9 dc__truncate">
21-
{getCDModalHeaderText({
22-
isRollbackTrigger,
23-
stageType,
24-
envName,
25-
isVirtualEnvironment,
26-
})}
27-
</h2>
22+
<div className="flexbox dc__gap-8 dc__align-items-center flex-wrap">
23+
{handleNavigateToMaterialListView && (
24+
<Button
25+
dataTestId="cd-trigger-back-button"
26+
ariaLabel="Navigate to list view"
27+
showAriaLabelInTippy={false}
28+
variant={ButtonVariantType.borderLess}
29+
style={ButtonStyleType.neutral}
30+
icon={<Icon name="ic-arrow-right" rotateBy={180} color={null} />}
31+
onClick={handleNavigateToMaterialListView}
32+
size={ComponentSizeType.small}
33+
/>
34+
)}
35+
36+
<h2 className="m-0 fs-16 fw-4 lh-24 cn-9 dc__truncate">
37+
{getCDModalHeaderText({
38+
isRollbackTrigger,
39+
stageType,
40+
envName,
41+
isVirtualEnvironment,
42+
})}
43+
</h2>
44+
45+
{children}
46+
</div>
2847

2948
<Button
3049
dataTestId="header-close-button"

‎src/components/app/details/triggerView/DeployImageModal/DeployImageModal.tsx

Lines changed: 40 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import {
66
AnimatedDeployButton,
77
API_STATUS_CODES,
88
ArtifactInfo,
9-
Button,
109
ButtonStyleType,
11-
ButtonVariantType,
1210
CDMaterialServiceEnum,
1311
CDMaterialSidebarType,
1412
ConditionalWrap,
@@ -65,7 +63,6 @@ import { DeployImageContentProps, DeployImageModalProps, RuntimeParamsSidebarPro
6563
import {
6664
getAllowWarningWithTippyNodeTypeProp,
6765
getCDArtifactId,
68-
getCDModalHeaderText,
6966
getConfigToDeployValue,
7067
getDeployButtonIcon,
7168
getInitialSelectedConfigToDeploy,
@@ -145,7 +142,7 @@ const DeployImageModal = ({
145142
!!getDeploymentStrategies && !!pipelineId,
146143
)
147144

148-
const [currentSidebarTab, setCurrentSidebarTab] = useState<CDMaterialSidebarType>(CDMaterialSidebarType.PARAMETERS)
145+
const [currentSidebarTab, setCurrentSidebarTab] = useState<CDMaterialSidebarType>(CDMaterialSidebarType.IMAGE)
149146
const [runtimeParamsErrorState, setRuntimeParamsErrorState] = useState<RuntimeParamsErrorState>({
150147
isValid: true,
151148
cellError: {},
@@ -706,13 +703,13 @@ const DeployImageModal = ({
706703

707704
return (
708705
<div
709-
className={`trigger-modal__trigger dc__position-sticky dc__zi-10 ${
706+
className={`w-100 ${
710707
(!isRollbackTrigger && !isSelectImageTrigger) ||
711708
showConfigDiffView ||
712709
stageType === DeploymentNodeType.PRECD ||
713710
stageType === DeploymentNodeType.POSTCD
714711
? 'flex right'
715-
: ''
712+
: 'flexbox dc__content-space'
716713
}`}
717714
>
718715
{!hideConfigDiffSelector &&
@@ -778,13 +775,15 @@ const DeployImageModal = ({
778775
<div
779776
className={`flexbox-col h-100 dc__overflow-auto ${isPreOrPostCD ? 'display-grid cd-material__container-with-sidebar' : ''}`}
780777
>
781-
<RuntimeParamsSidebar
782-
areTabsDisabled
783-
currentSidebarTab={currentSidebarTab}
784-
handleSidebarTabChange={handleSidebarTabChange}
785-
runtimeParamsErrorState={runtimeParamsErrorState}
786-
appName={appName}
787-
/>
778+
{isPreOrPostCD && (
779+
<RuntimeParamsSidebar
780+
areTabsDisabled
781+
currentSidebarTab={currentSidebarTab}
782+
handleSidebarTabChange={handleSidebarTabChange}
783+
runtimeParamsErrorState={runtimeParamsErrorState}
784+
appName={appName}
785+
/>
786+
)}
788787

789788
<MaterialListSkeleton />
790789
</div>
@@ -868,44 +867,6 @@ const DeployImageModal = ({
868867
)
869868
}
870869

871-
const renderPipelineConfigDiffHeader = () => (
872-
<div className="flex dc__gap-16">
873-
<Button
874-
dataTestId="cd-trigger-back-button"
875-
ariaLabel="Navigate to list view"
876-
showAriaLabelInTippy={false}
877-
variant={ButtonVariantType.borderLess}
878-
style={ButtonStyleType.neutral}
879-
icon={<Icon name="ic-arrow-right" rotateBy={180} color={null} />}
880-
onClick={handleNavigateToListView}
881-
/>
882-
883-
<h2 className="modal__title">
884-
{getCDModalHeaderText({
885-
isRollbackTrigger,
886-
stageType,
887-
envName,
888-
isVirtualEnvironment,
889-
})}
890-
</h2>
891-
{selectedMaterial && (
892-
<ArtifactInfo
893-
{...getTriggerArtifactInfoProps({
894-
material: selectedMaterial,
895-
showApprovalInfoTippy:
896-
(isCDNode || isRollbackTrigger) && isApprovalConfigured && ApprovalInfoTippy,
897-
isRollbackTrigger,
898-
appId,
899-
pipelineId,
900-
isExceptionUser,
901-
reloadMaterials: reloadInitialData,
902-
requestedUserId,
903-
})}
904-
/>
905-
)}
906-
</div>
907-
)
908-
909870
return (
910871
<>
911872
<Drawer position="right" width="1024px" onClose={handleClose} onEscape={handleClose}>
@@ -914,18 +875,34 @@ const DeployImageModal = ({
914875
onClick={stopPropagation}
915876
>
916877
<div className="flexbox-col dc__overflow-auto flex-grow-1">
917-
{showConfigDiffView ? (
918-
renderPipelineConfigDiffHeader()
919-
) : (
920-
<DeployImageHeader
921-
handleClose={handleClose}
922-
envName={envName}
923-
stageType={stageType}
924-
isRollbackTrigger={isRollbackTrigger}
925-
isVirtualEnvironment={isVirtualEnvironment}
926-
/>
927-
)}
928-
<div className="flex-grow-1 dc__overflow-auto w-100">{renderContent()}</div>
878+
<DeployImageHeader
879+
handleClose={handleClose}
880+
envName={envName}
881+
stageType={stageType}
882+
isRollbackTrigger={isRollbackTrigger}
883+
isVirtualEnvironment={isVirtualEnvironment}
884+
handleNavigateToMaterialListView={showConfigDiffView ? handleNavigateToListView : null}
885+
>
886+
{showConfigDiffView && selectedMaterial && (
887+
<ArtifactInfo
888+
{...getTriggerArtifactInfoProps({
889+
material: selectedMaterial,
890+
showApprovalInfoTippy:
891+
(isCDNode || isRollbackTrigger) &&
892+
isApprovalConfigured &&
893+
ApprovalInfoTippy,
894+
isRollbackTrigger,
895+
appId,
896+
pipelineId,
897+
isExceptionUser,
898+
reloadMaterials: reloadInitialData,
899+
requestedUserId,
900+
})}
901+
/>
902+
)}
903+
</DeployImageHeader>
904+
905+
<div className="flex-grow-1 dc__overflow-auto bg__tertiary w-100">{renderContent()}</div>
929906
</div>
930907

931908
{initialDataError || isInitialDataLoading || materialList.length === 0 ? null : (

‎src/components/app/details/triggerView/DeployImageModal/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ export type DeployImageHeaderProps = Pick<
5656
> & {
5757
envName: string
5858
isRollbackTrigger: boolean
59+
handleNavigateToMaterialListView?: () => void
60+
children?: React.ReactNode
5961
}
6062

6163
export interface RuntimeParamsSidebarProps {

‎src/components/app/details/triggerView/DeployImageModal/utils.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export const getCDModalHeaderText = ({
161161
case STAGE_TYPE.CD:
162162
return (
163163
<>
164-
Deploy to &nbsp;
164+
Deploy to&nbsp;
165165
<span className="fw-6">{`${envName}${isVirtualEnvironment ? ' (Isolated)' : ''}`}</span>
166166
</>
167167
)
@@ -170,7 +170,7 @@ export const getCDModalHeaderText = ({
170170
case STAGE_TYPE.ROLLBACK:
171171
return (
172172
<>
173-
Rollback for <span className="fw-6">{envName}</span>
173+
Rollback for&nbsp;<span className="fw-6">{envName}</span>
174174
</>
175175
)
176176
default:

0 commit comments

Comments
 (0)