UX: Fix chat separator alignment (#20669)

Also: work around 1px svg shift in scroll-to-bottom button

app/assets/javascripts/discourse-common/addon/helpers/popular-themes.js

@@ -2,7 +2,7 @@ export const POPULAR_THEMES = [
   {
     name: "Graceful",
     value: "https://github.com/discourse/graceful",
-    preview: "https://theme-creator.discourse.org/theme/awesomerobot/graceful",
+    preview: "https://discourse.theme-creator.io/theme/awesomerobot/graceful",
     description: "A light and graceful theme for Discourse.",
     meta_url:
       "https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040",
@@ -10,8 +10,7 @@ export const POPULAR_THEMES = [
   {
     name: "Material Design Theme",
     value: "https://github.com/discourse/material-design-stock-theme",
-    preview:
-      "https://theme-creator.discourse.org/theme/tshenry/material-design",
+    preview: "https://discourse.theme-creator.io/theme/tshenry/material-design",
     description:
       "Inspired by Material Design, this theme comes with several color palettes (incl. a dark one).",
     meta_url: "https://meta.discourse.org/t/material-design-stock-theme/47142",
@@ -19,7 +18,7 @@ export const POPULAR_THEMES = [
   {
     name: "Minima",
     value: "https://github.com/discourse/minima",
-    preview: "https://theme-creator.discourse.org/theme/awesomerobot/minima",
+    preview: "https://discourse.theme-creator.io/theme/awesomerobot/minima",
     description: "A minimal theme with reduced UI elements and focus on text.",
     meta_url:
       "https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178",
@@ -27,7 +26,7 @@ export const POPULAR_THEMES = [
   {
     name: "Sam's Simple Theme",
     value: "https://github.com/discourse/discourse-simple-theme",
-    preview: "https://theme-creator.discourse.org/theme/sam/simple",
+    preview: "https://discourse.theme-creator.io/theme/sam/simple",
     description:
       "Simplified front page design with classic colors and typography.",
     meta_url:
@@ -36,6 +35,8 @@ export const POPULAR_THEMES = [
   {
     name: "Brand Header",
     value: "https://github.com/discourse/discourse-brand-header",
+    preview:
+      "https://discourse.theme-creator.io/theme/vinothkannans/brand-header",
     description:
       "Add an extra top header with your logo, navigation links and social icons.",
     meta_url: "https://meta.discourse.org/t/brand-header-theme-component/77977",
@@ -45,7 +46,7 @@ export const POPULAR_THEMES = [
     name: "Custom Header Links",
     value: "https://github.com/discourse/discourse-custom-header-links",
     preview:
-      "https://theme-creator.discourse.org/theme/Johani/custom-header-links",
+      "https://discourse.theme-creator.io/theme/awesomerobot/custom-header-links",
     description: "Easily add custom text-based links to the header.",
     meta_url: "https://meta.discourse.org/t/custom-header-links/90588",
     component: true,
@@ -61,7 +62,7 @@ export const POPULAR_THEMES = [
     name: "Category Banners",
     value: "https://github.com/discourse/discourse-category-banners",
     preview:
-      "https://theme-creator.discourse.org/theme/awesomerobot/discourse-category-banners",
+      "https://discourse.theme-creator.io/theme/awesomerobot/discourse-category-banners",
     description:
       "Show banners on category pages using your existing category details.",
     meta_url: "https://meta.discourse.org/t/discourse-category-banners/86241",
@@ -70,7 +71,7 @@ export const POPULAR_THEMES = [
   {
     name: "Kanban Board",
     value: "https://github.com/discourse/discourse-kanban-theme",
-    preview: "https://theme-creator.discourse.org/theme/david/kanban",
+    preview: "https://discourse.theme-creator.io/theme/david/kanban",
     description: "Display and organize topics using a Kanban board interface.",
     meta_url:
       "https://meta.discourse.org/t/kanban-board-theme-component/118164",
@@ -84,10 +85,19 @@ export const POPULAR_THEMES = [
     meta_url: "https://meta.discourse.org/t/hamburger-theme-selector/61210",
     component: true,
   },
+  {
+    name: "Sidebar Theme Toggle",
+    value: "https://github.com/discourse/discourse-sidebar-theme-toggle",
+    description:
+      "Displays a theme selector in the sidebar menu’s footer provided there is more than one user-selectable theme.",
+    meta_url: "https://meta.discourse.org/t/sidebar-theme-toggle/242802",
+    component: true,
+  },
   {
     name: "Header Submenus",
     value: "https://github.com/discourse/discourse-header-submenus",
-    preview: "https://theme-creator.discourse.org/theme/Johani/header-submenus",
+    preview:
+      "https://discourse.theme-creator.io/theme/awesomerobot/header-submenus",
     description: "Lets you build a header menu with submenus (dropdowns).",
     meta_url: "https://meta.discourse.org/t/header-submenus/94584",
     component: true,
@@ -104,7 +114,7 @@ export const POPULAR_THEMES = [
   {
     name: "Easy Responsive Footer",
     value: "https://github.com/discourse/Discourse-easy-footer",
-    preview: "https://theme-creator.discourse.org/theme/Johani/easy-footer",
+    preview: "https://discourse.theme-creator.io/theme/Johani/easy-footer",
     description: "Add a fully responsive footer without writing any HTML.",
     meta_url: "https://meta.discourse.org/t/easy-responsive-footer/95818",
     component: true,

app/models/bookmark.rb

@@ -46,7 +46,8 @@ class Bookmark < ActiveRecord::Base
   validates :name, length: { maximum: 100 }
 
   def registered_bookmarkable
-    Bookmark.registered_bookmarkable_from_type(self.bookmarkable_type)
+    type = Bookmark.polymorphic_class_for(self.bookmarkable_type).name
+    Bookmark.registered_bookmarkable_from_type(type)
   end
 
   def polymorphic_columns_present

lib/tasks/docker.rake

@@ -213,7 +213,10 @@ task "docker:test" do
             @good &&= run_or_fail("bundle exec rspec #{params.join(" ")}".strip)
           end
 
-          @good &&= run_or_fail("bundle exec rspec spec/system".strip) if ENV["RUN_SYSTEM_TESTS"]
+          if ENV["RUN_SYSTEM_TESTS"]
+            @good &&= run_or_fail("bin/ember-cli --build")
+            @good &&= run_or_fail("bundle exec rspec spec/system")
+          end
         end
 
         unless ENV["SKIP_PLUGINS"]

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js

@@ -613,6 +613,7 @@ export default class ChatLivePane extends Component {
       const message = ChatMessage.create(this.args.channel, data.chat_message);
       this.args.channel.addMessages([message]);
       this.scrollToLatestMessage();
+      this.updateLastReadMessage();
     } else {
       // If we are almost at the bottom, we append the message and notice the user
       const message = ChatMessage.create(this.args.channel, data.chat_message);
@@ -895,16 +896,19 @@ export default class ChatLivePane extends Component {
   @action
   editLastMessageRequested() {
     const lastUserMessage = this.args.channel.messages.findLast(
-      (message) =>
-        message.user.id === this.currentUser.id &&
-        !message.staged &&
-        !message.error
+      (message) => message.user.id === this.currentUser.id
     );
 
-    if (lastUserMessage) {
-      this.editingMessage = lastUserMessage;
-      this._focusComposer();
+    if (!lastUserMessage) {
+      return;
     }
+
+    if (lastUserMessage.staged || lastUserMessage.error) {
+      return;
+    }
+
+    this.editingMessage = lastUserMessage;
+    this._focusComposer();
   }
 
   @action

plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs

@@ -2,30 +2,18 @@
   {{#if this.hasUploads}}
     {{html-safe @cooked}}
 
-    <Collapser
-      @header={{this.uploadsHeader}}
-      @onToggle={{@onToggleCollapse}}
-      as |collapsed|
-    >
-      {{#unless collapsed}}
-        <div class="chat-uploads">
-          {{#each @uploads as |upload|}}
-            <ChatUpload @upload={{upload}} />
-          {{/each}}
-        </div>
-      {{/unless}}
+    <Collapser @header={{this.uploadsHeader}} @onToggle={{@onToggleCollapse}}>
+      <div class="chat-uploads">
+        {{#each @uploads as |upload|}}
+          <ChatUpload @upload={{upload}} />
+        {{/each}}
+      </div>
     </Collapser>
   {{else}}
     {{#each this.cookedBodies as |cooked|}}
       {{#if cooked.needsCollapser}}
-        <Collapser
-          @header={{cooked.header}}
-          @onToggle={{@onToggleCollapse}}
-          as |collapsed|
-        >
-          {{#unless collapsed}}
-            {{cooked.body}}
-          {{/unless}}
+        <Collapser @header={{cooked.header}} @onToggle={{@onToggleCollapse}}>
+          {{cooked.body}}
         </Collapser>
       {{else}}
         {{cooked.body}}

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -384,6 +384,7 @@ $float-height: 530px;
 
       .d-icon {
         color: var(--secondary);
+        margin-left: 1px; // "fixes" the 1px svg shift
       }
     }
 

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -56,7 +56,9 @@
     }
 
     .chat-message-separator__text-container {
-      padding-top: 7px;
+      align-items: center;
+      display: flex;
+      height: 40px;
       position: sticky;
       top: -1px;
 
@@ -98,11 +100,7 @@
 
       .chat-message-separator__line {
         border-top: 1px solid var(--secondary-high);
-        left: 0;
         margin: 0 0 -1px;
-        position: relative;
-        right: 0;
-        top: -1px;
       }
     }
   }

plugins/chat/spec/requests/core_ext/bookmarks_controller_spec.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+RSpec.describe BookmarksController do
+  let(:current_user) { Fabricate(:user) }
+  let(:bookmark_message) { Fabricate(:chat_message) }
+  let(:bookmark_user) { current_user }
+
+  before do
+    register_test_bookmarkable(Chat::MessageBookmarkable)
+    sign_in(current_user)
+  end
+
+  after { DiscoursePluginRegistry.reset_register!(:bookmarkables) }
+
+  context "when bookmarking a chat message" do
+    describe "#create" do
+      it "creates the bookmark" do
+        post "/bookmarks.json",
+             params: {
+               bookmarkable_id: bookmark_message.id,
+               bookmarkable_type: "Chat::Message",
+               reminder_at: (Time.zone.now + 1.day).iso8601,
+             }
+
+        expect(response.status).to eq(200)
+        expect(Bookmark.find_by(bookmarkable: bookmark_message).user_id).to eq(current_user.id)
+      end
+    end
+
+    describe "#destroy" do
+      let!(:bookmark) { Fabricate(:bookmark, bookmarkable: bookmark_message, user: bookmark_user) }
+
+      it "destroys the bookmark" do
+        delete "/bookmarks/#{bookmark.id}.json"
+
+        expect(response.status).to eq(200)
+        expect(Bookmark.find_by(id: bookmark.id)).to eq(nil)
+      end
+    end
+  end
+end

plugins/chat/spec/system/channel_message_upload_spec.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+RSpec.describe "Channel message selection", type: :system, js: true do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:channel_1) { Fabricate(:chat_channel) }
+  fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
+
+  let(:chat) { PageObjects::Pages::Chat.new }
+  let(:channel) { PageObjects::Pages::ChatChannel.new }
+  let(:image) do
+    Fabricate(
+      :upload,
+      original_filename: "test_image.jpg",
+      width: 400,
+      height: 300,
+      extension: "jpg",
+    )
+  end
+
+  before do
+    chat_system_bootstrap
+    channel_1.add(current_user)
+    sign_in(current_user)
+    message_1.attach_uploads([image])
+  end
+
+  it "can collapse/expand an image and still have lightbox working" do
+    chat.visit_channel(channel_1)
+
+    find(".chat-message-collapser-button").click
+    expect(page).to have_css(".chat-message-collapser-body.hidden", visible: :false)
+    find(".chat-message-collapser-button").click
+    expect(page).to have_no_css(".chat-message-collapser-body.hidden")
+    find(".chat-img-upload").click
+
+    # visible false is because the upload doesn’t exist but it's enough to know lightbox is working
+    expect(page).to have_css(".mfp-image-holder img[src*='#{image.url}']", visible: false)
+  end
+end

plugins/chat/spec/system/shortcuts/chat_composer_spec.rb

@@ -70,5 +70,19 @@ RSpec.describe "Shortcuts | chat composer", type: :system, js: true do
 
       expect(page.find(".chat-composer-message-details")).to have_content(message_1.message)
     end
+
+    context "when last message is not editable" do
+      after { page.driver.browser.network_conditions = { offline: false } }
+
+      it "does not edit a message" do
+        chat.visit_channel(channel_1)
+        page.driver.browser.network_conditions = { offline: true }
+        channel_page.send_message("Hello world")
+
+        find(".chat-composer-input").send_keys(:arrow_up)
+
+        expect(page).to have_no_css(".chat-composer-message-details")
+      end
+    end
   end
 end