Merge branch 'nmezzopera-merge-conflict-store-connect' into 'master'

Swap custom store for vuex implementation in merge_conflicts

See merge request gitlab-org/gitlab!56756

app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue

 <script>
 import { debounce } from 'lodash';
+import { mapActions } from 'vuex';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
+import { INTERACTIVE_RESOLVE_MODE } from '../constants';
 
 export default {
   props: {
@@ -10,14 +12,6 @@ export default {
       type: Object,
       required: true,
     },
-    onCancelDiscardConfirmation: {
-      type: Function,
-      required: true,
-    },
-    onAcceptDiscardConfirmation: {
-      type: Function,
-      required: true,
-    },
   },
   data() {
     return {
@@ -50,6 +44,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['setFileResolveMode', 'setPromptConfirmationState', 'updateFile']),
     loadEditor() {
       const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite');
       const DataPromise = axios.get(this.file.content_path);
@@ -82,23 +77,24 @@ export default {
     saveDiffResolution() {
       this.saved = true;
 
-      // This probably be better placed in the data provider
-      /* eslint-disable vue/no-mutating-props */
-      this.file.content = this.editor.getValue();
-      this.file.resolveEditChanged = this.file.content !== this.originalContent;
-      this.file.promptDiscardConfirmation = false;
-      /* eslint-enable vue/no-mutating-props */
+      this.updateFile({
+        ...this.file,
+        content: this.editor.getValue(),
+        resolveEditChanged: this.file.content !== this.originalContent,
+        promptDiscardConfirmation: false,
+      });
     },
     resetEditorContent() {
       if (this.fileLoaded) {
         this.editor.setValue(this.originalContent);
       }
     },
-    cancelDiscardConfirmation(file) {
-      this.onCancelDiscardConfirmation(file);
-    },
     acceptDiscardConfirmation(file) {
-      this.onAcceptDiscardConfirmation(file);
+      this.setPromptConfirmationState({ file, promptDiscardConfirmation: false });
+      this.setFileResolveMode({ file, mode: INTERACTIVE_RESOLVE_MODE });
+    },
+    cancelDiscardConfirmation(file) {
+      this.setPromptConfirmationState({ file, promptDiscardConfirmation: false });
     },
   },
 };

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue

 <script>
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import actionsMixin from '../mixins/line_conflict_actions';
+import { mapActions } from 'vuex';
+import syntaxHighlight from '~/syntax_highlight';
+import { SYNTAX_HIGHLIGHT_CLASS } from '../constants';
 import utilsMixin from '../mixins/line_conflict_utils';
 
 export default {
   directives: {
     SafeHtml,
   },
-  mixins: [utilsMixin, actionsMixin],
+  mixins: [utilsMixin],
+  SYNTAX_HIGHLIGHT_CLASS,
   props: {
     file: {
       type: Object,
       required: true,
     },
   },
+  mounted() {
+    syntaxHighlight(document.querySelectorAll(`.${SYNTAX_HIGHLIGHT_CLASS}`));
+  },
+  methods: {
+    ...mapActions(['handleSelected']),
+  },
 };
 </script>
 <template>
-  <table class="diff-wrap-lines code code-commit js-syntax-highlight">
-    <tr
-      v-for="line in file.inlineLines"
-      :key="(line.isHeader ? line.id : line.new_line) + line.richText"
-      class="line_holder diff-inline"
-    >
+  <table :class="['diff-wrap-lines code code-commit', $options.SYNTAX_HIGHLIGHT_CLASS]">
+    <!-- Unfortunately there isn't a good key for these sections -->
+    <!-- eslint-disable vue/require-v-for-key -->
+    <tr v-for="line in file.inlineLines" class="line_holder diff-inline">
       <template v-if="line.isHeader">
         <td :class="lineCssClass(line)" class="diff-line-num header"></td>
         <td :class="lineCssClass(line)" class="diff-line-num header"></td>
         <td :class="lineCssClass(line)" class="line_content header">
           <strong>{{ line.richText }}</strong>
-          <button class="btn" @click="handleSelected(file, line.id, line.section)">
+          <button class="btn" @click="handleSelected({ file, line })">
             {{ line.buttonTitle }}
           </button>
         </td>

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue

 <script>
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import actionsMixin from '../mixins/line_conflict_actions';
+import { mapActions } from 'vuex';
+import syntaxHighlight from '~/syntax_highlight';
+import { SYNTAX_HIGHLIGHT_CLASS } from '../constants';
 import utilsMixin from '../mixins/line_conflict_utils';
 
 export default {
   directives: {
     SafeHtml,
   },
-  mixins: [utilsMixin, actionsMixin],
+  mixins: [utilsMixin],
+  SYNTAX_HIGHLIGHT_CLASS,
   props: {
     file: {
       type: Object,
       required: true,
     },
   },
+  mounted() {
+    syntaxHighlight(document.querySelectorAll(`.${SYNTAX_HIGHLIGHT_CLASS}`));
+  },
+  methods: {
+    ...mapActions(['handleSelected']),
+  },
 };
 </script>
 <template>
   <!-- Unfortunately there isn't a good key for these sections -->
   <!-- eslint-disable vue/require-v-for-key -->
-  <table class="diff-wrap-lines code js-syntax-highlight">
+  <table :class="['diff-wrap-lines code', $options.SYNTAX_HIGHLIGHT_CLASS]">
     <tr v-for="section in file.parallelLines" class="line_holder parallel">
       <template v-for="line in section">
         <template v-if="line.isHeader">
           <td class="diff-line-num header" :class="lineCssClass(line)"></td>
           <td class="line_content header" :class="lineCssClass(line)">
             <strong>{{ line.richText }}</strong>
-            <button class="btn" @click="handleSelected(file, line.id, line.section)">
+            <button class="btn" @click="handleSelected({ file, line })">
               {{ line.buttonTitle }}
             </button>
           </td>

app/assets/javascripts/merge_conflicts/constants.js

@@ -13,6 +13,7 @@ export const VIEW_TYPES = {
 export const EDIT_RESOLVE_MODE = 'edit';
 export const INTERACTIVE_RESOLVE_MODE = 'interactive';
 export const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
+export const SYNTAX_HIGHLIGHT_CLASS = 'js-syntax-highlight';
 
 export const HEAD_HEADER_TEXT = s__('MergeConflict|HEAD//our changes');
 export const ORIGIN_HEADER_TEXT = s__('MergeConflict|origin//their changes');

app/assets/javascripts/merge_conflicts/merge_conflict_service.js

-import axios from '../lib/utils/axios_utils';
-
-export default class MergeConflictsService {
-  constructor(options) {
-    this.conflictsPath = options.conflictsPath;
-    this.resolveConflictsPath = options.resolveConflictsPath;
-  }
-
-  fetchConflictsData() {
-    return axios.get(this.conflictsPath);
-  }
-
-  submitResolveConflicts(data) {
-    return axios.post(this.resolveConflictsPath, data);
-  }
-}

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

-import $ from 'jquery';
 import Vue from 'vue';
-import { __ } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '../flash';
 import initIssuableSidebar from '../init_issuable_sidebar';
-import './merge_conflict_store';
-import syntaxHighlight from '../syntax_highlight';
 import MergeConflictsResolverApp from './merge_conflict_resolver_app.vue';
-import MergeConflictsService from './merge_conflict_service';
+import { createStore } from './store';
 
 export default function initMergeConflicts() {
-  const INTERACTIVE_RESOLVE_MODE = 'interactive';
   const conflictsEl = document.querySelector('#conflicts');
-  const { mergeConflictsStore } = gl.mergeConflicts;
-  const mergeConflictsService = new MergeConflictsService({
-    conflictsPath: conflictsEl.dataset.conflictsPath,
-    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath,
-  });
 
-  const { sourceBranchPath, mergeRequestPath } = conflictsEl.dataset;
+  const {
+    sourceBranchPath,
+    mergeRequestPath,
+    conflictsPath,
+    resolveConflictsPath,
+  } = conflictsEl.dataset;
 
   initIssuableSidebar();
 
+  const store = createStore();
+
   return new Vue({
     el: conflictsEl,
+    store,
     provide: {
       sourceBranchPath,
       mergeRequestPath,
-    },
-    data: mergeConflictsStore.state,
-    computed: {
-      conflictsCountText() {
-        return mergeConflictsStore.getConflictsCountText();
-      },
-      readyToCommit() {
-        return mergeConflictsStore.isReadyToCommit();
-      },
-      commitButtonText() {
-        return mergeConflictsStore.getCommitButtonText();
-      },
-      showDiffViewTypeSwitcher() {
-        return mergeConflictsStore.fileTextTypePresent();
-      },
+      resolveConflictsPath,
     },
     created() {
-      mergeConflictsService
-        .fetchConflictsData()
-        .then(({ data }) => {
-          if (data.type === 'error') {
-            mergeConflictsStore.setFailedRequest(data.message);
-          } else {
-            mergeConflictsStore.setConflictsData(data);
-          }
-
-          mergeConflictsStore.setLoadingState(false);
-
-          this.$nextTick(() => {
-            syntaxHighlight($('.js-syntax-highlight'));
-          });
-        })
-        .catch(() => {
-          mergeConflictsStore.setLoadingState(false);
-          mergeConflictsStore.setFailedRequest();
-        });
-    },
-    methods: {
-      handleViewTypeChange(viewType) {
-        mergeConflictsStore.setViewType(viewType);
-      },
-      onClickResolveModeButton(file, mode) {
-        if (mode === INTERACTIVE_RESOLVE_MODE && file.resolveEditChanged) {
-          mergeConflictsStore.setPromptConfirmationState(file, true);
-          return;
-        }
-
-        mergeConflictsStore.setFileResolveMode(file, mode);
-      },
-      acceptDiscardConfirmation(file) {
-        mergeConflictsStore.setPromptConfirmationState(file, false);
-        mergeConflictsStore.setFileResolveMode(file, INTERACTIVE_RESOLVE_MODE);
-      },
-      cancelDiscardConfirmation(file) {
-        mergeConflictsStore.setPromptConfirmationState(file, false);
-      },
-      commit() {
-        mergeConflictsStore.setSubmitState(true);
-
-        mergeConflictsService
-          .submitResolveConflicts(mergeConflictsStore.getCommitData())
-          .then(({ data }) => {
-            window.location.href = data.redirect_to;
-          })
-          .catch(() => {
-            mergeConflictsStore.setSubmitState(false);
-            createFlash(__('Failed to save merge conflicts resolutions. Please try again!'));
-          });
-      },
+      store.dispatch('fetchConflictsData', conflictsPath);
     },
     render(createElement) {
       return createElement(MergeConflictsResolverApp);

app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js

-export default {
-  methods: {
-    handleSelected(file, sectionId, selection) {
-      gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
-    },
-  },
-};

app/assets/javascripts/merge_conflicts/store/actions.js

@@ -118,3 +118,8 @@ export const handleSelected = ({ commit, state, getters }, { file, line: { id, s
 
   commit(types.UPDATE_FILE, { file: updated, index });
 };
+
+export const updateFile = ({ commit, getters }, file) => {
+  const index = getters.getFileIndex(file);
+  commit(types.UPDATE_FILE, { file, index });
+};

spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js

+import { GlSprintf } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import InlineConflictLines from '~/merge_conflicts/components/inline_conflict_lines.vue';
+import ParallelConflictLines from '~/merge_conflicts/components/parallel_conflict_lines.vue';
+import component from '~/merge_conflicts/merge_conflict_resolver_app.vue';
+import { createStore } from '~/merge_conflicts/store';
+import { decorateFiles } from '~/merge_conflicts/utils';
+import { conflictsMock } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Merge Conflict Resolver App', () => {
+  let wrapper;
+  let store;
+
+  const decoratedMockFiles = decorateFiles(conflictsMock.files);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
+      store,
+      stubs: { GlSprintf },
+      provide() {
+        return {
+          mergeRequestPath: 'foo',
+          sourceBranchPath: 'foo',
+          resolveConflictsPath: 'bar',
+        };
+      },
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    store.commit('SET_LOADING_STATE', false);
+    store.dispatch('setConflictsData', conflictsMock);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findConflictsCount = () => wrapper.find('[data-testid="conflicts-count"]');
+  const findFiles = () => wrapper.findAll('[data-testid="files"]');
+  const findFileHeader = (w = wrapper) => w.find('[data-testid="file-name"]');
+  const findFileInteractiveButton = (w = wrapper) => w.find('[data-testid="interactive-button"]');
+  const findFileInlineButton = (w = wrapper) => w.find('[data-testid="inline-button"]');
+  const findSideBySideButton = () => wrapper.find('[data-testid="side-by-side"]');
+  const findInlineConflictLines = (w = wrapper) => w.find(InlineConflictLines);
+  const findParallelConflictLines = (w = wrapper) => w.find(ParallelConflictLines);
+  const findCommitMessageTextarea = () => wrapper.find('[data-testid="commit-message"]');
+
+  it('shows the amount of conflicts', () => {
+    mountComponent();
+
+    const title = findConflictsCount();
+
+    expect(title.exists()).toBe(true);
+    expect(title.text().trim()).toBe('Showing 3 conflicts between test-conflicts and master');
+  });
+
+  describe('files', () => {
+    it('shows one file area for each file', () => {
+      mountComponent();
+
+      expect(findFiles()).toHaveLength(conflictsMock.files.length);
+    });
+
+    it('has the appropriate file header', () => {
+      mountComponent();
+
+      const fileHeader = findFileHeader(findFiles().at(0));
+
+      expect(fileHeader.text()).toBe(decoratedMockFiles[0].filePath);
+    });
+
+    describe('editing', () => {
+      it('interactive mode is the default', () => {
+        mountComponent();
+
+        const interactiveButton = findFileInteractiveButton(findFiles().at(0));
+        const inlineButton = findFileInlineButton(findFiles().at(0));
+
+        expect(interactiveButton.classes('active')).toBe(true);
+        expect(inlineButton.classes('active')).toBe(false);
+      });
+
+      it('clicking inline set inline as default', async () => {
+        mountComponent();
+
+        const inlineButton = findFileInlineButton(findFiles().at(0));
+        expect(inlineButton.classes('active')).toBe(false);
+
+        inlineButton.trigger('click');
+        await wrapper.vm.$nextTick();
+
+        expect(inlineButton.classes('active')).toBe(true);
+      });
+
+      it('inline mode shows a inline-conflict-lines', () => {
+        mountComponent();
+
+        const inlineConflictLinesComponent = findInlineConflictLines(findFiles().at(0));
+
+        expect(inlineConflictLinesComponent.exists()).toBe(true);
+        expect(inlineConflictLinesComponent.props('file')).toEqual(decoratedMockFiles[0]);
+      });
+
+      it('parallel mode shows a parallel-conflict-lines', async () => {
+        mountComponent();
+
+        findSideBySideButton().trigger('click');
+        await wrapper.vm.$nextTick();
+
+        const parallelConflictLinesComponent = findParallelConflictLines(findFiles().at(0));
+
+        expect(parallelConflictLinesComponent.exists()).toBe(true);
+        expect(parallelConflictLinesComponent.props('file')).toEqual(decoratedMockFiles[0]);
+      });
+    });
+  });
+
+  describe('submit form', () => {
+    it('contains a commit message textarea', () => {
+      mountComponent();
+
+      expect(findCommitMessageTextarea().exists()).toBe(true);
+    });
+  });
+});