feat: add animation on deploy button in cd modal

.env

@@ -67,3 +67,4 @@ FEATURE_BULK_RESTART_WORKLOADS_FROM_RB=deployment,rollout,daemonset,statefulset
 FEATURE_DEFAULT_MERGE_STRATEGY=
 FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
+FEATURE_ACTION_AUDIOS_ENABLE=true

config.md

@@ -50,5 +50,6 @@
 | TRIGGER_API_TIMEOUT                          | 60000      | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD                   |
 | FEATURE_STEP_WISE_LOGS_ENABLE                      | true         | Would segregate logs into tasks     |
 | FEATURE_HIDE_USER_DIRECT_PERMISSIONS_FOR_NON_SUPER_ADMINS | "true" | Would hide the user direct permissions for non-super admin users in User Permissions |
+| FEATURE_ACTION_AUDIOS_ENABLE                 | true         | Would enable audios in dashboard   |
 
 # DASHBOARD CONFIG SECRET

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.3.3",
+        "@devtron-labs/devtron-fe-common-lib": "1.3.4",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

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

@@ -45,11 +45,14 @@ import {
     RuntimePluginVariables,
     uploadCDPipelineFile,
     UploadFileProps,
+    Button,
+    ComponentSizeType,
+    AnimatedDeployButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Close } from '@Icons/ic-cross.svg'
 import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as PlayIcon } from '@Icons/ic-play-medium.svg'
+import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Error } from '@Icons/ic-warning.svg'
 import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
 import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
