Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into refactor/remove-monaco

Author: RohitRaj011

src/Assets/IconV2/ic-checks.svg

@@ -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-key.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-timeout-two-dash.svg src/Assets/IconV2/ic-selected.svgsrc/Assets/IconV2/ic-timeout-two-dash.svg renamed to src/Assets/IconV2/ic-selected.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-dash.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"
             >

src/Common/Types.ts

@@ -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/AnimatedDeployButton/AnimatedDeployButton.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}