Merge pull request #751 from devtron-labs/fix/add-more-wfr-status

feat: update deployment status mapping and add new workflow runner statuses

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -7,6 +7,8 @@ import { Icon } from '../Icon'
 import { getTooltipProps } from '../SelectPicker/common'
 import { ActionMenuItemProps } from './types'
 
+const COMMON_ACTION_MENU_ITEM_CLASS = 'flex-grow-1 flex left top dc__gap-8 py-6 px-8'
+
 export const ActionMenuItem = <T extends string | number>({
     item,
     itemRef,
@@ -52,19 +54,25 @@ export const ActionMenuItem = <T extends string | number>({
 
     const renderContent = () => (
         <>
-            <Tooltip content={label} placement="right">
-                <span className={`m-0 fs-13 fw-4 lh-20 dc__truncate ${isNegativeType ? 'cr-5' : 'cn-9'}`}>{label}</span>
-            </Tooltip>
-            {description &&
-                (typeof description === 'string' ? (
-                    <span
-                        className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : 'dc__word-break'}`}
-                    >
-                        {description}
+            {renderIcon(startIcon)}
+            <span>
+                <Tooltip content={label} placement="right">
+                    <span className={`m-0 fs-13 fw-4 lh-20 dc__truncate ${isNegativeType ? 'cr-5' : 'cn-9'}`}>
+                        {label}
                     </span>
-                ) : (
-                    description
-                ))}
+                </Tooltip>
+                {description &&
+                    (typeof description === 'string' ? (
+                        <span
+                            className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : 'dc__word-break'}`}
+                        >
+                            {description}
+                        </span>
+                    ) : (
+                        description
+                    ))}
+            </span>
+            {renderIcon(endIcon)}
         </>
     )
 
@@ -74,7 +82,7 @@ export const ActionMenuItem = <T extends string | number>({
                 return (
                     <a
                         ref={itemRef as LegacyRef<HTMLAnchorElement>}
-                        className="flex-grow-1"
+                        className={COMMON_ACTION_MENU_ITEM_CLASS}
                         href={item.href}
                         target="_blank"
                         rel="noreferrer"
@@ -84,7 +92,11 @@ export const ActionMenuItem = <T extends string | number>({
                 )
             case 'link':
                 return (
-                    <Link ref={itemRef as Ref<HTMLAnchorElement>} className="flex-grow-1" to={item.to}>
+                    <Link
+                        ref={itemRef as Ref<HTMLAnchorElement>}
+                        className={COMMON_ACTION_MENU_ITEM_CLASS}
+                        to={item.to}
+                    >
                         {renderContent()}
                     </Link>
                 )
@@ -94,7 +106,7 @@ export const ActionMenuItem = <T extends string | number>({
                     <button
                         ref={itemRef as LegacyRef<HTMLButtonElement>}
                         type="button"
-                        className="dc__transparent p-0 flex-grow-1"
+                        className={`dc__transparent ${COMMON_ACTION_MENU_ITEM_CLASS}`}
                     >
                         {renderContent()}
                     </button>
@@ -111,13 +123,11 @@ export const ActionMenuItem = <T extends string | number>({
                 onMouseEnter={onMouseEnter}
                 tabIndex={-1}
                 // Intentionally added margin to the left and right to have the gap on the edges of the options
-                className={`action-menu__option br-4 flex left top dc__gap-8 mr-4 ml-4 py-6 px-8 ${isDisabled ? 'dc__disabled' : 'cursor'} ${isNegativeType ? 'dc__hover-r50' : 'dc__hover-n50'} ${isFocused ? `action-menu__option--focused${isNegativeType ? '-negative' : ''}` : ''}`}
+                className={`action-menu__option br-4 mr-4 ml-4 ${isDisabled ? 'dc__disabled' : 'cursor'} ${isNegativeType ? 'dc__hover-r50' : 'dc__hover-n50'} ${isFocused ? `action-menu__option--focused${isNegativeType ? '-negative' : ''}` : ''}`}
                 onClick={!isDisabled ? handleClick : undefined}
                 aria-disabled={isDisabled}
             >
-                {renderIcon(startIcon)}
                 {renderComponent()}
-                {renderIcon(endIcon)}
             </li>
         </Tooltip>
     )

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -19,7 +19,7 @@ import { getAppStatusMessageFromAppDetails } from './utils'
 
 const InfoCardItem = ({ heading, value, isLast = false, alignCenter = false }: InfoCardItemProps) => (
     <div
-        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${alignCenter ? 'dc__align-items-center' : ''} ${!isLast ? 'border__secondary--bottom' : ''} ${alignCenter ? 'dc__align-center' : ''}`}
+        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${alignCenter ? 'dc__align-items-center' : ''} ${!isLast ? 'border__secondary--bottom' : ''}`}
     >
         <Tooltip content={heading}>
             <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink">{heading}</h3>

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -39,8 +39,12 @@ export const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Readonly<
     [WorkflowRunnerStatusDTO.INITIATING]: DEPLOYMENT_STATUS.INITIATING,
     [WorkflowRunnerStatusDTO.STARTING]: DEPLOYMENT_STATUS.STARTING,
     [WorkflowRunnerStatusDTO.PROGRESSING]: DEPLOYMENT_STATUS.INPROGRESS,
+    [WorkflowRunnerStatusDTO.SUSPENDED]: DEPLOYMENT_STATUS.INPROGRESS,
 
     [WorkflowRunnerStatusDTO.QUEUED]: DEPLOYMENT_STATUS.QUEUED,
+
+    [WorkflowRunnerStatusDTO.UNKNOWN]: DEPLOYMENT_STATUS.UNABLE_TO_FETCH,
+    [WorkflowRunnerStatusDTO.MISSING]: DEPLOYMENT_STATUS.UNABLE_TO_FETCH,
 }
 
 export const PROGRESSING_DEPLOYMENT_STATUS: Readonly<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS][]> = [

src/Shared/Components/DeploymentStatusBreakdown/constants.ts

@@ -15,9 +15,12 @@ export enum WorkflowRunnerStatusDTO {
     STARTING = 'Starting',
     QUEUED = 'Queued',
     INITIATING = 'Initiating',
-    // Not found on BE but added for Backward compatibility
+    // Coming in specific cases of helm apps
     HEALTHY = 'Healthy',
     DEGRADED = 'Degraded',
+    MISSING = 'Missing',
+    UNKNOWN = 'Unknown',
+    SUSPENDED = 'Suspended',
 }
 
 export interface ProcessUnableToFetchOrTimedOutStatusType {