Merge branch 'master' into feat/husky

app/assets/javascripts/components/story/StoryCopyIdClipboard.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Clipboard from 'react-clipboard.js';
+
+const StoryCopyIdClipboard = ({ id }) => (
+  <Clipboard
+    data-clipboard-text={`#${id}`}
+    component="button"
+    className="story-id"
+    title={I18n.t('story.events.copy_id')}
+  >
+    #{id}
+  </Clipboard>
+);
+
+export default StoryCopyIdClipboard;

app/assets/javascripts/templates/story.ejs

@@ -43,6 +43,7 @@
   </span>
 </div>
 <div class="story-title">
+  <div data-story-id-copy-clipboard></div>
   <% if (story.get('labels')) { %>
     <span class="tags">
       <% _.each(story.labels(), function(value) { %>

app/assets/javascripts/views/story_view.jsx

@@ -19,6 +19,7 @@ import storyTemplate from 'templates/story.ejs';
 import alertTemplate from 'templates/alert.ejs';
 import storyHoverTemplate from 'templates/story_hover.ejs';
 import noteTemplate from 'templates/note.ejs';
+import StoryCopyIdClipboard from '../components/story/StoryCopyIdClipboard';
 
 const LOCAL_STORY_REGEXP = /(?!\s|\b)(#\d+)(?!\w)/g;
 
@@ -541,7 +542,21 @@ const StoryView = FormView.extend({
     );
   },
 
-  renderCollapsed: function (isGuest) {
+  appendAttachments: function() {
+    this.$el.append(
+      this.makeFormControl(function(div) {
+        const $storyAttachments = $('<div class="story-attachments"></div>');
+        $(div).append($storyAttachments);
+
+        if(process.env.NODE_ENV !== 'test') {
+          clearTimeout(window.executeAttachinaryTimeout);
+          window.executeAttachinaryTimeout = setTimeout(ExecuteAttachinary, 1000);
+        }
+      })
+    );
+  },
+
+  renderCollapsed: function(isGuest) {
     this.$el.removeClass('editing');
     this.$el.html(this.template({ story: this.model, view: this }));
     this.$el.toggleClass(
@@ -560,14 +575,16 @@ const StoryView = FormView.extend({
     const estimateButtons = this.$('[data-story-estimate-buttons]').get(0);
     if (estimateButtons) {
       ReactDOM.render(
-        <StoryEstimateButtons
-          points={this.model.point_values()}
-          onClick={this.estimate}
-        />,
+        <StoryEstimateButtons points={this.model.point_values()} onClick={this.estimate} />,
         estimateButtons
       );
     }
 
+    const copyStoryIdClipboardLink = this.$('[data-story-id-copy-clipboard]').get(0)
+    if(copyStoryIdClipboardLink) {
+      ReactDOM.render(<StoryCopyIdClipboard id={this.id} />, copyStoryIdClipboardLink)
+    }
+
     if (isGuest) {
       this.$el
         .find('.state-actions')

app/assets/stylesheets/_screen.scss

@@ -224,10 +224,14 @@ div.story-controls {
 }
 
 div.story-title {
-  margin-left: 65px;
+  margin-left: 50px;
   word-wrap: break-word;
 }
 
+div.story-title div[data-story-id-copy-clipboard] {
+  display: inline;
+}
+
 .unestimated div.story-title {
   font-style: italic;
 }
@@ -239,6 +243,19 @@ div.story-title abbr.initials {
   border: none;
 }
 
+div.story-title {
+  .story-id {
+    cursor: pointer;
+    color: $blue-4;
+    font-weight: bold;
+    border: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .input-group-btn .btn-clipboard-id {
   padding-top: 6px;
 }

spec/javascripts/components/story/story_copy_id_clipboard_spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+
+import StoryCopyIdClipboard from 'components/story/StoryCopyIdClipboard';
+
+describe('<StoryCopyIdClipboard />', function() {
+  beforeEach(function() {
+    sinon.stub(I18n, 't');
+  });
+
+  afterEach(function() {
+    I18n.t.restore();
+  });
+
+  it("should render story id text", function() {
+    const wrapper = mount(
+      <StoryCopyIdClipboard id={70} />
+    );
+    expect(wrapper.find('.story-id').at(0).text()).toBe('#70');
+  });
+
+  it("should render story id data-clipboard-text", function() {
+    const wrapper = mount(
+      <StoryCopyIdClipboard id={70} />
+    );
+    expect(wrapper.find('[data-clipboard-text]')).toExist();
+  });
+
+  it("should render copy id title", function() {
+    shallow(
+      <StoryCopyIdClipboard id={70} />
+    );
+    expect(I18n.t).toHaveBeenCalledWith('story.events.copy_id');
+  });
+
+});