feat: Deployment Without Approval (Exception)

package.json

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

src/Common/Types.ts

@@ -231,25 +231,27 @@ interface InfoColourBarTextConfigType {
     actionButtonConfig?: ButtonProps
 }
 
-type InfoColourBarMessageProp = {
-    message: ReactNode
-    linkText?: ReactNode
-    redirectLink?: string
-    linkOnClick?: () => void
-    linkClass?: string
-    internalLink?: boolean
-
-    textConfig?: never
-} | {
-    textConfig: InfoColourBarTextConfigType
-
-    message?: never
-    linkText?: never
-    redirectLink?: never
-    linkOnClick?: () => never
-    linkClass?: never
-    internalLink?: never
-}
+type InfoColourBarMessageProp =
+    | {
+          message: ReactNode
+          linkText?: ReactNode
+          redirectLink?: string
+          linkOnClick?: () => void
+          linkClass?: string
+          internalLink?: boolean
+
+          textConfig?: never
+      }
+    | {
+          textConfig: InfoColourBarTextConfigType
+
+          message?: never
+          linkText?: never
+          redirectLink?: never
+          linkOnClick?: () => never
+          linkClass?: never
+          internalLink?: never
+      }
 
 export type InfoColourBarType = InfoColourBarMessageProp & {
     classname: string
@@ -848,7 +850,7 @@ export interface Strategy {
     default?: boolean
 }
 
-export interface CDStage extends Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo' | 'isTriggerBlocked' >> {
+export interface CDStage extends Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo' | 'isTriggerBlocked'>> {
     status: string
     name: string
     triggerType: 'AUTOMATIC' | 'MANUAL'
@@ -860,7 +862,9 @@ export interface CDStageConfigMapSecretNames {
     secrets: any[]
 }
 
-export interface PrePostDeployStageType extends MandatoryPluginBaseStateType, Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo'>> {
+export interface PrePostDeployStageType
+    extends MandatoryPluginBaseStateType,
+        Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo'>> {
     isValid: boolean
     steps: TaskErrorObj[]
     triggerType: string

src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx

@@ -20,13 +20,19 @@ import { motion } from 'framer-motion'
 import DeployAudio from '@Sounds/DeployAudio.mp3'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { Button } from '../Button'
+import { Button, ButtonStyleType } from '../Button'
 import { Icon } from '../Icon'
 import { AnimatedDeployButtonProps } from './types'
 
 import './animatedDeployButton.scss'
 
-const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedDeployButtonProps) => {
+const AnimatedDeployButton = ({
+    isLoading,
+    isVirtualEnvironment,
+    onButtonClick,
+    exceptionUserConfig,
+    isBulkCDTrigger,
+}: AnimatedDeployButtonProps) => {
     const audioRef = useRef<HTMLAudioElement>(null)
     const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
     const isAudioEnabled: boolean = window._env_.FEATURE_ACTION_AUDIOS_ENABLE
@@ -36,6 +42,7 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
             rotate: 45,
         },
     }
