Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00
Code Issues Projects Releases Wiki Activity

Place schedule information first and change color

Browse Source
This commit is contained in:
Thomas Heartman 2025-07-28 14:14:40 +02:00
parent 8258ffcabe
commit 6bb1982ee7
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx
View File

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

35
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx
View File

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