FIX: Handle null values in category settings relative time pickers (#20552)

As reported on Meta, the relative time pickers for configuring slow-mode and auto-close durations in category settings are initially showing a "mins" option, which then disappears after you select any other timescale.

Our `RelativeTimePicker` component wasn't equipped to handle `null` values as the initial input. This caused it to go into a code path that set the selected timescale to "mins", even if that is not an allowed option.

There are two things being done here:

1. Add support for `null` input values to `RelativeTimePicker`. This fixes the auto-close setting.
2. Allow minutes for the slow-mode setting. (The user in Meta mentioned they usually set 15-30 minutes to cool down hot topics.
This commit is contained in:
Ted Johansson 2023-03-07 11:05:13 +08:00 committed by GitHub
parent a16ea24461
commit fdcb429145
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 8 deletions

View File

@ -153,7 +153,6 @@
<RelativeTimePicker <RelativeTimePicker
@id="category-default-slow-mode" @id="category-default-slow-mode"
@durationMinutes={{this.category.defaultSlowModeMinutes}} @durationMinutes={{this.category.defaultSlowModeMinutes}}
@hiddenIntervals={{this.hiddenRelativeIntervals}}
@onChange={{action "onDefaultSlowModeDurationChange"}} @onChange={{action "onDefaultSlowModeDurationChange"}}
/> />
</div> </div>

View File

@ -14,19 +14,19 @@ export default Component.extend({
@on("init") @on("init")
cloneDuration() { cloneDuration() {
let mins = this.durationMinutes; const usesHours = Object.hasOwn(this.attrs, "durationHours");
let hours = this.durationHours; const usesMinutes = Object.hasOwn(this.attrs, "durationMinutes");
if (hours && mins) { if (usesHours && usesMinutes) {
throw new Error( throw new Error(
"relative-time needs initial duration in hours OR minutes, both are not supported" "relative-time needs initial duration in hours OR minutes, both are not supported"
); );
} }
if (hours) { if (usesHours) {
this._setInitialDurationFromHours(hours); this._setInitialDurationFromHours(this.durationHours);
} else { } else {
this._setInitialDurationFromMinutes(mins); this._setInitialDurationFromMinutes(this.durationMinutes);
} }
}, },
@ -47,7 +47,12 @@ export default Component.extend({
}, },
_setInitialDurationFromHours(hours) { _setInitialDurationFromHours(hours) {
if (hours >= 8760) { if (hours === null) {
this.setProperties({
duration: hours,
selectedInterval: "hours",
});
} else if (hours >= 8760) {
this.setProperties({ this.setProperties({
duration: this._roundedDuration(hours / 365 / 24), duration: this._roundedDuration(hours / 365 / 24),
selectedInterval: "years", selectedInterval: "years",

View File

@ -20,6 +20,14 @@ module("Integration | Component | relative-time-picker", function (hooks) {
assert.strictEqual(prefilledDuration, "5"); assert.strictEqual(prefilledDuration, "5");
}); });
test("prefills and preselects null minutes", async function (assert) {
await render(hbs`<RelativeTimePicker @durationMinutes={{null}} />`);
const prefilledDuration = query(".relative-time-duration").value;
assert.strictEqual(this.subject.header().value(), "mins");
assert.strictEqual(prefilledDuration, "");
});
test("prefills and preselects hours based on translated minutes", async function (assert) { test("prefills and preselects hours based on translated minutes", async function (assert) {
await render(hbs`<RelativeTimePicker @durationMinutes="90" />`); await render(hbs`<RelativeTimePicker @durationMinutes="90" />`);
@ -60,6 +68,14 @@ module("Integration | Component | relative-time-picker", function (hooks) {
assert.strictEqual(prefilledDuration, "5"); assert.strictEqual(prefilledDuration, "5");
}); });
test("prefills and preselects null hours", async function (assert) {
await render(hbs`<RelativeTimePicker @durationHours={{null}} />`);
const prefilledDuration = query(".relative-time-duration").value;
assert.strictEqual(this.subject.header().value(), "hours");
assert.strictEqual(prefilledDuration, "");
});
test("prefills and preselects minutes based on translated hours", async function (assert) { test("prefills and preselects minutes based on translated hours", async function (assert) {
await render(hbs`<RelativeTimePicker @durationHours="0.5" />`); await render(hbs`<RelativeTimePicker @durationHours="0.5" />`);