FIX: Sort topic timer and bookmark time options (#12270)

remove 3 month option for topic timer
move relative time input inside the custom
date and time shortcut
make sure special options are always at the bottom

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

@@ -78,13 +78,6 @@ export default Component.extend({
         time: startOfDay(now().add(2, "weeks")),
         timeFormatKey: "dates.long_no_year",
       },
-      {
-        icon: "far-calendar-plus",
-        id: "three_months",
-        label: "topic.auto_update_input.three_months",
-        time: startOfDay(now().add(3, "months")),
-        timeFormatKey: "dates.long_no_year",
-      },
       {
         icon: "far-calendar-plus",
         id: "six_months",

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

@@ -7,6 +7,7 @@ import {
 import {
   TIME_SHORTCUT_TYPES,
   defaultShortcutOptions,
+  specialShortcutOptions,
 } from "discourse/lib/time-shortcut";
 import discourseComputed, {
   observes,
@@ -197,16 +198,30 @@ export default Component.extend({
       });
     }
 
-    if (hiddenOptions.length > 0) {
-      options.forEach((opt) => {
-        if (hiddenOptions.includes(opt.id)) {
-          opt.hidden = true;
-        }
-      });
-    }
+    customOptions.forEach((opt) => {
+      if (!opt.timeFormatted && opt.time) {
+        opt.timeFormatted = opt.time.format(I18n.t(opt.timeFormatKey));
+      }
+    });
+
+    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 = options.findBy("id", TIME_SHORTCUT_TYPES.LAST_CUSTOM);
+      let lastCustom = specialOptions.findBy(
+        "id",
+        TIME_SHORTCUT_TYPES.LAST_CUSTOM
+      );
       lastCustom.time = this.parsedLastCustomDatetime;
       lastCustom.timeFormatted = this.parsedLastCustomDatetime.format(
         I18n.t("dates.long_no_year")
@@ -214,17 +229,15 @@ export default Component.extend({
       lastCustom.hidden = false;
     }
 
-    customOptions.forEach((opt) => {
-      if (!opt.timeFormatted && opt.time) {
-        opt.timeFormatted = opt.time.format(I18n.t(opt.timeFormatKey));
-      }
-    });
+    options = options.concat(specialOptions);
 
-    let relativeOptionIndex = options.findIndex(
-      (opt) => opt.id === TIME_SHORTCUT_TYPES.RELATIVE
-    );
-
-    options.splice(relativeOptionIndex, 0, ...customOptions);
+    if (hiddenOptions.length > 0) {
+      options.forEach((opt) => {
+        if (hiddenOptions.includes(opt.id)) {
+          opt.hidden = true;
+        }
+      });
+    }
 
     return options;
   },

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

@@ -77,13 +77,18 @@ export function defaultShortcutOptions(timezone) {
       time: nextMonth(timezone),
       timeFormatted: nextMonth(timezone).format(I18n.t("dates.long_no_year")),
     },
+  ];
+}
+
+export function specialShortcutOptions() {
+  return [
     {
-      icon: "far-clock",
-      id: TIME_SHORTCUT_TYPES.RELATIVE,
-      label: "time_shortcut.relative",
+      icon: "undo",
+      id: TIME_SHORTCUT_TYPES.LAST_CUSTOM,
+      label: "time_shortcut.last_custom",
       time: null,
       timeFormatted: null,
-      isRelativeTimeShortcut: true,
+      hidden: true,
     },
     {
       icon: "calendar-alt",
@@ -93,14 +98,6 @@ export function defaultShortcutOptions(timezone) {
       timeFormatted: null,
       isCustomTimeShortcut: true,
     },
-    {
-      icon: "undo",
-      id: TIME_SHORTCUT_TYPES.LAST_CUSTOM,
-      label: "time_shortcut.last_custom",
-      time: null,
-      timeFormatted: null,
-      hidden: true,
-    },
     {
       icon: "ban",
       id: TIME_SHORTCUT_TYPES.NONE,

app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs

@@ -9,7 +9,7 @@
 
     {{#if option.isCustomTimeShortcut}}
       {{#if customDatetimeSelected}}
-        <div class="control-group custom-date-time-wrap">
+        <div class="control-group custom-date-time-wrap custom-input-wrap">
           <div class="tap-tile-date-input">
             {{d-icon "calendar-alt"}}
             {{date-picker-future
@@ -23,12 +23,8 @@
             {{input placeholder="--:--" id="custom-time" type="time" class="time-input" value=customTime}}
           </div>
         </div>
-      {{/if}}
-    {{/if}}
-
-    {{#if option.isRelativeTimeShortcut}}
-      {{#if relativeTimeSelected}}
-        <div class="control-group custom-date-time-wrap">
+        <div class="control-group custom-date-time-wrap custom-relative-wrap">
+          <label class="control-label">{{i18n "relative_time_picker.relative"}}</label>
           {{relative-time-picker onChange=(action "relativeTimeChanged")}}
         </div>
       {{/if}}

app/assets/stylesheets/common/components/time-shortcut-picker.scss

@@ -34,4 +34,18 @@
   .date-picker-wrapper {
     flex: 1 1 auto;
   }
+
+  &.custom-input-wrap {
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  &.custom-relative-wrap {
+    .relative-time-picker {
+      display: flex;
+      .select-kit.combo-box {
+        width: 60px;
+      }
+    }
+  }
 }

config/locales/client.en.yml

@@ -591,6 +591,7 @@ en:
       years:
         one: "year"
         other: "years"
+      relative: "Relative"
 
     time_shortcut:
       later_today: "Later today"
@@ -2460,13 +2461,13 @@ en:
         later_this_week: "Later this week"
         this_weekend: "This weekend"
         next_week: "Next week"
-        two_weeks: "Two Weeks"
+        two_weeks: "Two weeks"
         next_month: "Next month"
-        two_months: "Two Months"
-        three_months: "Three Months"
-        four_months: "Four Months"
-        six_months: "Six Months"
-        one_year: "One Year"
+        two_months: "Two months"
+        three_months: "Three months"
+        four_months: "Four months"
+        six_months: "Six months"
+        one_year: "One year"
         forever: "Forever"
         pick_date_and_time: "Pick date and time"
         set_based_on_last_post: "Close based on last post"