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:
parent
8258ffcabe
commit
0a9d6437c5
@ -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');
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user