feat: add support for mandatory plugin in pre/post CD

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.8",
+    "version": "0.5.8-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/CIPipeline.Types.ts

@@ -170,7 +170,6 @@ export interface StepType {
     inlineStepDetail?: InlineStepDetailType
     pluginRefStepDetail?: PluginRefStepDetailType
     triggerIfParentStageFail: boolean
-    isMandatory?: boolean
 }
 
 export interface BuildStageType {

src/Common/Policy.Types.ts

@@ -14,34 +14,35 @@
  * limitations under the License.
  */
 
-import { PluginDataStoreType } from '../Shared'
+import { PipelineFormType } from '@Pages/Applications'
+import { PluginDataStoreType, PluginDetailPayloadType, ResourceKindType } from '../Shared'
 import { VariableType } from './CIPipeline.Types'
 import { ServerErrors } from './ServerError'
-import { ResponseType } from './Types'
 
 export enum ApplyPolicyToStage {
     PRE_CI = 'PRE_CI',
     POST_CI = 'POST_CI',
+    /**
+     * @deprecated in mandatory plugin policy v2
+     */
     PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+    PRE_CD = 'PRE_CD',
+    POST_CD = 'POST_CD',
 }
 
+// FIXME: The name build is getting is used in CDPipeline.
+// This enum is mapping values from BuildStageVariable
 export enum PluginRequiredStage {
-    PRE_CI = 'preBuildStage',
-    POST_CI = 'postBuildStage',
-    PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+    PRE_STAGE = 'preBuildStage',
+    POST_STAGE = 'postBuildStage',
+    PRE_OR_POST_STAGE = 'PRE_OR_POST_CI',
 }
 
 export interface DefinitionSourceType {
-    projectName: string
-    isDueToProductionEnvironment: boolean
-    isDueToLinkedPipeline: boolean
-    policyName: string
-    appName?: string
-    clusterName?: string
-    environmentName?: string
-    branchNames?: string[]
-    ciPipelineName?: string
+    policyNames: string[]
+    linkedCIPipelineNames?: string[]
 }
+
 export interface MandatoryPluginDetailType {
     id: number
     parentPluginId: number
@@ -52,7 +53,7 @@ export interface MandatoryPluginDetailType {
     applied?: boolean
     inputVariables?: VariableType[]
     outputVariables?: VariableType[]
-    definitionSources?: DefinitionSourceType[]
+    definitionSources?: DefinitionSourceType
 }
 export interface MandatoryPluginDataType {
     pluginData: MandatoryPluginDetailType[]
@@ -66,23 +67,67 @@ export interface ProcessPluginDataReturnType {
     mandatoryPluginsError?: ServerErrors
 }
 
+export type ProcessPluginDataCIParamsType = {
+    resourceKind: ResourceKindType.ciPipeline
+    ciPipelineId: number
+    /**
+     * Comma separated branch names used for v1 api
+     * For v2 format is [branchName1],[branchName2]
+     */
+    branchName?: string
+
+    envName?: never
+}
+
+export type ProcessPluginDataCDParamsType = {
+    resourceKind: ResourceKindType.cdPipeline
+    envName?: string
+
+    ciPipelineId?: never
+    branchName?: never
+}
+
+export type ProcessPluginDataParamsType = {
+    formData: PipelineFormType
+    pluginDataStoreState: PluginDataStoreType
+    appId: number
+    appName: string
+    /**
+     * Would be sent in case we have to get data for steps
+     */
+    requiredPluginIds?: PluginDetailPayloadType['pluginId']
+} & (ProcessPluginDataCIParamsType | ProcessPluginDataCDParamsType)
+
 export enum ConsequenceAction {
+    /**
+     * This is used if the policy is enforced immediately.
+     */
     BLOCK = 'BLOCK',
+    /**
+     * This is used if the policy will be enforced after a certain timestamp.
+     */
     ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
+    /**
+     * This is used if the policy is not enforced yet (just to show waring).
+     */
     ALLOW_FOREVER = 'ALLOW_FOREVER',
 }
 
-export interface ConsequenceType {
-    action: ConsequenceAction
-    metadataField: string
-}
+export type ConsequenceType =
+    | {
+          action: Exclude<ConsequenceAction, ConsequenceAction.ALLOW_UNTIL_TIME>
+          metadataField?: never | null
+      }
+    | {
+          action: ConsequenceAction.ALLOW_UNTIL_TIME
+          /**
+           * Denotes the time till which the policy enforcement is relaxed
+           */
+          metadataField: string
+      }
 
 export interface BlockedStateData {
     isOffendingMandatoryPlugin: boolean
     isCITriggerBlocked: boolean
     ciBlockState: ConsequenceType
 }
-
-export interface GetBlockedStateResponse extends ResponseType {
-    result?: BlockedStateData
-}

src/Common/Types.ts

@@ -18,8 +18,15 @@ import React, { ReactNode, CSSProperties, ReactElement } from 'react'
 import { Placement } from 'tippy.js'
 import { UserGroupDTO } from '@Pages/GlobalConfigurations'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
-import { RegistryType, RuntimeParamsListItemType, Severity } from '../Shared'
+import { MandatoryPluginBaseStateType, RegistryType, RuntimeParamsListItemType, Severity } from '../Shared'
+import {
+    ACTION_STATE,
+    ConsequenceType,
+    DEPLOYMENT_WINDOW_TYPE,
+    DockerConfigOverrideType,
+    SortingOrder,
+    TaskErrorObj,
+} from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -450,12 +457,12 @@ export interface ArtifactReleaseMappingType {
 }
 
 export interface CDMaterialListModalServiceUtilProps {
-    artifacts: any[],
-    offset: number,
-    artifactId?: number,
-    artifactStatus?: string,
-    disableDefaultSelection?: boolean,
-    userApprovalConfig?: UserApprovalConfigType,
+    artifacts: any[]
+    offset: number
+    artifactId?: number
+    artifactStatus?: string
+    disableDefaultSelection?: boolean
+    userApprovalConfig?: UserApprovalConfigType
 }
 
 export interface CDMaterialType {
@@ -552,7 +559,7 @@ export interface DownstreamNodesEnvironmentsType {
     environmentName: string
 }
 
-export interface CommonNodeAttr {
+export interface CommonNodeAttr extends Pick<MandatoryPluginBaseStateType, 'isTriggerBlocked' | 'pluginBlockState'> {
     connectingCiPipelineId?: number
     parents: string | number[] | string[]
     x: number
@@ -602,15 +609,10 @@ export interface CommonNodeAttr {
     approvalUsers?: string[]
     userApprovalConfig?: UserApprovalConfigType
     requestedUserId?: number
-    showPluginWarning?: boolean
+    showPluginWarning: boolean
     helmPackageName?: string
     isVirtualEnvironment?: boolean
     deploymentAppType?: DeploymentAppTypes
-    isCITriggerBlocked?: boolean
-    ciBlockState?: {
-        action: any
-        metadataField: string
-    }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
     isGitOpsRepoNotConfigured?: boolean
@@ -793,7 +795,7 @@ export interface CDStageConfigMapSecretNames {
     secrets: any[]
 }
 
-export interface PrePostDeployStageType {
+export interface PrePostDeployStageType extends MandatoryPluginBaseStateType {
     isValid: boolean
     steps: TaskErrorObj[]
     triggerType: string
@@ -831,6 +833,8 @@ export interface CdPipeline {
     preDeployStage?: PrePostDeployStageType
     postDeployStage?: PrePostDeployStageType
     isProdEnv?: boolean
+    isGitOpsRepoNotConfigured?: boolean
+    isDeploymentBlocked?: boolean
 }
 
 export interface ExternalCiConfig {

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DescriptorProps } from './types'
+import { BuildInfraDescriptorProps } from './types'
 import { BreadCrumb, DOCUMENTATION } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { InfoIconTippy } from '../../../Shared'
@@ -25,7 +25,7 @@ const Descriptor = ({
     children,
     tippyInfoText,
     tippyAdditionalContent,
-}: DescriptorProps) => (
+}: BuildInfraDescriptorProps) => (
     <div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
         <div className="flexbox dc__align-items-center dc__gap-4">
             <BreadCrumb breadcrumbs={breadCrumbs} />

src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -74,7 +74,7 @@ export enum BuildInfraProfileVariants {
     CUSTOM = 'CUSTOM',
 }
 
-export interface DescriptorProps {
+export interface BuildInfraDescriptorProps {
     /**
      * In case we want to restrict the max-width
      */

src/Shared/Components/DatePicker/DateTimePicker.tsx

@@ -69,9 +69,11 @@ const DateTimePicker = ({
 
     return (
         <div className="date-time-picker">
-            <label className={`form__label ${required ? 'dc__required-field' : ''}`} htmlFor={id}>
-                {label}
-            </label>
+            {label && (
+                <label className={`form__label ${required ? 'dc__required-field' : ''}`} htmlFor={id}>
+                    {label}
+                </label>
+            )}
             <div className="flex left dc__gap-8">
                 <SingleDatePicker
                     id={id}

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -35,6 +35,7 @@ const FeatureTitleWithInfo = ({
     docLinkText = 'View Documentation',
     dataTestId = 'feature-title-with-info',
     additionalContent,
+    showInfoIcon = false,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -64,10 +65,14 @@ const FeatureTitleWithInfo = ({
                 </div>
             )
         }
-        if (breadCrumbs?.length > 0) {
+        if (breadCrumbs?.length > 0 || showInfoIcon) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-4">
-                    <BreadCrumb breadcrumbs={breadCrumbs} />
+                    {showInfoIcon && breadCrumbs?.length === 0 ? (
+                        <span className="fs-16 fw-6 cn-9 lh-32">{title}</span>
+                    ) : (
+                        <BreadCrumb breadcrumbs={breadCrumbs} />
+                    )}
                     <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
                 </div>
             )

src/Shared/Components/FeatureDescription/index.ts

@@ -16,3 +16,4 @@
 
 export * from './FeatureDescriptionModal'
 export { default as FeatureTitleWithInfo } from './FeatureTitleWithInfo'
+export * from './types'

src/Shared/Components/FeatureDescription/types.ts

@@ -38,4 +38,10 @@ export interface DescriptorProps extends FeatureDescriptionModalProps {
     docLinkText?: string
     dataTestId?: string
     additionalContent?: ReactNode
+    /**
+     * If true, the info icon is displayed which when clicked shows the feature description modal
+     *
+     * @default false
+     */
+    showInfoIcon?: boolean
 }

src/Shared/Components/FilterChips/FilterChips.component.tsx

@@ -15,7 +15,7 @@
  */
 
 import { ReactComponent as CloseIcon } from '../../../Assets/Icon/ic-close.svg'
-import { noop } from '../../../Common'
+import { noop, Tooltip } from '../../../Common'
 import { FilterChipProps, FilterChipsProps } from './types'
 
 const FilterChip = ({
@@ -45,7 +45,9 @@ const FilterChip = ({
                         <span className="dc__divider h-24" />
                     </>
                 )}
-                <span className="dc__ellipsis-right">{valueToDisplay}</span>
+                <Tooltip content={valueToDisplay}>
+                    <span className="dc__ellipsis-right dc__word-break dc__mxw-150">{valueToDisplay}</span>
+                </Tooltip>
                 {showRemoveIcon && (
                     <button
                         type="button"

src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx

@@ -30,9 +30,11 @@ const InfoIconTippy = ({
     placement = 'bottom',
     dataTestid = 'info-tippy-button',
     children,
+    headingInfo,
 }: InfoIconTippyProps) => (
     <TippyCustomized
         theme={TippyTheme.white}
+        headingInfo={headingInfo}
         className="w-300 h-100 dc__no-text-transform"
         placement={placement}
         Icon={HelpIcon}

src/Shared/Components/Plugin/PluginCard.tsx

@@ -33,6 +33,8 @@ const PluginCard = ({
         pluginDataStore.pluginVersionStore[latestPluginId]
 
     const handleSelection = (e: React.MouseEvent | React.KeyboardEvent) => {
+        // Added to ensure that the event is not bubbled to the div in case of click on the checkbox
+        e.preventDefault()
         if ('key' in e && e.key !== 'Enter' && e.key !== ' ') {
             return
         }

src/Shared/Components/Plugin/PluginImageContainer.tsx

@@ -21,7 +21,10 @@ import { ImageWithFallback } from '../ImageWithFallback'
 const PluginImageContainer = ({ imageProps, fallbackImageClassName }: PluginImageContainerProps) => (
     <ImageWithFallback
         fallbackImage={<ICLegoBlock className={`dc__no-shrink ${fallbackImageClassName}`} />}
-        imageProps={imageProps}
+        imageProps={{
+            loading: 'lazy',
+            ...imageProps,
+        }}
     />
 )