FIX: Various improvements to bookmark modal UI (#10225)

* Do not autofocus name input on mobile
* Improve code for formatted reminder type times to not be computed, so the modal times update correctly
* Change wording of "Next Monday" to "Monday" for all days except when today is Monday

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

@@ -1,4 +1,5 @@
 import I18n from "I18n";
+import { schedule } from "@ember/runloop";
 import { and } from "@ember/object/computed";
 import { next } from "@ember/runloop";
 import { action } from "@ember/object";
@@ -89,6 +90,12 @@ export default Controller.extend(ModalFunctionality, {
     if (this._editingExistingBookmark()) {
       this._initializeExistingBookmarkData();
     }
+
+    schedule("afterRender", () => {
+      if (this.site.isMobileDevice) {
+        document.getElementById("bookmark-name").blur();
+      }
+    });
   },
 
   /**
@@ -212,8 +219,7 @@ export default Controller.extend(ModalFunctionality, {
 
   showLastCustom: and("lastCustomReminderTime", "lastCustomReminderDate"),
 
-  @discourseComputed()
+  get showLaterToday() {
-  showLaterToday() {
     let later = this.laterToday();
     return (
       !later.isSame(this.tomorrow(), "date") &&
@@ -221,8 +227,7 @@ export default Controller.extend(ModalFunctionality, {
     );
   },
 
-  @discourseComputed()
+  get showLaterThisWeek() {
-  showLaterThisWeek() {
     return this.now().day() < MOMENT_THURSDAY;
   },
 
@@ -238,35 +243,36 @@ export default Controller.extend(ModalFunctionality, {
     return formattedReminderTime(existingReminderAt, this.userTimezone);
   },
 
-  @discourseComputed()
+  get startNextBusinessWeekLabel() {
-  startNextBusinessWeekFormatted() {
+    if (this.now().day() === MOMENT_MONDAY) {
+      return I18n.t("bookmarks.reminders.start_of_next_business_week_alt");
+    }
+    return I18n.t("bookmarks.reminders.start_of_next_business_week");
+  },
+
+  get startNextBusinessWeekFormatted() {
     return this.nextWeek()
       .day(MOMENT_MONDAY)
       .format(I18n.t("dates.long_no_year"));
   },
 
-  @discourseComputed()
+  get laterTodayFormatted() {
-  laterTodayFormatted() {
     return this.laterToday().format(I18n.t("dates.time"));
   },
 
-  @discourseComputed()
+  get tomorrowFormatted() {
-  tomorrowFormatted() {
     return this.tomorrow().format(I18n.t("dates.time_short_day"));
   },
 
-  @discourseComputed()
+  get nextWeekFormatted() {
-  nextWeekFormatted() {
     return this.nextWeek().format(I18n.t("dates.long_no_year"));
   },
 
-  @discourseComputed()
+  get laterThisWeekFormatted() {
-  laterThisWeekFormatted() {
     return this.laterThisWeek().format(I18n.t("dates.time_short_day"));
   },
 
-  @discourseComputed()
+  get nextMonthFormatted() {
-  nextMonthFormatted() {
     return this.nextMonth().format(I18n.t("dates.long_no_year"));
   },
 

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

@@ -51,7 +51,7 @@
             {{/tap-tile}}
           {{/if}}
           {{#tap-tile icon="briefcase" tileId=reminderTypes.START_OF_NEXT_BUSINESS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-            <div class="tap-tile-title">{{i18n "bookmarks.reminders.start_of_next_business_week"}}</div>
+            <div class="tap-tile-title">{{startNextBusinessWeekLabel}}</div>
             <div class="tap-tile-date">{{startNextBusinessWeekFormatted}}</div>
           {{/tap-tile}}
           {{#tap-tile icon="far-clock" tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}

config/locales/client.en.yml

@@ -327,7 +327,8 @@ en:
         tomorrow: "Tomorrow"
         next_week: "Next week"
         later_this_week: "Later this week"
-        start_of_next_business_week: "Next Monday"
+        start_of_next_business_week: "Monday"
+        start_of_next_business_week_alt: "Next Monday"
         next_month: "Next month"
         custom: "Custom date and time"
         last_custom: "Last"

test/javascripts/acceptance/bookmarks-test.js

@@ -230,6 +230,32 @@ test("Editing a bookmark", async assert => {
   assert.verifySteps(["tomorrow"]);
 });
 
+test("Opening bookmark modal on desktop should auto-focus name", async assert => {
+  mockSuccessfulBookmarkPost(assert);
+
+  await visit("/t/internationalization-localization/280");
+  await openBookmarkModal();
+
+  assert.equal($("#bookmark-name").is(":focus"), true);
+});
+
+acceptance("Bookmarking - Mobile", {
+  loggedIn: true,
+  mobileView: true,
+  afterEach() {
+    sandbox.restore();
+  }
+});
+
+test("Opening bookmark modal on mobile should not auto-focus name", async assert => {
+  mockSuccessfulBookmarkPost(assert);
+
+  await visit("/t/internationalization-localization/280");
+  await openBookmarkModal();
+
+  assert.equal($("#bookmark-name").is(":focus"), false);
+});
+
 QUnit.skip(
   "Editing a bookmark that has a Later Today reminder, and it is before 6pm today",
   async assert => {

test/javascripts/controllers/bookmark-test.js

@@ -9,7 +9,10 @@ moduleFor("controller:bookmark", {
   beforeEach() {
     logIn();
     KeyboardShortcutInitializer.initialize(Discourse.__container__);
-    BookmarkController = this.subject({ currentUser: User.current() });
+    BookmarkController = this.subject({
+      currentUser: User.current(),
+      site: { isMobileDevice: false }
+    });
     BookmarkController.onShow();
   },