From ee393a7953c1ced44b5b3324c029b96d30f84031 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Wed, 21 Feb 2024 09:16:49 +1100
Subject: [PATCH] UX: hide the draggable icon in the sidebar form on mobile
 (#25738)

Drag and drop link works only on desktop. Therefore, the drag icon should be hidden on mobile.
---
 .../components/sidebar/section-form-link.hbs  |  8 ++++---
 .../components/sidebar/section-form-link.js   |  2 ++
 app/assets/stylesheets/mobile/_index.scss     |  1 +
 app/assets/stylesheets/mobile/sidebar.scss    |  8 +++++++
 spec/system/custom_sidebar_sections_spec.rb   | 21 +++++++++++++++++++
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/mobile/sidebar.scss

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
index 14769fa4b52..cb24ea34818 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
@@ -13,9 +13,11 @@
   {{on "drop" this.dropItem}}
   role="row"
 >
-  <div class="draggable" data-link-name={{@link.name}}>
-    {{d-icon "grip-lines"}}
-  </div>
+  {{#unless this.site.mobileView}}
+    <div class="draggable" data-link-name={{@link.name}}>
+      {{d-icon "grip-lines"}}
+    </div>
+  {{/unless}}
   <div class="input-group" role="cell">
     <IconPicker
       @name="icon"
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.js
index 5328d53ebbd..11f782aafe6 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.js
@@ -1,9 +1,11 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import discourseLater from "discourse-common/lib/later";
 
 export default class SectionFormLink extends Component {
+  @service site;
   @tracked dragCssClass;
 
   dragCount = 0;
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 7a07da03087..a1ef8b22272 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -27,6 +27,7 @@
 @import "push-notifications-mobile";
 @import "reviewables";
 @import "search";
+@import "sidebar";
 @import "tagging";
 @import "topic-list";
 @import "topic-post";
diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss
new file mode 100644
index 00000000000..17d5a52c1e1
--- /dev/null
+++ b/app/assets/stylesheets/mobile/sidebar.scss
@@ -0,0 +1,8 @@
+.sidebar-section-form-modal {
+  .row-wrapper {
+    grid-template-columns: 4.5em repeat(2, 1fr) 2em;
+    .link-icon {
+      grid-column: 1;
+    }
+  }
+}
diff --git a/spec/system/custom_sidebar_sections_spec.rb b/spec/system/custom_sidebar_sections_spec.rb
index 6f7f75f8601..46cf758d8a5 100644
--- a/spec/system/custom_sidebar_sections_spec.rb
+++ b/spec/system/custom_sidebar_sections_spec.rb
@@ -190,6 +190,27 @@ describe "Custom sidebar sections", type: :system do
     )
   end
 
+  it "does not allow to drag on mobile" do
+    sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user)
+
+    Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags").tap do |sidebar_url|
+      Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url)
+    end
+
+    Fabricate(:sidebar_url, name: "Sidebar Categories", value: "/categories").tap do |sidebar_url|
+      Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url)
+    end
+
+    sign_in user
+
+    visit("/latest?mobile_view=1")
+
+    sidebar.open_on_mobile
+    sidebar.edit_custom_section("My section")
+
+    expect(page).not_to have_css(".sidebar-section-form-link .draggable")
+  end
+
   it "does not allow the user to edit public section" do
     sidebar_section = Fabricate(:sidebar_section, title: "Public section", public: true)
     sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags")