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,
@@ -187,7 +196,7 @@
         :empty-state-svg-path="emptyStateSvgPath"
         />
 
-      <error-state 
+      <error-state
         v-if="shouldRenderErrorState"
         :error-state-svg-path="errorStateSvgPath"
         />
@@ -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,
@@ -203,9 +207,13 @@ export default {
 
     displayPipelineActions() {
       return this.pipeline.flags.retryable ||
-             this.pipeline.flags.cancelable ||
-             this.pipeline.details.manual_actions.length ||
-             this.pipeline.details.artifacts.length;
+        this.pipeline.flags.cancelable ||
+        this.pipeline.details.manual_actions.length ||
+        this.pipeline.details.artifacts.length;
+    },
+
+    isChildView() {
+      return this.viewType === 'child';
     },
   },
 };
@@ -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';
-/**
- * Renders CI Badge link with CI icon and status text based on
- * API response shared between all places where it is used.
- *
- * Receives status object containing:
- * status: {
- *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
- *   group:"running" // used for CSS class
- *   icon: "icon_status_running" // used to render the icon
- *   label:"running" // used for potential tooltip
- *   text:"running" // text rendered
- * }
- *
- * Used in:
- * - Pipelines table - first column
- * - Jobs table - first column
- * - Pipeline show view - header
- * - Job show view - header
- * - MR widget
- */
+  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.
+   *
+   * Receives status object containing:
+   * status: {
+   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+   *   group:"running" // used for CSS class
+   *   icon: "icon_status_running" // used to render the icon
+   *   label:"running" // used for potential tooltip
+   *   text:"running" // text rendered
+   * }
+   *
+   * Used in:
+   * - Pipelines table - first column
+   * - Jobs table - first column
+   * - Pipeline show view - header
+   * - Job show view - header
+   * - MR widget
+   */
 
-export default {
-  props: {
-    status: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      status: {
+        type: Object,
+        required: true,
+      },
+      showText: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
-  },
-
-  components: {
-    ciIcon,
-  },
-
-  computed: {
-    cssClass() {
-      const className = this.status.group;
+    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" />
-    {{status.text}}
+
+    <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,31 +115,30 @@
 </script>
 <template>
   <div class="branch-commit">
-    <div
-      v-if="hasCommitRef"
-      class="icon-container hidden-xs">
-      <i
-        v-if="tag"
-        class="fa fa-tag"
-        aria-hidden="true">
-      </i>
-      <i
-        v-if="!tag"
-        class="fa fa-code-fork"
-        aria-hidden="true">
-      </i>
-    </div>
-
-    <a
-      v-if="hasCommitRef"
-      class="ref-name hidden-xs"
-      :href="commitRef.ref_url"
-      v-tooltip
-      data-container="body"
-      :title="commitRef.name">
-      {{commitRef.name}}
-    </a>
+    <template v-if="hasCommitRef && showBranch">
+      <div
+        class="icon-container hidden-xs">
+        <i
+          v-if="tag"
+          class="fa fa-tag"
+          aria-hidden="true">
+        </i>
+        <i
+          v-if="!tag"
+          class="fa fa-code-fork"
+          aria-hidden="true">
+        </i>
+      </div>
 
+      <a
+        class="ref-name hidden-xs"
+        :href="commitRef.ref_url"
+        v-tooltip
+        data-container="body"
+        :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('');
+  });
 });