Skip to content

Commit

Permalink
Merge pull request #1747 from devtron-labs/feat/approval-modal-in-app…
Browse files Browse the repository at this point in the history 
…-details

feat: approval modal integration
  • Loading branch information
@shivani170
shivani170 authored May 13, 2024
2 parents a13b88a + b729548 commit 2853c0b
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 56 deletions.
2 changes: 1 addition & 1 deletion src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2091,7 +2091,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
}

const renderApprovalMaterial = () => {
if (ApprovalMaterialModal && this.props.location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE)) {
if (ApprovalMaterialModal && location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE)) {
let node: CommonNodeAttr
let _appID
if (selectedCDNode?.id) {
Expand Down
55 changes: 42 additions & 13 deletions src/components/app/details/appDetails/AppDetailsCDButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,29 @@ import {
stopPropagation,
useSearchString,
} from '@devtron-labs/devtron-fe-common-lib'
import { getCTAClass } from '../../../common'
import { getCTAClass, importComponentFromFELibrary } from '../../../common'
import { URL_PARAM_MODE_TYPE } from '../../../common/helpers/types'
import CDMaterial from '../triggerView/cdMaterial'
import { MATERIAL_TYPE } from '../triggerView/types'
import { BUTTON_TITLE } from '../../../ApplicationGroup/Constants'
import { AppDetailsCDButtonType } from '../../types'
import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
import { TRIGGER_VIEW_PARAMS } from '../triggerView/Constants'
import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
import GitCommitInfoGeneric from '../../../common/GitCommitInfoGeneric'

const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')

const AppDetailsCDButton = ({
appId,
environmentId,
cdPipelineId,
isVirtualEnvironment,
ciPipelineId,
cdModal,
deploymentAppType,
parentEnvironmentName,
isVirtualEnvironment,
deploymentUserActionState,
loadingDetails,
environmentName,
triggerType,
isRedirectedFromAppDetails,
}: AppDetailsCDButtonType): JSX.Element => {
const history = useHistory()
const { searchParams } = useSearchString()
Expand Down Expand Up @@ -65,14 +66,41 @@ const AppDetailsCDButton = ({
<InfoOutline className="icon-dim-16 mr-6" />
) : (
<DeployIcon
className={`icon-dim-16 dc__no-svg-fill mr-6 ${deploymentUserActionState === ACTION_STATE.ALLOWED ? '' : 'scn-9'}`}
className={`icon-dim-16 dc__no-svg-fill mr-6 ${deploymentUserActionState === ACTION_STATE.PARTIAL ? 'scn-9' : ''}`}
/>
)}
{BUTTON_TITLE[DeploymentNodeType.CD]}
</button>
)
}

const node = {
environmentName,
parentEnvironmentName: cdModal.parentEnvironmentName,
isVirtualEnvironment,
}

const renderApprovalMaterial = () => {
return (
ApprovalMaterialModal &&
location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE) && (
<ApprovalMaterialModal
isLoading={loadingDetails}
node={node}
materialType={MATERIAL_TYPE.inputMaterialList}
stageType={DeploymentNodeType.CD}
closeApprovalModal={closeCDModal}
appId={appId}
pipelineId={cdModal.cdPipelineId}
getModuleInfo={getModuleInfo}
GitCommitInfoGeneric={GitCommitInfoGeneric}
ciPipelineId={cdModal.ciPipelineId}
history={history}
/>
)
)
}

