Improve Job detail view to make it refreshed in real-time instead of reloading

1 files changed, 29 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index fe6d6a792e7..1d4d90f75b6 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -40,6 +40,11 @@ export default {
       required: false,
       default: () => [],
     },
+    hasSidebarButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   mixins: [
@@ -66,8 +71,9 @@ export default {
   },
 };
 </script>
+
 <template>
-  <header class="page-content-header">
+  <header class="page-content-header ci-header-container">
     <section class="header-main-content">
 
       <ci-icon-badge :status="status" />
@@ -102,7 +108,7 @@ export default {
     </section>
 
     <section
-      class="header-action-button nav-controls"
+      class="header-action-buttons"
       v-if="actions.length">
       <template
         v-for="action in actions">
@@ -113,6 +119,15 @@ export default {
           {{action.label}}
         </a>
 
+        <a
+          v-if="action.type === 'ujs-link'"
+          :href="action.path"
+          data-method="post"
+          rel="nofollow"
+          :class="action.cssClass">
+          {{action.label}}
+        </a>
+
         <button
           v-else="action.type === 'button'"
           @click="onClickAction(action)"
@@ -120,7 +135,6 @@ export default {
           :class="action.cssClass"
           type="button">
           {{action.label}}
-
           <i
             v-show="action.isLoading"
             class="fa fa-spin fa-spinner"
@@ -128,6 +142,18 @@ export default {
           </i>
         </button>
       </template>
+      <button
+        v-if="hasSidebarButton"
+        type="button"
+        class="btn btn-default visible-xs-block visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
+        aria-label="Toggle Sidebar"
+        id="toggleSidebar">
+        <i
+          class="fa fa-angle-double-left"
+          aria-hidden="true"
+          aria-labelledby="toggleSidebar">
+        </i>
+      </button>
     </section>
   </header>
 </template>