Merge branch 'master' into ide-jobs-list-components

21 files changed, 134 insertions, 69 deletions

diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index ae942b2c1a7..5975cb9669e 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -160,7 +160,7 @@ export default {
         @input="debouncedPreview"
       />
       <span
-        class="help-block"
+        class="form-text text-muted"
         v-html="helpText"
       ></span>
     </div>
@@ -176,7 +176,7 @@ export default {
         @input="debouncedPreview"
       />
       <span
-        class="help-block"
+        class="form-text text-muted"
         v-html="helpText"
       ></span>
     </div>
diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index 1cec84706fc..a4e06bbbe3c 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/app/assets/javascripts/ide/components/changed_file_icon.vue
@@ -43,7 +43,7 @@ export default {
       return `${this.changedIcon}-solid`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon} pull-left`;
+      return `multi-${this.changedIcon} float-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 81961fe3c57..705953c86e3 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -144,14 +144,14 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm pull-left"
+            container-class="btn btn-success btn-sm float-left"
             :label="__('Commit')"
             @click="commitChanges"
           />
           <button
             v-if="!discardDraftButtonDisabled"
             type="button"
-            class="btn btn-default btn-sm pull-right"
+            class="btn btn-default btn-sm float-right"
             @click="discardDraft"
           >
             {{ __('Discard draft') }}
@@ -159,7 +159,7 @@ export default {
           <button
             v-else
             type="button"
-            class="btn btn-default btn-sm pull-right"
+            class="btn btn-default btn-sm float-right"
             @click="toggleIsSmall"
           >
             {{ __('Collapse') }}
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index c3ac18bfb83..1325fc993b2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -120,7 +120,7 @@ export default {
     </ul>
     <p
       v-else
-      class="multi-file-commit-list help-block"
+      class="multi-file-commit-list form-text text-muted"
     >
       {{ __('No changes') }}
     </p>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index dcd934f76b7..f14fcdc88ed 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -80,7 +80,7 @@ export default {
             {{ __('Commit Message') }}
             <span
               v-popover="$options.popoverOptions"
-              class="help-block prepend-left-10"
+              class="form-text text-muted prepend-left-10"
             >
               <icon
                 name="question"
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index d83a90f71e1..dd2800179ff 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -72,21 +72,19 @@ export default {
     <form
       slot="body"
       @submit.prevent="createEntryInStore"
-      class="form-group row append-bottom-0"
+      class="form-group row"
     >
-      <fieldset class="form-group append-bottom-0">
-        <label class="label-light col-form-label col-sm-3 ide-new-modal-label">
-          {{ __('Name') }}
-        </label>
-        <div class="col-sm-9">
-          <input
-            type="text"
-            class="form-control"
-            v-model="entryName"
-            ref="fieldName"
-          />
-        </div>
-      </fieldset>
+      <label class="label-light col-form-label col-sm-3">
+        {{ __('Name') }}
+      </label>
+      <div class="col-sm-9">
+        <input
+          type="text"
+          class="form-control"
+          v-model="entryName"
+          ref="fieldName"
+        />
+      </div>
     </form>
   </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 442697e1c80..f56aeced806 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -169,7 +169,7 @@ export default {
             :show-tooltip="true"
             :show-staged-icon="true"
             :force-modified-icon="true"
-            class="pull-right"
+            class="float-right"
           />
         </span>
         <new-dropdown
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 3548c07aea8..bac7d966ecc 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -362,7 +362,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggleClass('hidden', status);
+    $('.mr-loading-status .loading').toggleClass('hidden', !status);
   }
 
   diffViewType() {
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 755a34b7348..06b0ab184ed 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -213,7 +213,7 @@
             </i>
           </div>
         </div>
-        <span class="help-block">{{ visibilityLevelDescription }}</span>
+        <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
         <label
           v-if="visibilityLevel !== visibilityOptions.PRIVATE"
           class="request-access"
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index ca375007ec5..9404b06615e 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -77,10 +77,9 @@ export default class UserTabs {
     this.action = action || this.defaultAction;
     this.$parentEl = $(parentEl) || $(document);
     this.windowLocation = window.location;
-    this.$parentEl.find('.nav-links a')
-      .each((i, navLink) => {
-        this.loaded[$(navLink).attr('data-action')] = false;
-      });
+    this.$parentEl.find('.nav-links a').each((i, navLink) => {
+      this.loaded[$(navLink).attr('data-action')] = false;
+    });
     this.actions = Object.keys(this.loaded);
     this.bindEvents();
 
@@ -116,8 +115,7 @@ export default class UserTabs {
   }
 
   activateTab(action) {
-    return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
-      .tab('show');
+    return this.$parentEl.find(`.nav-links .js-${action}-tab a`).tab('show');
   }
 
   setTab(action, endpoint) {
@@ -137,7 +135,8 @@ export default class UserTabs {
   loadTab(action, endpoint) {
     this.toggleLoading(true);
 
-    return axios.get(endpoint)
+    return axios
+      .get(endpoint)
       .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
@@ -161,10 +160,11 @@ export default class UserTabs {
     const utcOffset = $calendarWrap.data('utcOffset');
     let utcFormatted = 'UTC';
     if (utcOffset !== 0) {
-      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
+      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${utcOffset / 3600}`;
     }
 
-    axios.get(calendarPath)
+    axios
+      .get(calendarPath)
       .then(({ data }) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
         $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
@@ -180,17 +180,20 @@ export default class UserTabs {
   }
 
   toggleLoading(status) {
-    return this.$parentEl.find('.loading-status .loading')
-      .toggleClass('hidden', status);
+    return this.$parentEl.find('.loading-status .loading').toggleClass('hidden', !status);
   }
 
   setCurrentAction(source) {
     let newState = source;
     newState = newState.replace(/\/+$/, '');
     newState += this.windowLocation.search + this.windowLocation.hash;
-    history.replaceState({
-      url: newState,
-    }, document.title, newState);
+    history.replaceState(
+      {
+        url: newState,
+      },
+      document.title,
+      newState,
+    );
     return newState;
   }
 
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index a7a2a7235fd..b37febe523c 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -99,7 +99,7 @@ Please update your Git repository remotes as soon as possible.`),
           :disabled="isRequestPending"
         />
       </div>
-      <p class="help-block">
+      <p class="form-text text-muted">
         {{ path }}
       </p>
     </div>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 6be39702546..ab7d2d41ece 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -132,7 +132,7 @@ export default {
       </div>
     </div>
     <span
-      class="help-block"
+      class="form-text text-muted"
       :class="{ 'gl-field-error': hasErrors }"
       v-if="hasErrors"
     >
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index f813a4625d6..25350ef0fa9 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -193,7 +193,7 @@ export default {
       </div>
     </div>
     <span
-      class="help-block"
+      class="form-text text-muted"
       :class="{ 'gl-field-error': hasErrors }"
       v-html="helpText"
     ></span>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index 0c63ff5dc63..8ee4eefcd91 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -106,7 +106,7 @@ export default {
       </div>
     </div>
     <span
-      class="help-block"
+      class="form-text text-muted"
       :class="{ 'gl-field-error': hasErrors }"
       v-if="hasErrors"
     >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
index 926a3172412..875c3323dbb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -1,15 +1,63 @@
-/*
-The squash-before-merge button is EE only, but it's located right in the middle
-of the readyToMerge state component template.
-
-If we didn't declare this component in CE, we'd need to maintain a separate copy
-of the readyToMergeState template in EE, which is pretty big and likely to change.
-
-Instead, in CE, we declare the component, but it's hidden and is configured to do nothing.
-In EE, the configuration extends this object to add a functioning squash-before-merge
-button.
-*/
-
 <script>
-  export default {};
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    isMergeButtonDisabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      squashBeforeMerge: this.mr.squash,
+    };
+  },
+  methods: {
+    updateSquashModel() {
+      eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
+    },
+  },
+};
 </script>
+
+<template>
+  <div class="accept-control inline">
+    <label class="merge-param-checkbox">
+      <input
+        type="checkbox"
+        name="squash"
+        class="qa-squash-checkbox"
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
+        @change="updateSquashModel"
+      />
+      {{ __('Squash commits') }}
+    </label>
+    <a
+      :href="mr.squashBeforeMergeHelpPath"
+      data-title="About this feature"
+      data-placement="bottom"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      data-container="body"
+      v-tooltip
+    >
+      <icon
+        name="question-o"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 1d1c8ebc179..3a194320bd8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -6,11 +6,13 @@ import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
+import SquashBeforeMerge from './mr_widget_squash_before_merge.vue';
 
 export default {
   name: 'ReadyToMerge',
   components: {
     statusIcon,
+    'squash-before-merge': SquashBeforeMerge,
   },
   props: {
     mr: { type: Object, required: true },
@@ -101,6 +103,12 @@ export default {
       return enableSquashBeforeMerge && commitsCount > 1;
     },
   },
+  created() {
+    eventHub.$on('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
+  beforeDestroy() {
+    eventHub.$off('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
   methods: {
     shouldShowMergeControls() {
       return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
@@ -128,13 +136,9 @@ export default {
         commit_message: this.commitMessage,
         merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
         should_remove_source_branch: this.removeSourceBranch === true,
+        squash: this.mr.squash,
       };
 
-      // Only truthy in EE extension of this component
-      if (this.setAdditionalParams) {
-        this.setAdditionalParams(options);
-      }
-
       this.isMakingRequest = true;
       this.service.merge(options)
         .then(res => res.data)
@@ -154,6 +158,9 @@ export default {
           new Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
+    handleUpdateSquash(val) {
+      this.mr.squash = val;
+    },
     initiateMergePolling() {
       simplePoll((continuePolling, stopPolling) => {
         this.handleMergePolling(continuePolling, stopPolling);
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 83b7b054e6f..e5b7e1f1c68 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -15,6 +15,11 @@ export default class MergeRequestStore {
     const currentUser = data.current_user;
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
 
+    this.squash = data.squash;
+    this.squashBeforeMergeHelpPath = this.squashBeforeMergeHelpPath ||
+      data.squash_before_merge_help_path;
+    this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
+
     this.title = data.title;
     this.targetBranch = data.target_branch;
     this.sourceBranch = data.source_branch;
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 3b7ee5c73e6..e1a47f3d686 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -131,6 +131,10 @@ table {
 }
 
 .card {
+  .card-title {
+    margin-bottom: 0;
+  }
+
   &.card-without-border {
     @extend .border-0;
   }
@@ -147,3 +151,7 @@ table {
 .nav-tabs .nav-link {
   border: 0;
 }
+
+pre code {
+  white-space: pre-wrap;
+}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 17f4958d535..d54490c87c6 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -2,7 +2,7 @@
  * Well styled list
  *
  */
-.card-body-list {
+.hover-list {
   position: relative;
   margin: 0;
   padding: 0;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 06078f1d12e..5d0d59e12f2 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -405,7 +405,7 @@ table.u2f-registrations {
     margin-right: $gl-padding / 4;
   }
 
-  .label-verification-status {
+  .badge-verification-status {
     border-width: 1px;
     border-style: solid;
 
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 2845063e3c5..6bbcb15329c 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -546,7 +546,7 @@
     margin-right: 0;
   }
 
-  &.help-block {
+  &.form-text.text-muted {
     margin-left: 0;
     right: 0;
   }
@@ -962,7 +962,7 @@
     height: 30px;
   }
 
-  .help-block {
+  .form-text.text-muted {
     margin-top: 2px;
     color: $blue-500;
     cursor: pointer;
@@ -1098,10 +1098,6 @@
   font-size: 12px;
 }
 
-.ide-new-modal-label {
-  line-height: 34px;
-}
-
 .multi-file-commit-panel-success-message {
   position: absolute;
   top: 61px;