feat: manual canary control & its visibility

package.json

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

src/Common/Checkbox/Checkbox.scss

@@ -51,6 +51,10 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');
     background-image: url('./assets/ic-checkbox-selected.svg');
 }
 
+.form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {
+    background-image: url('./assets/ic-checkbox-selected-error.svg');
+}
+
 .form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {
     background-image: url('./assets/ic-bulk-check.svg');
 }
@@ -84,15 +88,19 @@ $checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');
             }
         }
 
-        .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container {
+        .form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-checkbox-intermediate.svg');
         }
 
-        .form__checkbox:checked[value='CHECKED']~.form__checkbox-container {
+        .form__checkbox:checked[value='CHECKED'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-checkbox-selected.svg');
         }
 
-        .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {
+        .form__checkbox.error:checked[value='CHECKED'] ~ .form__checkbox-container {
+            background-image: url('./assets/dark/ic-checkbox-selected-error.svg');
+        }
+
+        .form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {
             background-image: url('./assets/dark/ic-bulk-check.svg');
         }
     }

src/Common/Constants.ts

@@ -388,6 +388,7 @@ export const API_STATUS_CODES = {
     EXPECTATION_FAILED: 417,
     UNPROCESSABLE_ENTITY: 422,
     LOCKED: 423,
+    FAILED_DEPENDENCY: 424,
 }
 
 export enum SERVER_MODE {

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -98,7 +98,7 @@ const SortableTableHeaderCell = ({
         <div className={`flex dc__content-space dc__gap-6 dc__position-rel ${isResizable ? 'w-100 h-100' : ''}`}>
             <button
                 type="button"
-                className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''} dc__position-rel`}
+                className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text fw-6 ${!isSortable ? 'cursor-default' : ''} dc__position-rel`}
                 onClick={isSortable ? triggerSorting : noop}
                 disabled={disabled}
                 tabIndex={disabled || !isSortable ? -1 : 0}

src/Common/Types.ts

@@ -28,6 +28,7 @@ import {
     ButtonProps,
     ComponentLayoutType,
     StatusType,
+    DeploymentStrategyType,
 } from '../Shared'
 import {
     ACTION_STATE,
@@ -116,6 +117,7 @@ export interface CheckboxProps {
     onClick?: (event) => void
     id?: string
     dataTestId?: string
+    error?: boolean
     children?: ReactNode
 }
 
@@ -847,7 +849,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/Button/button.scss

@@ -148,7 +148,7 @@
             $active-bg-color: var(--B200);
 
             @include button-variant-styles($background, var(--B500), $border-color, $active-bg-color);
-            @include pseudo-states(var(--B100), $active-bg-color, var(--B300));
+            @include pseudo-states(var(--bg-hover), $active-bg-color, var(--B300));
         }
 
         &--negative {
@@ -183,7 +183,7 @@
             $active-bg-color: var(--N200);
 
             @include button-variant-styles($background, var(--N700), $border-color, $active-bg-color);
-            @include pseudo-states(var(--N100), $active-bg-color, var(--N300));
+            @include pseudo-states(var(--bg-hover), $active-bg-color, var(--N300));
         }
     }
 
@@ -229,7 +229,7 @@
     // Pseudo states for border-less button
     &__border-less {
         &--default {
-            @include pseudo-states(var(--B100), var(--B200));
+            @include pseudo-states(var(--bg-hover), var(--B200));
         }
 
         &--negative {
@@ -249,7 +249,7 @@
         }
 
         &--neutral {
-            @include pseudo-states(var(--N100), var(--N200));
+            @include pseudo-states(var(--bg-hover), var(--N200));
         }
 
         &--neutral-n0 {

src/Shared/Components/CICDHistory/types.tsx

@@ -37,6 +37,7 @@ import {
     DeploymentStatusDetailsBreakdownDataType,
     DeploymentStatusDetailsType,
     DeploymentStatusTimelineType,
+    DeploymentStrategyType,
     GitTriggers,
     Node,
     NodeType,
@@ -736,8 +737,6 @@ export interface DeploymentHistory {
     runSource?: RunSourceType
 }
 
-type DeploymentStrategyType = 'CANARY' | 'ROLLING' | 'RECREATE' | 'BLUE_GREEN'
-
 export interface DeploymentStrategy {
     deploymentTemplate: DeploymentStrategyType
     config: any