Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(3253): allow time range picker to render based on correct input selection #1304

Merged
merged 10 commits into from
Dec 20, 2024

Conversation

VonnyJap
Copy link
Member

@VonnyJap VonnyJap commented Dec 16, 2024

Context

Currently, when users select a time range in the job template view, the dropdown always defaults to "1 yr" instead of retaining the selected time range. This behavior results in a poor user experience, as the time range is not properly applied or displayed according to user input.

Objective

The goal of this PR is to fix the time range selection behavior in the job template view. The time range dropdown should accurately display and apply the user's selected value, ensuring that the selection is preserved and reflected correctly in the UI.

Screen.Recording.2024-12-19.at.2.13.52.PM.mov

References

screwdriver-cd/screwdriver#3253

License

I confirm that this contribution is made under the terms of the license found in the root directory of this repository's source tree and that I have the authority necessary to make this contribution on behalf of its copyright owner.

} else {
this.onTimeRangeChange();
}
},
setCustomRange([start, end]) {
this.set('selectedRange');
this.set('selectedRange', 'none');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setCustomRange should account for a non-date range selection by not changing the selectedRange instead of setting the value to none. By doing that, closing the date picker will not force an unnecessary reload of the page.

@@ -46,13 +61,13 @@ export default Component.extend({
if (range) {
const { startTime, endTime } = timeRange(new Date(), range);

this.onTimeRangeChange(startTime, endTime);
this.onTimeRangeChange(startTime, endTime, this.selectedRange);
} else {
this.onTimeRangeChange();
}
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setTimeRange can be simplified because the template has the button group configured as radio buttons which will prevent the setTimeRange from executing unless a different radio button selection is selected.

@VonnyJap VonnyJap force-pushed the template-timepicker-fix-1 branch from 5bcd0f4 to 77f3cff Compare December 19, 2024 00:59
minghay
minghay previously approved these changes Dec 19, 2024
Copy link
Contributor

@minghay minghay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The blue outline is getting cut off a little bit. I've suggested a couple of CSS changes that will fix the outline issue and also stacks the note above the date picker

app/components/template-versions/template.hbs Outdated Show resolved Hide resolved
app/components/template-versions/styles.scss Outdated Show resolved Hide resolved
app/components/template-versions/styles.scss Outdated Show resolved Hide resolved
app/components/template-versions/styles.scss Outdated Show resolved Hide resolved
@minghay minghay merged commit d476c65 into master Dec 20, 2024
2 checks passed
@minghay minghay deleted the template-timepicker-fix-1 branch December 20, 2024 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants