Add latest changes from gitlab-org/gitlab@master

10 files changed, 136 insertions, 36 deletions

diff --git a/app/assets/javascripts/confirm_modal.js b/app/assets/javascripts/confirm_modal.js
new file mode 100644
index 00000000000..1c9346e35e0
--- /dev/null
+++ b/app/assets/javascripts/confirm_modal.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import ConfirmModal from '~/vue_shared/components/confirm_modal.vue';
+
+const mountConfirmModal = button => {
+  const props = {
+    path: button.dataset.path,
+    method: button.dataset.method,
+    modalAttributes: JSON.parse(button.dataset.modalAttributes),
+  };
+
+  return new Vue({
+    render(h) {
+      return h(ConfirmModal, { props });
+    },
+  }).$mount();
+};
+
+export default () => {
+  document.getElementsByClassName('js-confirm-modal-button').forEach(button => {
+    button.addEventListener('click', e => {
+      e.preventDefault();
+
+      mountConfirmModal(button);
+    });
+  });
+};
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 86590865892..0e2dd59092a 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -259,8 +259,15 @@ export default function dropzoneInput(form) {
 
   const insertToTextArea = (filename, url) => {
     const $child = $(child);
-    $child.val((index, val) => val.replace(`{{${filename}}}`, url));
-
+    const textarea = $child.get(0);
+    const caretStart = textarea.selectionStart;
+    const caretEnd = textarea.selectionEnd;
+    const formattedText = `{{${filename}}}`;
+    $child.val((index, val) => val.replace(formattedText, url));
+    textarea.setSelectionRange(
+      caretStart - formattedText.length + url.length,
+      caretEnd - formattedText.length + url.length,
+    );
     $child.trigger('change');
   };
 
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index fd9a13be18b..ad8095e1ae3 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -175,6 +175,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
   function addTimeAgoTooltip() {
     $timeagoEls.each((i, el) => {
       // Recreate with custom template
+      el.setAttribute('title', formatDate(el.dateTime));
       $(el).tooltip({
         template:
           '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 2aa5f6ec626..9cbda324aff 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -169,6 +169,10 @@ const bindEvents = () => {
         text: s__('ProjectTemplates|Go Micro'),
         icon: '.template-option .icon-gomicro',
       },
+      gatsby: {
+        text: s__('ProjectTemplates|Pages/Gatsby'),
+        icon: '.template-option .icon-gatsby',
+      },
       hugo: {
         text: s__('ProjectTemplates|Pages/Hugo'),
         icon: '.template-option .icon-hugo',
diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_modal.vue
new file mode 100644
index 00000000000..21722f62133
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/confirm_modal.vue
@@ -0,0 +1,63 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    modalAttributes: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    method: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isDismissed: false,
+    };
+  },
+  mounted() {
+    this.openModal();
+  },
+  methods: {
+    openModal() {
+      this.$refs.modal.show();
+    },
+    submitModal() {
+      this.$refs.form.requestSubmit();
+    },
+    dismiss() {
+      this.isDismissed = true;
+    },
+  },
+  csrf,
+};
+</script>
+
+<template>
+  <gl-modal
+    v-if="!isDismissed"
+    ref="modal"
+    v-bind="modalAttributes"
+    @primary="submitModal"
+    @canceled="dismiss"
+  >
+    <form ref="form" :action="path" method="post">
+      <!-- Rails workaround for <form method="delete" />
+      https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/features/method.coffee
+      -->
+      <input type="hidden" name="_method" :value="method" />
+      <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+      <div>{{ modalAttributes.message }}</div>
+    </form>
+  </gl-modal>
+</template>
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index db1b8c559e5..81e910f91c2 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -17,12 +17,6 @@
       .tree-controls {
         text-align: right;
 
-        > .btn,
-        .project-action-button > .btn,
-        .git-clone-holder > .btn {
-          margin-left: 8px;
-        }
-
         .control {
           float: left;
           margin-left: 10px;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 0fd6aafef0d..e27ec571531 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -45,6 +45,12 @@
 .border-bottom-color-default { border-bottom-color: $border-color; }
 .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
 
+.gl-children-ml-sm-3 > * {
+  @include media-breakpoint-up(sm) {
+    @include gl-ml-3;
+  }
+}
+
 .mh-50vh { max-height: 50vh; }
 
 .font-size-inherit { font-size: inherit; }
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index e611df8df2a..810c8b9082f 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -17,7 +17,7 @@
           - else
             = link_to title, project_tree_path(@project, tree_join(@ref, path))
 
-  .tree-controls<
+  .tree-controls.gl-children-ml-sm-3<
     = render 'projects/find_file_link'
     -# only show normal/blame view links for text files
     - if blob.readable_text?
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 407de590efb..7de7dd3b98b 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -29,8 +29,7 @@
           ":title" => "buttonText",
           ":ref" => "'button'" }
 
-        = icon('spin spinner', 'v-if' => 'loading', class: 'loading', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-        %div{ 'v-else' => '' }
+        %div
           %template{ 'v-if' => 'isResolved' }
             = render 'shared/icons/icon_status_success_solid.svg'
           %template{ 'v-else' => '' }
@@ -40,7 +39,6 @@
   - if note.emoji_awardable?
     .note-actions-item
       = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn btn-transparent", data: { position: 'right', container: 'body' } do
-        = icon('spinner spin')
         %span{ class: 'link-highlight award-control-icon-neutral' }= sprite_icon('slight-smile')
         %span{ class: 'link-highlight award-control-icon-positive' }= sprite_icon('smiley')
         %span{ class: 'link-highlight award-control-icon-super-positive' }= sprite_icon('smile')
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 4d3c24aee6b..d5f7673488f 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -75,34 +75,35 @@
                     = link_to new_project_tag_path(@project) do
                       #{ _('New tag') }
 
-.tree-controls{ class: ("gl-font-size-0" if vue_file_list_enabled?) }<
-  = render_if_exists 'projects/tree/lock_link'
-  - if vue_file_list_enabled?
-    #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
-  - else
-    = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
-
-  = render 'projects/find_file_link'
-
-  - if can_collaborate || current_user&.already_forked?(@project)
+.tree-controls
+  .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3<
+    = render_if_exists 'projects/tree/lock_link'
     - if vue_file_list_enabled?
-      #js-tree-web-ide-link.d-inline-block
+      #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
     - else
-      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
+      = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
+
+    = render 'projects/find_file_link'
+
+    - if can_collaborate || current_user&.already_forked?(@project)
+      - if vue_file_list_enabled?
+        #js-tree-web-ide-link.d-inline-block
+      - else
+        = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default qa-web-ide-button' do
+          = _('Web IDE')
+    - elsif can_create_mr_from_fork
+      = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
         = _('Web IDE')
-  - elsif can_create_mr_from_fork
-    = link_to '#modal-confirm-fork', class: 'btn btn-default qa-web-ide-button', data: { target: '#modal-confirm-fork', toggle: 'modal'} do
-      = _('Web IDE')
-    = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path)
+      = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path)
 
-  - if show_xcode_link?(@project)
-    .project-action-button.project-xcode.inline<
-      = render "projects/buttons/xcode_link"
+    - if show_xcode_link?(@project)
+      .project-action-button.project-xcode.inline<
+        = render "projects/buttons/xcode_link"
 
-  = render 'projects/buttons/download', project: @project, ref: @ref
+    = render 'projects/buttons/download', project: @project, ref: @ref
 
-  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0>
-    = render "shared/mobile_clone_panel"
+    .project-clone-holder.d-none.d-md-inline-block>
+      = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
 
-  .project-clone-holder.d-none.d-md-inline-block>
-    = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
+  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0.ml-sm-2>
+    = render "shared/mobile_clone_panel"