Merge pull request #691 from devtron-labs/feat/deployment-exception

feat: Deployment Without Approval (Exception)

Author: RohitRaj011

package-lock.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",

package.json

@@ -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/Assets/IconV2/ic-checks.svg

@@ -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/Assets/IconV2/ic-key.svg

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

src/Assets/IconV2/ic-timeout-two-dash.svg renamed to src/Assets/IconV2/ic-selected.svg

@@ -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"
             >