const renderCDModal = () => {
return (
(mode === URL_PARAM_MODE_TYPE.LIST || mode === URL_PARAM_MODE_TYPE.REVIEW_CONFIG) && (
Expand All @@ -82,17 +110,17 @@ const AppDetailsCDButton = ({
materialType={MATERIAL_TYPE.inputMaterialList}
appId={appId}
envId={environmentId}
pipelineId={cdPipelineId}
pipelineId={cdModal.cdPipelineId}
stageType={DeploymentNodeType.CD}
envName={environmentName}
closeCDModal={closeCDModal}
triggerType={triggerType}
triggerType={cdModal.triggerType}
isVirtualEnvironment={isVirtualEnvironment}
ciPipelineId={ciPipelineId}
ciPipelineId={cdModal.ciPipelineId}
deploymentAppType={deploymentAppType}
parentEnvironmentName={parentEnvironmentName}
parentEnvironmentName={cdModal.parentEnvironmentName}
isLoading={loadingDetails}
isRedirectedFromAppDetails={isRedirectedFromAppDetails}
isRedirectedFromAppDetails={cdModal.isRedirectedFromAppDetails}
/>
</div>
</VisibleModal>
Expand All @@ -104,6 +132,7 @@ const AppDetailsCDButton = ({
<>
{renderDeployButton()}
{renderCDModal()}
{renderApprovalMaterial()}
</>
)
}
Expand Down
18 changes: 10 additions & 8 deletions src/components/app/details/appDetails/SourceInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const SourceInfo = ({
ciArtifactId,
setErrorsList,
filteredEnvIds,
deploymentUserActionState
deploymentUserActionState,
}: SourceInfoType) => {
const [showVulnerabilitiesCard, setShowVulnerabilitiesCard] = useState<boolean>(false)
const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
Expand Down Expand Up @@ -207,16 +207,18 @@ export const SourceInfo = ({
<AppDetailsCDButton
appId={appDetails.appId}
environmentId={appDetails.environmentId}
cdPipelineId={appDetails.cdPipelineId}
environmentName={appDetails.environmentName}
isVirtualEnvironment={appDetails.isVirtualEnvironment}
ciPipelineId={appDetails.ciPipelineId}
deploymentAppType={appDetails.deploymentAppType}
parentEnvironmentName={appDetails.parentEnvironmentName}
deploymentUserActionState={deploymentUserActionState}
loadingDetails={loadingDetails}
environmentName={appDetails.environmentName}
triggerType={appDetails.triggerType}
isRedirectedFromAppDetails
cdModal={{
cdPipelineId: appDetails.cdPipelineId,
ciPipelineId: appDetails.ciPipelineId,
parentEnvironmentName: appDetails.parentEnvironmentName,
deploymentUserActionState: deploymentUserActionState,
triggerType: appDetails.triggerType,
isRedirectedFromAppDetails: true,
}}
/>
</div>
)}
Expand Down
14 changes: 0 additions & 14 deletions src/components/app/details/triggerView/TriggerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
ToastBody,
CommonNodeAttr,
WorkflowType,
getDefaultConfig,
HandleKeyValueChangeType,
KeyValueListActionType,
getIsRequestAborted,
Expand Down Expand Up @@ -133,7 +132,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
this.toggleInvalidateCache = this.toggleInvalidateCache.bind(this)
this.getMaterialByCommit = this.getMaterialByCommit.bind(this)
this.getFilteredMaterial = this.getFilteredMaterial.bind(this)
this.getConfigs = this.getConfigs.bind(this)
this.abortController = new AbortController()
}

Expand Down Expand Up @@ -188,15 +186,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
})
}

// TODO: Move it into Approval Modal when we shift to Route
getConfigs() {
getDefaultConfig().then((response) => {
const isConfigPresent = response.result.isConfigured
const _isDefaultConfig = response.result.is_default_configured
this.setState({ configs: isConfigPresent, isDefaultConfigPresent: _isDefaultConfig })
})
}

getWorkflows = (isFromOnMount?: boolean) => {
getTriggerWorkflows(
this.props.match.params.appId,
Expand Down Expand Up @@ -225,7 +214,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
this.setState({ workflows: wf, view: ViewType.FORM, filteredCIPipelines: _filteredCIPipelines }, () => {
this.getWorkflowStatus()
if (isFromOnMount) {
this.getConfigs()

if (ApprovalMaterialModal) {
if (this.props.location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE)) {
Expand Down Expand Up @@ -1313,8 +1301,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
getModuleInfo={getModuleInfo}
GitCommitInfoGeneric={GitCommitInfoGeneric}
ciPipelineId={node.connectingCiPipelineId}
configs={this.state.configs}
isDefaultConfigPresent={this.state.isDefaultConfigPresent}
history={this.props.history}
/>
)
Expand Down
8 changes: 3 additions & 5 deletions src/components/app/details/triggerView/cdMaterial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -567,11 +567,9 @@ const CDMaterial = ({
const viewAllImages = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation()
if (isRedirectedFromAppDetails) {
// redirecting to image approval
window.open(
`${location.origin}${window.__BASE_URL__}app/${appId}/trigger?${TRIGGER_VIEW_PARAMS.APPROVAL_NODE}=${pipelineId}&${TRIGGER_VIEW_PARAMS.APPROVAL_STATE}=${TRIGGER_VIEW_PARAMS.APPROVAL}`,
'_blank',
)
history.push({
search: `${TRIGGER_VIEW_PARAMS.APPROVAL_NODE}=${pipelineId}&${TRIGGER_VIEW_PARAMS.APPROVAL_STATE}=${TRIGGER_VIEW_PARAMS.APPROVAL}`,
})
} else {
closeCDModal(e)
onClickCDMaterial(pipelineId, DeploymentNodeType.CD, true)
Expand Down
31 changes: 17 additions & 14 deletions src/components/app/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,22 +57,27 @@ export interface AddNewAppState {
createAppLoader: boolean
}

export interface AppDetails {
appId: number
export interface CDModalProps {
cdPipelineId?: number
triggerType?: string
parentEnvironmentName?: string
deprecated?: boolean
k8sVersion?: number
ciArtifactId?: number
parentArtifactId?: number
parentEnvironmentName: string
ciPipelineId?: number
isRedirectedFromAppDetails?: boolean,
}

export interface AppDetails extends CDModalProps {
appId: number
deploymentAppType?: DeploymentAppTypes
externalCi?: boolean
userApprovalConfig?: string
ciArtifactId?: number
parentArtifactId?: number
deprecated?: boolean
k8sVersion?: number
clusterName?: string
dockerRegistryId?: string
ipsAccessProvided?: boolean
description?: string
userApprovalConfig?: string
isVirtualEnvironment?: boolean
image?: string
helmPackageName?: string
Expand All @@ -91,7 +96,6 @@ export interface AppDetails {
resourceTree: ResourceTree
projectName?: string
clusterId?: number
deploymentAppType?: DeploymentAppTypes
deploymentAppDeleteRequest: boolean
imageTag?: string
}
Expand Down Expand Up @@ -568,15 +572,14 @@ export interface AppDetailsCDButtonType
AppDetails,
| 'appId'
| 'environmentId'
| 'cdPipelineId'
| 'isVirtualEnvironment'
| 'ciPipelineId'
| 'deploymentAppType'
| 'parentEnvironmentName'
| 'environmentName'
| 'triggerType'
>,
Pick<SourceInfoType, 'deploymentUserActionState' | 'loadingDetails'> {isRedirectedFromAppDetails: boolean}
Pick<SourceInfoType, 'deploymentUserActionState' | 'loadingDetails'> {
isRedirectedFromAppDetails?: boolean,
cdModal: CDModalProps
}

export interface EnvironmentListMinType {
active?: boolean
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/helpers/Helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1202,7 +1202,7 @@ export const getApprovalModalTypeFromURL = (url: string): APPROVAL_MODAL_TYPE =>
}

export const getCTAClass = (userActionState: string, disableDeployButton?: boolean): string => {
let className = 'cta flex ml-auto'
let className = 'cta small flex ml-auto'
if (disableDeployButton) {
className += ' disabled-opacity'
} else if (userActionState === ACTION_STATE.BLOCKED) {
Expand Down

0 comments on commit 2853c0b

Please sign in to comment.