Merge branch 'kubecon-2025' of https://github.com/devtron-labs/dashboard into feat/cost-config

Author: AbhishekA1509

.eslintignore

@@ -92,7 +92,6 @@ src/components/app/details/cdDetails/CDDetails.tsx
 src/components/app/details/cicdHistory/History.components.tsx
 src/components/app/details/main.tsx
 src/components/app/details/metrics/BenchmarkModal.tsx
-src/components/app/details/metrics/DeploymentMetrics.tsx
 src/components/app/details/metrics/DeploymentTable.tsx
 src/components/app/details/metrics/DeploymentTableModal.tsx
 src/components/app/details/metrics/deploymentMetrics.service.ts

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.3-pre-7",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.3-alpha-9",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -31,7 +31,6 @@
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
         "react-virtualized": "^9.22.5",
-        "recharts": "^2.1.9",
         "rollup-plugin-node-polyfills": "0.2.1",
         "rxjs": "^7.5.4",
         "sockjs-client": "1.6.1",
@@ -79,7 +78,6 @@
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-transition-group": "^4.4.4",
-        "@types/recharts": "^1.8.23",
         "@types/recompose": "^0.30.10",
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

@@ -18,15 +18,18 @@ import { Fragment, useEffect, useState } from 'react'
 import { Link, NavLink, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
+    ActionMenu,
+    ButtonStyleType,
+    ButtonVariantType,
     ComponentSizeType,
     ConfirmationModal,
     ConfirmationModalVariantType,
     DeleteConfirmationModal,
     DocLink,
     EnvResourceType,
     getEnvironmentListMinPublic,
+    Icon,
     InfoBlock,
-    PopupMenu,
     Progressing,
     SelectPicker,
     showError,
@@ -37,10 +40,7 @@ import {
 import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 
 import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
-import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
 import { createClusterEnvGroup, usePrevious } from '../../../../../../components/common'
-import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
 import { URLS } from '../../../../../../config'
 import { addJobEnvironment, deleteJobEnvironment, getCIConfig } from '../../../../../../services/service'
 import { AppConfigState, JobEnvOverrideRouteProps } from '../AppConfig.types'
@@ -150,8 +150,7 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
         return renderDeleteDialog()
     }
 
-    const toggleDeleteDialog = (e) => {
-        e.stopPropagation()
+    const toggleDeleteDialog = () => {
         setDeleteView(true)
         const pipeline = ciPipelines?.find((env) => env.environmentId === envOverride.environmentId)
         if (pipeline) {
@@ -160,25 +159,38 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
         }
     }
 
-    const deletePopUpMenu = (): JSX.Element => (
-        <PopupMenu autoClose>
-            <PopupMenu.Button rootClassName="flex" isKebab>
-                <More className="icon-dim-16 fcn-6" data-testid="popup-env-delete-button" />
-            </PopupMenu.Button>
-            <PopupMenu.Body rootClassName="dc__border pt-4 pb-4 w-100px">
-                <div className="fs-13 fw-4 lh-20">
-                    <button
-                        type="button"
-                        className="dc__unset-button-styles w-100 flex left h-32 cursor pl-12 pr-12 cr-5 dc__hover-n50"
-                        onClick={toggleDeleteDialog}
-                        data-testid="delete-jobs-environment-link"
-                    >
-                        <DeleteIcon className="icon-dim-16 mr-8 scr-5" />
-                        {RESOURCE_ACTION_MENU.delete}
-                    </button>
-                </div>
-            </PopupMenu.Body>
-        </PopupMenu>
+    const handleActionDelete = (item) => {
+        if (item.id === 'delete') {
+            toggleDeleteDialog()
+        }
+        return null
+    }
+
+    const renderDeletePopUpMenu = (): JSX.Element => (
+        <ActionMenu
+            id="delete-env-action-menu"
+            onClick={handleActionDelete}
+            options={[
+                {
+                    items: [
+                        {
+                            id: 'delete',
+                            label: 'Delete',
+                            startIcon: { name: 'ic-delete' },
+                            type: 'negative',
+                        },
+                    ],
+                },
+            ]}
+            buttonProps={{
+                dataTestId: 'delete-env-action-menu-button',
+                icon: <Icon name="ic-more-vertical" color={null} rotateBy={90} />,
+                variant: ButtonVariantType.borderLess,
+                ariaLabel: 'Open action menu',
+                style: ButtonStyleType.neutral,
+                size: ComponentSizeType.xs,
+            }}
+        />
     )
 
     return (
@@ -191,7 +203,7 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
                 <span className="dc__truncate">{envOverride.environmentName}</span>
                 {isEnvProtected && <ICStamp className="icon-dim-20 scv-5 dc__no-shrink" />}
             </NavLink>
-            {deletePopUpMenu()}
+            {renderDeletePopUpMenu()}
             {showDelete && showDeleteDialog(deletePipeline)}
         </div>
     )

src/assets/icons/ic-file-download.svg

@@ -19,6 +19,8 @@ import { Prompt, Route, Switch, useHistory, useLocation, useParams, useRouteMatc
 import Tippy from '@tippyjs/react'
 
 import {
+    ActionMenu,
+    ActionMenuProps,
     Button,
     ButtonStyleType,
     ButtonVariantType,
@@ -29,7 +31,6 @@ import {
     DEFAULT_ROUTE_PROMPT_MESSAGE,
     DeploymentNodeType,
     ErrorScreenManager,
-    PopupMenu,
     Progressing,
     ServerErrors,
     showError,
@@ -78,6 +79,7 @@ import BulkSourceChange from './BulkSourceChange'
 import { getSelectedNodeAndAppId } from './utils'
 
 import './EnvTriggerView.scss'
+import { EnvTriggerViewActionKey } from './types'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const processDeploymentWindowStateAppGroup = importComponentFromFELibrary(
@@ -527,6 +529,25 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
         )
     }
 
+    const handleActionClick: ActionMenuProps['onClick'] = (item) => {
+        switch (item.id) {
+            case EnvTriggerViewActionKey.PRE_DEPLOY:
+                setBulkTriggerType(DeploymentNodeType.PRECD)
+                setShowBulkCDModal(true)
+                break
+            case EnvTriggerViewActionKey.DEPLOY:
+                setBulkTriggerType(DeploymentNodeType.CD)
+                setShowBulkCDModal(true)
+                break
+            case EnvTriggerViewActionKey.POST_DEPLOY:
+                setBulkTriggerType(DeploymentNodeType.POSTCD)
+                setShowBulkCDModal(true)
+                break
+            default:
+                break
+        }
+    }
+
     const renderApprovalMaterial = () => {
         if (ApprovalMaterialModal && location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE)) {
             const { node, appId } = getSelectedNodeAndAppId(filteredWorkflows, location.search)
@@ -550,45 +571,43 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
     }
 
     const renderDeployPopupMenu = (): JSX.Element => (
-        <PopupMenu autoClose>
-            <PopupMenu.Button
-                isKebab
-                rootClassName="h-32 popup-button-kebab dc__border-left-b4 pl-8 pr-8 dc__no-left-radius flex bcb-5"
-                dataTestId="deploy-popup"
-            >
-                <Dropdown className="icon-dim-20 fcn-0" />
-            </PopupMenu.Button>
-            <PopupMenu.Body rootClassName=" dc__border pt-4 pb-4 mb-8">
-                {showPreDeployment && (
-                    <div
-                        className="flex left p-10 dc__hover-n50 pointer fs-13"
-                        data-trigger-type="PRECD"
-                        onClick={onShowBulkCDModal}
-                        data-testid="pre-deploy-popup-button"
-                    >
-                        Trigger Pre-deployment stage
-                    </div>
-                )}
-                <div
-                    className="flex left p-10 dc__hover-n50 pointer fs-13"
-                    data-trigger-type="CD"
-                    onClick={onShowBulkCDModal}
-                    data-testid="deploy-popup-button"
-                >
-                    Trigger Deployment
-                </div>
-                {showPostDeployment && (
-                    <div
-                        className="flex left p-10 dc__hover-n50 pointer fs-13"
-                        data-trigger-type="POSTCD"
-                        onClick={onShowBulkCDModal}
-                        data-testid="post-deploy-popup-button"
-                    >
-                        Trigger Post-deployment stage
-                    </div>
-                )}
-            </PopupMenu.Body>
-        </PopupMenu>
+        <ActionMenu<EnvTriggerViewActionKey>
+            id="deploy-popup"
+            onClick={handleActionClick}
+            options={[
+                {
+                    items: [
+                        ...(showPreDeployment
+                            ? [
+                                  {
+                                      id: EnvTriggerViewActionKey.PRE_DEPLOY,
+                                      label: 'Trigger Pre-deployment stage',
+                                  },
+                              ]
+                            : []),
+                        {
+                            id: EnvTriggerViewActionKey.DEPLOY,
+                            label: 'Trigger Deployment',
+                        },
+                        ...(showPostDeployment
+                            ? [
+                                  {
+                                      id: EnvTriggerViewActionKey.POST_DEPLOY,
+                                      label: 'Trigger Post-deployment stage',
+                                  },
+                              ]
+                            : []),
+                    ],
+                },
+            ]}
+            buttonProps={{
+                dataTestId: 'deploy-popup',
+                icon: <Dropdown className="icon-dim-20 fcn-0" />,
+                variant: ButtonVariantType.primary,
+                size: ComponentSizeType.medium,
+                ariaLabel: 'Deploy options',
+            }}
+        />
     )
 
     const renderBulkTriggerActionButtons = (): JSX.Element => {

src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx

@@ -27,3 +27,9 @@ export interface SourceUpdateResponseModalProps {
     responseList: any
     isLoading: any
 }
+
+export enum EnvTriggerViewActionKey {
+    PRE_DEPLOY = 'pre-deploy',
+    DEPLOY = 'deploy',
+    POST_DEPLOY = 'post-deploy',
+}

src/components/ApplicationGroup/Details/TriggerView/types.ts

@@ -29,3 +29,8 @@ export const CONTAINER_CONDITION_TYPE_TO_CONDITION_TYPE_MAP = {
     [ConditionContainerType.TRIGGER_SKIP]: [ConditionType.TRIGGER, ConditionType.SKIP],
     [ConditionContainerType.PASS_FAILURE]: [ConditionType.PASS, ConditionType.FAIL],
 }
+
+export enum TaskActionMenuOptionIdEnum {
+    DELETE = 'delete',
+    MOVE = 'move',
+}