FEATURE: allow external links in custom sidebar sections (#20503)

Originally, only Discourse site links were available. After feedback, it was decided to extend this feature to external URLs.

/t/93491

app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs

@@ -7,7 +7,7 @@
       <a
         href={{@href}}
         rel="noopener noreferrer"
-        target="_blank"
+        target={{this.target}}
         class={{this.classNames}}
         title={{@title}}
         ...attributes

app/assets/javascripts/discourse/app/components/sidebar/section-link.js

@@ -1,6 +1,9 @@
 import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
 
 export default class SectionLink extends Component {
+  @service currentUser;
+
   willDestroy() {
     if (this.args.willDestroy) {
       this.args.willDestroy();
@@ -35,6 +38,12 @@ export default class SectionLink extends Component {
     return classNames.join(" ");
   }
 
+  get target() {
+    return this.currentUser.user_option.external_links_in_new_tab
+      ? "_blank"
+      : "_self";
+  }
+
   get models() {
     if (this.args.model) {
       return [this.args.model];

app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs

@@ -8,15 +8,25 @@
       @headerActionsIcon="pencil-alt"
     >
       {{#each section.links as |link|}}
-        <Sidebar::SectionLink
-          @linkName={{link.name}}
-          @route={{link.route}}
-          @models={{link.models}}
-          @query={{link.query}}
-          @content={{replace-emoji link.name}}
-          @prefixType="icon"
-          @prefixValue={{link.icon}}
-        />
+        {{#if link.external}}
+          <Sidebar::SectionLink
+            @linkName={{link.name}}
+            @content={{replace-emoji link.name}}
+            @prefixType="icon"
+            @prefixValue={{link.icon}}
+            @href={{link.value}}
+          />
+        {{else}}
+          <Sidebar::SectionLink
+            @linkName={{link.name}}
+            @route={{link.route}}
+            @models={{link.models}}
+            @query={{link.query}}
+            @content={{replace-emoji link.name}}
+            @prefixType="icon"
+            @prefixValue={{link.icon}}
+          />
+        {{/if}}
       {{/each}}
     </Sidebar::Section>
   {{/each}}

app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js

@@ -39,10 +39,12 @@ export default class SidebarUserCustomSections extends Component {
           ? htmlSafe(`${iconHTML("globe")} ${section.title}`)
           : section.title;
       section.links.forEach((link) => {
-        const routeInfoHelper = new RouteInfoHelper(this.router, link.value);
-        link.route = routeInfoHelper.route;
-        link.models = routeInfoHelper.models;
-        link.query = routeInfoHelper.query;
+        if (!link.external) {
+          const routeInfoHelper = new RouteInfoHelper(this.router, link.value);
+          link.route = routeInfoHelper.route;
+          link.models = routeInfoHelper.models;
+          link.query = routeInfoHelper.query;
+        }
       });
     });
     return this.currentUser.sidebarSections;

app/assets/javascripts/discourse/app/controllers/sidebar-section-form.js

@@ -45,16 +45,14 @@ class SectionLink {
     this.router = router;
     this.icon = icon || "link";
     this.name = name;
-    this.value = value ? `${this.protocolAndHost}${value}` : value;
+    this.value = value;
     this.id = id;
-  }
-
-  get protocolAndHost() {
-    return window.location.protocol + "//" + window.location.host;
+    this.httpHost = "http://" + window.location.host;
+    this.httpsHost = "https://" + window.location.host;
   }
 
   get path() {
-    return this.value?.replace(this.protocolAndHost, "");
+    return this.value?.replace(this.httpHost, "").replace(this.httpsHost, "");
   }
 
   get valid() {
@@ -77,14 +75,35 @@ class SectionLink {
     return this.name === undefined || this.validName ? "" : "warning";
   }
 
+  get external() {
+    return (
+      this.value &&
+      !(
+        this.value.startsWith(this.httpHost) ||
+        this.value.startsWith(this.httpsHost) ||
+        this.value.startsWith("/")
+      )
+    );
+  }
+
+  #validExternal() {
+    try {
+      return new URL(this.value);
+    } catch {
+      return false;
+    }
+  }
+
+  #validInternal() {
+    return this.router.recognize(this.path).name !== "unknown";
+  }
+
   get validValue() {
     return (
       !isEmpty(this.value) &&
-      (this.value.startsWith(this.protocolAndHost) ||
-        this.value.startsWith("/")) &&
       this.value.length <= 200 &&
       this.path &&
-      this.router.recognize(this.path).name !== "unknown"
+      (this.external ? this.#validExternal() : this.#validInternal())
     );
   }
 
@@ -178,6 +197,7 @@ export default Controller.extend(ModalFunctionality, {
             icon: link.icon,
             name: link.name,
             value: link.path,
+            external: link.external,
             _destroy: link._destroy,
           };
         }),

app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js

@@ -54,4 +54,19 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
       "has the right class attribute for the link"
     );
   });
+
+  test("target attribute for link", async function (assert) {
+    const template = hbs`<Sidebar::SectionLink @linkName="test" @href="https://discourse.org" />`;
+    await render(template);
+
+    assert.strictEqual(query("a").target, "_self");
+  });
+
+  test("target attribute for link when user set external links in new tab", async function (assert) {
+    this.currentUser.user_option.external_links_in_new_tab = true;
+    const template = hbs`<Sidebar::SectionLink @linkName="test" @href="https://discourse.org" />`;
+    await render(template);
+
+    assert.strictEqual(query("a").target, "_blank");
+  });
 });

app/models/sidebar_url.rb

@@ -7,14 +7,28 @@ class SidebarUrl < ActiveRecord::Base
 
   validate :path_validator
 
+  before_save :remove_internal_hostname, :set_external
+
   def path_validator
-    Rails.application.routes.recognize_path(value)
+    if external?
+      raise ActionController::RoutingError if value !~ Discourse::Utils::URI_REGEXP
+    else
+      Rails.application.routes.recognize_path(value)
+    end
   rescue ActionController::RoutingError
     errors.add(
       :value,
       I18n.t("activerecord.errors.models.sidebar_section_link.attributes.linkable_type.invalid"),
     )
   end
+
+  def remove_internal_hostname
+    self.value = self.value.sub(%r{\Ahttp(s)?://#{Discourse.current_hostname}}, "")
+  end
+
+  def set_external
+    self.external = value.start_with?("http://", "https://")
+  end
 end
 
 # == Schema Information
@@ -27,4 +41,5 @@ end
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
 #  icon       :string(40)       not null
+#  external   :boolean          default(FALSE), not null
 #