Add initial FE supportfe-support-multi-line-suggestions

5 files changed, 161 insertions, 30 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index bb66ab36283..2431dded645 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -48,10 +48,13 @@ export default {
         noteableType: this.noteableType,
         noteTargetLine: this.noteTargetLine,
         diffViewType: this.diffViewType,
-        diffFile: this.getDiffFileByHash(this.diffFileHash),
+        diffFile: this.diffFile(),
         linePosition: this.linePosition,
       };
     },
+    diffFile() {
+      return this.getDiffFileByHash(this.diffFileHash);
+    }
   },
   mounted() {
     if (this.isLoggedIn) {
@@ -102,6 +105,8 @@ export default {
       :line-code="line.line_code"
       :line="line"
       :help-page-path="helpPagePath"
+      :file-path="diffFile.file_path"
+      :target-line="noteTargetLine.new_line"
       save-button-title="Comment"
       class="diff-comment-form"
       @handleFormUpdateAddToReview="addToReview"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 92258a25438..7266d2dd2a6 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -60,6 +60,16 @@ export default {
       required: false,
       default: null,
     },
+    filePath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    targetLine: {
+      type: Number,
+      required: false,
+      default: null,
+    },
     helpPagePath: {
       type: String,
       required: false,
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue
new file mode 100644
index 00000000000..ff9b78b4c65
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue
@@ -0,0 +1,110 @@
+<script>
+import Vue from 'vue';
+import SuggestionDiff from './suggestion_diff.vue';
+// import Flash from '~/flash';
+
+export default {
+  components: { SuggestionDiff },
+  props: {
+    // fromLine: {
+    //   type: Number,
+    //   required: false,
+    //   default: 0,
+    // },
+    fromContent: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    toContent: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isRendered: false,
+    };
+  },
+  watch: {
+    suggestions() {
+      this.reset();
+    },
+    noteHtml() {
+      this.reset();
+    },
+  },
+  mounted() {
+    this.renderSuggestion();
+  },
+  methods: {
+    renderSuggestion() {
+      console.log('fromContent', this.fromContent);
+      console.log('toContent', this.toContent);
+      // swaps out suggestion(s) markdown with rich diff components
+      // (while still keeping non-suggestion markdown in place)
+
+      // if (!this.noteHtml) return;
+      // const { container } = this.$refs;
+      // const suggestionElements = container.querySelectorAll('.js-render-suggestion');
+      //
+      // if (this.lineType === 'old') {
+      //   Flash('Unable to apply suggestions to a deleted line.', 'alert', this.$el);
+      // }
+      //
+      // suggestionElements.forEach((suggestionEl, i) => {
+      //   const diffComponent = this.generateDiff();
+      //   diffComponent.$mount(suggestionParentEl);
+      // });
+
+      this.isRendered = true;
+    },
+    generateDiff() {
+      // generates the diff <suggestion-diff /> component
+      // all `suggestion` markdown will be swapped out by this component
+
+      const { suggestions, disabled, helpPagePath } = this;
+      const suggestion =
+        suggestions && suggestions[suggestionIndex] ? suggestions[suggestionIndex] : {};
+      const fromContent = suggestion.from_content || this.fromContent;
+      const fromLine = suggestion.from_line || this.fromLine;
+      const SuggestionDiffComponent = Vue.extend(SuggestionDiff);
+      const suggestionDiff = new SuggestionDiffComponent({
+        propsData: { newLines, fromLine, fromContent, disabled, suggestion, helpPagePath },
+      });
+
+      suggestionDiff.$on('apply', ({ suggestionId, callback }) => {
+        this.$emit('apply', { suggestionId, callback, flashContainer: this.$el });
+      });
+
+      return suggestionDiff;
+    },
+    reset() {
+      // resets the container HTML (replaces it with the updated noteHTML)
+      // calls `renderSuggestions` once the updated noteHTML is added to the DOM
+
+      this.$refs.container.innerHTML = this.noteHtml;
+      this.isRendered = false;
+      this.renderSuggestions();
+      this.$nextTick(() => this.renderSuggestions());
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="flash-container js-suggestions-flash"></div>
+    <div v-show="isRendered" ref="container"></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
index a351ca62c94..83e5a4bfb6a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
@@ -6,7 +6,7 @@ export default {
     SuggestionDiffHeader,
   },
   props: {
-    newLines: {
+    toContent: {
       type: Array,
       required: true,
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index dcda701f049..b27d98e0f03 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -6,21 +6,24 @@ import Flash from '~/flash';
 export default {
   components: { SuggestionDiff },
   props: {
-    fromLine: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    fromContent: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    lineType: {
-      type: String,
-      required: false,
-      default: '',
-    },
+    // TODO: it shouldn't need that
+    // fromLine: {
+    //   type: Number,
+    //   required: false,
+    //   default: 0,
+    // },
+    // TODO: it shouldn't need that
+    // fromContent: {
+    //   type: String,
+    //   required: false,
+    //   default: '',
+    // },
+    // TODO: it shouldn't need that
+    // lineType: {
+    //   type: String,
+    //   required: false,
+    //   default: '',
+    // },
     suggestions: {
       type: Array,
       required: false,
@@ -30,11 +33,12 @@ export default {
       type: String,
       required: true,
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+    // TODO: it shouldn't need that
+    // disabled: {
+    //   type: Boolean,
+    //   required: false,
+    //   default: false,
+    // },
     helpPagePath: {
       type: String,
       required: true,
@@ -65,14 +69,15 @@ export default {
       const { container } = this.$refs;
       const suggestionElements = container.querySelectorAll('.js-render-suggestion');
 
-      if (this.lineType === 'old') {
-        Flash('Unable to apply suggestions to a deleted line.', 'alert', this.$el);
-      }
+      // TODO: Move logic to suggestion component
+      // TODO: Use suggestion.suggestible_lines?
+      // if (this.lineType === 'old') {
+      //   Flash('Unable to apply suggestions to a deleted line.', 'alert', this.$el);
+      // }
 
       suggestionElements.forEach((suggestionEl, i) => {
         const suggestionParentEl = suggestionEl.parentElement;
-        const newLines = this.extractNewLines(suggestionParentEl);
-        const diffComponent = this.generateDiff(newLines, i);
+        const diffComponent = this.generateDiff(i);
         diffComponent.$mount(suggestionParentEl);
       });
 
@@ -101,11 +106,12 @@ export default {
       const { suggestions, disabled, helpPagePath } = this;
       const suggestion =
         suggestions && suggestions[suggestionIndex] ? suggestions[suggestionIndex] : {};
-      const fromContent = suggestion.from_content || this.fromContent;
-      const fromLine = suggestion.from_line || this.fromLine;
+      const fromContent = suggestion.from_content;// || this.fromContent;
+      const toContent = suggestion.to_content;// || this.fromContent;
+      const fromLine = 0; //suggestion.from_line;// || this.fromLine;
       const SuggestionDiffComponent = Vue.extend(SuggestionDiff);
       const suggestionDiff = new SuggestionDiffComponent({
-        propsData: { newLines, fromLine, fromContent, disabled, suggestion, helpPagePath },
+        propsData: { toContent, fromLine, fromContent, disabled, suggestion, helpPagePath },
       });
 
       suggestionDiff.$on('apply', ({ suggestionId, callback }) => {