Add latest changes from gitlab-org/gitlab@master

7 files changed, 83 insertions, 5 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue
new file mode 100644
index 00000000000..e9b5ceda479
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_edit_header.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlFormInput } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormInput,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      name: this.value,
+    };
+  },
+};
+</script>
+<template>
+  <div class="js-file-title file-title-flex-parent">
+    <gl-form-input
+      id="snippet_file_name"
+      v-model="name"
+      :placeholder="
+        s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+      "
+      name="snippet_file_name"
+      class="form-control js-snippet-file-name qa-snippet-file-name"
+      type="text"
+      @change="$emit('input', name)"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index c7c5e0e20f1..012a4f4ad89 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -63,7 +63,9 @@ export default {
 
   methods: {
     toggleForm() {
-      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
+      if (this.isEditable) {
+        this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
+      }
     },
     updateLockedAttribute(locked) {
       this.mediator.service
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
new file mode 100644
index 00000000000..8cc68f6ea9a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
@@ -0,0 +1,7 @@
+query ($fullPath: ID!, $iid: String!) {
+  project (fullPath: $fullPath) {
+    issue (iid: $iid) {
+      iid
+    }
+  }
+}
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql
new file mode 100644
index 00000000000..8cc68f6ea9a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql
@@ -0,0 +1,7 @@
+query ($fullPath: ID!, $iid: String!) {
+  project (fullPath: $fullPath) {
+    issue (iid: $iid) {
+      iid
+    }
+  }
+}
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index feb08e3acaf..59d4f6ed388 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -1,4 +1,14 @@
 import axios from '~/lib/utils/axios_utils';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
+import sidebarDetailsQuery from 'ee_else_ce/sidebar/queries/sidebarDetails.query.graphql';
+import sidebarDetailsForHealthStatusFeatureFlagQuery from 'ee_else_ce/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql';
+
+export const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
 
 export default class SidebarService {
   constructor(endpointMap) {
@@ -7,6 +17,8 @@ export default class SidebarService {
       this.toggleSubscriptionEndpoint = endpointMap.toggleSubscriptionEndpoint;
       this.moveIssueEndpoint = endpointMap.moveIssueEndpoint;
       this.projectsAutocompleteEndpoint = endpointMap.projectsAutocompleteEndpoint;
+      this.fullPath = endpointMap.fullPath;
+      this.id = endpointMap.id;
 
       SidebarService.singleton = this;
     }
@@ -15,7 +27,20 @@ export default class SidebarService {
   }
 
   get() {
-    return axios.get(this.endpoint);
+    const hasHealthStatusFeatureFlag = gon.features && gon.features.saveIssuableHealthStatus;
+
+    return Promise.all([
+      axios.get(this.endpoint),
+      gqClient.query({
+        query: hasHealthStatusFeatureFlag
+          ? sidebarDetailsForHealthStatusFeatureFlagQuery
+          : sidebarDetailsQuery,
+        variables: {
+          fullPath: this.fullPath,
+          iid: this.id.toString(),
+        },
+      }),
+    ]);
   }
 
   update(key, data) {
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index ce869a625bf..eb1cf977725 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -19,6 +19,8 @@ export default class SidebarMediator {
       toggleSubscriptionEndpoint: options.toggleSubscriptionEndpoint,
       moveIssueEndpoint: options.moveIssueEndpoint,
       projectsAutocompleteEndpoint: options.projectsAutocompleteEndpoint,
+      fullPath: options.fullPath,
+      id: options.id,
     });
     SidebarMediator.singleton = this;
   }
@@ -45,8 +47,8 @@ export default class SidebarMediator {
   fetch() {
     return this.service
       .get()
-      .then(({ data }) => {
-        this.processFetchedData(data);
+      .then(([restResponse, graphQlResponse]) => {
+        this.processFetchedData(restResponse.data, graphQlResponse.data);
       })
       .catch(() => new Flash(__('Error occurred when fetching sidebar data')));
   }
diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index 8e952fe9358..42da65a941d 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -17,7 +17,7 @@ const initAce = () => {
 const initMonaco = () => {
   const editorEl = document.getElementById('editor');
   const contentEl = document.querySelector('.snippet-file-content');
-  const fileNameEl = document.querySelector('.snippet-file-name');
+  const fileNameEl = document.querySelector('.js-snippet-file-name');
   const form = document.querySelector('.snippet-form-holder form');
 
   editor = new Editor();