Skip to content

Commit 96c8d78

Browse files
adhityamamallanadhityamamallan
authored
Design changes for Workflow History Ungrouped view (#935)
* Modify design for Workflow History Ungrouped view to make it more compact and show more events on screen * Highlight events using background colour instead of box shadow
1 parent fffb7aa commit 96c8d78

File tree

5 files changed

+104
-96
lines changed

5 files changed

+104
-96
lines changed

‎src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.styles.ts

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import { type StyleObject } from 'styletron-react';
66
import { WORKFLOW_HISTORY_UNGROUPED_GRID_TEMPLATE_COLUMNS } from '../workflow-history-ungrouped-table/workflow-history-ungrouped-table.constants';
77

88
export const styled = {
9-
CardContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
10-
padding: `${$theme.sizing.scale200} 0`,
11-
})),
129
CardHeaderContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
1310
...$theme.typography.LabelSmall,
1411
display: 'grid',
@@ -41,29 +38,41 @@ export const styled = {
4138
),
4239
};
4340

44-
export const overrides = (animateBorderOnEnter?: boolean) => ({
41+
export const overrides = (animateBackgroundOnEnter?: boolean) => ({
4542
panel: {
4643
PanelContainer: {
4744
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
4845
...$theme.borders.border100,
4946
borderRadius: $theme.borders.radius300,
50-
borderWidth: '2px',
51-
animationDuration: '2s',
52-
...(animateBorderOnEnter && {
47+
borderWidth: '0px',
48+
marginTop: $theme.sizing.scale0,
49+
marginBottom: $theme.sizing.scale0,
50+
':hover': {
51+
backgroundColor: $theme.colors.backgroundSecondary,
52+
},
53+
...(animateBackgroundOnEnter && {
54+
animationDuration: '2s',
5355
animationName: {
5456
from: {
55-
boxShadow: `0px 0px 0px 2px ${$theme.colors.primary}`,
57+
backgroundColor: $theme.colors.backgroundTertiary,
5658
},
5759
to: {
58-
boxShadow: `0px 0px 0px 0px rgba(0, 0, 0, 0)`,
60+
backgroundColor: $theme.colors.backgroundPrimary,
5961
},
6062
},
6163
}),
6264
overflow: 'hidden',
63-
marginBottom: $theme.sizing.scale300,
64-
':last-child': {
65-
marginBottom: 0,
66-
},
65+
}),
66+
},
67+
Header: {
68+
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
69+
// https://github.com/uber/baseweb/blob/main/src/accordion/styled-components.ts#L50
70+
// Since the original Panel uses longhand properties, we need to use longhand in overrides
71+
paddingTop: $theme.sizing.scale200,
72+
paddingBottom: $theme.sizing.scale200,
73+
paddingLeft: $theme.sizing.scale700,
74+
paddingRight: $theme.sizing.scale700,
75+
backgroundColor: 'inherit',
6776
}),
6877
},
6978
Content: {
@@ -74,6 +83,7 @@ export const overrides = (animateBorderOnEnter?: boolean) => ({
7483
paddingBottom: $theme.sizing.scale600,
7584
paddingLeft: $theme.sizing.scale700,
7685
paddingRight: $theme.sizing.scale700,
86+
backgroundColor: 'inherit',
7787
}),
7888
},
7989
} satisfies PanelOverrides,

‎src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.tsx

Lines changed: 78 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -26,95 +26,93 @@ export default function WorkflowHistoryUngroupedEvent({
2626
decodedPageUrlParams,
2727
isExpanded,
2828
toggleIsExpanded,
29-
animateBorderOnEnter,
29+
animateBackgroundOnEnter,
3030
onReset,
3131
}: Props) {
3232
const retries = getRetriesForHistoryEvent(eventInfo.event);
33-
const overrides = getOverrides(animateBorderOnEnter);
33+
const overrides = getOverrides(animateBackgroundOnEnter);
3434

3535
return (
36-
<styled.CardContainer>
37-
<Panel
38-
overrides={overrides.panel}
39-
title={
40-
<styled.CardHeaderContainer>
41-
<styled.CardHeaderFieldContainer>
42-
{isPendingHistoryEvent(eventInfo.event) ? (
43-
<MdHourglassTop size={16} display="block" />
44-
) : (
45-
eventInfo.id
36+
<Panel
37+
overrides={overrides.panel}
38+
title={
39+
<styled.CardHeaderContainer>
40+
<styled.CardHeaderFieldContainer>
41+
{isPendingHistoryEvent(eventInfo.event) ? (
42+
<MdHourglassTop size={16} display="block" />
43+
) : (
44+
eventInfo.id
45+
)}
46+
</styled.CardHeaderFieldContainer>
47+
<styled.CardHeaderFieldContainer>
48+
<styled.CardLabelContainer>
49+
<WorkflowHistoryGroupLabel
50+
label={eventInfo.label}
51+
shortLabel={eventInfo.shortLabel}
52+
/>
53+
{isExpanded && (
54+
<WorkflowHistoryEventLinkButton
55+
historyEventId={eventInfo.id}
56+
isUngroupedView
57+
/>
4658
)}
59+
</styled.CardLabelContainer>
60+
</styled.CardHeaderFieldContainer>
61+
<styled.CardStatusContainer>
62+
<WorkflowHistoryEventStatusBadge
63+
statusReady={true}
64+
size="small"
65+
status={eventInfo.status}
66+
/>
67+
{eventInfo.statusLabel}
68+
{retries ? (
69+
<Badge
70+
overrides={overrides.badge}
71+
content={retries === 1 ? '1 retry' : `${retries} retries`}
72+
shape="rectangle"
73+
color="primary"
74+
/>
75+
) : null}
76+
</styled.CardStatusContainer>
77+
{eventInfo.event.eventTime ? (
78+
<styled.CardHeaderFieldContainer>
79+
{formatDate(parseGrpcTimestamp(eventInfo.event.eventTime))}
4780
</styled.CardHeaderFieldContainer>
81+
) : (
82+
<div />
83+
)}
84+
{eventInfo.event.eventTime && workflowStartTime ? (
4885
<styled.CardHeaderFieldContainer>
49-
<styled.CardLabelContainer>
50-
<WorkflowHistoryGroupLabel
51-
label={eventInfo.label}
52-
shortLabel={eventInfo.shortLabel}
53-
/>
54-
{isExpanded && (
55-
<WorkflowHistoryEventLinkButton
56-
historyEventId={eventInfo.id}
57-
isUngroupedView
58-
/>
59-
)}
60-
</styled.CardLabelContainer>
86+
{getFormattedEventsDuration(
87+
parseGrpcTimestamp(workflowStartTime),
88+
parseGrpcTimestamp(eventInfo.event.eventTime)
89+
)}
6190
</styled.CardHeaderFieldContainer>
62-
<styled.CardStatusContainer>
63-
<WorkflowHistoryEventStatusBadge
64-
statusReady={true}
65-
size="small"
66-
status={eventInfo.status}
91+
) : (
92+
<div />
93+
)}
94+
{typeof onReset === 'function' ? (
95+
<styled.ResetButtonContainer>
96+
<WorkflowHistoryTimelineResetButton
97+
domain={decodedPageUrlParams.domain}
98+
cluster={decodedPageUrlParams.cluster}
99+
workflowId={decodedPageUrlParams.workflowId}
100+
runId={decodedPageUrlParams.runId}
101+
onReset={onReset}
67102
/>
68-
{eventInfo.statusLabel}
69-
{retries ? (
70-
<Badge
71-
overrides={overrides.badge}
72-
content={retries === 1 ? '1 retry' : `${retries} retries`}
73-
shape="rectangle"
74-
color="primary"
75-
/>
76-
) : null}
77-
</styled.CardStatusContainer>
78-
{eventInfo.event.eventTime ? (
79-
<styled.CardHeaderFieldContainer>
80-
{formatDate(parseGrpcTimestamp(eventInfo.event.eventTime))}
81-
</styled.CardHeaderFieldContainer>
82-
) : (
83-
<div />
84-
)}
85-
{eventInfo.event.eventTime && workflowStartTime ? (
86-
<styled.CardHeaderFieldContainer>
87-
{getFormattedEventsDuration(
88-
parseGrpcTimestamp(workflowStartTime),
89-
parseGrpcTimestamp(eventInfo.event.eventTime)
90-
)}
91-
</styled.CardHeaderFieldContainer>
92-
) : (
93-
<div />
94-
)}
95-
{typeof onReset === 'function' ? (
96-
<styled.ResetButtonContainer>
97-
<WorkflowHistoryTimelineResetButton
98-
domain={decodedPageUrlParams.domain}
99-
cluster={decodedPageUrlParams.cluster}
100-
workflowId={decodedPageUrlParams.workflowId}
101-
runId={decodedPageUrlParams.runId}
102-
onReset={onReset}
103-
/>
104-
</styled.ResetButtonContainer>
105-
) : (
106-
<div />
107-
)}
108-
</styled.CardHeaderContainer>
109-
}
110-
expanded={isExpanded}
111-
onChange={() => toggleIsExpanded()}
112-
>
113-
<WorkflowHistoryEventDetails
114-
event={eventInfo.event}
115-
decodedPageUrlParams={decodedPageUrlParams}
116-
/>
117-
</Panel>
118-
</styled.CardContainer>
103+
</styled.ResetButtonContainer>
104+
) : (
105+
<div />
106+
)}
107+
</styled.CardHeaderContainer>
108+
}
109+
expanded={isExpanded}
110+
onChange={() => toggleIsExpanded()}
111+
>
112+
<WorkflowHistoryEventDetails
113+
event={eventInfo.event}
114+
decodedPageUrlParams={decodedPageUrlParams}
115+
/>
116+
</Panel>
119117
);
120118
}

‎src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,6 @@ export type Props = {
3232
toggleIsExpanded: () => void;
3333

3434
// UI behavior
35-
animateBorderOnEnter?: boolean;
35+
animateBackgroundOnEnter?: boolean;
3636
onReset?: () => void;
3737
};

‎src/views/workflow-history/workflow-history-ungrouped-table/workflow-history-ungrouped-table.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const styled = {
88
paddingLeft: `calc(2px + ${$theme.sizing.scale700})`,
99
// accordion panel expand icon size + accordion panel right padding + border thickness
1010
paddingRight: `calc(${$theme.sizing.scale800} + ${$theme.sizing.scale700} + 2px)`,
11-
paddingBottom: $theme.sizing.scale0,
11+
paddingBottom: $theme.sizing.scale200,
1212
...$theme.typography.LabelXSmall,
1313
color: $theme.colors.contentSecondary,
1414
display: 'grid',

‎src/views/workflow-history/workflow-history-ungrouped-table/workflow-history-ungrouped-table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function WorkflowHistoryUngroupedTable({
4343
decodedPageUrlParams={decodedPageUrlParams}
4444
isExpanded={getIsEventExpanded(eventInfo.id)}
4545
toggleIsExpanded={() => toggleIsEventExpanded(eventInfo.id)}
46-
animateBorderOnEnter={eventInfo.id === selectedEventId}
46+
animateBackgroundOnEnter={eventInfo.id === selectedEventId}
4747
{...(eventInfo.canReset
4848
? { onReset: () => onResetToEventId(eventInfo.id) }
4949
: {})}

0 commit comments

Comments
 (0)