FEATURE: remove the featured link by editing the topic

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -12,6 +12,7 @@ import debounce from 'discourse/lib/debounce';
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
 import QuoteState from 'discourse/lib/quote-state';
 import { userPath } from 'discourse/lib/url';
+import { extractLinkMeta } from 'discourse/lib/render-topic-featured-link';
 
 export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
   composer: Ember.inject.controller(),
@@ -32,6 +33,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
   username_filters: null,
   filter: null,
   quoteState: null,
+  canRemoveTopicFeaturedLink: Ember.computed.and('canEditTopicFeaturedLink', 'buffered.featured_link'),
 
   updateQueryParams() {
     const postStream = this.get('model.postStream');
@@ -99,6 +101,12 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     return categoryIds === undefined || !categoryIds.length || categoryIds.indexOf(categoryId) !== -1;
   },
 
+  @computed('model')
+  featuredLinkDomain(topic) {
+    const meta = extractLinkMeta(topic);
+    return meta.domain;
+  },
+
   @computed('model.isPrivateMessage')
   canEditTags(isPrivateMessage) {
     return !isPrivateMessage && this.site.get('can_tag_topics');
@@ -694,6 +702,10 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
 
     convertToPrivateMessage() {
       this.get('content').convertTopic("private");
+    },
+
+    removeFeaturedLink() {
+      this.set('buffered.featured_link', null);
     }
   },
 

app/assets/javascripts/discourse/lib/render-topic-featured-link.js.es6

@@ -7,7 +7,7 @@ export function addFeaturedLinkMetaDecorator(decorator) {
   _decorators.push(decorator);
 }
 
-function extractLinkMeta(topic) {
+export function extractLinkMeta(topic) {
   const href = topic.featured_link,
         target = Discourse.User.currentProp('external_links_in_new_tab') ? '_blank' : '';
 

app/assets/javascripts/discourse/templates/topic.hbs

@@ -30,8 +30,17 @@
           {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
 
           <br>
+          <div class="edit-controls">
             {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
             {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
+
+            {{#if canRemoveTopicFeaturedLink}}
+              <a href {{action "removeFeaturedLink"}} class="remove-featured-link" title="{{i18n "composer.remove_featured_link"}}">
+                {{d-icon "times-circle"}}
+                {{featuredLinkDomain}}
+              </a>
+            {{/if}}
+          </div>
         {{else}}
           <h1>
             {{#unless model.is_warning}}

app/assets/stylesheets/common/base/topic.scss

@@ -196,7 +196,7 @@
 a.topic-featured-link {
   display: inline-block;
   text-transform: lowercase;
-  color: #858585;
+  color: dark-light-choose($primary-medium, $secondary-medium);
   font-size: 0.875rem;
 
   &::before {

app/assets/stylesheets/desktop/topic.scss

@@ -26,7 +26,7 @@
     margin-top: 6px;
     margin-right: 6px;
   }
-  #edit-title, .category-chooser {
+  #edit-title, .category-chooser, .edit-controls {
     width: 500px;
   }
   h1 {
@@ -42,6 +42,12 @@
     vertical-align: middle;
   }
   .private-message-glyph { display: none; }
+  .remove-featured-link {
+    float: right;
+    text-transform: lowercase;
+    color: dark-light-choose($primary-medium, $secondary-medium);
+    font-size: 0.875rem;
+  }
 }
 
 .private-message-glyph {

app/models/topic.rb

@@ -96,7 +96,7 @@ class Topic < ActiveRecord::Base
 
   before_validation do
     self.title = TextCleaner.clean_title(TextSentinel.title_sentinel(title).text) if errors[:title].empty?
-    self.featured_link.strip! if self.featured_link
+    self.featured_link = self.featured_link.strip.presence if self.featured_link
   end
 
   belongs_to :category

config/locales/client.en.yml

@@ -1240,6 +1240,7 @@ en:
       edit_reason_placeholder: "why are you editing?"
       show_edit_reason: "(add edit reason)"
       topic_featured_link_placeholder: "Enter link shown with title."
+      remove_featured_link: "Remove link from topic."
       reply_placeholder: "Type here. Use Markdown, BBCode, or HTML to format. Drag or paste images."
       view_new_post: "View your new post."
       saving: "Saving"

lib/post_revisor.rb

@@ -97,7 +97,6 @@ class PostRevisor
 
   track_topic_field(:featured_link) do |topic_changes, featured_link|
     if SiteSetting.topic_featured_link_enabled &&
-       featured_link.present? &&
        topic_changes.guardian.can_edit_featured_link?(topic_changes.topic.category_id)
 
       topic_changes.record_change('featured_link', topic_changes.topic.featured_link, featured_link)

test/javascripts/acceptance/topic-test.js.es6

@@ -37,6 +37,7 @@ QUnit.test("Showing and hiding the edit controls", assert => {
 
   andThen(() => {
     assert.ok(exists('#edit-title'), 'it shows the editing controls');
+    assert.ok(!exists('.title-wrapper .remove-featured-link'), 'link to remove featured link is not shown');
   });
 
   fillIn('#edit-title', 'this is the new title');
@@ -174,3 +175,29 @@ QUnit.test("Updating the topic title with emojis", assert => {
     assert.equal(find('.fancy-title').html().trim(), 'emojis title <img src=\"/images/emoji/emoji_one/bike.png?v=5\" title=\"bike\" alt=\"bike\" class=\"emoji\"> <img src=\"/images/emoji/emoji_one/blonde_woman/6.png?v=5\" title=\"blonde_woman:t6\" alt=\"blonde_woman:t6\" class=\"emoji\">', 'it displays the new title with emojis');
   });
 });
+
+acceptance("Topic featured links", {
+  loggedIn: true,
+  settings: {
+    topic_featured_link_enabled: true,
+    max_topic_title_length: 80
+  }
+});
+
+QUnit.test("remove featured link", assert => {
+  visit("/t/299/1");
+  andThen(() => {
+    assert.ok(exists('.title-wrapper .topic-featured-link'), 'link is shown with topic title');
+  });
+
+  click('.title-wrapper .edit-topic');
+  andThen(() => {
+    assert.ok(exists('.title-wrapper .remove-featured-link'), 'link to remove featured link');
+  });
+
+  click('.title-wrapper .remove-featured-link');
+  click('.title-wrapper .submit-edit');
+  andThen(() => {
+    assert.ok(!exists('.title-wrapper .topic-featured-link'), 'link is gone');
+  });
+});