1 files changed, 36 insertions, 29 deletions

diff --git a/app/assets/javascripts/jobs/bridge/components/sidebar.vue b/app/assets/javascripts/jobs/bridge/components/sidebar.vue
index 68b767408f0..3ba07cf55d1 100644
--- a/app/assets/javascripts/jobs/bridge/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/bridge/components/sidebar.vue
@@ -1,14 +1,13 @@
 <script>
 import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { JOB_SIDEBAR } from '../../constants';
-import { SIDEBAR_COLLAPSE_BREAKPOINTS } from './constants';
+import CommitBlock from '../../components/commit_block.vue';
 
 export default {
   styles: {
-    top: '75px',
     width: '290px',
   },
   name: 'BridgeSidebar',
@@ -18,40 +17,47 @@ export default {
     retryTriggerJob: __('Retry the trigger job'),
     retryDownstreamPipeline: __('Retry the downstream pipeline'),
   },
-  borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
+  sectionClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100', 'gl-py-5'],
   components: {
+    CommitBlock,
     GlButton,
     GlDropdown,
     GlDropdownItem,
     TooltipOnTruncate,
   },
-  inject: {
-    buildName: {
-      type: String,
-      default: '',
+  mixins: [glFeatureFlagsMixin()],
+  props: {
+    bridgeJob: {
+      type: Object,
+      required: true,
+    },
+    commit: {
+      type: Object,
+      required: true,
     },
   },
   data() {
     return {
-      isSidebarExpanded: true,
+      topPosition: 0,
     };
   },
-  created() {
-    window.addEventListener('resize', this.onResize);
+  computed: {
+    rootStyle() {
+      return { ...this.$options.styles, top: `${this.topPosition}px` };
+    },
   },
   mounted() {
-    this.onResize();
+    this.setTopPosition();
   },
   methods: {
-    toggleSidebar() {
-      this.isSidebarExpanded = !this.isSidebarExpanded;
+    onSidebarButtonClick() {
+      this.$emit('toggleSidebar');
     },
-    onResize() {
-      const breakpoint = bp.getBreakpointSize();
-      if (SIDEBAR_COLLAPSE_BREAKPOINTS.includes(breakpoint)) {
-        this.isSidebarExpanded = false;
-      } else if (!this.isSidebarExpanded) {
-        this.isSidebarExpanded = true;
+    setTopPosition() {
+      const navbarEl = document.querySelector('.js-navbar');
+
+      if (navbarEl) {
+        this.topPosition = navbarEl.getBoundingClientRect().bottom;
       }
     },
   },
@@ -60,19 +66,19 @@ export default {
 <template>
   <aside
     class="gl-fixed gl-right-0 gl-px-5 gl-bg-gray-10 gl-h-full gl-border-l-solid gl-border-1 gl-border-gray-100 gl-z-index-200 gl-overflow-hidden"
-    :style="this.$options.styles"
-    :class="{
-      'gl-display-none': !isSidebarExpanded,
-    }"
+    :style="rootStyle"
   >
     <div class="gl-py-5 gl-display-flex gl-align-items-center">
-      <tooltip-on-truncate :title="buildName" truncate-target="child"
+      <tooltip-on-truncate :title="bridgeJob.name" truncate-target="child"
         ><h4 class="gl-mb-0 gl-mr-2 gl-text-truncate">
-          {{ buildName }}
+          {{ bridgeJob.name }}
         </h4>
       </tooltip-on-truncate>
       <!-- TODO: implement retry actions -->
-      <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right">
+      <div
+        v-if="glFeatures.triggerJobRetryAction"
+        class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right"
+      >
         <gl-dropdown
           :text="$options.i18n.retryButton"
           category="primary"
@@ -90,9 +96,10 @@ export default {
         category="tertiary"
         class="gl-md-display-none gl-ml-2"
         icon="chevron-double-lg-right"
-        @click="toggleSidebar"
+        @click="onSidebarButtonClick"
       />
     </div>
-    <!-- TODO: get job details and show commit block, stage dropdown, jobs list -->
+    <commit-block :commit="commit" :class="$options.sectionClass" />
+    <!-- TODO: show stage dropdown, jobs list -->
   </aside>
 </template>