Make pipelines table in MR view usable

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -25,6 +25,11 @@
         type: String,
         required: true,
       },
+      viewType: {
+        type: String,
+        required: false,
+        default: 'child',
+      },
     },
     mixins: [
       pipelinesMixin,
@@ -110,6 +115,7 @@
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
         :auto-devops-help-path="autoDevopsHelpPath"
+        :view-type="viewType"
         />
     </div>
   </div>

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

@@ -12,6 +12,15 @@
         type: Object,
         required: true,
       },
+      // Can be rendered in 3 different places, with some visual differences
+      // Accepts root | child
+      // `root` -> main view
+      // `child` -> rendered inside MR or Commit View
+      viewType: {
+        type: String,
+        required: false,
+        default: 'root',
+      },
     },
     components: {
       tablePagination,
@@ -206,6 +215,7 @@
           :pipelines="state.pipelines"
           :update-graph-dropdown="updateGraphDropdown"
           :auto-devops-help-path="autoDevopsPath"
+          :view-type="viewType"
           />
       </div>
 

app/assets/javascripts/pipelines/components/pipelines_table.vue

@@ -21,6 +21,10 @@
         type: String,
         required: true,
       },
+      viewType: {
+        type: String,
+        required: false,
+      },
     },
     components: {
       pipelinesTableRowComponent,
@@ -59,6 +63,7 @@
       :pipeline="model"
       :update-graph-dropdown="updateGraphDropdown"
       :auto-devops-help-path="autoDevopsHelpPath"
+      :view-type="viewType"
     />
   </div>
 </template>

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -29,6 +29,10 @@ export default {
       type: String,
       required: true,
     },
+    viewType: {
+      type: String,
+      required: false,
+    },
   },
   components: {
     asyncButtonComponent,
@@ -207,6 +211,10 @@ export default {
         this.pipeline.details.manual_actions.length ||
         this.pipeline.details.artifacts.length;
     },
+
+    isChildView() {
+      return this.viewType === 'child';
+    },
   },
 };
 </script>
@@ -218,7 +226,10 @@ export default {
         Status
       </div>
       <div class="table-mobile-content">
-        <ci-badge :status="pipelineStatus"/>
+        <ci-badge
+          :status="pipelineStatus"
+          :show-text="!isChildView"
+          />
       </div>
     </div>
 
@@ -240,7 +251,9 @@ export default {
           :commit-url="commitUrl"
           :short-sha="commitShortSha"
           :title="commitTitle"
-          :author="commitAuthor"/>
+          :author="commitAuthor"
+          :show-branch="!isChildView"
+          />
       </div>
     </div>
 

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

 <script>
-import ciIcon from './ci_icon.vue';
-/**
+  import ciIcon from './ci_icon.vue';
+  import tooltip from '../directives/tooltip';
+  /**
    * Renders CI Badge link with CI icon and status text based on
    * API response shared between all places where it is used.
    *
@@ -21,32 +22,43 @@ import ciIcon from './ci_icon.vue';
    * - MR widget
    */
 
-export default {
+  export default {
     props: {
       status: {
         type: Object,
         required: true,
       },
+      showText: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
-
     components: {
       ciIcon,
     },
-
+    directives: {
+      tooltip,
+    },
     computed: {
       cssClass() {
         const className = this.status.group;
 
-      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+        return className ? `ci-status ci-${className}` : 'ci-status';
       },
     },
-};
+  };
 </script>
 <template>
   <a
     :href="status.details_path"
-    :class="cssClass">
+    :class="cssClass"
+    v-tooltip
+    :title="status.text">
     <ci-icon :status="status" />
+
+    <template v-if="showText">
       {{status.text}}
+    </template>
   </a>
 </template>

app/assets/javascripts/vue_shared/components/commit.vue

@@ -63,14 +63,17 @@
         required: false,
         default: () => ({}),
       },
+      showBranch: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     computed: {
       /**
        * Used to verify if all the properties needed to render the commit
        * ref section were provided.
        *
-       * TODO: Improve this! Use lodash _.has when we have it.
-       *
        * @returns {Boolean}
        */
       hasCommitRef() {
@@ -80,8 +83,6 @@
        * Used to verify if all the properties needed to render the commit
        * author section were provided.
        *
-       * TODO: Improve this! Use lodash _.has when we have it.
-       *
        * @returns {Boolean}
        */
       hasAuthor() {
@@ -114,8 +115,8 @@
 </script>
 <template>
   <div class="branch-commit">
+    <template v-if="hasCommitRef && showBranch">
       <div
-      v-if="hasCommitRef"
         class="icon-container hidden-xs">
         <i
           v-if="tag"
@@ -130,7 +131,6 @@
       </div>
 
       <a
-      v-if="hasCommitRef"
         class="ref-name hidden-xs"
         :href="commitRef.ref_url"
         v-tooltip
@@ -138,7 +138,7 @@
         :title="commitRef.name">
         {{commitRef.name}}
       </a>
-
+    </template>
     <div
       v-html="commitIconSvg"
       class="commit-icon js-commit-icon">

spec/javascripts/vue_shared/components/ci_badge_link_spec.js

 import Vue from 'vue';
 import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('CI Badge Link Component', () => {
   let CIBadge;
+  let vm;
 
   const statuses = {
     canceled: {
@@ -70,15 +72,17 @@ describe('CI Badge Link Component', () => {
     },
   };
 
-  it('should render each status badge', () => {
+  beforeEach(() => {
     CIBadge = Vue.extend(ciBadge);
-    Object.keys(statuses).map((status) => {
-      const vm = new CIBadge({
-        propsData: {
-          status: statuses[status],
-        },
-      }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
 
+  it('should render each status badge', () => {
+    Object.keys(statuses).map((status) => {
+      vm = mountComponent(CIBadge, { status: statuses[status] });
       expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path);
       expect(vm.$el.textContent.trim()).toEqual(statuses[status].text);
       expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`);
@@ -86,4 +90,9 @@ describe('CI Badge Link Component', () => {
       return vm;
     });
   });
+
+  it('should not render label', () => {
+    vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false });
+    expect(vm.$el.textContent.trim()).toEqual('');
+  });
 });