fixed up after bootstrap upgrade

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -54,10 +54,13 @@ export default {
 
 <template>
   <div
-    class="panel panel-default prepend-top-default"
+    class="card prepend-top-default"
   >
     <div
-      class="panel-heading"
+      class="card-header"
+      :class="{
+        'border-bottom-0': stage.isCollapsed
+      }"
       @click="toggleStageCollapsed(stage.id)"
     >
       <ci-icon
@@ -75,9 +78,9 @@ export default {
       </strong>
       <div
         v-if="!stage.isLoading || stage.jobs.length"
-        class="append-right-8"
+        class="append-right-8 prepend-left-4"
       >
-        <span class="badge">
+        <span class="badge badge-pill">
           {{ jobsCount }}
         </span>
       </div>
@@ -87,7 +90,7 @@ export default {
       />
     </div>
     <div
-      class="panel-body"
+      class="card-body"
       v-show="!stage.isCollapsed"
     >
       <loading-icon
@@ -105,20 +108,20 @@ export default {
 </template>
 
 <style scoped>
-.panel-heading {
+.card-header {
   display: flex;
   cursor: pointer;
 }
-.panel-heading .ci-status-icon {
+.card-header .ci-status-icon {
   display: flex;
   align-items: center;
 }
 
-.panel-heading .pull-right {
+.card-header .pull-right {
   margin: auto 0 auto auto;
 }
 
-.panel-body {
+.card-body {
   padding: 0;
 }
 

app/assets/javascripts/ide/components/panes/right.vue

@@ -18,6 +18,11 @@ export default {
   },
   methods: {
     ...mapActions(['setRightPane']),
+    clickTab(e, view) {
+      e.target.blur();
+
+      this.setRightPane(view);
+    },
   },
   rightSidebarViews,
 };
@@ -46,7 +51,7 @@ export default {
               active: rightPane === $options.rightSidebarViews.pipelines
             }"
             type="button"
-            @click="setRightPane($options.rightSidebarViews.pipelines)"
+            @click="clickTab($event, $options.rightSidebarViews.pipelines)"
           >
             <icon
               :size="16"

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -69,7 +69,7 @@ export default {
             Jobs
             <span
               v-if="jobsCount"
-              class="badge"
+              class="badge badge-pill"
             >
               {{ jobsCount }}
             </span>
@@ -86,7 +86,7 @@ export default {
             Failed Jobs
             <span
               v-if="failedJobsCount"
-              class="badge"
+              class="badge badge-pill"
             >
               {{ failedJobsCount }}
             </span>

app/assets/javascripts/vue_shared/components/tabs/tabs.js

@@ -26,12 +26,12 @@ export default {
         'li',
         {
           key: i,
-          class: tab.localActive ? 'active' : null,
         },
         [
           h(
             'a',
             {
+              class: tab.localActive ? 'active' : null,
               attrs: {
                 href: '#',
               },

spec/javascripts/ide/stores/modules/pipelines/mutations_spec.js

@@ -65,17 +65,19 @@ describe('IDE pipelines mutations', () => {
       expect(mockedState.stages.length).toBe(2);
       expect(mockedState.stages).toEqual([
         {
-          ...stages[0],
-          dropdownPath: stages[0].dropdownPath,
           id: 0,
+          dropdownPath: stages[0].dropdown_path,
+          name: stages[0].name,
+          status: stages[0].status,
           isCollapsed: false,
           isLoading: false,
           jobs: [],
         },
         {
-          ...stages[1],
-          dropdownPath: stages[1].dropdownPath,
           id: 1,
+          dropdownPath: stages[1].dropdown_path,
+          name: stages[1].name,
+          status: stages[1].status,
           isCollapsed: false,
           isLoading: false,
           jobs: [],