FIX: stop sorting options in date-pickers on the bookmark modal and the topic-timers modal (#15750)

app/assets/javascripts/discourse/app/components/bookmark.js

@@ -5,7 +5,10 @@ import I18n from "I18n";
 import KeyboardShortcuts from "discourse/lib/keyboard-shortcuts";
 import ItsATrap from "@discourse/itsatrap";
 import { Promise } from "rsvp";
-import { TIME_SHORTCUT_TYPES } from "discourse/lib/time-shortcut";
+import {
+  TIME_SHORTCUT_TYPES,
+  defaultTimeShortcuts,
+} from "discourse/lib/time-shortcut";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import bootbox from "bootbox";
@@ -291,12 +294,12 @@ export default Component.extend({
     });
   },
 
-  @discourseComputed()
+  @discourseComputed("userTimezone")
-  customTimeShortcutOptions() {
+  timeOptions(userTimezone) {
-    let customOptions = [];
+    const options = defaultTimeShortcuts(userTimezone);
 
     if (this.showPostLocalDate) {
-      customOptions.push({
+      options.push({
         icon: "globe-americas",
         id: TIME_SHORTCUT_TYPES.POST_LOCAL_DATE,
         label: "time_shortcut.post_local_date",
@@ -306,7 +309,7 @@ export default Component.extend({
       });
     }
 
-    return customOptions;
+    return options;
   },
 
   @discourseComputed("existingBookmarkHasReminder")

app/assets/javascripts/discourse/app/components/edit-topic-timer-form.js

@@ -14,9 +14,11 @@ import I18n from "I18n";
 import { action } from "@ember/object";
 import Component from "@ember/component";
 import { isEmpty } from "@ember/utils";
-import { MOMENT_MONDAY, now, startOfDay } from "discourse/lib/time-utils";
 import KeyboardShortcuts from "discourse/lib/keyboard-shortcuts";
-import { TIME_SHORTCUT_TYPES } from "discourse/lib/time-shortcut";
+import {
+  TIME_SHORTCUT_TYPES,
+  timeShortcuts,
+} from "discourse/lib/time-shortcut";
 import ItsATrap from "@discourse/itsatrap";
 
 export default Component.extend({
@@ -81,23 +83,19 @@ export default Component.extend({
   },
 
   @discourseComputed()
-  customTimeShortcutOptions() {
+  timeOptions() {
     const timezone = this.currentUser.resolvedTimezone(this.currentUser);
+    const shortcuts = timeShortcuts(timezone);
+
     return [
-      {
+      shortcuts.laterToday(),
-        icon: "far-clock",
+      shortcuts.tomorrow(),
-        id: "two_weeks",
+      shortcuts.laterThisWeek(),
-        label: "time_shortcut.two_weeks",
+      shortcuts.thisWeekend(),
-        time: startOfDay(now(timezone).add(2, "weeks").day(MOMENT_MONDAY)),
+      shortcuts.monday(),
-        timeFormatKey: "dates.long_no_year",
+      shortcuts.twoWeeks(),
-      },
+      shortcuts.nextMonth(),
-      {
+      shortcuts.sixMonths(),
-        icon: "far-calendar-plus",
-        id: "six_months",
-        label: "time_shortcut.six_months",
-        time: startOfDay(now(timezone).add(6, "months").startOf("month")),
-        timeFormatKey: "dates.long_no_year",
-      },
     ];
   },
 

app/assets/javascripts/discourse/app/components/time-shortcut-picker.js

@@ -9,7 +9,7 @@ import {
 } from "discourse/lib/time-utils";
 import {
   TIME_SHORTCUT_TYPES,
-  defaultShortcutOptions,
+  defaultTimeShortcuts,
   specialShortcutOptions,
 } from "discourse/lib/time-shortcut";
 import discourseComputed, {
@@ -169,30 +169,23 @@ export default Component.extend({
   },
 
   @discourseComputed(
+    "timeShortcuts",
     "hiddenOptions",
-    "customOptions",
     "customLabels",
     "userTimezone"
   )
-  options(hiddenOptions, customOptions, customLabels, userTimezone) {
+  options(timeShortcuts, hiddenOptions, customLabels, userTimezone) {
     this._loadLastUsedCustomDatetime();
 
-    let options = defaultShortcutOptions(userTimezone);
+    let options;
+    if (timeShortcuts && timeShortcuts.length) {
+      options = timeShortcuts;
+    } else {
+      options = defaultTimeShortcuts(userTimezone);
+    }
     this._hideDynamicOptions(options);
-    options = options.concat(customOptions);
-
-    options.sort((a, b) => {
-      if (a.time < b.time) {
-        return -1;
-      }
-      if (a.time > b.time) {
-        return 1;
-      }
-      return 0;
-    });
 
     let specialOptions = specialShortcutOptions();
-
     if (this.lastCustomDate && this.lastCustomTime) {
       let lastCustom = specialOptions.findBy(
         "id",
@@ -202,7 +195,6 @@ export default Component.extend({
       lastCustom.timeFormatKey = "dates.long_no_year";
       lastCustom.hidden = false;
     }
-
     options = options.concat(specialOptions);
 
     if (hiddenOptions.length > 0) {

app/assets/javascripts/discourse/app/lib/time-shortcut.js

@@ -6,8 +6,10 @@ import {
   nextBusinessWeekStart,
   nextMonth,
   now,
+  sixMonths,
   thisWeekend,
   tomorrow,
+  twoWeeks,
 } from "discourse/lib/time-utils";
 
 export const TIME_SHORTCUT_TYPES = {
@@ -24,54 +26,15 @@ export const TIME_SHORTCUT_TYPES = {
   POST_LOCAL_DATE: "post_local_date",
 };
 
-export function defaultShortcutOptions(timezone) {
+export function defaultTimeShortcuts(timezone) {
+  const shortcuts = timeShortcuts(timezone);
   return [
-    {
+    shortcuts.laterToday(),
-      icon: "angle-right",
+    shortcuts.tomorrow(),
-      id: TIME_SHORTCUT_TYPES.LATER_TODAY,
+    shortcuts.laterThisWeek(),
-      label: "time_shortcut.later_today",
+    shortcuts.thisWeekend(),
-      time: laterToday(timezone),
+    shortcuts.monday(),
-      timeFormatKey: "dates.time",
+    shortcuts.nextMonth(),
-    },
-    {
-      icon: "far-sun",
-      id: TIME_SHORTCUT_TYPES.TOMORROW,
-      label: "time_shortcut.tomorrow",
-      time: tomorrow(timezone),
-      timeFormatKey: "dates.time_short_day",
-    },
-    {
-      icon: "angle-double-right",
-      id: TIME_SHORTCUT_TYPES.LATER_THIS_WEEK,
-      label: "time_shortcut.later_this_week",
-      time: laterThisWeek(timezone),
-      timeFormatKey: "dates.time_short_day",
-    },
-    {
-      icon: "bed",
-      id: TIME_SHORTCUT_TYPES.THIS_WEEKEND,
-      label: "time_shortcut.this_weekend",
-      time: thisWeekend(timezone),
-      timeFormatKey: "dates.time_short_day",
-    },
-    {
-      icon: "briefcase",
-      id: TIME_SHORTCUT_TYPES.START_OF_NEXT_BUSINESS_WEEK,
-      label:
-        now(timezone).day() === MOMENT_MONDAY ||
-        now(timezone).day() === MOMENT_SUNDAY
-          ? "time_shortcut.start_of_next_business_week_alt"
-          : "time_shortcut.start_of_next_business_week",
-      time: nextBusinessWeekStart(timezone),
-      timeFormatKey: "dates.long_no_year",
-    },
-    {
-      icon: "far-calendar-plus",
-      id: TIME_SHORTCUT_TYPES.NEXT_MONTH,
-      label: "time_shortcut.next_month",
-      time: nextMonth(timezone),
-      timeFormatKey: "dates.long_no_year",
-    },
   ];
 }
 
@@ -99,3 +62,84 @@ export function specialShortcutOptions() {
     },
   ];
 }
+
+export function timeShortcuts(timezone) {
+  return {
+    laterToday() {
+      return {
+        icon: "angle-right",
+        id: TIME_SHORTCUT_TYPES.LATER_TODAY,
+        label: "time_shortcut.later_today",
+        time: laterToday(timezone),
+        timeFormatKey: "dates.time",
+      };
+    },
+    tomorrow() {
+      return {
+        icon: "far-sun",
+        id: TIME_SHORTCUT_TYPES.TOMORROW,
+        label: "time_shortcut.tomorrow",
+        time: tomorrow(timezone),
+        timeFormatKey: "dates.time_short_day",
+      };
+    },
+    laterThisWeek() {
+      return {
+        icon: "angle-double-right",
+        id: TIME_SHORTCUT_TYPES.LATER_THIS_WEEK,
+        label: "time_shortcut.later_this_week",
+        time: laterThisWeek(timezone),
+        timeFormatKey: "dates.time_short_day",
+      };
+    },
+    thisWeekend() {
+      return {
+        icon: "bed",
+        id: TIME_SHORTCUT_TYPES.THIS_WEEKEND,
+        label: "time_shortcut.this_weekend",
+        time: thisWeekend(timezone),
+        timeFormatKey: "dates.time_short_day",
+      };
+    },
+    monday() {
+      return {
+        icon: "briefcase",
+        id: TIME_SHORTCUT_TYPES.START_OF_NEXT_BUSINESS_WEEK,
+        label:
+          now(timezone).day() === MOMENT_MONDAY ||
+          now(timezone).day() === MOMENT_SUNDAY
+            ? "time_shortcut.start_of_next_business_week_alt"
+            : "time_shortcut.start_of_next_business_week",
+        time: nextBusinessWeekStart(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    nextMonth() {
+      return {
+        icon: "far-calendar-plus",
+        id: TIME_SHORTCUT_TYPES.NEXT_MONTH,
+        label: "time_shortcut.next_month",
+        time: nextMonth(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    twoWeeks() {
+      return {
+        icon: "far-clock",
+        id: "two_weeks",
+        label: "time_shortcut.two_weeks",
+        time: twoWeeks(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    sixMonths() {
+      return {
+        icon: "far-calendar-plus",
+        id: "six_months",
+        label: "time_shortcut.six_months",
+        time: sixMonths(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+  };
+}

app/assets/javascripts/discourse/app/lib/time-utils.js

@@ -43,6 +43,14 @@ export function nextMonth(timezone) {
   return startOfDay(now(timezone).add(1, "month").startOf("month"));
 }
 
+export function twoWeeks(timezone) {
+  return startOfDay(now(timezone).add(2, "weeks").day(MOMENT_MONDAY));
+}
+
+export function sixMonths(timezone) {
+  return startOfDay(now(timezone).add(6, "months").startOf("month"));
+}
+
 export function nextBusinessWeekStart(timezone) {
   return startOfDay(now(timezone).add(7, "days")).day(MOMENT_MONDAY);
 }

app/assets/javascripts/discourse/app/templates/components/bookmark.hbs

@@ -38,9 +38,9 @@
 
     {{#if userHasTimezoneSet}}
       {{time-shortcut-picker
+        timeShortcuts=timeOptions
         prefilledDatetime=prefilledDatetime
         onTimeSelected=(action "onTimeSelected")
-        customOptions=customTimeShortcutOptions
         hiddenOptions=hiddenTimeShortcutOptions
         customLabels=customTimeShortcutLabels
         _itsatrap=_itsatrap

app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs

@@ -20,9 +20,9 @@
   {{#if showFutureDateInput}}
     <label class="control-label">{{i18n "topic.topic_status_update.when"}}</label>
     {{time-shortcut-picker
+      timeShortcuts=timeOptions
       prefilledDatetime=topicTimer.execute_at
       onTimeSelected=onTimeSelected
-      customOptions=customTimeShortcutOptions
       hiddenOptions=hiddenTimeShortcutOptions
       _itsatrap=_itsatrap
     }}