@@ -846,29 +849,23 @@ export default function BulkCDTrigger({
     }
 
     const renderFooterSection = (): JSX.Element => {
+        const isDeployButtonDisabled: boolean = isDeployDisabled()
         return (
             <div className="dc__border-top flex right bcn-0 pt-16 pr-20 pb-16 pl-20 dc__position-fixed dc__bottom-0 env-modal-width">
                 <div className="dc__position-rel tippy-over">
-                    <button
-                        className="cta flex h-36"
-                        data-testid="deploy-button"
-                        onClick={onClickStartDeploy}
-                        disabled={isDeployDisabled()}
-                        type="button"
-                    >
-                        {isLoading ? (
-                            <Progressing />
-                        ) : (
-                            <>
-                                {stage === DeploymentNodeType.CD ? (
-                                    <DeployIcon className="icon-dim-16 dc__no-svg-fill mr-8" />
-                                ) : (
-                                    <PlayIcon className="icon-dim-16 dc__no-svg-fill scn-0 mr-8" />
-                                )}
-                                {BUTTON_TITLE[stage]}
-                            </>
-                        )}
-                    </button>
+                    {!isDeployButtonDisabled && stage === DeploymentNodeType.CD && !isLoading ? (
+                        <AnimatedDeployButton onButtonClick={onClickStartDeploy} isVirtualEnvironment={false} />
+                    ) : (
+                        <Button
+                            dataTestId="deploy-button"
+                            text={BUTTON_TITLE[stage]}
+                            startIcon={stage === DeploymentNodeType.CD ? <DeployIcon /> : <PlayIcon />}
+                            isLoading={isLoading}
+                            size={ComponentSizeType.large}
+                            onClick={onClickStartDeploy}
+                            disabled={isDeployButtonDisabled}
+                        />
+                    )}
                 </div>
             </div>
         )

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

@@ -47,7 +47,7 @@ import {
 import Tippy from '@tippyjs/react'
 import { getCIPipelineURL, getParsedBranchValuesForPlugin, importComponentFromFELibrary } from '../../../common'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
-import { ReactComponent as PlayIcon } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Warning } from '../../../../assets/icons/ic-warning.svg'
 import { ReactComponent as ICError } from '../../../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as Storage } from '../../../../assets/icons/ic-storage.svg'

src/components/app/details/triggerView/cdMaterial.tsx

@@ -82,6 +82,10 @@ import {
     PipelineStageBlockInfo,
     RuntimePluginVariables,
     uploadCDPipelineFile,
+    Button,
+    ComponentSizeType,
+    ButtonStyleType,
+    AnimatedDeployButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -102,10 +106,10 @@ import { ReactComponent as InfoIcon } from '../../../../assets/icons/info-filled
 import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
 import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
 import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
-import { ReactComponent as PlayIC } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as PlayIC } from '@Icons/ic-play-outline.svg'
 
 import noArtifact from '../../../../assets/img/[email protected]'
-import { getCTAClass, importComponentFromFELibrary, useAppContext } from '../../../common'
+import { importComponentFromFELibrary, useAppContext } from '../../../common'
 import { CDButtonLabelMap, TriggerViewContext } from './config'
 import { triggerCDNode } from '../../service'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
@@ -1652,17 +1656,19 @@ const CDMaterial = ({
         if (deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED) {
             return null
         } else if (stageType !== STAGE_TYPE.CD) {
-            return (
-                <PlayIC
-                    className={`icon-dim-16 mr-8 dc__no-svg-fill dc__stroke-width-2 ${deploymentWindowMetadata.userActionState === ACTION_STATE.PARTIAL ? 'scn-9' : 'scn-0'}`}
-                />
-            )
+            return <PlayIC />
         }
-        return (
-            <DeployIcon
-                className={`icon-dim-16 dc__no-svg-fill mr-8 ${deploymentWindowMetadata.userActionState === ACTION_STATE.PARTIAL ? 'scn-9' : ''}`}
-            />
-        )
+        return <DeployIcon />
+    }
+
+    const getDeployButtonStyle = (userActionState: string): ButtonStyleType => {
+        if (userActionState === ACTION_STATE.BLOCKED) {
+            return ButtonStyleType.negative
+        }
+        if (userActionState === ACTION_STATE.PARTIAL) {
+            return ButtonStyleType.warning
+        }
+        return ButtonStyleType.default
     }
 
     const onClickDeploy = (e, disableDeployButton: boolean) => {
@@ -1685,30 +1691,32 @@ const CDMaterial = ({
         }
     }
 
-    const renderTriggerDeployButton = (disableDeployButton: boolean) => (
-        <button
-            data-testid="cd-trigger-deploy-button"
-            disabled={deploymentLoading || isSaveLoading}
-            className={`${getCTAClass(deploymentWindowMetadata.userActionState, disableDeployButton)} h-36`}
-            onClick={(e) => onClickDeploy(e, disableDeployButton)}
-            type="button"
-        >
-            {deploymentLoading || isSaveLoading ? (
-                <Progressing />
-            ) : (
-                <>
-                    {getDeployButtonIcon()}
-                    {deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED
-                        ? 'Deployment is blocked'
-                        : CDButtonLabelMap[stageType]}
-                    {isVirtualEnvironment && ' to isolated env'}
-                    {deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED && (
-                        <InfoOutline className="icon-dim-16 ml-5" />
-                    )}
-                </>
-            )}
-        </button>
-    )
+    const renderTriggerDeployButton = (disableDeployButton: boolean) => {
+        const userActionState: ACTION_STATE = deploymentWindowMetadata.userActionState
+        if (
+            stageType === DeploymentNodeType.CD &&
+            !disableDeployButton &&
+            (userActionState ? userActionState === ACTION_STATE.ALLOWED : true) &&
+            !(deploymentLoading || isSaveLoading)
+        ) {
+            return <AnimatedDeployButton onButtonClick={onClickDeploy} isVirtualEnvironment={isVirtualEnvironment} />
+        }
+        return (
+            <Button
+                dataTestId="cd-trigger-deploy-button"
+                startIcon={getDeployButtonIcon()}
+                isLoading={deploymentLoading || isSaveLoading}
+                text={`${
+                    userActionState === ACTION_STATE.BLOCKED ? 'Deployment is blocked' : CDButtonLabelMap[stageType]
+                }${isVirtualEnvironment ? ' to isolated env' : ''}`}
+                endIcon={userActionState === ACTION_STATE.BLOCKED ? <InfoOutline /> : null}
+                onClick={(e) => onClickDeploy(e, disableDeployButton)}
+                size={ComponentSizeType.large}
+                style={getDeployButtonStyle(userActionState)}
+                disabled={disableDeployButton}
+            />
+        )
+    }
 
     const renderTriggerModalCTA = (isApprovalConfigured: boolean) => {
         const disableDeployButton =

src/components/app/details/triggerView/ciMaterial.tsx

@@ -31,11 +31,10 @@ import {
     noop,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CIMaterialProps, CIMaterialState, RegexValueType } from './types'
-import { ReactComponent as Play } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as Play } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Info } from '../../../../assets/icons/info-filled.svg'
 import { ReactComponent as Storage } from '../../../../assets/icons/ic-storage.svg'
 import { ReactComponent as OpenInNew } from '../../../../assets/icons/ic-open-in-new.svg'
-import { ReactComponent as RunIcon } from '../../../../assets/icons/ic-play-media.svg'
 import { getCIPipelineURL, importComponentFromFELibrary } from '../../../common'
 import { DOCUMENTATION, SOURCE_NOT_CONFIGURED, DEFAULT_ROUTE_PROMPT_MESSAGE } from '../../../../config'
 import { getModuleConfigured } from '../appDetails/appDetails.service'
@@ -224,7 +223,7 @@ class CIMaterial extends Component<CIMaterialProps, CIMaterialState> {
             isLoading={this.props.isLoading}
             onClick={isCTAActionable ? this.handleStartBuildAction : noop}
             size={ComponentSizeType.large}
-            startIcon={this.props.isJobView || this.props.isJobCI ? <RunIcon /> : <Play />}
+            startIcon={<Play />}
         />
     )
 

src/components/app/list/DevtronAppListContainer.tsx

@@ -35,14 +35,14 @@ import {
 import ContentCard from '@Components/common/ContentCard/ContentCard'
 import { HELM_GUIDED_CONTENT_CARDS_TEXTS } from '@Components/onboardingGuide/OnboardingGuide.constants'
 import { CardLinkIconPlacement } from '@Components/common/ContentCard/ContentCard.types'
+import { ReactComponent as PlayMedia } from '@Icons/ic-play-outline.svg'
 import { appListModal, getDevtronAppListPayload } from './appList.modal'
 import { App, DevtronAppExpandedState, DevtronAppListProps } from './types'
 import { DEVTRON_NODE_DEPLOY_VIDEO, Routes, URLS } from '../../../config'
 import { getAppList } from '../service'
 import './list.scss'
 import { AppListSortableKeys } from '../list-new/AppListType'
 import NodeAppThumbnail from '../../../assets/img/node-app-thumbnail.png'
-import { ReactComponent as PlayMedia } from '../../../assets/icons/ic-play-media.svg'
 import DeployCICD from '../../../assets/img/guide-onboard.png'
 import { appListLoadingArray, APP_LIST_HEADERS } from '../list-new/Constants'
 import { ReactComponent as ArrowRight } from '../../../assets/icons/ic-arrow-right.svg'

src/components/common/helpers/Helpers.tsx

@@ -1105,8 +1105,6 @@ export const getDeploymentAppType = (
     return allowedDeploymentTypes[0]
 }
 
-
-
 export const getNonEditableChartRepoText = (name: string): string => {
     return `Cannot edit chart repo "${name}". Some charts from this repository are being used by helm apps.`
 }
@@ -1139,18 +1137,6 @@ export const getApprovalModalTypeFromURL = (url: string): APPROVAL_MODAL_TYPE =>
     return APPROVAL_MODAL_TYPE.CONFIG
 }
 
-export const getCTAClass = (userActionState: string, disableDeployButton?: boolean): string => {
-    let className = 'cta small flex ml-auto'
-    if (disableDeployButton) {
-        className += ' disabled-opacity'
-    } else if (userActionState === ACTION_STATE.BLOCKED) {
-        className += ' danger'
-    } else if (userActionState === ACTION_STATE.PARTIAL) {
-        className += ' warning'
-    }
-    return className
-}
-
 export const getPluginIdsFromBuildStage = (
     stage: PipelineBuildStageType,
 ): PluginDetailServiceParamsType['pluginIds'] => {
@@ -1244,7 +1230,7 @@ export const getParsedBranchValuesForPlugin = (branchName: string): string => {
  */
 export const checkIfPathIsMatching =
     (currentPathName: string, customMessage = ''): PromptProps['message'] =>
-    ({ pathname }: { pathname: string })  =>
+    ({ pathname }: { pathname: string }) =>
         currentPathName === pathname || customMessage || UNSAVED_CHANGES_PROMPT_MESSAGE
 
 export const getAppFilterLocalStorageKey = (filterParentType: FilterParentType): AppEnvLocalStorageKeyType =>

src/components/material/MaterialList.tsx

@@ -28,9 +28,9 @@ import { AppConfigStatus, ViewType, DOCUMENTATION, DEVTRON_NODE_DEPLOY_VIDEO } f
 import { CreateMaterial } from './CreateMaterial'
 import { UpdateMaterial } from './UpdateMaterial'
 import { MaterialListProps, MaterialListState } from './material.types'
-import { ReactComponent as GitHub } from '../../assets/icons/ic-sample-app.svg'
-import { ReactComponent as PlayMedia } from '../../assets/icons/ic-play-media.svg'
-import { ReactComponent as Folder } from '../../assets/icons/ic-folder-filled.svg'
+import { ReactComponent as GitHub } from '@Icons/ic-sample-app.svg'
+import { ReactComponent as PlayMedia } from '@Icons/ic-play-outline.svg'
+import { ReactComponent as Folder } from '@Icons/ic-folder-filled.svg'
 import './material.scss'
 
 class MaterialList extends Component<MaterialListProps, MaterialListState> {
@@ -181,7 +181,7 @@ class MaterialList extends Component<MaterialListProps, MaterialListState> {
                             className="flex left dc__link"
                             href={DEVTRON_NODE_DEPLOY_VIDEO}
                         >
-                            <PlayMedia className="icon-dim-16 mr-4" />
+                            <PlayMedia className="icon-dim-16 scb-5 mr-4" />
                             Watch how to configure sample application
                         </a>
                     </div>

src/index.tsx

@@ -169,6 +169,7 @@ if (!window || !window._env_) {
         FEATURE_DEFAULT_MERGE_STRATEGY: OverrideMergeStrategyType.PATCH,
         FEATURE_DEFAULT_LANDING_RB_ENABLE: false,
         FEATURE_CLUSTER_MAP_ENABLE: true,
+        FEATURE_ACTION_AUDIOS_ENABLE: true,
     }
 }
 

yarn.lock

@@ -974,10 +974,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected].3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.3.3.tgz#6471aef5d3ade3c0b2339a1f121581473054ec58"
-  integrity sha512-PJs310nrDJazfx6PPFvwA4p60yInUKULlSeFDpP/weoIi9bVRsaK2pMHDYl49LcpbpuQiLotMS5uSGVPaN5C+A==
+"@devtron-labs/[email protected].4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.3.4.tgz#def073c5b2db04a09b88a9dddadb80eba7f05fe1"
+  integrity sha512-aaOuTUu+Ofl22+7OGdEDv4Ub2CsClTVMVR96CPQPiVDk1b6VMIqB8BOeIXdi4vQ0jbRlVom0MHOaI+Jg7259pg==
   dependencies:
     "@types/react-dates" "^21.8.6"
     ansi_up "^5.2.1"