Merge branch 'master' into 'dm-document-role-maintainer'

# Conflicts:
#   doc/development/code_review.md

app/assets/javascripts/diffs/store/modules/diff_state.js

 import Cookies from 'js-cookie';
 import { getParameterValues } from '~/lib/utils/url_utility';
+import bp from '~/breakpoints';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants';
 const viewTypeFromQueryString = getParameterValues('view')[0];
@@ -20,6 +21,7 @@ export default () => ({
   diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
   tree: [],
   treeEntries: {},
-  showTreeList: storedTreeShow === null ? true : storedTreeShow === 'true',
+  showTreeList:
+    storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : storedTreeShow === 'true',
   currentDiffFileId: '',
 });

app/assets/javascripts/dirty_submit/dirty_submit_collection.js

+import DirtySubmitForm from './dirty_submit_form';
+
+class DirtySubmitCollection {
+  constructor(forms) {
+    this.forms = forms;
+
+    this.dirtySubmits = [];
+
+    this.forms.forEach(form => this.dirtySubmits.push(new DirtySubmitForm(form)));
+  }
+}
+
+export default DirtySubmitCollection;

app/assets/javascripts/dirty_submit/dirty_submit_factory.js

+import DirtySubmitCollection from './dirty_submit_collection';
+import DirtySubmitForm from './dirty_submit_form';
+
+export default function dirtySubmitFactory(formOrForms) {
+  const isCollection = formOrForms instanceof NodeList || formOrForms instanceof Array;
+  const DirtySubmitClass = isCollection ? DirtySubmitCollection : DirtySubmitForm;
+
+  return new DirtySubmitClass(formOrForms);
+}

app/assets/javascripts/dirty_submit/dirty_submit_form.js

