Skip to content

Commit cb4948a

Browse files
eshankvaisheshankvaish
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into fix/theming-v3
2 parents 0a904fd + 9d36d99 commit cb4948a

21 files changed

+226
-150
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.7.4",
3+
"version": "1.7.6",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/IconV2/ic-help-outline.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-warning.svg

Lines changed: 4 additions & 5 deletions
Loading

‎src/Shared/Components/BulkOperations/BulkOperations.component.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,6 @@ const BulkOperations = ({
188188
<ConfirmationModal
189189
{...confirmationModalConfig}
190190
handleClose={handleModalClose}
191-
showConfirmationModal
192191
buttonConfig={{
193192
primaryButtonConfig: {
194193
...confirmationModalConfig.buttonConfig.primaryButtonConfig,

‎src/Shared/Components/CICDHistory/StatusFilterButtonComponent.scss

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,48 @@
1414
* limitations under the License.
1515
*/
1616

17-
.gui-yaml-switch.status-filter-button {
17+
.status-filter-button {
1818
&.radio-group {
19-
.radio__item-label {
20-
padding: 2px 8px;
21-
display: flex;
22-
align-items: center;
23-
gap: 6px;
19+
padding: 0;
20+
height: 24px;
21+
overflow: hidden;
22+
border-radius: 4px;
23+
24+
input + .radio__item-label {
25+
border-radius: 0;
26+
border: 1px solid var(--N200);
27+
}
28+
29+
input[type='checkbox']:checked + .radio__item-label {
30+
border-radius: 0;
31+
background-color: var(--N100);
32+
color: var(--N900);
2433
}
2534

2635
.radio {
27-
svg path {
28-
stroke: unset !important;
36+
color: var(--N500);
37+
38+
&:hover:not(.disabled) {
39+
color: var(--N900);
40+
}
41+
42+
.radio__item-label {
43+
border-right: unset;
44+
padding: 2px 8px;
45+
display: flex;
46+
align-items: center;
47+
gap: 6px;
48+
}
49+
50+
&:first-child input + .radio__item-label {
51+
border-top-left-radius: 4px !important;
52+
border-bottom-left-radius: 4px !important;
53+
}
54+
55+
&:last-child input + .radio__item-label {
56+
border-top-right-radius: 4px !important;
57+
border-bottom-right-radius: 4px !important;
58+
border: 1px solid var(--N200);
2959
}
3060
}
3161
}

‎src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const StatusFilterButtonComponent = ({
7373
return (
7474
<div className="flexbox">
7575
<RadioGroup
76-
className={`gui-yaml-switch status-filter-button ${showOverflowFilters ? 'with-menu-button' : ''}`}
76+
className={`status-filter-button ${showOverflowFilters ? 'with-menu-button' : ''}`}
7777
name="status-filter-button"
7878
initialTab={selectedTab}
7979
disabled={false}

‎src/Shared/Components/CICDHistory/TriggerDetails.tsx

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -182,55 +182,59 @@ const ProgressingStatus = memo(({ stage, type, label = 'In progress' }: Progress
182182
</>
183183
)}
184184
</div>
185-
<ConfirmationModal
186-
variant={ConfirmationModalVariantType.warning}
187-
title={type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'}
188-
subtitle={
189-
type === HistoryComponentType.CD
190-
? 'Are you sure you want to abort this stage?'
191-
: 'Are you sure you want to abort this build?'
192-
}
193-
buttonConfig={{
194-
secondaryButtonConfig: {
195-
disabled: aborting,
196-
onClick: toggleAbortConfiguration,
197-
text: 'Cancel',
198-
},
199-
primaryButtonConfig: {
200-
isLoading: aborting,
201-
onClick: abortRunning,
202-
text: 'Yes, Abort',
203-
},
204-
}}
205-
showConfirmationModal={abortConfirmation}
206-
handleClose={toggleAbortConfiguration}
207-
/>
208-
<ConfirmationModal
209-
variant={ConfirmationModalVariantType.warning}
210-
title="Could not abort build!"
211-
subtitle={`Error: ${abortError.message}`}
212-
buttonConfig={{
213-
secondaryButtonConfig: {
214-
disabled: aborting,
215-
onClick: closeForceAbortModal,
216-
text: 'Cancel',
217-
},
218-
primaryButtonConfig: {
219-
isLoading: aborting,
220-
onClick: abortRunning,
221-
text: 'Force Abort',
222-
},
223-
}}
224-
showConfirmationModal={abortError.status}
225-
handleClose={closeForceAbortModal}
226-
>
227-
<div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
228-
<span>Please try to force abort</span>
229-
</div>
230-
<div className="pt-4 fw-4 cn-7 lh-1-54">
231-
<span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
232-
</div>
233-
</ConfirmationModal>
185+
{abortConfirmation && (
186+
<ConfirmationModal
187+
variant={ConfirmationModalVariantType.warning}
188+
title={
189+
type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'
190+
}
191+
subtitle={
192+
type === HistoryComponentType.CD
193+
? 'Are you sure you want to abort this stage?'
194+
: 'Are you sure you want to abort this build?'
195+
}
196+
buttonConfig={{
197+
secondaryButtonConfig: {
198+
disabled: aborting,
199+
onClick: toggleAbortConfiguration,
200+
text: 'Cancel',
201+
},
202+
primaryButtonConfig: {
203+
isLoading: aborting,
204+
onClick: abortRunning,
205+
text: 'Yes, Abort',
206+
},
207+
}}
208+
handleClose={toggleAbortConfiguration}
209+
/>
210+
)}
211+
{abortError.status && (
212+
<ConfirmationModal
213+
variant={ConfirmationModalVariantType.warning}
214+
title="Could not abort build!"
215+
subtitle={`Error: ${abortError.message}`}
216+
buttonConfig={{
217+
secondaryButtonConfig: {
218+
disabled: aborting,
219+
onClick: closeForceAbortModal,
220+
text: 'Cancel',
221+
},
222+
primaryButtonConfig: {
223+
isLoading: aborting,
224+
onClick: abortRunning,
225+
text: 'Force Abort',
226+
},
227+
}}
228+
handleClose={closeForceAbortModal}
229+
>
230+
<div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
231+
<span>Please try to force abort</span>
232+
</div>
233+
<div className="pt-4 fw-4 cn-7 lh-1-54">
234+
<span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
235+
</div>
236+
</ConfirmationModal>
237+
)}
234238
</>
235239
)
236240
})
@@ -407,7 +411,7 @@ const NonProgressingStatus = memo(
407411

408412
const CurrentStatusIcon = memo(({ status, executionInfoCurrentStatus }: CurrentStatusIconProps): JSX.Element => {
409413
if (executionInfoCurrentStatus) {
410-
return getIconFromWorkflowStageStatusType(executionInfoCurrentStatus, 'icon-dim-20 dc__no-shrink')
414+
return getIconFromWorkflowStageStatusType(executionInfoCurrentStatus)
411415
}
412416

413417
if (PULSATING_STATUS_MAP[status]) {

‎src/Shared/Components/CICDHistory/utils.tsx

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
import { ReactElement } from 'react'
1717
import moment from 'moment'
1818
import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
19-
import { ReactComponent as ICAborted } from '@Icons/ic-aborted.svg'
2019
import { ReactComponent as Close } from '@Icons/ic-close.svg'
2120
import { ReactComponent as Check } from '@Icons/ic-check-grey.svg'
2221
import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
@@ -26,9 +25,6 @@ import { ReactComponent as Disconnect } from '@Icons/ic-disconnected.svg'
2625
import { ReactComponent as TimeOut } from '@Icons/ic-timeout-red.svg'
2726
import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
2827
import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg'
29-
import { ReactComponent as ICHelpFilled } from '@Icons/ic-help-filled.svg'
30-
import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
31-
import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
3228
import { isTimeStringAvailable } from '@Shared/Helpers'
3329
import { DATE_TIME_FORMATS } from '@Common/Constants'
3430
import {
@@ -54,7 +50,7 @@ import {
5450
NodeFilters,
5551
} from './types'
5652
import { Icon } from '../Icon'
57-
import { AppStatus, StatusType } from '../StatusComponent'
53+
import { AppStatus, DeploymentStatus, StatusType } from '../StatusComponent'
5854

5955
export const getTriggerHistoryFilterCriteria = ({
6056
appId,
@@ -224,40 +220,30 @@ export const sanitizeWorkflowExecutionStages = (
224220
}
225221
}
226222

227-
export const getIconFromWorkflowStageStatusType = (
228-
status: WorkflowStageStatusType,
229-
baseClass: string = 'icon-dim-20 dc__no-shrink',
230-
): ReactElement => {
231-
switch (status) {
232-
case WorkflowStageStatusType.TIMEOUT:
233-
return <TimeOut className={baseClass} />
234-
235-
case WorkflowStageStatusType.ABORTED:
236-
return <ICAborted className={baseClass} />
237-
238-
case WorkflowStageStatusType.FAILED:
239-
return <Icon name="ic-failure" size={20} color={null} />
240-
241-
case WorkflowStageStatusType.SUCCEEDED:
242-
return <ICSuccess className={baseClass} />
243-
244-
case WorkflowStageStatusType.NOT_STARTED:
245-
case WorkflowStageStatusType.RUNNING:
246-
return <Icon name="ic-in-progress" size={20} color={null} />
247-
248-
default:
249-
return <ICHelpFilled className={baseClass} />
223+
export const getIconFromWorkflowStageStatusType = (status: WorkflowStageStatusType): ReactElement => {
224+
const deploymentStatusMap = {
225+
[WorkflowStageStatusType.TIMEOUT]: StatusType.TIMED_OUT,
226+
[WorkflowStageStatusType.ABORTED]: StatusType.ABORTED,
227+
[WorkflowStageStatusType.FAILED]: StatusType.FAILED,
228+
[WorkflowStageStatusType.SUCCEEDED]: StatusType.SUCCEEDED,
229+
[WorkflowStageStatusType.NOT_STARTED]: StatusType.INPROGRESS,
230+
[WorkflowStageStatusType.RUNNING]: StatusType.INPROGRESS,
250231
}
232+
233+
return deploymentStatusMap[status] ? (
234+
<DeploymentStatus status={deploymentStatusMap[status]} iconSize={20} />
235+
) : (
236+
<Icon name="ic-help-outline" size={20} color="N500" />
237+
)
251238
}
252239

253240
export const getHistoryItemStatusIconFromWorkflowStages = (
254241
workflowExecutionStages: WorkflowExecutionStagesMapDTO['workflowExecutionStages'],
255242
): ReactElement => {
256243
const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
257-
const baseClass = 'icon-dim-20 dc__no-shrink'
258244

259245
if (!executionInfo) {
260-
return <ICHelpFilled className={baseClass} />
246+
return <Icon name="ic-help-outline" size={20} color="N500" />
261247
}
262248

263249
if (!executionInfo.finishedOn) {
@@ -268,10 +254,10 @@ export const getHistoryItemStatusIconFromWorkflowStages = (
268254
!FAILED_WORKFLOW_STAGE_STATUS_MAP[executionInfo.currentStatus] &&
269255
FAILED_WORKFLOW_STAGE_STATUS_MAP[executionInfo.workerDetails.status]
270256
) {
271-
return <ICWarningY5 className={baseClass} />
257+
return <Icon name="ic-warning" size={20} color={null} />
272258
}
273259

274-
return getIconFromWorkflowStageStatusType(executionInfo.workerDetails.status, baseClass)
260+
return getIconFromWorkflowStageStatusType(executionInfo.workerDetails.status)
275261
}
276262

277263
export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = DEFAULT_NAMESPACE) =>
@@ -381,6 +367,8 @@ export const getTriggerStatusIcon = (status: string) => {
381367
case TERMINAL_STATUS_MAP.INITIATING:
382368
case TERMINAL_STATUS_MAP.WAITING_TO_START:
383369
return StatusType.INPROGRESS
370+
case TERMINAL_STATUS_MAP.CANCELLED:
371+
return StatusType.ABORTED
384372
default:
385373
return status
386374
}

‎src/Shared/Components/ConfirmationModal/CannotDeleteModal.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,7 @@
1717
import ConfirmationModal from './ConfirmationModal'
1818
import { ConfirmationModalVariantType, CannotDeleteModalProps } from './types'
1919

20-
export const CannotDeleteModal = ({
21-
title,
22-
component,
23-
subtitle,
24-
closeConfirmationModal,
25-
showCannotDeleteDialogModal,
26-
}: CannotDeleteModalProps) => (
20+
export const CannotDeleteModal = ({ title, component, subtitle, closeConfirmationModal }: CannotDeleteModalProps) => (
2721
<ConfirmationModal
2822
variant={ConfirmationModalVariantType.info}
2923
title={`Cannot delete ${component} '${title}'`}
@@ -34,7 +28,6 @@ export const CannotDeleteModal = ({
3428
onClick: closeConfirmationModal,
3529
},
3630
}}
37-
showConfirmationModal={showCannotDeleteDialogModal}
3831
handleClose={closeConfirmationModal}
3932
/>
4033
)

0 commit comments

Comments
 (0)