+    const isExceptionUser = exceptionUserConfig?.canDeploy || exceptionUserConfig?.isImageApprover
 
     const handleButtonClick = async (e: SyntheticEvent) => {
         if (clicked) {
@@ -66,7 +73,12 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
         <motion.div whileHover="hover" className={`${clicked ? 'hide-button-text' : ''}`}>
             <Button
                 dataTestId="cd-trigger-deploy-button"
-                text={`Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`}
+                isLoading={isLoading}
+                text={
+                    exceptionUserConfig?.canDeploy
+                        ? 'Deploy without approval'
+                        : `Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`
+                }
                 startIcon={
                     <motion.div
                         variants={svgMotionVariants}
@@ -88,6 +100,13 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
                 }
                 size={ComponentSizeType.large}
                 onClick={handleButtonClick}
+                style={isExceptionUser ? ButtonStyleType.warning : ButtonStyleType.default}
+                showTooltip={isExceptionUser}
+                tooltipProps={{
+                    content: isBulkCDTrigger
+                        ? 'You are authorized to deploy as an exception user for some applications'
+                        : 'You are authorized to deploy as an exception user',
+                }}
             />
             {/* Disabling es-lint as captions are not required */}
             {/* eslint-disable-next-line jsx-a11y/media-has-caption */}

src/Shared/Components/AnimatedDeployButton/types.tsx

@@ -15,6 +15,12 @@
  */
 
 export interface AnimatedDeployButtonProps {
+    isLoading?: boolean
     isVirtualEnvironment: boolean
     onButtonClick: (e, disableDeployButton: boolean) => void
+    exceptionUserConfig?: {
+        canDeploy: boolean
+        isImageApprover: boolean
+    }
+    isBulkCDTrigger?: boolean
 }

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -67,11 +67,14 @@ export const CIListItem = ({
     selectedEnvironmentName,
     renderCIListHeader,
     targetPlatforms,
+    isDeploymentWithoutApproval,
 }: CIListItemType) => {
-    const headerMetaDataPresent =
-        !!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
-        !!appliedFilters?.length ||
-        !!promotionApprovalMetadata?.promotedFromType
+    const showCIListHeader =
+        !!renderCIListHeader &&
+        (!!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
+            !!appliedFilters?.length ||
+            !!promotionApprovalMetadata?.promotedFromType ||
+            isDeploymentWithoutApproval)
 
     return (
         <>
@@ -83,20 +86,20 @@ export const CIListItem = ({
                 </div>
             )}
 
-            {headerMetaDataPresent &&
-                renderCIListHeader &&
+            {showCIListHeader &&
                 renderCIListHeader({
                     userApprovalMetadata,
                     triggeredBy,
                     appliedFilters,
                     appliedFiltersTimestamp,
                     promotionApprovalMetadata,
                     selectedEnvironmentName,
+                    isDeploymentWithoutApproval,
                 })}
 
             <div
                 className={`dc__h-fit-content ci-artifact image-tag-parent-card bg__primary br-4 dc__border p-12 w-100 dc__mxw-800 ci-artifact--${type} ${
-                    headerMetaDataPresent && renderCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
+                    showCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
                 }`}
                 data-testid="hover-on-report-artifact"
             >

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -43,6 +43,7 @@ const DeploymentDetailSteps = ({
     isVirtualEnvironment,
     processVirtualEnvironmentDeploymentData,
     renderDeploymentApprovalInfo,
+    isDeploymentWithoutApproval,
 }: DeploymentDetailStepsType) => {
     const history = useHistory()
     const { url } = useRouteMatch()
@@ -51,6 +52,8 @@ const DeploymentDetailSteps = ({
         deploymentStatus?.toUpperCase() !== TIMELINE_STATUS.ABORTED,
     )
     const isVirtualEnv = useRef(isVirtualEnvironment)
+    const isDeploymentWithoutApprovalRef = useRef(isDeploymentWithoutApproval)
+
     const processedData =
         isVirtualEnv.current && processVirtualEnvironmentDeploymentData
             ? processVirtualEnvironmentDeploymentData()
@@ -69,7 +72,10 @@ const DeploymentDetailSteps = ({
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatus !== 'Aborted') {
                     // eslint-disable-next-line no-use-before-define
-                    processDeploymentStatusData(deploymentStatusDetailRes.result)
+                    processDeploymentStatusData({
+                        ...deploymentStatusDetailRes.result,
+                        isDeploymentWithoutApproval: isDeploymentWithoutApprovalRef.current,
+                    })
                 }
             })
             .catch(() => {
@@ -97,6 +103,10 @@ const DeploymentDetailSteps = ({
         isVirtualEnv.current = isVirtualEnvironment
     }, [isVirtualEnvironment])
 
+    useEffect(() => {
+        isDeploymentWithoutApprovalRef.current = isDeploymentWithoutApproval
+    }, [isDeploymentWithoutApproval])
+
     const processDeploymentStatusData = (deploymentStatusDetailRes: DeploymentStatusDetailsType): void => {
         const processedDeploymentStatusDetailsData =
             isVirtualEnv.current && processVirtualEnvironmentDeploymentData

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -176,7 +176,9 @@ export const DeploymentStatusDetailRow = ({
                 >
                     {renderIcon(statusBreakDownType.icon)}
                     <span className="ml-12 mr-12 fs-13">
-                        <span data-testid="deployment-status-step-name">{statusBreakDownType.displayText}</span>
+                        <span data-testid="deployment-status-step-name" className="flex left">
+                            {statusBreakDownType.displayText}
+                        </span>
                         {statusBreakDownType.displaySubText && (
                             <span className={`ml-12 f-${statusBreakDownType.icon || 'waiting'}`}>
                                 {statusBreakDownType.displaySubText}

src/Shared/Components/CICDHistory/History.components.tsx

@@ -138,6 +138,7 @@ export const GitChanges = ({
     selectedEnvironmentName,
     renderCIListHeader,
     targetPlatforms,
+    isDeploymentWithoutApproval,
 }: GitChangesType) => {
     const { isSuperAdmin } = useGetUserRoles()
 
@@ -202,6 +203,7 @@ export const GitChanges = ({
                         selectedEnvironmentName={selectedEnvironmentName}
                         renderCIListHeader={renderCIListHeader}
                         targetPlatforms={targetPlatforms}
+                        isDeploymentWithoutApproval={isDeploymentWithoutApproval}
                     >
                         <div className="flex column left hover-trigger">
                             <div className="cn-9 fs-14 flex left">

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -133,6 +133,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                                 isVirtualEnvironment={triggerDetails.IsVirtualEnvironment}
                                 processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
                                 renderDeploymentApprovalInfo={renderDeploymentApprovalInfo}
+                                isDeploymentWithoutApproval={triggerDetails.isDeploymentWithoutApproval ?? false}
                             />
                         </Route>
                     )}
@@ -156,6 +157,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                             promotionApprovalMetadata={triggerDetails?.promotionApprovalMetadata}
                             renderCIListHeader={renderCIListHeader}
                             targetPlatforms={targetPlatforms}
+                            isDeploymentWithoutApproval={triggerDetails.isDeploymentWithoutApproval ?? false}
                         />
                     </Route>
                     {triggerDetails.stage === 'DEPLOY' && (

src/Shared/Components/CICDHistory/types.tsx

@@ -187,6 +187,7 @@ export interface History extends Pick<TargetPlatformsDTO, 'targetPlatforms'>, Wo
     triggerMetadata?: string
     runSource?: RunSourceType
     targetConfig?: TargetConfigType
+    isDeploymentWithoutApproval?: boolean
 }
 
 export interface ExecutionInfoType {
@@ -389,7 +390,7 @@ export interface DeploymentStatusDetailsTimelineType {
     statusTime: string
     resourceDetails?: SyncStageResourceDetail[]
 }
-export interface DeploymentStatusDetailsType {
+export interface DeploymentStatusDetailsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentFinishedOn: string
     deploymentStartedOn: string
     triggeredBy: string
@@ -405,7 +406,7 @@ export interface DeploymentStatusDetailsResponse extends ResponseType {
 
 interface DeploymentStatusDetailRow {
     icon: string
-    displayText: string
+    displayText: ReactNode
     displaySubText: string
     time: string
     resourceDetails?: any
@@ -431,7 +432,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
     }
 }
 
-export interface DeploymentDetailStepsType {
+export interface DeploymentDetailStepsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentStatus?: string
     deploymentAppType?: DeploymentAppTypes
     isHelmApps?: boolean
@@ -445,7 +446,7 @@ export interface DeploymentDetailStepsType {
     renderDeploymentApprovalInfo: (userApprovalMetadata: UserApprovalMetadataType) => JSX.Element
 }
 
-export interface RenderCIListHeaderProps {
+export interface RenderCIListHeaderProps extends Required<Pick<History, 'isDeploymentWithoutApproval'>> {
     userApprovalMetadata: UserApprovalMetadataType
     triggeredBy: string
     appliedFilters: FilterConditionsListType[]
@@ -465,7 +466,7 @@ export interface VirtualHistoryArtifactProps {
     }
 }
 
-export type CIListItemType = Pick<History, 'promotionApprovalMetadata'> & {
+export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDeploymentWithoutApproval'> & {
     userApprovalMetadata?: UserApprovalMetadataType
     triggeredBy?: string
     children: ReactNode
@@ -737,6 +738,7 @@ export type GitChangesType = {
           appliedFilters?: never
           appliedFiltersTimestamp?: never
           renderCIListHeader?: never
+          isDeploymentWithoutApproval?: never
       }
     | {
           artifact: string
@@ -755,6 +757,7 @@ export type GitChangesType = {
           appliedFilters?: FilterConditionsListType[]
           appliedFiltersTimestamp?: string
           renderCIListHeader: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
+          isDeploymentWithoutApproval?: History['isDeploymentWithoutApproval']
       }
 )