+import _ from 'underscore';
+
+class DirtySubmitForm {
+  constructor(form) {
+    this.form = form;
+    this.dirtyInputs = [];
+    this.isDisabled = true;
+
+    this.init();
+  }
+
+  init() {
+    this.inputs = this.form.querySelectorAll('input, textarea, select');
+    this.submits = this.form.querySelectorAll('input[type=submit], button[type=submit]');
+
+    this.inputs.forEach(DirtySubmitForm.initInput);
+    this.toggleSubmission();
+
+    this.registerListeners();
+  }
+
+  registerListeners() {
+    const throttledUpdateDirtyInput = _.throttle(
+      event => this.updateDirtyInput(event),
+      DirtySubmitForm.THROTTLE_DURATION,
+    );
+    this.form.addEventListener('input', throttledUpdateDirtyInput);
+    this.form.addEventListener('submit', event => this.formSubmit(event));
+  }
+
+  updateDirtyInput(event) {
+    const input = event.target;
+
+    if (!input.dataset.dirtySubmitOriginalValue) return;
+
+    this.updateDirtyInputs(input);
+    this.toggleSubmission();
+  }
+
+  updateDirtyInputs(input) {
+    const { name } = input;
+    const isDirty =
+      input.dataset.dirtySubmitOriginalValue !== DirtySubmitForm.inputCurrentValue(input);
+    const indexOfInputName = this.dirtyInputs.indexOf(name);
+    const isExisting = indexOfInputName !== -1;
+
+    if (isDirty && !isExisting) this.dirtyInputs.push(name);
+    if (!isDirty && isExisting) this.dirtyInputs.splice(indexOfInputName, 1);
+  }
+
+  toggleSubmission() {
+    this.isDisabled = this.dirtyInputs.length === 0;
+    this.submits.forEach(element => {
+      element.disabled = this.isDisabled;
+    });
+  }
+
+  formSubmit(event) {
+    if (this.isDisabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    return !this.isDisabled;
+  }
+
+  static initInput(element) {
+    element.dataset.dirtySubmitOriginalValue = DirtySubmitForm.inputCurrentValue(element);
+  }
+
+  static isInputCheckable(input) {
+    return input.type === 'checkbox' || input.type === 'radio';
+  }
+
+  static inputCurrentValue(input) {
+    return DirtySubmitForm.isInputCheckable(input) ? input.checked.toString() : input.value;
+  }
+}
+
+DirtySubmitForm.THROTTLE_DURATION = 500;
+
+export default DirtySubmitForm;

app/assets/javascripts/dismissable_callout.js

+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+
+export default function initDismissableCallout(alertSelector) {
+  const alertEl = document.querySelector(alertSelector);
+  if (!alertEl) {
+    return;
+  }
+
+  const closeButtonEl = alertEl.getElementsByClassName('close')[0];
+  const { dismissEndpoint, featureId } = closeButtonEl.dataset;
+
+  closeButtonEl.addEventListener('click', () => {
+    axios
+      .post(dismissEndpoint, {
+        feature_name: featureId,
+      })
+      .then(() => {
+        $(alertEl).alert('close');
+      })
+      .catch(() => {
+        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
+      });
+  });
+}

app/assets/javascripts/due_date_select.js

@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
+import boardsStore from './boards/stores/boards_store';
 class DueDateSelect {
   constructor({ $dropdown, $loading } = {}) {
@@ -58,7 +59,7 @@ class DueDateSelect {
         $dueDateInput.val(calendar.toString(dateText));
         if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-          gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
+          boardsStore.detail.issue.dueDate = $dueDateInput.val();
           this.updateIssueBoardIssue();
         } else {
           this.saveDueDate(true);
@@ -79,7 +80,7 @@ class DueDateSelect {
       calendar.setDate(null);
       if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-        gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+        boardsStore.detail.issue.dueDate = '';
         this.updateIssueBoardIssue();
       } else {
         $(`input[name='${this.fieldName}']`).val('');
@@ -123,7 +124,7 @@ class DueDateSelect {
       this.$loading.fadeOut();
     };
-    gl.issueBoards.BoardsStore.detail.issue
+    boardsStore.detail.issue
       .update(this.$dropdown.attr('data-issue-update'))
       .then(fadeOutLoader)
       .catch(fadeOutLoader);

app/assets/javascripts/environments/components/environment_actions.vue

@@ -60,11 +60,9 @@ export default {
     >
       <span>
         <icon name="play" />
-        <i
-          class="fa fa-caret-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>

app/assets/javascripts/environments/components/environment_item.vue

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -24,6 +25,7 @@ export default {
   components: {
     UserAvatarLink,
     CommitComponent,
+    Icon,
     ActionsComponent,
     ExternalUrlComponent,
     StopComponent,
@@ -448,6 +450,10 @@ export default {
         this.canRetry
       );
     },
+
+    folderIconName() {
+      return this.model.isOpen ? 'chevron-down' : 'chevron-right';
+    },
   },
   methods: {
@@ -494,27 +500,15 @@ export default {
         role="button"
         @click="onClickFolder">
-        <span class="folder-icon">
-          <i
-            v-show="model.isOpen"
-            class="fa fa-caret-down"
-            aria-hidden="true"
-          >
-          </i>
-          <i
-            v-show="!model.isOpen"
-            class="fa fa-caret-right"
-            aria-hidden="true"
-          >
-          </i>
-        </span>
-        <span class="folder-icon">
-          <i
-            class="fa fa-folder"
-            aria-hidden="true">
-          </i>
-        </span>
+        <icon
+          :name="folderIconName"
+          class="folder-icon"
+        />
+        <icon
+          name="folder"
+          class="folder-icon"
+        />
         <span>
           {{ model.folderName }}

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

 <script>
 import _ from 'underscore';
 import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import frequentItemsMixin from './frequent_items_mixin';
 export default {
+  components: {
+    Icon,
+  },
   mixins: [frequentItemsMixin],
   data() {
     return {
@@ -45,11 +49,10 @@ export default {
       type="search"
       class="form-control"
     />
-    <i
+    <icon
       v-if="!searchQuery"
-      class="search-icon fa fa-fw fa-search"
-      aria-hidden="true"
-    >
-    </i>
+      name="search"
+      class="search-icon"
+    />
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/form.vue

@@ -117,7 +117,7 @@ export default {
         <button
           :disabled="!hasChanges"
           type="button"
-          class="btn btn-primary btn-sm btn-block"
+          class="btn btn-primary btn-sm btn-block qa-begin-commit-button"
           @click="toggleIsSmall"
         >
           {{ __('Commit…') }}
@@ -147,7 +147,7 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :label="commitButtonText"
-            container-class="btn btn-success btn-sm float-left"
+            container-class="btn btn-success btn-sm float-left qa-commit-button"
             @click="commitChanges"
           />
           <button

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -38,14 +38,18 @@ export default {
       return this.modifiedFilesLength ? 'multi-file-modified' : '';
     },
     additionsTooltip() {
-      return sprintf(n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength), {
-        type: this.title.toLowerCase(),
-        count: this.addedFilesLength,
-      });
+      return sprintf(
+        n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength),
+        {
+          type: this.title.toLowerCase(),
+          count: this.addedFilesLength,
+        },
+      );
     },
     modifiedTooltip() {
       return sprintf(
-        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength), {
+        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength),
+        {
           type: this.title.toLowerCase(),
           count: this.modifiedFilesLength,
         },

app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue

@@ -25,10 +25,7 @@ export default {
       return `discard-file-${this.path}`;
     },
     modalTitle() {
-      return sprintf(
-        __('Discard changes to %{path}?'),
-        { path: this.path },
-      );
+      return sprintf(__('Discard changes to %{path}?'), { path: this.path });
     },
   },
   methods: {

app/assets/javascripts/ide/components/file_templates/bar.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 <template>
-  <div class="d-flex align-items-center ide-file-templates">
+  <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
     <strong class="append-right-default">
       {{ __('File templates') }}
     </strong>
@@ -63,7 +63,7 @@ export default {
       :is-async-data="true"
       :searchable="true"
       :title="__('File templates')"
-      class="mr-2"
+      class="mr-2 qa-file-template-dropdown"
       @click="selectTemplate"
     />
     <transition name="fade">

app/assets/javascripts/ide/components/file_templates/dropdown.vue

@@ -92,7 +92,7 @@ export default {
           v-model="search"
           :placeholder="__('Filter...')"
           type="search"
-          class="dropdown-input-field"
+          class="dropdown-input-field qa-dropdown-filter-input"
         />
         <i
           aria-hidden="true"

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -24,13 +24,7 @@ export default {
     IdeProjectHeader,
   },
   computed: {
-    ...mapState([
-      'loading',
-      'currentActivityView',
-      'changedFiles',
-      'stagedFiles',
-      'lastCommitMsg',
-    ]),
+    ...mapState(['loading', 'currentActivityView', 'changedFiles', 'stagedFiles', 'lastCommitMsg']),
     ...mapGetters(['currentProject', 'someUncommitedChanges']),
     showSuccessMessage() {
       return (

app/assets/javascripts/ide/components/ide_tree.vue

@@ -45,7 +45,7 @@ export default {
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3"
+          class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
           @click="openNewEntryModal({ type: 'blob' })"
         />

app/assets/javascripts/ide/components/ide_tree_list.vue

@@ -43,7 +43,7 @@ export default {
 <template>
   <div
-    class="ide-file-list"
+    class="ide-file-list qa-file-list"
   >
     <template v-if="showLoading">
       <div

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -37,14 +37,10 @@ export default {
       return this.hasSearchFocus && !this.search && !this.currentSearchType;
     },
     type() {
-      return this.currentSearchType
-        ? this.currentSearchType.type
-        : '';
+      return this.currentSearchType ? this.currentSearchType.type : '';
     },
     searchTokens() {
-      return this.currentSearchType
-        ? [this.currentSearchType]
-        : [];
+      return this.currentSearchType ? [this.currentSearchType] : [];
     },
   },
   watch: {

app/assets/javascripts/ide/components/nav_dropdown_button.vue

@@ -13,9 +13,7 @@ export default {
   computed: {
     ...mapState(['currentBranchId', 'currentMergeRequestId']),
     mergeRequestLabel() {
-      return this.currentMergeRequestId
-        ? `!${this.currentMergeRequestId}`
-        : EMPTY_LABEL;
+      return this.currentMergeRequestId ? `!${this.currentMergeRequestId}` : EMPTY_LABEL;
     },
     branchLabel() {
       return this.currentBranchId || EMPTY_LABEL;

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -110,12 +110,12 @@ export default {
           ref="fieldName"
           v-model="entryName"
           type="text"
-          class="form-control"
+          class="form-control qa-full-file-path"
           placeholder="/dir/file_name"
         />
         <ul
           v-if="isCreatingNew"
-          class="prepend-top-default list-inline"
+          class="prepend-top-default list-inline qa-template-list"
         >
           <li
             v-for="(template, index) in templateTypes"