Add latest changes from gitlab-org/gitlab@master

3 files changed, 24 insertions, 6 deletions

diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
index b2aa5265331..96f187f26dd 100644
--- a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
+++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
@@ -5,6 +5,7 @@ import { formatDate } from '~/lib/utils/datetime_utility';
 export default {
   components: {
     GlLink,
+    IncidentSla: () => import('ee_component/issue_show/components/incidents/incident_sla.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -12,36 +13,51 @@ export default {
   props: {
     alert: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
+  data() {
+    return { childHasData: false };
+  },
   computed: {
     startTime() {
       return formatDate(this.alert.startedAt, 'yyyy-mm-dd Z');
     },
+    showHighlightBar() {
+      return this.alert || this.childHasData;
+    },
+  },
+  methods: {
+    update(hasData) {
+      this.childHasData = hasData;
+    },
   },
 };
 </script>
 
 <template>
   <div
+    v-show="showHighlightBar"
     class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between gl-xs-flex-direction-column"
   >
-    <div class="gl-pr-3">
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span>
       <gl-link v-gl-tooltip :title="alert.title" :href="alert.detailsUrl">
         #{{ alert.iid }}
       </gl-link>
     </div>
 
-    <div class="gl-pr-3">
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span>
       {{ startTime }}
     </div>
 
-    <div>
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span>
       <span>{{ alert.eventCount }}</span>
     </div>
+
+    <incident-sla @update="update" />
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue
index 5925c013e89..19a9c67553a 100644
--- a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue
+++ b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue
@@ -53,7 +53,7 @@ export default {
   <div>
     <gl-tabs content-class="gl-reset-line-height" class="gl-mt-n3" data-testid="incident-tabs">
       <gl-tab :title="s__('Incident|Summary')">
-        <highlight-bar v-if="alert" :alert="alert" />
+        <highlight-bar :alert="alert" />
         <description-component v-bind="$attrs" />
       </gl-tab>
       <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')">
diff --git a/app/assets/javascripts/issue_show/incident.js b/app/assets/javascripts/issue_show/incident.js
index a34e75ee64a..618fb551f28 100644
--- a/app/assets/javascripts/issue_show/incident.js
+++ b/app/assets/javascripts/issue_show/incident.js
@@ -3,6 +3,7 @@ import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import issuableApp from './components/app.vue';
 import incidentTabs from './components/incidents/incident_tabs.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 Vue.use(VueApollo);
 
@@ -11,7 +12,7 @@ export default function initIssuableApp(issuableData = {}) {
     defaultClient: createDefaultClient(),
   });
 
-  const { projectNamespace, projectPath, iid } = issuableData;
+  const { iid, projectNamespace, projectPath, slaFeatureAvailable } = issuableData;
 
   return new Vue({
     el: document.getElementById('js-issuable-app'),
@@ -22,6 +23,7 @@ export default function initIssuableApp(issuableData = {}) {
     provide: {
       fullPath: `${projectNamespace}/${projectPath}`,
       iid,
+      slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
     },
     render(createElement) {
       return createElement('issuable-app', {