feat: Deployment Without Approval (Exception)

src/Common/Common.service.ts

@@ -22,11 +22,7 @@ import {
     sanitizeUserApprovalList,
     stringComparatorBySortOrder,
 } from '@Shared/Helpers'
-import {
-    PolicyBlockInfo,
-    RuntimeParamsAPIResponseType,
-    RuntimePluginVariables,
-} from '@Shared/types'
+import { PolicyBlockInfo, RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
 import { GitProviderType, ROUTES } from './Constants'
 import { getUrlWithSearchParams, sortCallback } from './Helper'
 import {
@@ -264,7 +260,7 @@ export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): Runt
     const runtimeParams = (response?.runtimePluginVariables ?? []).map<RuntimePluginVariables>((variable) => ({
         ...variable,
         defaultValue: variable.value,
-        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random())
+        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random()),
     }))
 
     runtimeParams.push(...envVariables)
@@ -324,6 +320,7 @@ export const processCDMaterialServiceResponse = (
             ...processCDMaterialsMetaInfo(cdMaterialsResult),
             ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
             ...processImagePromotionInfo(cdMaterialsResult),
+            isExceptionUser: false,
         }
     }
 
@@ -352,6 +349,7 @@ export const processCDMaterialServiceResponse = (
         ...approvalInfo,
         ...metaInfo,
         ...imagePromotionInfo,
+        isExceptionUser: cdMaterialsResult.userApprovalConfig?.isExceptionUser ?? false,
     }
 }
 

src/Common/Types.ts

@@ -230,25 +230,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
@@ -783,6 +785,7 @@ export interface CDMaterialResponseType
         CDMaterialsApprovalInfo,
         ImagePromotionMaterialInfo {
     materials: CDMaterialType[]
+    isExceptionUser: boolean
 }
 
 export interface InputDetailType {
@@ -847,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'
@@ -859,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

@@ -21,12 +21,18 @@ import { ReactComponent as ICDeploy } from '@Icons/ic-nav-rocket.svg'
 import DeployAudio from '@Sounds/DeployAudio.mp3'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { Button } from '../Button'
+import { Button, ButtonStyleType } from '../Button'
 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 && !isBulkCDTrigger ? 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

@@ -36,6 +36,7 @@ import {
     useGetUserRoles,
 } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
+import { Icon } from '../Icon'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
 import { ArtifactType, CIListItemType } from './types'
@@ -67,6 +68,7 @@ export const CIListItem = ({
     selectedEnvironmentName,
     renderCIListHeader,
     targetPlatforms,
+    isDeploymentWithoutApproval,
 }: CIListItemType) => {
     const headerMetaDataPresent =
         !!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
@@ -83,6 +85,13 @@ export const CIListItem = ({
                 </div>
             )}
 
+            {isDeploymentWithoutApproval && (
+                <div className="w-100 bg__primary flex left dc__gap-6 px-12 pt-8 pb-7 border__secondary--bottom border__primary--top border__primary--left border__primary--right dc__top-radius-4">
+                    <Icon name="ic-lightning-fill" color="Y500" />
+                    <p className="m-0 fs-13 lh-20 cn-9">Deployed by an exception user</p>
+                </div>
+            )}
+
             {headerMetaDataPresent &&
                 renderCIListHeader &&
                 renderCIListHeader({
@@ -96,7 +105,9 @@ export const CIListItem = ({
 
             <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' : ''
+                    (headerMetaDataPresent && renderCIListHeader) || isDeploymentWithoutApproval
+                        ? 'dc__no-top-radius dc__no-top-border'
+                        : ''
                 }`}
                 data-testid="hover-on-report-artifact"
             >

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

@@ -156,6 +156,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 {
@@ -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']
       }
 )
 

src/Shared/Components/Icon/Icon.tsx

@@ -22,6 +22,7 @@ import { ReactComponent as ICCaretLeft } from '@IconsV2/ic-caret-left.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
+import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
 import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
 import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg'
@@ -86,6 +87,8 @@ import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-col
 import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
 import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg'
 import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.svg'
+import { ReactComponent as ICRocketLaunch } from '@IconsV2/ic-rocket-launch.svg'
+import { ReactComponent as ICSelected } from '@IconsV2/ic-selected.svg'
 import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
 import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.svg'
@@ -96,7 +99,7 @@ import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
 import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTata1mg } from '@IconsV2/ic-tata1mg.svg'
-import { ReactComponent as ICTimeoutTwoDash } from '@IconsV2/ic-timeout-two-dash.svg'
+import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
 import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg'
 import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg'
 import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg'
@@ -131,6 +134,7 @@ export const iconMap = {
     'ic-cd': ICCd,
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-check': ICCheck,
+    'ic-checks': ICChecks,
     'ic-ci-linked': ICCiLinked,
     'ic-ci-webhook': ICCiWebhook,
     'ic-circle-loader': ICCircleLoader,
@@ -195,6 +199,8 @@ export const iconMap = {
     'ic-pencil': ICPencil,
     'ic-quay': ICQuay,
     'ic-quote': ICQuote,
+    'ic-rocket-launch': ICRocketLaunch,
+    'ic-selected': ICSelected,
     'ic-shield-check': ICShieldCheck,
     'ic-sort-ascending': ICSortAscending,
     'ic-sort-descending': ICSortDescending,
@@ -205,7 +211,7 @@ export const iconMap = {
     'ic-success': ICSuccess,
     'ic-suspended': ICSuspended,
     'ic-tata1mg': ICTata1mg,
-    'ic-timeout-two-dash': ICTimeoutTwoDash,
+    'ic-timeout-dash': ICTimeoutDash,
     'ic-timer': ICTimer,
     'ic-travclan': ICTravclan,
     'ic-unknown': ICUnknown,

src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx

@@ -61,7 +61,7 @@ const ArtifactInfo = ({
         }
 
         return (
-            <div className="material-history__info flex left fs-13 dc__gap-8">
+            <div className="material-history__info flex left fs-13 dc__gap-6">
                 <DeployIcon className="icon-dim-16 scn-6" />
                 <span className="fs-13 fw-4">{deployedTime}</span>
             </div>

src/Shared/Components/StatusComponent/utils.ts

@@ -70,7 +70,7 @@ export const getIconName = (status: string, showAnimatedIcon: boolean): IconName
             return 'ic-hibernate'
         case 'timedout':
         case 'timed_out':
-            return 'ic-timeout-two-dash'
+            return 'ic-timeout-dash'
         default:
             return null
     }