Skip to content

Commit 51b9b16

Browse files
arunjaindevarunjaindev
committed
feat: update loading card and use from fe-common
1 parent c5dfd7a commit 51b9b16

17 files changed

+272
-242
lines changed

‎src/components/app/details/appDetails/AppDetailsCDButton.tsx

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { useHistory, useLocation } from 'react-router-dom'
2020

2121
import {
2222
Button,
23-
ButtonComponentType,
2423
ButtonVariantType,
2524
ComponentSizeType,
2625
DeploymentNodeType,
@@ -55,6 +54,7 @@ const AppDetailsCDButton = ({
5554
isForEmptyState = false,
5655
handleSuccess,
5756
isAppView,
57+
isForRollback = false,
5858
}: AppDetailsCDButtonType): JSX.Element => {
5959
const history = useHistory()
6060
const { searchParams } = useSearchString()
@@ -73,9 +73,11 @@ const AppDetailsCDButton = ({
7373
search: new URLSearchParams(newParams).toString(),
7474
})
7575

76-
ReactGA.event(
77-
isAppView ? DA_APP_DETAILS_GA_EVENTS.DeployButtonClicked : AG_APP_DETAILS_GA_EVENTS.DeployButtonClicked,
78-
)
76+
if (!isForRollback) {
77+
ReactGA.event(
78+
isAppView ? DA_APP_DETAILS_GA_EVENTS.DeployButtonClicked : AG_APP_DETAILS_GA_EVENTS.DeployButtonClicked,
79+
)
80+
}
7981
}
8082

8183
const closeCDModal = (e: React.MouseEvent): void => {
@@ -85,32 +87,41 @@ const AppDetailsCDButton = ({
8587

8688
const { buttonStyle, iconName } = getDeployButtonConfig(deploymentUserActionState, isForEmptyState)
8789

88-
const renderDeployButton = () => (
89-
<Button
90-
dataTestId="deploy-button"
91-
size={isForEmptyState ? ComponentSizeType.large : ComponentSizeType.small}
92-
variant={ButtonVariantType.primary}
93-
text={isForEmptyState ? 'Select Image to Deploy' : BUTTON_TITLE[DeploymentNodeType.CD]}
94-
startIcon={iconName && <Icon name={iconName} color={null} />}
95-
onClick={onClickDeployButton}
96-
component={ButtonComponentType.button}
97-
style={buttonStyle}
98-
/>
99-
)
90+
const renderDeployButton = () =>
91+
isForRollback ? (
92+
<Button
93+
dataTestId="rollback-button"
94+
text="Rollback"
95+
variant={ButtonVariantType.text}
96+
onClick={onClickDeployButton}
97+
size={ComponentSizeType.medium}
98+
/>
99+
) : (
100+
<Button
101+
dataTestId="deploy-button"
102+
size={isForEmptyState ? ComponentSizeType.large : ComponentSizeType.small}
103+
text={isForEmptyState ? 'Select Image to Deploy' : BUTTON_TITLE[DeploymentNodeType.CD]}
104+
startIcon={iconName && <Icon name={iconName} color={null} />}
105+
onClick={onClickDeployButton}
106+
style={buttonStyle}
107+
/>
108+
)
100109

101110
const node = {
102111
environmentName,
103112
parentEnvironmentName: cdModal.parentEnvironmentName,
104113
isVirtualEnvironment,
105114
}
106115

116+
const materialType = isForRollback ? MATERIAL_TYPE.rollbackMaterialList : MATERIAL_TYPE.inputMaterialList
117+
107118
const renderApprovalMaterial = () =>
108119
ApprovalMaterialModal &&
109120
location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE) && (
110121
<ApprovalMaterialModal
111122
isLoading={loadingDetails}
112123
node={node}
113-
materialType={MATERIAL_TYPE.inputMaterialList}
124+
materialType={materialType}
114125
stageType={DeploymentNodeType.CD}
115126
closeApprovalModal={closeCDModal}
116127
appId={appId}
@@ -126,7 +137,7 @@ const AppDetailsCDButton = ({
126137
<VisibleModal className="" parentClassName="dc__overflow-hidden" close={closeCDModal}>
127138
<div className="modal-body--cd-material h-100 contains-diff-view flexbox-col" onClick={stopPropagation}>
128139
<CDMaterial
129-
materialType={MATERIAL_TYPE.inputMaterialList}
140+
materialType={materialType}
130141
appId={appId}
131142
envId={environmentId}
132143
pipelineId={cdModal.cdPipelineId}

‎src/components/app/details/appDetails/AppStatusCard.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@
1717
import React, { useMemo } from 'react'
1818
import Tippy from '@tippyjs/react'
1919
import ReactGA from 'react-ga4'
20-
import { AppStatus, AppType, StatusType } from '@devtron-labs/devtron-fe-common-lib'
20+
import { AppStatus, AppType, StatusType, LoadingCard } from '@devtron-labs/devtron-fe-common-lib'
2121
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
2222
import { AppStatusCardType } from './appDetails.type'
23-
import LoadingCard from './LoadingCard'
2423
import './appDetails.scss'
2524
import { importComponentFromFELibrary } from '@Components/common'
2625
import { getAIAnalyticsEvents } from 'src/Shared'

‎src/components/app/details/appDetails/DeployedCommitCard.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@
1717
import React, { useEffect, useState } from 'react'
1818
import Tippy from '@tippyjs/react'
1919

20-
import { getCITriggerInfo, GitProviderIcon, GitProviderType, showError } from '@devtron-labs/devtron-fe-common-lib'
20+
import {
21+
getCITriggerInfo,
22+
GitProviderIcon,
23+
GitProviderType,
24+
LoadingCard,
25+
showError,
26+
} from '@devtron-labs/devtron-fe-common-lib'
2127

2228
import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
2329
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
2430
import { DeployedCommitCardType } from './appDetails.type'
25-
import LoadingCard from './LoadingCard'
2631

2732
const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifactId }: DeployedCommitCardType) => {
2833
const [commitId, setCommitId] = useState<string>(null)

‎src/components/app/details/appDetails/DeploymentStatusCard.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ import React from 'react'
1818
import { useHistory } from 'react-router-dom'
1919
import Tippy from '@tippyjs/react'
2020

21-
import { ReactComponent as CD } from '../../../../assets/icons/ic-CD.svg'
22-
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
23-
import { ReactComponent as Rocket } from '../../../../assets/icons/ic-paper-rocket.svg'
21+
import { LoadingCard } from '@devtron-labs/devtron-fe-common-lib'
22+
23+
import { ReactComponent as CD } from '@Icons/ic-CD.svg'
24+
import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
25+
import { ReactComponent as Rocket } from '@Icons/ic-paper-rocket.svg'
26+
2427
import { DEPLOYMENT_STATUS, DEPLOYMENT_STATUS_QUERY_PARAM } from '../../../../config'
2528
import { DeploymentStatusCardType } from './appDetails.type'
26-
import LoadingCard from './LoadingCard'
2729
import { validateMomentDate } from './utils'
2830

2931
const DeploymentStatusCard = ({

‎src/components/app/details/appDetails/IssuesCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
ToastVariantType,
2727
ToastManager,
2828
ForceDeleteConfirmationModal,
29+
LoadingCard,
2930
} from '@devtron-labs/devtron-fe-common-lib'
3031
import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
3132
import { ReactComponent as ErrorIcon } from '../../../../assets/icons/ic-warning.svg'
@@ -36,7 +37,6 @@ import ClusterNotReachableDialog from '../../../common/ClusterNotReachableDialog
3637
import { AppType } from '../../../v2/appDetails/appDetails.type'
3738
import { AppDetailsErrorType } from '../../../../config'
3839
import IndexStore from '../../../v2/appDetails/index.store'
39-
import LoadingCard from './LoadingCard'
4040

4141
const IssuesCard = ({ cardLoading, setErrorsList, toggleIssuesModal, setDetailed }: IssuesCardType) => {
4242
const [forceDeleteDialog, showForceDeleteDialog] = useState(false)

‎src/components/app/details/appDetails/LastUpdatedCard.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@
1717
import React from 'react'
1818
import { useHistory, useRouteMatch } from 'react-router-dom'
1919

20+
import { LoadingCard } from '@devtron-labs/devtron-fe-common-lib'
21+
2022
import { ReactComponent as Timer } from '../../../../assets/icons/ic-clock-counterclockwise.svg'
2123
import { URLS } from '../../../../config'
2224
import { LastUpdatedCardType } from './appDetails.type'
23-
import LoadingCard from './LoadingCard'
2425
import { validateMomentDate } from './utils'
2526

2627
const LastUpdatedCard = ({ deploymentTriggerTime, triggeredBy, cardLoading }: LastUpdatedCardType) => {

‎src/components/app/details/appDetails/LoadingCard.tsx

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
getCompiledSecurityThreats,
2424
getSecurityScanStatus,
2525
getTotalSeverities,
26+
LoadingCard,
2627
SecurityModal,
2728
SeveritiesDTO,
2829
} from '@devtron-labs/devtron-fe-common-lib'
@@ -33,7 +34,6 @@ import { ReactComponent as Secure } from '../../../../assets/icons/ic-secure.svg
3334
import { importComponentFromFELibrary } from '../../../common'
3435
import { SecurityVulnerabilityCardType } from './appDetails.type'
3536
import { useGetAppSecurityDetails } from './AppSecurity'
36-
import LoadingCard from './LoadingCard'
3737

3838
const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
3939

‎src/components/app/details/appDetails/SourceInfo.tsx

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { useMemo, useState } from 'react'
18-
import { Link, useHistory, useParams } from 'react-router-dom'
18+
import { Link, useParams } from 'react-router-dom'
1919
import ReactGA from 'react-ga4'
2020
import moment from 'moment'
2121
import {
@@ -33,6 +33,7 @@ import {
3333
showError,
3434
Tooltip,
3535
URLS as CommonURLS,
36+
LoadingCard,
3637
} from '@devtron-labs/devtron-fe-common-lib'
3738
import { ReactComponent as ICCamera } from '@Icons/ic-camera.svg'
3839
import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '../../../../config'
@@ -45,7 +46,6 @@ import DeployedCommitCard from './DeployedCommitCard'
4546
import IssuesCard from './IssuesCard'
4647
import SecurityVulnerabilityCard from './SecurityVulnerabilityCard'
4748
import AppStatusCard from './AppStatusCard'
48-
import LoadingCard from './LoadingCard'
4949
import AppDetailsCDButton from './AppDetailsCDButton'
5050
import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
5151
import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
@@ -61,6 +61,7 @@ const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindo
6161
const ConfigSyncStatusButton = importComponentFromFELibrary('ConfigSyncStatusButton', null, 'function')
6262
const SwapTraffic = importComponentFromFELibrary('SwapTraffic', null, 'function')
6363
const getHibernationPatchConfig = importComponentFromFELibrary('getHibernationPatchConfig', null, 'function')
64+
const DeploymentStrategyCard = importComponentFromFELibrary('DeploymentStrategyCard', null, 'function')
6465

6566
export const SourceInfo = ({
6667
appDetails,
@@ -160,9 +161,33 @@ export const SourceInfo = ({
160161
}
161162

162163
const onClickSliderVerticalButton = () => {
163-
ReactGA.event(isAppView ? DA_APP_DETAILS_GA_EVENTS.GoToEnvironmentConfiguration: AG_APP_DETAILS_GA_EVENTS.GoToEnvironmentConfiguration)
164+
ReactGA.event(
165+
isAppView
166+
? DA_APP_DETAILS_GA_EVENTS.GoToEnvironmentConfiguration
167+
: AG_APP_DETAILS_GA_EVENTS.GoToEnvironmentConfiguration,
168+
)
164169
}
165170

171+
const renderAppDetailsCDButton = (isForRollback?: boolean) => (
172+
<AppDetailsCDButton
173+
appId={appDetails.appId}
174+
environmentId={appDetails.environmentId}
175+
environmentName={appDetails.environmentName}
176+
isVirtualEnvironment={appDetails.isVirtualEnvironment}
177+
deploymentAppType={appDetails.deploymentAppType}
178+
loadingDetails={loadingDetails}
179+
cdModal={{
180+
cdPipelineId: appDetails.cdPipelineId,
181+
ciPipelineId: appDetails.ciPipelineId,
182+
parentEnvironmentName: appDetails.parentEnvironmentName,
183+
deploymentUserActionState: deploymentUserActionState,
184+
triggerType: appDetails.triggerType,
185+
}}
186+
isAppView={isAppView}
187+
isForRollback={isForRollback}
188+
/>
189+
)
190+
166191
const renderDevtronAppsEnvironmentSelector = () => {
167192
// If moving to a component then move getIsApprovalConfigured with it as well with memoization.
168193
const isApprovalConfigured = appDetails?.isApprovalPolicyApplicable ?? false
@@ -323,22 +348,7 @@ export const SourceInfo = ({
323348
pcoId={appDetails.pcoId}
324349
/>
325350
)}
326-
<AppDetailsCDButton
327-
appId={appDetails.appId}
328-
environmentId={appDetails.environmentId}
329-
environmentName={appDetails.environmentName}
330-
isVirtualEnvironment={appDetails.isVirtualEnvironment}
331-
deploymentAppType={appDetails.deploymentAppType}
332-
loadingDetails={loadingDetails}
333-
cdModal={{
334-
cdPipelineId: appDetails.cdPipelineId,
335-
ciPipelineId: appDetails.ciPipelineId,
336-
parentEnvironmentName: appDetails.parentEnvironmentName,
337-
deploymentUserActionState: deploymentUserActionState,
338-
triggerType: appDetails.triggerType,
339-
}}
340-
isAppView={isAppView}
341-
/>
351+
{renderAppDetailsCDButton(false)}
342352
</div>
343353
)}
344354
</>
@@ -428,6 +438,15 @@ export const SourceInfo = ({
428438
filteredEnvIds={filteredEnvIds}
429439
/>
430440
)}
441+
{DeploymentStrategyCard && (
442+
<DeploymentStrategyCard
443+
appId={appDetails.appId}
444+
envId={appDetails.environmentId}
445+
appName={appDetails.appName}
446+
envName={appDetails.environmentName}
447+
renderRollbackButton={() => renderAppDetailsCDButton(true)}
448+
/>
449+
)}
431450
{!appDetails?.deploymentAppDeleteRequest &&
432451
!appMigratedFromExternalSourceAndIsNotTriggered && (
433452
<SecurityVulnerabilityCard

‎src/components/app/details/appDetails/appDetails.type.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -266,10 +266,6 @@ export interface DeployedCommitCardType {
266266
ciArtifactId: number
267267
}
268268

269-
export interface LoadingCardType {
270-
wider?: boolean
271-
}
272-
273269
export type ErrorItem = {
274270
error: string
275271
message: string

0 commit comments

Comments
 (0)