From 1eebcc8f93bd3226465496f76d435c36095a447e Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 19 May 2022 16:24:22 -0300 Subject: [PATCH 1/5] First commit --- .../components/story/StoryCopyIdClipboard.js | 16 +++++++++ app/assets/javascripts/templates/story.ejs | 1 + app/assets/javascripts/views/story_view.js | 10 ++++++ app/assets/stylesheets/_screen.scss | 20 ++++++++++- .../story/story_copy_id_clipboard_spec.js | 36 +++++++++++++++++++ 5 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/components/story/StoryCopyIdClipboard.js create mode 100644 spec/javascripts/components/story/story_copy_id_clipboard_spec.js diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.js b/app/assets/javascripts/components/story/StoryCopyIdClipboard.js new file mode 100644 index 000000000..71f67c05d --- /dev/null +++ b/app/assets/javascripts/components/story/StoryCopyIdClipboard.js @@ -0,0 +1,16 @@ +import React from "react"; + +const StoryCopyIdClipboard = ({ id }) => { + return ( + + ); +}; + +export default StoryCopyIdClipboard; diff --git a/app/assets/javascripts/templates/story.ejs b/app/assets/javascripts/templates/story.ejs index f180f2713..301b4d3d6 100644 --- a/app/assets/javascripts/templates/story.ejs +++ b/app/assets/javascripts/templates/story.ejs @@ -41,6 +41,7 @@
+
<% if (story.get('labels')) { %> <% _.each(story.labels(), function(value) { %> diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js index 5816f1437..84e050204 100644 --- a/app/assets/javascripts/views/story_view.js +++ b/app/assets/javascripts/views/story_view.js @@ -22,6 +22,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; @@ -569,6 +570,15 @@ const StoryView = FormView.extend({ ); } + const copyStoryIdClipboardLink = this.$('[data-story-id-copy-clipboard]').get(0) + if(copyStoryIdClipboardLink) { + ReactDOM.render( + , + copyStoryIdClipboardLink + ) + new Clipboard('.story-id'); + } + if (isGuest) { this.$el.find('.state-actions').find('.transition').prop('disabled', true) } }, diff --git a/app/assets/stylesheets/_screen.scss b/app/assets/stylesheets/_screen.scss index 9474a044b..4f463b2ac 100644 --- a/app/assets/stylesheets/_screen.scss +++ b/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,20 @@ div.story-title abbr.initials { border: none; } +div.story-title { + .story-id { + cursor: pointer; + color: $blue-4; + font-weight: bold; + margin-right: 8px; + border: none; + + &:hover { + text-decoration: underline; + } + } +} + .input-group-btn .btn-clipboard-id { padding-top: 6px; } diff --git a/spec/javascripts/components/story/story_copy_id_clipboard_spec.js b/spec/javascripts/components/story/story_copy_id_clipboard_spec.js new file mode 100644 index 000000000..b6bc6d7a0 --- /dev/null +++ b/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('', function() { + beforeEach(function() { + sinon.stub(I18n, 't'); + }); + + afterEach(function() { + I18n.t.restore(); + }); + + it("should render story id text", function() { + const wrapper = mount( + + ); + expect(wrapper.find('.story-id').text()).toBe('#70'); + }); + + it("should render story id data-clipboard-text", function() { + const wrapper = mount( + + ); + expect(wrapper.find('[data-clipboard-text]')).toExist(); + }); + + it("should render copy id title", function() { + shallow( + + ); + expect(I18n.t).toHaveBeenCalledWith('story.events.copy_id'); + }); + +}); From 6796ae61cb62ef1101c7ffc5d37405c9294b0fc9 Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 19 May 2022 16:34:36 -0300 Subject: [PATCH 2/5] Minor code lint fix --- app/assets/javascripts/views/story_view.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js index 84e050204..6ddef78de 100644 --- a/app/assets/javascripts/views/story_view.js +++ b/app/assets/javascripts/views/story_view.js @@ -545,9 +545,7 @@ const StoryView = FormView.extend({ this.$el.removeClass('editing'); this.$el.html(this.template({story: this.model, view: this})); - this.$el.toggleClass('collapsed-iteration', - !this.model.get('isVisible') && - !this.isSearchResult); + this.$el.toggleClass('collapsed-iteration', !this.model.get('isVisible') && !this.isSearchResult); const stateButtons = this.$('[data-story-state-buttons]').get(0) if(stateButtons) { From de2376b28730200468a2d73707701ef3ac2124cc Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 19 May 2022 16:38:37 -0300 Subject: [PATCH 3/5] New minor fix --- app/assets/javascripts/views/story_view.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js index 6ddef78de..00d31fc7e 100644 --- a/app/assets/javascripts/views/story_view.js +++ b/app/assets/javascripts/views/story_view.js @@ -542,38 +542,26 @@ const StoryView = FormView.extend({ }, renderCollapsed: function(isGuest) { - this.$el.removeClass('editing'); this.$el.html(this.template({story: this.model, view: this})); this.$el.toggleClass('collapsed-iteration', !this.model.get('isVisible') && !this.isSearchResult); const stateButtons = this.$('[data-story-state-buttons]').get(0) if(stateButtons) { - ReactDOM.render( - , - stateButtons - ); + ReactDOM.render(, stateButtons); } const estimateButtons = this.$('[data-story-estimate-buttons]').get(0) if(estimateButtons) { ReactDOM.render( - , + , estimateButtons ); } const copyStoryIdClipboardLink = this.$('[data-story-id-copy-clipboard]').get(0) if(copyStoryIdClipboardLink) { - ReactDOM.render( - , - copyStoryIdClipboardLink - ) + ReactDOM.render(, copyStoryIdClipboardLink) new Clipboard('.story-id'); } From fd607c8e68b783006b44401f33ab7df2c6736287 Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Mon, 26 Sep 2022 14:15:17 -0300 Subject: [PATCH 4/5] chore: code review --- .../components/story/StoryCopyIdClipboard.js | 11 ++++++----- app/assets/stylesheets/_screen.scss | 1 - .../components/story/story_copy_id_clipboard_spec.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.js b/app/assets/javascripts/components/story/StoryCopyIdClipboard.js index 71f67c05d..33425d484 100644 --- a/app/assets/javascripts/components/story/StoryCopyIdClipboard.js +++ b/app/assets/javascripts/components/story/StoryCopyIdClipboard.js @@ -1,15 +1,16 @@ import React from "react"; +import Clipboard from "react-clipboard.js"; const StoryCopyIdClipboard = ({ id }) => { return ( - + ); }; diff --git a/app/assets/stylesheets/_screen.scss b/app/assets/stylesheets/_screen.scss index 4f463b2ac..b678168f6 100644 --- a/app/assets/stylesheets/_screen.scss +++ b/app/assets/stylesheets/_screen.scss @@ -248,7 +248,6 @@ div.story-title { cursor: pointer; color: $blue-4; font-weight: bold; - margin-right: 8px; border: none; &:hover { diff --git a/spec/javascripts/components/story/story_copy_id_clipboard_spec.js b/spec/javascripts/components/story/story_copy_id_clipboard_spec.js index b6bc6d7a0..27bde9a9e 100644 --- a/spec/javascripts/components/story/story_copy_id_clipboard_spec.js +++ b/spec/javascripts/components/story/story_copy_id_clipboard_spec.js @@ -16,7 +16,7 @@ describe('', function() { const wrapper = mount( ); - expect(wrapper.find('.story-id').text()).toBe('#70'); + expect(wrapper.find('.story-id').at(0).text()).toBe('#70'); }); it("should render story id data-clipboard-text", function() { From 1b408a597ccd41dcee09c94be96f78c7620556ad Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 6 Oct 2022 15:30:26 -0300 Subject: [PATCH 5/5] chore: minor fix --- app/assets/javascripts/views/story_view.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js index 00d31fc7e..6d24748ab 100644 --- a/app/assets/javascripts/views/story_view.js +++ b/app/assets/javascripts/views/story_view.js @@ -562,7 +562,6 @@ const StoryView = FormView.extend({ const copyStoryIdClipboardLink = this.$('[data-story-id-copy-clipboard]').get(0) if(copyStoryIdClipboardLink) { ReactDOM.render(, copyStoryIdClipboardLink) - new Clipboard('.story-id'); } if (isGuest) { this.$el.find('.state-actions').find('.transition').prop('disabled', true) }