MR Diffs Refactor Part 08: Extra props for reusability._mr-refactor-part-8

3 files changed, 72 insertions, 11 deletions

diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index 94d9dc69964..3e09391a9ac 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/app/assets/javascripts/notes/components/diff_file_header.vue
@@ -12,17 +12,48 @@ export default {
       type: Object,
       required: true,
     },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    addMergeRequestButtons: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     titleTag() {
-      return this.diffFile.discussionPath ? 'a' : 'span';
+      return this.diffFile.fileHash ? 'a' : 'span';
+    },
+  },
+  methods: {
+    handleToggle(e, checkTarget) {
+      if (checkTarget) {
+        if (e.target === this.$refs.header) {
+          this.$emit('toggleFile');
+        }
+      } else {
+        this.$emit('toggleFile');
+      }
     },
+    noop() {},
   },
 };
 </script>
 
 <template>
-  <div class="file-header-content">
+  <div
+    @click="handleToggle($event, true)"
+    ref="header"
+    class="file-header-content"
+  >
+    <i
+      v-if="collapsible"
+      @click.stop="handleToggle"
+      class="fa diff-toggle-caret fa-fw fa-caret-down"
+    ></i>
     <div
       v-if="diffFile.submodule"
     >
@@ -33,8 +64,8 @@ export default {
           class="file-title-name"
         ></strong>
         <clipboard-button
-          title="Copy file path to clipboard"
           :text="diffFile.submoduleLink"
+          title="Copy file path to clipboard"
           css-class="btn-default btn-transparent btn-clipboard"
         />
       </span>
@@ -43,7 +74,7 @@ export default {
       <component
         ref="titleWrapper"
         :is="titleTag"
-        :href="diffFile.discussionPath"
+        :href="`#${diffFile.fileHash}`"
       >
         <span v-html="diffFile.blobIcon"></span>
         <span v-if="diffFile.renamedFile">
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index cf579c5d4dc..220e9e2b7f2 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -40,6 +40,21 @@ export default {
       type: Object,
       required: true,
     },
+    renderHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    renderDiffFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    alwaysExpanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -95,12 +110,17 @@ export default {
       return this.unresolvedDiscussions.length > 0;
     },
     wrapperComponent() {
-      return this.discussion.diffDiscussion && this.discussion.diffFile
-        ? diffWithNote
-        : 'div';
+      const shouldRenderDiffs =
+        this.discussion.diffDiscussion &&
+        this.discussion.diffFile &&
+        this.renderDiffFile;
+
+      return shouldRenderDiffs ? diffWithNote : 'div';
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion
+        ? ''
+        : 'panel panel-default discussion-wrapper';
     },
   },
   mounted() {
@@ -222,7 +242,10 @@ Please check your network connection and try again.`;
       </div>
       <div class="timeline-content">
         <div class="discussion">
-          <div class="discussion-header">
+          <div
+            v-if="renderHeader"
+            class="discussion-header"
+          >
             <note-header
               :author="author"
               :created-at="discussion.created_at"
@@ -242,7 +265,7 @@ Please check your network connection and try again.`;
             />
           </div>
           <div
-            v-if="note.expanded"
+            v-if="note.expanded || alwaysExpanded"
             class="discussion-body">
             <component
               :is="wrapperComponent"
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index a90c6d6381d..431d6fb385c 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -39,6 +39,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    shouldShow: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   store,
   data() {
@@ -160,7 +165,9 @@ export default {
 </script>
 
 <template>
-  <div id="notes">
+  <div
+    v-if="shouldShow"
+    id="notes">
     <ul
       id="notes-list"
       class="notes main-notes-list timeline">