1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00

Place schedule information first and change color of schedule info (#10419)

As per UX's requests, this updates the placement and styling of the
schedule information for scheduled change requests. Instead of being
below the "stage entered time" and in "secondary" color, we place it
above that timestamp and in the same color as the stage name.

This change is not behind a flag, so the color change will go out
immediately upon release.

Before:

<img width="244" height="376" alt="image"
src="https://github.com/user-attachments/assets/2c5f380d-8d05-4078-93cc-d451eb9fdabe"
/>

After:
<img width="201" height="333" alt="image"
src="https://github.com/user-attachments/assets/d26c2c6f-5fc9-4db2-b52e-ff26e6f03a61"
/>

Same for failed/suspended. Before:
<img width="280" height="378" alt="image"
src="https://github.com/user-attachments/assets/71c7a201-dfd7-47f3-a45b-c33a47be1e3c"
/>

After:

<img width="258" height="369" alt="image"
src="https://github.com/user-attachments/assets/9a3ab53f-bda1-4ce5-a127-bceaa3436fef"
/>
This commit is contained in:
Thomas Heartman 2025-07-28 14:45:06 +02:00 committed by GitHub
parent 8258ffcabe
commit 0a9d6437c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 23 deletions

View File

@ -117,12 +117,12 @@ describe('changeRequestScheduleProps', () => {
status: 'pending' as const,
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Scheduled');
expect(color).toBe('warning');
expect(reason).toBeNull();
render(subtitle);
render(timeInfo);
screen.getByText('for');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');
@ -138,12 +138,12 @@ describe('changeRequestScheduleProps', () => {
failureReason: 'failure reason',
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Schedule failed');
expect(color).toBe('error');
expect(reason).toBeTruthy();
render(subtitle);
render(timeInfo);
screen.getByText('at');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');
@ -158,12 +158,12 @@ describe('changeRequestScheduleProps', () => {
reason: 'reason',
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Schedule suspended');
expect(color).toBe('grey');
expect(reason).toBeTruthy();
render(subtitle);
render(timeInfo);
screen.getByText('was');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');

View File

@ -48,6 +48,7 @@ const StyledSubtitle = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
columnGap: '1ch',
}));
const StyledTimeline = styled(Timeline)(() => ({
@ -117,7 +118,12 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
{data.map((title, index) => {
const timestampComponent =
index <= activeIndex && timestamps?.[title] ? (
<Time dateTime={timestamps?.[title]} />
<Typography
component='span'
color='textSecondary'
>
<Time dateTime={timestamps?.[title]} />
</Typography>
) : undefined;
if (schedule && title === 'Scheduled') {
@ -165,7 +171,7 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
);
};
const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
const Time = ({ dateTime, ...props }: { dateTime: string }) => {
const { locationSettings } = useLocationSettings();
const displayTime = formatDateYMDHM(
new Date(dateTime || ''),
@ -176,10 +182,7 @@ const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
{displayTime}
</time>
);
})(({ theme }) => ({
color: theme.palette.text.secondary,
fontSize: theme.typography.body2.fontSize,
}));
};
const TimelineItem = ({
color,
@ -209,17 +212,17 @@ const TimelineItem = ({
};
export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
const Subtitle = ({ prefix }: { prefix: string }) => (
<>
const TimeInfo = ({ prefix }: { prefix: string }) => (
<Typography component='span'>
{prefix} <Time dateTime={schedule.scheduledAt} />
</>
</Typography>
);
switch (schedule.status) {
case 'suspended':
return {
title: 'Schedule suspended',
subtitle: <Subtitle prefix='was' />,
timeInfo: <TimeInfo prefix='was' />,
color: 'grey' as const,
reason: (
<HtmlTooltip title={schedule.reason} arrow>
@ -230,7 +233,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
case 'failed':
return {
title: 'Schedule failed',
subtitle: <Subtitle prefix='at' />,
timeInfo: <TimeInfo prefix='at' />,
color: 'error' as const,
reason: (
<HtmlTooltip
@ -246,7 +249,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
default:
return {
title: 'Scheduled',
subtitle: <Subtitle prefix='for' />,
timeInfo: <TimeInfo prefix='for' />,
color: 'warning' as const,
reason: null,
};
@ -260,7 +263,7 @@ const TimelineScheduleItem = ({
schedule: ChangeRequestSchedule;
timestamp: ReactNode;
}) => {
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
return (
<MuiTimelineItem key={title}>
@ -270,13 +273,11 @@ const TimelineScheduleItem = ({
</TimelineSeparator>
<StyledTimelineContent>
{title}
{timestamp}
<StyledSubtitle>
<Typography color={'text.secondary'} sx={{ mr: 1 }}>
({subtitle})
</Typography>
{timeInfo}
{reason}
</StyledSubtitle>
{timestamp}
</StyledTimelineContent>
</MuiTimelineItem>
);