Add latest changes from gitlab-org/gitlab@master

14 files changed, 138 insertions, 302 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
index 0f971573507..46f6f4a28c1 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
@@ -104,12 +104,16 @@ export default {
     class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-white-space-nowrap gl-max-w-full"
   >
     <template v-if="showLoadingState">
-      <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
-      <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span>
+      <div>
+        <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
+        <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span>
+      </div>
     </template>
     <template v-else-if="hasError">
-      <gl-icon class="gl-mr-auto" name="warning-solid" />
-      <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
+      <div>
+        <gl-icon class="gl-mr-auto" name="warning-solid" />
+        <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
+      </div>
     </template>
     <template v-else>
       <div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index d343ba700ab..3ed9de6c133 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
@@ -10,7 +10,6 @@ import ToolbarButton from './toolbar_button.vue';
 export default {
   components: {
     ToolbarButton,
-    GlIcon,
     GlPopover,
     GlButton,
   },
@@ -46,6 +45,7 @@ export default {
   data() {
     return {
       tag: '> ',
+      suggestPopoverVisible: false,
     };
   },
   computed: {
@@ -76,15 +76,27 @@ export default {
       return this.isMac ? '⌘' : s__('KeyboardKey|Ctrl+');
     },
   },
+  watch: {
+    showSuggestPopover() {
+      this.updateSuggestPopoverVisibility();
+    },
+  },
   mounted() {
     $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
     $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
+
+    this.updateSuggestPopoverVisibility();
   },
   beforeDestroy() {
     $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
     $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
   },
   methods: {
+    async updateSuggestPopoverVisibility() {
+      await this.$nextTick();
+
+      this.suggestPopoverVisible = this.showSuggestPopover && this.canSuggest;
+    },
     isValid(form) {
       return (
         !form ||
@@ -153,127 +165,114 @@ export default {
         </button>
       </li>
       <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
-        <div class="d-inline-block">
-          <toolbar-button
-            tag="**"
-            :button-title="
-              sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
-            "
-            :shortcuts="$options.shortcuts.bold"
-            icon="bold"
-          />
-          <toolbar-button
-            tag="_"
-            :button-title="
-              sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
-            "
-            :shortcuts="$options.shortcuts.italic"
-            icon="italic"
-          />
+        <toolbar-button
+          tag="**"
+          :button-title="
+            sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
+          "
+          :shortcuts="$options.shortcuts.bold"
+          icon="bold"
+        />
+        <toolbar-button
+          tag="_"
+          :button-title="
+            sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
+          "
+          :shortcuts="$options.shortcuts.italic"
+          icon="italic"
+        />
+        <toolbar-button
+          :prepend="true"
+          :tag="tag"
+          :button-title="__('Insert a quote')"
+          icon="quote"
+          @click="handleQuote"
+        />
+        <template v-if="canSuggest">
           <toolbar-button
+            ref="suggestButton"
+            :tag="mdSuggestion"
             :prepend="true"
-            :tag="tag"
-            :button-title="__('Insert a quote')"
-            icon="quote"
-            @click="handleQuote"
+            :button-title="__('Insert suggestion')"
+            :cursor-offset="4"
+            :tag-content="lineContent"
+            icon="doc-code"
+            data-qa-selector="suggestion_button"
+            class="js-suggestion-btn"
+            @click="handleSuggestDismissed"
           />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
-          <template v-if="canSuggest">
-            <toolbar-button
-              ref="suggestButton"
-              :tag="mdSuggestion"
-              :prepend="true"
-              :button-title="__('Insert suggestion')"
-              :cursor-offset="4"
-              :tag-content="lineContent"
-              icon="doc-code"
-              data-qa-selector="suggestion_button"
-              class="js-suggestion-btn"
+          <gl-popover
+            v-if="suggestPopoverVisible"
+            :target="$refs.suggestButton.$el"
+            :css-classes="['diff-suggest-popover']"
+            placement="bottom"
+            :show="suggestPopoverVisible"
+          >
+            <strong>{{ __('New! Suggest changes directly') }}</strong>
+            <p class="mb-2">
+              {{
+                __(
+                  'Suggest code changes which can be immediately applied in one click. Try it out!',
+                )
+              }}
+            </p>
+            <gl-button
+              variant="info"
+              category="primary"
+              size="small"
               @click="handleSuggestDismissed"
-            />
-            <gl-popover
-              v-if="showSuggestPopover && $refs.suggestButton"
-              :target="$refs.suggestButton"
-              :css-classes="['diff-suggest-popover']"
-              placement="bottom"
-              :show="showSuggestPopover"
             >
-              <strong>{{ __('New! Suggest changes directly') }}</strong>
-              <p class="mb-2">
-                {{
-                  __(
-                    'Suggest code changes which can be immediately applied in one click. Try it out!',
-                  )
-                }}
-              </p>
-              <gl-button
-                variant="info"
-                category="primary"
-                size="sm"
-                @click="handleSuggestDismissed"
-              >
-                {{ __('Got it') }}
-              </gl-button>
-            </gl-popover>
-          </template>
-          <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
-          <toolbar-button
-            tag="[{text}](url)"
-            tag-select="url"
-            :button-title="
-              sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
-            "
-            :shortcuts="$options.shortcuts.link"
-            icon="link"
-          />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
-          <toolbar-button
-            :prepend="true"
-            tag="- "
-            :button-title="__('Add a bullet list')"
-            icon="list-bulleted"
-          />
-          <toolbar-button
-            :prepend="true"
-            tag="1. "
-            :button-title="__('Add a numbered list')"
-            icon="list-numbered"
-          />
-          <toolbar-button
-            :prepend="true"
-            tag="- [ ] "
-            :button-title="__('Add a task list')"
-            icon="list-task"
-          />
-          <toolbar-button
-            :tag="mdCollapsibleSection"
-            :prepend="true"
-            tag-select="Click to expand"
-            :button-title="__('Add a collapsible section')"
-            icon="details-block"
-          />
-          <toolbar-button
-            :tag="mdTable"
-            :prepend="true"
-            :button-title="__('Add a table')"
-            icon="table"
-          />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
-          <button
-            v-gl-tooltip
-            :aria-label="__('Go full screen')"
-            class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
-            data-container="body"
-            tabindex="-1"
-            :title="__('Go full screen')"
-            type="button"
-          >
-            <gl-icon name="maximize" />
-          </button>
-        </div>
+              {{ __('Got it') }}
+            </gl-button>
+          </gl-popover>
+        </template>
+        <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
+        <toolbar-button
+          tag="[{text}](url)"
+          tag-select="url"
+          :button-title="
+            sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
+          "
+          :shortcuts="$options.shortcuts.link"
+          icon="link"
+        />
+        <toolbar-button
+          :prepend="true"
+          tag="- "
+          :button-title="__('Add a bullet list')"
+          icon="list-bulleted"
+        />
+        <toolbar-button
+          :prepend="true"
+          tag="1. "
+          :button-title="__('Add a numbered list')"
+          icon="list-numbered"
+        />
+        <toolbar-button
+          :prepend="true"
+          tag="- [ ] "
+          :button-title="__('Add a task list')"
+          icon="list-task"
+        />
+        <toolbar-button
+          :tag="mdCollapsibleSection"
+          :prepend="true"
+          tag-select="Click to expand"
+          :button-title="__('Add a collapsible section')"
+          icon="details-block"
+        />
+        <toolbar-button
+          :tag="mdTable"
+          :prepend="true"
+          :button-title="__('Add a table')"
+          icon="table"
+        />
+        <toolbar-button
+          class="js-zen-enter"
+          :prepend="true"
+          :button-title="__('Go full screen')"
+          icon="maximize"
+        />
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 6c35741e7e5..2f8481cd064 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
-    GlIcon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -19,7 +19,8 @@ export default {
     },
     tag: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     tagBlock: {
       type: String,
@@ -71,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <button
+  <gl-button
     v-gl-tooltip
     :data-md-tag="tag"
     :data-md-cursor-offset="cursorOffset"
@@ -82,11 +83,11 @@ export default {
     :data-md-shortcuts="shortcutsString"
     :title="buttonTitle"
     :aria-label="buttonTitle"
+    :icon="icon"
     type="button"
+    category="tertiary"
     class="toolbar-btn js-md"
     data-container="body"
     @click="() => $emit('click')"
-  >
-    <gl-icon :name="icon" />
-  </button>
+  />
 </template>
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 2a97009e605..506c1b91417 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -83,6 +83,7 @@
   li.md-header-toolbar {
     margin-left: auto;
     display: none;
+    padding-bottom: $gl-padding-8;
 
     &.active {
       display: block;
@@ -91,9 +92,9 @@
         flex: none;
         display: flex;
         justify-content: center;
+        flex-wrap: wrap;
+        margin-top: $gl-padding-8;
         width: 100%;
-        padding-top: $gl-padding-top;
-        padding-bottom: $gl-padding-top;
       }
     }
   }
@@ -131,36 +132,6 @@
   width: 100%;
 }
 
-.toolbar-btn {
-  float: left;
-  padding: 0 7px;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  svg {
-    width: 14px;
-    height: 14px;
-    vertical-align: middle;
-    fill: $gl-text-color-secondary;
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      fill: $blue-600;
-    }
-  }
-}
-
-.toolbar-fullscreen-btn {
-  margin-right: -5px;
-
-  @include media-breakpoint-down(xs) {
-    margin-right: 0;
-  }
-}
-
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index f904ef11f5b..06eebb95438 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -14,7 +14,6 @@
     a,
     button {
       padding: $gl-padding-8;
-      padding-bottom: $gl-padding-8 + 1;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index c025d8569a7..dbbbaac9e5a 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -54,7 +54,7 @@
 
 .common-note-form {
   .md-area {
-    padding: $gl-padding-top $gl-padding;
+    padding: $gl-padding-8 $gl-padding;
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
@@ -323,7 +323,7 @@ table {
 }
 
 .comment-toolbar {
-  padding-top: $gl-padding-top;
+  padding-top: $gl-padding-8;
   color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
diff --git a/app/controllers/admin/clusters/applications_controller.rb b/app/controllers/admin/clusters/applications_controller.rb
deleted file mode 100644
index 7400cc16175..00000000000
--- a/app/controllers/admin/clusters/applications_controller.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-class Admin::Clusters::ApplicationsController < Clusters::ApplicationsController
-  include EnforcesAdminAuthentication
-
-  private
-
-  def clusterable
-    @clusterable ||= InstanceClusterablePresenter.fabricate(Clusters::Instance.new, current_user: current_user)
-  end
-end
diff --git a/app/controllers/clusters/applications_controller.rb b/app/controllers/clusters/applications_controller.rb
deleted file mode 100644
index 91003e9580d..00000000000
--- a/app/controllers/clusters/applications_controller.rb
+++ /dev/null
@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-class Clusters::ApplicationsController < Clusters::BaseController
-  before_action :cluster
-  before_action :authorize_create_cluster!, only: [:create]
-  before_action :authorize_update_cluster!, only: [:update]
-  before_action :authorize_admin_cluster!, only: [:destroy]
-
-  def create
-    request_handler do
-      Clusters::Applications::CreateService
-        .new(@cluster, current_user, cluster_application_params)
-        .execute(request)
-    end
-  end
-
-  def update
-    request_handler do
-      Clusters::Applications::UpdateService
-        .new(@cluster, current_user, cluster_application_params)
-        .execute(request)
-    end
-  end
-
-  def destroy
-    request_handler do
-      Clusters::Applications::DestroyService
-        .new(@cluster, current_user, cluster_application_destroy_params)
-        .execute(request)
-    end
-  end
-
-  private
-
-  def request_handler
-    yield
-
-    head :no_content
-  rescue Clusters::Applications::BaseService::InvalidApplicationError
-    render_404
-  rescue StandardError
-    head :bad_request
-  end
-
-  def cluster
-    @cluster ||= clusterable.clusters.find(params[:id]) || render_404
-  end
-
-  def cluster_application_params
-    params.permit(:application, :hostname, :pages_domain_id, :email, :stack, :host, :port, :protocol)
-  end
-
-  def cluster_application_destroy_params
-    params.permit(:application)
-  end
-end
diff --git a/app/controllers/groups/clusters/applications_controller.rb b/app/controllers/groups/clusters/applications_controller.rb
deleted file mode 100644
index ce6fda4143c..00000000000
--- a/app/controllers/groups/clusters/applications_controller.rb
+++ /dev/null
@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class Groups::Clusters::ApplicationsController < Clusters::ApplicationsController
-  include ControllerWithCrossProjectAccessCheck
-
-  prepend_before_action :group
-  requires_cross_project_access
-
-  private
-
-  def clusterable
-    @clusterable ||= ClusterablePresenter.fabricate(group, current_user: current_user)
-  end
-
-  def group
-    @group ||= find_routable!(Group, params[:group_id] || params[:id], request.path_info)
-  end
-end
diff --git a/app/controllers/projects/clusters/applications_controller.rb b/app/controllers/projects/clusters/applications_controller.rb
deleted file mode 100644
index 6c5778124e8..00000000000
--- a/app/controllers/projects/clusters/applications_controller.rb
+++ /dev/null
@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-class Projects::Clusters::ApplicationsController < Clusters::ApplicationsController
-  prepend_before_action :project
-
-  private
-
-  def clusterable
-    @clusterable ||= ClusterablePresenter.fabricate(project, current_user: current_user)
-  end
-
-  def project
-    @project ||= find_routable!(Project, File.join(params[:namespace_id], params[:project_id]), request.path_info)
-  end
-end
diff --git a/app/presenters/clusterable_presenter.rb b/app/presenters/clusterable_presenter.rb
index a316793dae9..03e26b92922 100644
--- a/app/presenters/clusterable_presenter.rb
+++ b/app/presenters/clusterable_presenter.rb
@@ -48,14 +48,6 @@ class ClusterablePresenter < Gitlab::View::Presenter::Delegated
     raise NotImplementedError
   end
 
-  def install_applications_cluster_path(cluster, application)
-    raise NotImplementedError
-  end
-
-  def update_applications_cluster_path(cluster, application)
-    raise NotImplementedError
-  end
-
   def clear_cluster_cache_path(cluster)
     raise NotImplementedError
   end
diff --git a/app/presenters/group_clusterable_presenter.rb b/app/presenters/group_clusterable_presenter.rb
index adbe20517be..34e7084ab02 100644
--- a/app/presenters/group_clusterable_presenter.rb
+++ b/app/presenters/group_clusterable_presenter.rb
@@ -9,16 +9,6 @@ class GroupClusterablePresenter < ClusterablePresenter
     cluster_status_group_cluster_path(clusterable, cluster, params)
   end
 
-  override :install_applications_cluster_path
-  def install_applications_cluster_path(cluster, application)
-    install_applications_group_cluster_path(clusterable, cluster, application)
-  end
-
-  override :update_applications_cluster_path
-  def update_applications_cluster_path(cluster, application)
-    update_applications_group_cluster_path(clusterable, cluster, application)
-  end
-
   override :clear_cluster_cache_path
   def clear_cluster_cache_path(cluster)
     clear_cache_group_cluster_path(clusterable, cluster)
diff --git a/app/presenters/instance_clusterable_presenter.rb b/app/presenters/instance_clusterable_presenter.rb
index 84b3328b37f..56d91f90b2e 100644
--- a/app/presenters/instance_clusterable_presenter.rb
+++ b/app/presenters/instance_clusterable_presenter.rb
@@ -27,16 +27,6 @@ class InstanceClusterablePresenter < ClusterablePresenter
     cluster_status_admin_cluster_path(cluster, params)
   end
 
-  override :install_applications_cluster_path
-  def install_applications_cluster_path(cluster, application)
-    install_applications_admin_cluster_path(cluster, application)
-  end
-
-  override :update_applications_cluster_path
-  def update_applications_cluster_path(cluster, application)
-    update_applications_admin_cluster_path(cluster, application)
-  end
-
   override :clear_cluster_cache_path
   def clear_cluster_cache_path(cluster)
     clear_cache_admin_cluster_path(cluster)
diff --git a/app/presenters/project_clusterable_presenter.rb b/app/presenters/project_clusterable_presenter.rb
index 1c5f11ffe59..920304e743e 100644
--- a/app/presenters/project_clusterable_presenter.rb
+++ b/app/presenters/project_clusterable_presenter.rb
@@ -9,16 +9,6 @@ class ProjectClusterablePresenter < ClusterablePresenter
     cluster_status_project_cluster_path(clusterable, cluster, params)
   end
 
-  override :install_applications_cluster_path
-  def install_applications_cluster_path(cluster, application)
-    install_applications_project_cluster_path(clusterable, cluster, application)
-  end
-
-  override :update_applications_cluster_path
-  def update_applications_cluster_path(cluster, application)
-    update_applications_project_cluster_path(clusterable, cluster, application)
-  end
-
   override :clear_cluster_cache_path
   def clear_cluster_cache_path(cluster)
     clear_cache_project_cluster_path(clusterable, cluster)