feat: mandatory tags blocks trigger

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.2.4-beta-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.2.4-beta-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/ApplicationGroup/AppGroup.types.ts

@@ -72,7 +72,7 @@ export interface BulkCDDetailTypeResponse {
 export interface BulkCDDetailType
     extends BulkTriggerAppDetailType,
         Pick<CDMaterialProps, 'isTriggerBlockedDueToPlugin' | 'configurePluginURL' | 'consequence'>,
-        Partial<Pick<CommonNodeAttr, 'showPluginWarning'>> {
+        Partial<Pick<CommonNodeAttr, 'showPluginWarning' | 'triggerBlockedInfo'>> {
     cdPipelineName?: string
     cdPipelineId?: string
     stageType?: DeploymentNodeType
@@ -613,4 +613,11 @@ export enum AppGroupUrlFilters {
 
 export interface AppGroupUrlFiltersType extends Record<AppGroupUrlFilters, string[]> {}
 
+export interface SetFiltersInLocalStorageParamsType {
+    filterParentType: FilterParentType
+    resourceId: string
+    resourceList: MultiValue<OptionType>
+    groupList: MultiValue<GroupOptionType>
+}
+
 export type AppEnvLocalStorageKeyType = `${string}__filter`

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

@@ -42,22 +42,22 @@ import {
     ToastManager,
     ToastVariantType,
     CommonNodeAttr,
+    TriggerBlockType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useLocation } from 'react-router-dom'
-import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
-import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
-import { ReactComponent as PlayIcon } from '../../../../assets/icons/ic-play-medium.svg'
-import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
-import { ReactComponent as UnAuthorized } from '../../../../assets/icons/ic-locked.svg'
-import { ReactComponent as Tag } from '../../../../assets/icons/ic-tag.svg'
+import { ReactComponent as Close } from '@Icons/ic-cross.svg'
+import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
+import { ReactComponent as PlayIcon } from '@Icons/ic-play-medium.svg'
+import { ReactComponent as Error } from '@Icons/ic-warning.svg'
+import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
+import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
 import emptyPreDeploy from '../../../../assets/img/empty-pre-deploy.png'
 import notAuthorized from '../../../../assets/img/ic-not-authorized.svg'
 import CDMaterial from '../../../app/details/triggerView/cdMaterial'
 import { BulkSelectionEvents, MATERIAL_TYPE } from '../../../app/details/triggerView/types'
 import { BulkCDDetailType, BulkCDTriggerType } from '../../AppGroup.types'
 import { BULK_CD_DEPLOYMENT_STATUS, BULK_CD_MATERIAL_STATUS, BULK_CD_MESSAGING, BUTTON_TITLE } from '../../Constants'
 import TriggerResponseModal from './TriggerResponseModal'
-import { EmptyView } from '../../../app/details/cicdHistory/History.components'
 import { ReactComponent as MechanicalOperation } from '../../../../assets/img/ic-mechanical-operation.svg'
 import { importComponentFromFELibrary } from '../../../common'
 import { BULK_ERROR_MESSAGES } from './constants'
@@ -77,6 +77,8 @@ const getDeploymentWindowStateAppGroup = importComponentFromFELibrary(
 const RuntimeParamTabs = importComponentFromFELibrary('RuntimeParamTabs', null, 'function')
 const MissingPluginBlockState = importComponentFromFELibrary('MissingPluginBlockState', null, 'function')
 const PolicyEnforcementMessage = importComponentFromFELibrary('PolicyEnforcementMessage')
+const TriggerBlockedError = importComponentFromFELibrary('TriggerBlockedError', null, 'function')
+const TriggerBlockEmptyState = importComponentFromFELibrary('TriggerBlockEmptyState', null, 'function')
 
 // TODO: Fix release tags selection
 export default function BulkCDTrigger({
@@ -379,6 +381,10 @@ export default function BulkCDTrigger({
     }
 
     const renderEmptyView = (): JSX.Element => {
+        if (selectedApp.triggerBlockedInfo?.blockedBy === TriggerBlockType.MANDATORY_TAG) {
+            return <TriggerBlockEmptyState stageType={selectedApp.stageType} appId={selectedApp.appId} />
+        }
+
         if (selectedApp.isTriggerBlockedDueToPlugin) {
             const commonNodeAttrType: CommonNodeAttr['type'] =
                 selectedApp.stageType === DeploymentNodeType.PRECD ? 'PRECD' : 'POSTCD'
@@ -393,16 +399,16 @@ export default function BulkCDTrigger({
 
         if (unauthorizedAppList[selectedApp.appId]) {
             return (
-                <EmptyView
-                    imgSrc={notAuthorized}
+                <GenericEmptyState
+                    image={notAuthorized}
                     title={BULK_CD_MESSAGING.unauthorized.title}
                     subTitle={BULK_CD_MESSAGING.unauthorized.subTitle}
                 />
             )
         }
         return (
-            <EmptyView
-                imgSrc={emptyPreDeploy}
+            <GenericEmptyState
+                image={emptyPreDeploy}
                 title={`${selectedApp.name}  ${BULK_CD_MESSAGING[stage].title}`}
                 subTitle={BULK_CD_MESSAGING[stage].subTitle}
             />
@@ -426,16 +432,16 @@ export default function BulkCDTrigger({
             )
         }
 
+        if (app.triggerBlockedInfo?.blockedBy === TriggerBlockType.MANDATORY_TAG) {
+            return <TriggerBlockedError stageType={app.stageType} />
+        }
+
         if (tagNotFoundWarningsMap.has(app.appId)) {
             return (
                 <div className="flex left top dc__gap-4">
-                    <Error
-                        className="icon-dim-12 dc__no-shrink mt-5 alert-icon-r5-imp"
-                    />
+                    <Error className="icon-dim-12 dc__no-shrink mt-5 alert-icon-r5-imp" />
 
-                    <span className="fw-4 fs-12 cr-5 dc__truncate">
-                        {tagNotFoundWarningsMap.get(app.appId)}
-                    </span>
+                    <span className="fw-4 fs-12 cr-5 dc__truncate">{tagNotFoundWarningsMap.get(app.appId)}</span>
                 </div>
             )
         }
@@ -454,13 +460,8 @@ export default function BulkCDTrigger({
         if (!!warningMessage && !app.showPluginWarning) {
             return (
                 <div className="flex left top dc__gap-4">
-                    <Error
-                        className="icon-dim-12 dc__no-shrink mt-5 warning-icon-y7"
-                    />
-
-                    <span className="fw-4 fs-12 cy-7 dc__truncate">
-                        {warningMessage}
-                    </span>
+                    <Error className="icon-dim-12 dc__no-shrink mt-5 warning-icon-y7" />
+                    <span className="fw-4 fs-12 cy-7 dc__truncate">{warningMessage}</span>
                 </div>
             )
         }
@@ -473,7 +474,7 @@ export default function BulkCDTrigger({
                     nodeType={commonNodeAttrType}
                     shouldRenderAdditionalInfo={isAppSelected}
                 />
-            )   
+            )
         }
 
         return null

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

@@ -47,6 +47,8 @@ import {
     ToastManager,
     ToastVariantType,
     BlockedStateData,
+    getStageTitle,
+    TriggerBlockType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -1751,7 +1753,10 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                     const stageType = DeploymentNodeType[_selectedNode.type]
                     const isTriggerBlockedDueToPlugin =
                         _selectedNode.isTriggerBlocked && _selectedNode.showPluginWarning
-                    const stageText = stageType === DeploymentNodeType.PRECD ? 'Pre-Deployment' : 'Post-Deployment'
+                    const isTriggerBlockedDueToMandatoryTags =
+                        _selectedNode.isTriggerBlocked &&
+                        _selectedNode.triggerBlockedInfo?.blockedBy === TriggerBlockType.MANDATORY_TAG
+                    const stageText = getStageTitle(stageType)
 
                     _selectedAppWorkflowList.push({
                         workFlowId: wf.id,
@@ -1785,7 +1790,11 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                             true,
                         ),
                         consequence: _selectedNode.pluginBlockState,
-                        warningMessage: isTriggerBlockedDueToPlugin ? `${stageText} is blocked` : '',
+                        warningMessage:
+                            isTriggerBlockedDueToPlugin || isTriggerBlockedDueToMandatoryTags
+                                ? `${stageText} is blocked`
+                                : '',
+                        triggerBlockedInfo: _selectedNode.triggerBlockedInfo,
                     })
                 } else {
                     let warningMessage = ''
@@ -1982,9 +1991,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         if (selectedCINode?.id) {
             return (
                 <Switch>
-                     <Route
-                        path={`${url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}
-                    >
+                    <Route path={`${url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}>
                         <WebhookReceivedPayloadModal
                             workflowId={workflowID}
                             webhookPayloads={webhookPayloads}

src/components/app/details/triggerView/TriggerView.tsx

@@ -1095,7 +1095,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         this.getWorkflowStatus()
     }
 
-
     onClickWebhookTimeStamp = () => {
         if (this.state.webhookTimeStampOrder === TIME_STAMP_ORDER.DESCENDING) {
             this.setState({ webhookTimeStampOrder: TIME_STAMP_ORDER.ASCENDING })
@@ -1172,16 +1171,13 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         this.abortCIBuild = new AbortController()
     }
 
-
     renderCIMaterial = () => {
         if (this.state.ciNodeId) {
             const nd: CommonNodeAttr = this.getCINode()
             const material = nd?.[this.state.materialType] || []
             return (
                 <Switch>
-                    <Route
-                        path={`${this.props.match.url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}
-                    >
+                    <Route path={`${this.props.match.url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}>
                         <WebhookReceivedPayloadModal
                             workflowId={this.state.workflowId}
                             webhookPayloads={this.state.webhookPayloads}

src/components/app/details/triggerView/cdMaterial.tsx

@@ -78,6 +78,9 @@ import {
     ResponseType,
     ApiResponseResultType,
     CommonNodeAttr,
+    GetPolicyConsequencesProps,
+    PolicyConsequencesDTO,
+    PipelineStageBlockInfo,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -139,7 +142,6 @@ const getIsImageApproverFromUserApprovalMetaData: (
     email: string,
     userApprovalMetadata: UserApprovalMetadataType,
 ) => boolean = importComponentFromFELibrary('getIsImageApproverFromUserApprovalMetaData', () => false, 'function')
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const getSecurityScan: ({
     appId,
     envId,
@@ -152,6 +154,9 @@ const getSecurityScan: ({
 const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const AllowedWithWarningTippy = importComponentFromFELibrary('AllowedWithWarningTippy')
 const MissingPluginBlockState = importComponentFromFELibrary('MissingPluginBlockState', null, 'function')
+const TriggerBlockEmptyState = importComponentFromFELibrary('TriggerBlockEmptyState', null, 'function')
+const getPolicyConsequences: ({ appId, envId }: GetPolicyConsequencesProps) => Promise<PolicyConsequencesDTO> =
+    importComponentFromFELibrary('getPolicyConsequences', null, 'function')
 
 const CDMaterial = ({
     materialType,
@@ -219,38 +224,61 @@ const CDMaterial = ({
     const allowWarningWithTippyNodeTypeProp: CommonNodeAttr['type'] =
         stageType === DeploymentNodeType.PRECD ? 'PRECD' : 'POSTCD'
 
+    // this function can be used for other trigger block reasons once api supports it
+    const getIsTriggerBlocked = (cdPolicyConsequences: PipelineStageBlockInfo) => {
+        switch (stageType) {
+            case DeploymentNodeType.PRECD:
+                return cdPolicyConsequences.pre.isBlocked
+            case DeploymentNodeType.POSTCD:
+                return cdPolicyConsequences.post.isBlocked
+            case DeploymentNodeType.CD:
+                return cdPolicyConsequences.node.isBlocked
+            default:
+                return false
+        }
+    }
+
+    const getMaterialResponseList = async(): Promise<[CDMaterialResponseType, any, PolicyConsequencesDTO]> => {
+        const response = await Promise.all([
+            genericCDMaterialsService(
+                materialType === MATERIAL_TYPE.rollbackMaterialList
+                    ? CDMaterialServiceEnum.ROLLBACK
+                    : CDMaterialServiceEnum.CD_MATERIALS,
+                pipelineId,
+                // Don't think need to set stageType to approval in case of approval node
+                stageType ?? DeploymentNodeType.CD,
+                abortControllerRef.current.signal,
+                // It is meant to fetch the first 20 materials
+                {
+                    offset: 0,
+                    size: 20,
+                    search: searchImageTag,
+                    // Since by default we are setting filterView to eligible and in case of no filters everything is eligible
+                    // So there should'nt be any additional api call
+                    // NOTE: Uncomment this when backend supports the filtering, there will be some minor handling like number of images in segmented control
+                    // filter:
+                    //     state.filterView === FilterConditionViews.ELIGIBLE && !state.searchApplied
+                    //         ? CDMaterialFilterQuery.RESOURCE
+                    //         : null,
+                },
+            ),
+            getDeploymentWindowProfileMetaData && !isFromBulkCD
+                ? getDeploymentWindowProfileMetaData(appId, envId)
+                : null,
+            getPolicyConsequences ? getPolicyConsequences({ appId, envId }) : null,
+        ])
+
+        if (getIsTriggerBlocked(response[2].cd)) {
+            return [null, null, response[2]]
+        }
+        return response
+    }
+
     // TODO: Ask if pipelineId always changes on change of app else add appId as dependency
     const [loadingMaterials, responseList, materialsError, reloadMaterials] = useAsync(
         () =>
             abortPreviousRequests(
-                () =>
-                    Promise.all([
-                        genericCDMaterialsService(
-                            materialType === MATERIAL_TYPE.rollbackMaterialList
-                                ? CDMaterialServiceEnum.ROLLBACK
-                                : CDMaterialServiceEnum.CD_MATERIALS,
-                            pipelineId,
-                            // Don't think need to set stageType to approval in case of approval node
-                            stageType ?? DeploymentNodeType.CD,
-                            abortControllerRef.current.signal,
-                            // It is meant to fetch the first 20 materials
-                            {
-                                offset: 0,
-                                size: 20,
-                                search: searchImageTag,
-                                // Since by default we are setting filterView to eligible and in case of no filters everything is eligible
-                                // So there should'nt be any additional api call
-                                // NOTE: Uncomment this when backend supports the filtering, there will be some minor handling like number of images in segmented control
-                                // filter:
-                                //     state.filterView === FilterConditionViews.ELIGIBLE && !state.searchApplied
-                                //         ? CDMaterialFilterQuery.RESOURCE
-                                //         : null,
-                            },
-                        ),
-                        getDeploymentWindowProfileMetaData && !isFromBulkCD
-                            ? getDeploymentWindowProfileMetaData(appId, envId)
-                            : null,
-                    ]),
+                () => getMaterialResponseList(),
                 abortControllerRef,
             ),
         // NOTE: Add state.filterView if want to add filtering support from backend
@@ -1163,7 +1191,9 @@ const CDMaterial = ({
                 const _gitCommit = getGitCommitInfo(mat)
 
                 if (
-                    (materialData.appliedFilters?.length > 0 || materialData.deploymentWindowArtifactMetadata?.type) &&
+                    (materialData.appliedFilters?.length > 0 ||
+                        materialData.deploymentBlockedState?.isBlocked ||
+                        materialData.deploymentWindowArtifactMetadata?.type) &&
                     CDMaterialInfo
                 ) {
                     return (
@@ -1177,6 +1207,7 @@ const CDMaterial = ({
                             dataSource={materialData.dataSource}
                             deploymentWindowArtifactMetadata={materialData.deploymentWindowArtifactMetadata}
                             isFilterApplied={materialData.appliedFilters?.length > 0}
+                            triggerBlockedInfo={materialData.deploymentBlockedState}
                         >
                             {(_gitCommit.WebhookData?.Data ||
                                 _gitCommit.Author ||
@@ -1713,8 +1744,7 @@ const CDMaterial = ({
                         </Tippy>
                     )}
                 >
-                    {AllowedWithWarningTippy &&
-                    showPluginWarningBeforeTrigger ? (
+                    {AllowedWithWarningTippy && showPluginWarningBeforeTrigger ? (
                         <AllowedWithWarningTippy
                             consequence={consequence}
                             configurePluginURL={configurePluginURL}
@@ -1914,6 +1944,20 @@ const CDMaterial = ({
         )
     }
 
+    if (TriggerBlockEmptyState && getIsTriggerBlocked(responseList[2].cd)) {
+        return (
+            <>
+                <div className="trigger-modal__header">
+                    <h2 className="modal__title">{renderCDModalHeader()}</h2>
+                    <button type="button" className="dc__transparent" onClick={closeCDModal}>
+                        <img alt="close" src={close} />
+                    </button>
+                </div>
+                <TriggerBlockEmptyState appId={appId} stageType={stageType} />
+            </>
+        )
+    }
+
     if (material.length > 0) {
         return isFromBulkCD ? (
             <>
@@ -1934,7 +1978,7 @@ const CDMaterial = ({
     return (
         <>
             <div className="trigger-modal__header">
-                <h1 className="modal__title">{renderCDModalHeader()}</h1>
+                <h2 className="modal__title">{renderCDModalHeader()}</h2>
                 <button type="button" className="dc__transparent" onClick={closeCDModal}>
                     <img alt="close" src={close} />
                 </button>