Skip to content

Commit 9d36d99

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #589 from devtron-labs/fix/status-icons
fix: StatusFilterComponent - icon color override fix, CICDHistory - Sidebar - icons update
2 parents d69a06d + 542857c commit 9d36d99

File tree

11 files changed

+84
-47
lines changed

11 files changed

+84
-47
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.5",
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: 5 additions & 0 deletions
Loading

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ const NonProgressingStatus = memo(
411411

412412
const CurrentStatusIcon = memo(({ status, executionInfoCurrentStatus }: CurrentStatusIconProps): JSX.Element => {
413413
if (executionInfoCurrentStatus) {
414-
return getIconFromWorkflowStageStatusType(executionInfoCurrentStatus, 'icon-dim-20 dc__no-shrink')
414+
return getIconFromWorkflowStageStatusType(executionInfoCurrentStatus)
415415
}
416416

417417
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/Icon/Icon.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { ReactComponent as ICGoogleContainerRegistry } from '@IconsV2/ic-google-
2525
import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
2626
import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
2727
import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
28+
import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
2829
import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
2930
import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
3031
import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
@@ -39,6 +40,7 @@ import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
3940
import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
4041
import { ReactComponent as ICTimeoutTwoDash } from '@IconsV2/ic-timeout-two-dash.svg'
4142
import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg'
43+
import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
4244

4345
// eslint-disable-next-line no-restricted-imports
4446
import { IconBase } from './IconBase'
@@ -70,6 +72,7 @@ export const iconMap = {
7072
'ic-heart-green': ICHeartGreen,
7173
'ic-heart-red-animated': ICHeartRedAnimated,
7274
'ic-heart-red': ICHeartRed,
75+
'ic-help-outline': ICHelpOutline,
7376
'ic-hibernate': ICHibernate,
7477
'ic-in-progress': ICInProgress,
7578
'ic-info-outline': ICInfoOutline,
@@ -84,6 +87,7 @@ export const iconMap = {
8487
'ic-suspended': ICSuspended,
8588
'ic-timeout-two-dash': ICTimeoutTwoDash,
8689
'ic-unknown': ICUnknown,
90+
'ic-warning': ICWarning,
8791
}
8892

8993
export type IconName = keyof typeof iconMap

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ComponentSizeType } from '@Shared/constants'
22
import { deriveBorderRadiusAndBorderClassFromConfig } from '@Shared/Helpers'
33
import { InfoBlockProps } from './types'
44
import {
5+
CONTAINER_SIZE_TO_BUTTON_SIZE,
56
CONTAINER_SIZE_TO_CLASS_MAP,
67
SIZE_TO_ICON_CLASS_MAP,
78
VARIANT_TO_BG_MAP,
@@ -82,7 +83,7 @@ const InfoBlock = ({
8283
{renderContent()}
8384
</div>
8485

85-
{buttonProps && <Button {...buttonProps} />}
86+
{buttonProps && <Button {...buttonProps} size={CONTAINER_SIZE_TO_BUTTON_SIZE[size]} />}
8687
</div>
8788
)
8889
}
@@ -95,7 +96,7 @@ const InfoBlock = ({
9596
{renderIcon()}
9697
</div>
9798

98-
{buttonProps && <Button {...buttonProps} />}
99+
{buttonProps && <Button {...buttonProps} size={CONTAINER_SIZE_TO_BUTTON_SIZE[size]} />}
99100
</div>
100101
)
101102
}

0 commit comments

Comments
 (0)