feat: canary details app

package.json

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

src/Common/Types.ts

@@ -28,6 +28,7 @@ import {
     ButtonProps,
     ComponentLayoutType,
     StatusType,
+    DeploymentStrategyType,
 } from '../Shared'
 import {
     ACTION_STATE,
@@ -845,7 +846,7 @@ export interface AppEnvironment {
 }
 
 export interface Strategy {
-    deploymentTemplate: string
+    deploymentTemplate: DeploymentStrategyType
     config: any
     default?: boolean
 }

src/Pages/Applications/DevtronApps/Details/CDPipeline/services.ts

@@ -73,6 +73,7 @@ export const triggerCDNode = ({
     abortControllerRef,
     skipIfHibernated,
     isRollbackTrigger = false,
+    strategy,
 }: TriggerCDNodeServiceProps) => {
     const areRuntimeParamsConfigured =
         runtimeParamsPayload && (stageType === DeploymentNodeType.POSTCD || stageType === DeploymentNodeType.PRECD)
@@ -85,6 +86,7 @@ export const triggerCDNode = ({
         isRollbackDeployment: isRollbackTrigger,
         ...(areRuntimeParamsConfigured && runtimeParamsPayload),
         ...(skipIfHibernated ? { skipIfHibernated: true } : {}),
+        ...(strategy ? { strategy } : {}),
     }
 
     if (deploymentWithConfig) {

src/Pages/Applications/DevtronApps/Details/CDPipeline/types.tsx

@@ -17,7 +17,7 @@
 import { BuildStageType, FormType } from '@Common/CIPipeline.Types'
 import { APIOptions, DeploymentAppTypes, DeploymentNodeType } from '@Common/Types'
 import { DeploymentStrategy } from '@Shared/Components'
-import { EnvListMinDTO, RuntimeParamsTriggerPayloadType } from '@Shared/types'
+import { DeploymentStrategyType, EnvListMinDTO, RuntimeParamsTriggerPayloadType } from '@Shared/types'
 import { STAGE_MAP } from '@Pages/index'
 
 interface ConfigSecretType {
@@ -136,6 +136,7 @@ export interface TriggerCDNodeServiceProps extends Pick<APIOptions, 'abortContro
      */
     runtimeParamsPayload?: RuntimeParamsTriggerPayloadType
     isRollbackTrigger?: boolean
+    strategy?: DeploymentStrategyType
 }
 
 export interface TriggerCDPipelinePayloadType

src/Shared/Components/Icon/Icon.tsx

@@ -48,6 +48,7 @@ import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
 import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
+import { ReactComponent as ICFastForward } from '@IconsV2/ic-fast-forward.svg'
 import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg'
 import { ReactComponent as ICFlask } from '@IconsV2/ic-flask.svg'
 import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg'
@@ -75,11 +76,13 @@ import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
 import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
+import { ReactComponent as ICLego } from '@IconsV2/ic-lego.svg'
 import { ReactComponent as ICLightning } from '@IconsV2/ic-lightning.svg'
 import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.svg'
 import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg'
 import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-logo.svg'
 import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
+import { ReactComponent as ICMagnifyingGlass } from '@IconsV2/ic-magnifying-glass.svg'
 import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg'
 import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
 import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
@@ -96,6 +99,7 @@ import { ReactComponent as ICOpenshift } from '@IconsV2/ic-openshift.svg'
 import { ReactComponent as ICOutOfSync } from '@IconsV2/ic-out-of-sync.svg'
 import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-color.svg'
 import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
+import { ReactComponent as ICPlayOutline } from '@IconsV2/ic-play-outline.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'
@@ -181,6 +185,7 @@ export const iconMap = {
     'ic-env': ICEnv,
     'ic-error': ICError,
     'ic-failure': ICFailure,
+    'ic-fast-forward': ICFastForward,
     'ic-file-key': ICFileKey,
     'ic-flask': ICFlask,
     'ic-folder-user': ICFolderUser,
@@ -208,11 +213,13 @@ export const iconMap = {
     'ic-k8s-job': ICK8sJob,
     'ic-key': ICKey,
     'ic-ldap': ICLdap,
+    'ic-lego': ICLego,
     'ic-lightning-fill': ICLightningFill,
     'ic-lightning': ICLightning,
     'ic-livspace': ICLivspace,
     'ic-login-devtron-logo': ICLoginDevtronLogo,
     'ic-logout': ICLogout,
+    'ic-magnifying-glass': ICMagnifyingGlass,
     'ic-medium-delete': ICMediumDelete,
     'ic-medium-paintbucket': ICMediumPaintbucket,
     'ic-memory': ICMemory,
@@ -229,6 +236,7 @@ export const iconMap = {
     'ic-out-of-sync': ICOutOfSync,
     'ic-paper-plane-color': ICPaperPlaneColor,
     'ic-pencil': ICPencil,
+    'ic-play-outline': ICPlayOutline,
     'ic-quay': ICQuay,
     'ic-quote': ICQuote,
     'ic-rocket-launch': ICRocketLaunch,

src/Shared/Components/LoadingCard.tsx

@@ -0,0 +1,23 @@
+interface LoadingCardType {
+    wider?: boolean
+}
+
+const LoadingCard = ({ wider }: LoadingCardType) => (
+    <div
+        // TODO: Remove margin and use gap
+        className={`flexbox-col ${wider ? 'w-250' : 'w-200'} bg__primary border__secondary-translucent br-8 mr-16`}
+        style={{
+            boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+        }}
+    >
+        <div className="flexbox-col dc__gap-8 px-12 pt-12 pb-8">
+            <span className="w-60 h-14 shimmer" />
+            <span className="w-120 h-18 shimmer" />
+        </div>
+        <div className="flexbox px-12 py-10 border__secondary--top">
+            <span className="w-44 h-14 shimmer" />
+        </div>
+    </div>
+)
+
+export default LoadingCard

src/Shared/Components/index.ts

@@ -72,6 +72,7 @@ export * from './InfoIconTippy'
 export * from './InvalidYAMLTippy'
 export * from './KeyValueTable'
 export * from './License'
+export { default as LoadingCard } from './LoadingCard'
 export * from './LoginBanner'
 export * from './MaterialHistory'
 export * from './ModalSidebarPanel'

src/Shared/types.ts

@@ -1161,3 +1161,7 @@ export interface IntelligenceConfig {
 }
 
 export type DeploymentStrategyType = 'CANARY' | 'ROLLING' | 'RECREATE' | 'BLUE-GREEN'
+
+export type DeploymentStrategyTypeWithDefault = DeploymentStrategyType | 'DEFAULT'
+
+export type PipelineIdsVsDeploymentStrategyMap = Record<number, DeploymentStrategyType>