Add latest changes from gitlab-org/gitlab@13-2-stable-ee

7 files changed, 86 insertions, 30 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 09acfd1cfae..bcf5dc2aaaf 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -420,7 +420,7 @@ export default {
         <transition name="issuable-header-slide">
           <div
             v-if="shouldShowStickyHeader"
-            class="issue-sticky-header gl-fixed gl-z-index-2 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-200 gl-py-3"
+            class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-100 gl-py-3"
             data-testid="issue-sticky-header"
           >
             <div
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 588ae655de4..4ee44e50d2f 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <div class="prepend-top-default append-bottom-default clearfix">
+  <div class="gl-mt-3 gl-mb-3 clearfix">
     <button
       :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
       :disabled="formState.updateLoading || !isSubmitEnabled"
@@ -81,7 +81,7 @@ export default {
       v-if="shouldShowDeleteButton"
       :class="{ disabled: deleteLoading }"
       :disabled="deleteLoading"
-      class="btn btn-danger float-right append-right-default qa-delete-button"
+      class="btn btn-danger float-right gl-mr-3 qa-delete-button"
       type="button"
       @click="deleteIssuable"
     >
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 35165c9b481..0de0060615b 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -55,7 +55,7 @@ export default {
           class="note-textarea js-gfm-input js-autosize markdown-area
           qa-description-textarea"
           dir="auto"
-          data-supports-quick-actions="false"
+          data-supports-quick-actions="true"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"
           @keydown.meta.enter="updateIssuable"
diff --git a/app/assets/javascripts/issue_show/components/issuable_header_warnings.vue b/app/assets/javascripts/issue_show/components/issuable_header_warnings.vue
new file mode 100644
index 00000000000..b6816be9eb8
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/issuable_header_warnings.vue
@@ -0,0 +1,28 @@
+<script>
+import { mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  computed: {
+    ...mapState({
+      confidential: ({ noteableData }) => noteableData.confidential,
+      dicussionLocked: ({ noteableData }) => noteableData.discussion_locked,
+    }),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-inline-block">
+    <div v-if="confidential" class="issuable-warning-icon inline">
+      <icon class="icon" name="eye-slash" data-testid="confidential" />
+    </div>
+
+    <div v-if="dicussionLocked" class="issuable-warning-icon inline">
+      <icon class="icon" name="lock" data-testid="locked" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/pinned_links.vue b/app/assets/javascripts/issue_show/components/pinned_links.vue
index 4b50acceb62..a877aa2ac96 100644
--- a/app/assets/javascripts/issue_show/components/pinned_links.vue
+++ b/app/assets/javascripts/issue_show/components/pinned_links.vue
@@ -1,11 +1,10 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton } from '@gitlab/ui';
+import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '../constants';
 
 export default {
   components: {
-    Icon,
-    GlLink,
+    GlButton,
   },
   props: {
     zoomMeetingUrl: {
@@ -19,32 +18,46 @@ export default {
       default: '',
     },
   },
+  computed: {
+    pinnedLinks() {
+      return [
+        {
+          id: 'publishedIncidentUrl',
+          url: this.publishedIncidentUrl,
+          text: STATUS_PAGE_PUBLISHED,
+          icon: 'tanuki',
+        },
+        {
+          id: 'zoomMeetingUrl',
+          url: this.zoomMeetingUrl,
+          text: JOIN_ZOOM_MEETING,
+          icon: 'brand-zoom',
+        },
+      ];
+    },
+  },
+  methods: {
+    needsPaddingClass(i) {
+      return i < this.pinnedLinks.length - 1;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="border-bottom gl-mb-6 gl-display-flex gl-justify-content-start">
-    <div v-if="publishedIncidentUrl" class="gl-pr-3">
-      <gl-link
-        :href="publishedIncidentUrl"
-        target="_blank"
-        class="btn btn-inverted btn-secondary btn-sm text-dark mb-3"
-        data-testid="publishedIncidentUrl"
-      >
-        <icon name="tanuki" :size="14" />
-        <strong class="vertical-align-top">{{ __('Published on status page') }}</strong>
-      </gl-link>
-    </div>
-    <div v-if="zoomMeetingUrl">
-      <gl-link
-        :href="zoomMeetingUrl"
-        target="_blank"
-        class="btn btn-inverted btn-secondary btn-sm text-dark mb-3"
-        data-testid="zoomMeetingUrl"
-      >
-        <icon name="brand-zoom" :size="14" />
-        <strong class="vertical-align-top">{{ __('Join Zoom meeting') }}</strong>
-      </gl-link>
-    </div>
+    <template v-for="(link, i) in pinnedLinks">
+      <div v-if="link.url" :key="link.id" :class="{ 'gl-pr-3': needsPaddingClass(i) }">
+        <gl-button
+          :href="link.url"
+          target="_blank"
+          :icon="link.icon"
+          size="small"
+          class="gl-font-weight-bold gl-mb-5"
+          :data-testid="link.id"
+          >{{ link.text }}</gl-button
+        >
+      </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/constants.js b/app/assets/javascripts/issue_show/constants.js
index d73cc8cf007..6bc6ed2b372 100644
--- a/app/assets/javascripts/issue_show/constants.js
+++ b/app/assets/javascripts/issue_show/constants.js
@@ -15,3 +15,6 @@ export const IssuableType = {
   Epic: 'epic',
   MergeRequest: 'merge_request',
 };
+
+export const STATUS_PAGE_PUBLISHED = __('Published on status page');
+export const JOIN_ZOOM_MEETING = __('Join Zoom meeting');
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index e170d338408..fe4ff133145 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import issuableApp from './components/app.vue';
+import IssuableHeaderWarnings from './components/issuable_header_warnings.vue';
 import { parseIssuableData } from './utils/parse_data';
+import { store } from '~/notes/stores';
 
 export default function initIssueableApp() {
   return new Vue({
@@ -15,3 +17,13 @@ export default function initIssueableApp() {
     },
   });
 }
+
+export function issuableHeaderWarnings() {
+  return new Vue({
+    el: document.getElementById('js-issuable-header-warnings'),
+    store,
+    render(createElement) {
+      return createElement(IssuableHeaderWarnings);
+    },
+  });
+}