js: repositories remaining refactoring

app/assets/javascripts/main.js

@@ -18,7 +18,6 @@ import './vue-shared';
 // Require tree.
 // NOTE: This should be moved into proper modules.
 import './bootstrap';
-import './repositories';
 import './teams';
 
 // new modules structure

app/assets/javascripts/modules/repositories/components/comment-form.js

@@ -0,0 +1,23 @@
+import BaseComponent from '~/base/component';
+
+const COMMENT_BODY = '#comment_body';
+
+class CommentForm extends BaseComponent {
+  elements() {
+    this.$commentBody = this.$el.find(COMMENT_BODY);
+  }
+
+  toggle() {
+    this.$el.toggle(400, 'swing', () => {
+      const visible = this.$el.is(':visible');
+
+      if (visible) {
+        this.$commentBody.focus();
+      }
+
+      layout_resizer();
+    });
+  }
+}
+
+export default CommentForm;

app/assets/javascripts/modules/repositories/components/comments-panel.js

@@ -0,0 +1,24 @@
+import BaseComponent from '~/base/component';
+
+import CommentForm from '../components/comment-form';
+
+class CommentsPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find('.add-comment');
+    this.$commentForm = this.$el.find('.comment-form');
+  }
+
+  events() {
+    this.$toggle.on('click', () => this.toggle());
+  }
+
+  mount() {
+    this.form = new CommentForm(this.$commentForm);
+  }
+
+  toggle() {
+    this.form.toggle();
+  }
+}
+
+export default CommentsPanel;

app/assets/javascripts/modules/repositories/pages/show.js

@@ -7,6 +7,7 @@ import EventBus from '~/utils/eventbus';
 import TagsTable from '../components/tags-table';
 import TagsNotLoaded from '../components/tags-not-loaded';
 import DeleteTagAction from '../components/delete-tag-action';
+import CommentsPanel from '../components/comments-panel';
 
 import RepositoriesService from '../services/repositories';
 import TagsService from '../services/tags';
@@ -125,6 +126,8 @@ $(() => {
       set(this, 'isLoading', true);
       this.loadData();
       EventBus.$on('deleteTags', () => this.deleteTags());
+      // eslint-disable-next-line no-new
+      new CommentsPanel($('.comments-wrapper'));
     },
   });
 });

app/assets/stylesheets/pages/repositories.scss

@@ -1,6 +1,6 @@
 @import "comments";
 
-#write_comment_repository_btn {
+.add-comment {
   padding-top: 0px;
   padding-bottom: 0px;
   border: 0px;

app/views/repositories/show.html.slim

@@ -60,38 +60,39 @@
       <tags-not-loaded v-if="notLoaded"></tags-not-loaded>
       <tags-table v-if="!isLoading && !notLoaded" :tags="tags" :can-destroy="#{can_destroy?(@repository)}" :state="state" :security-enabled="#{security_vulns_enabled?}"></tags-table>
 
-#write_comment_form.collapse
-  = form_for [@repository, @repository.comments.build], remote: true, html: {id: 'new-comment-form', class: 'form-horizontal', role: 'form'} do |f|
-    .form-group
-      = f.label :comment, {class: 'control-label col-md-2'}
-      .col-md-7
-        = f.text_area(:body, class: 'form-control fixed-size', required: false, placeholder: "Please write a comment.")
-    .form-group
-      .col-md-offset-2.col-md-7
-        = f.submit('Add', class: 'btn btn-primary')
+.comments-wrapper
+  .comment-form.collapse
+    = form_for [@repository, @repository.comments.build], remote: true, html: {id: 'new-comment-form', class: 'form-horizontal', role: 'form'} do |f|
+      .form-group
+        = f.label :comment, {class: 'control-label col-md-2'}
+        .col-md-7
+          = f.text_area(:body, class: 'form-control fixed-size', required: false, placeholder: "Please write a comment.")
+      .form-group
+        .col-md-offset-2.col-md-7
+          = f.submit('Add', class: 'btn btn-primary')
 
-.panel.panel-default
-  .panel-heading.clearfix
-    .row
-      .col-sm-6
-        h5
-          span class="number_of_comments badge"
-            = @repository.comments.count
-          span class="comment_string"
-            - if @repository.comments.count == 1
-              |  Comment
-            - else
-              |  Comments
-      .col-sm-6.text-right
-        a#write_comment_repository_btn.btn.btn-xs.btn-link.js-toggle-button role="button"
-          i.fa.fa-comment
-          | Write a comment
+  .panel.panel-default
+    .panel-heading.clearfix
+      .row
+        .col-sm-6
+          h5
+            span class="number_of_comments badge"
+              = @repository.comments.count
+            span class="comment_string"
+              - if @repository.comments.count == 1
+                |  Comment
+              - else
+                |  Comments
+        .col-sm-6.text-right
+          a.btn.btn-xs.btn-link.add-comment role="button"
+            i.fa.fa-comment
+            | Write a comment
 
-  #comments.panel-body.panel-no-side-padding
-    .container-full
-      - if @repository_comments.empty?
-        .no-comments-found
-          ' Nobody has left a comment yet.
-      - else
-        - @repository_comments.each do |comment|
-          = render(comment)
+    #comments.panel-body.panel-no-side-padding
+      .container-full
+        - if @repository_comments.empty?
+          .no-comments-found
+            ' Nobody has left a comment yet.
+        - else
+          - @repository_comments.each do |comment|
+            = render(comment)

spec/features/repositories_comments_spec.rb

@@ -39,8 +39,8 @@
 
       expect(page).to have_content("Nobody has left a comment")
 
-      find("#write_comment_repository_btn").click
-      wait_for_effect_on("#write_comment_form")
+      find(".add-comment").click
+      wait_for_effect_on(".comment-form")
 
       fill_in "comment[body]", with: "Something"
       click_button "Add"
@@ -55,8 +55,8 @@
 
       expect(page).to have_content("Nobody has left a comment")
 
-      find("#write_comment_repository_btn").click
-      wait_for_effect_on("#write_comment_form")
+      find(".add-comment").click
+      wait_for_effect_on(".comment-form")
 
       fill_in "comment[body]", with: "Something"
       click_button "Add"
@@ -72,8 +72,8 @@
 
       expect(page).to have_content("Nobody has left a comment")
 
-      find("#write_comment_repository_btn").click
-      wait_for_effect_on("#write_comment_form")
+      find(".add-comment").click
+      wait_for_effect_on(".comment-form")
 
       fill_in "comment[body]", with: "Something"
       click_button "Add"
@@ -92,8 +92,8 @@
     scenario "An user cannot comment an empty text", js: true do
       visit repository_path(visible_repository)
 
-      find("#write_comment_repository_btn").click
-      wait_for_effect_on("#write_comment_form")
+      find(".add-comment").click
+      wait_for_effect_on(".comment-form")
 
       click_button "Add"
       wait_for_ajax