Replace job with group in frontend components to be consistent with backend

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

@@ -70,7 +70,7 @@ export default {
           v-for="(stage, index) in graph"
           :key="stage.name"
           :title="capitalizeStageName(stage.name)"
-          :jobs="stage.groups"
+          :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
           @refreshPipelineGraph="refreshPipelineGraph"

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue → app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue

 <script>
 import $ from 'jquery';
-import JobNameComponent from './job_name_component.vue';
-import JobComponent from './job_component.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import JobItem from './job_item.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 /**
  * Renders the dropdown for the pipeline graph.
  *
- * The following object should be provided as `job`:
+ * The object provided as `group` corresponds to app/serializers/job_group_entity.rb.
  *
- * {
- *   "id": 4256,
- *   "name": "test",
- *   "status": {
- *     "icon": "status_success",
- *     "text": "passed",
- *     "label": "passed",
- *     "group": "success",
- *     "details_path": "/root/ci-mock/builds/4256",
- *     "action": {
- *       "icon": "retry",
- *       "title": "Retry",
- *       "path": "/root/ci-mock/builds/4256/retry",
- *       "method": "post"
- *     }
- *   }
- * }
  */
 export default {
   directives: {
@@ -33,12 +16,12 @@ export default {
   },
   components: {
-    JobComponent,
-    JobNameComponent,
+    JobItem,
+    CiIcon,
   },
   props: {
-    job: {
+    group: {
       type: Object,
       required: true,
     },
@@ -46,7 +29,8 @@ export default {
   computed: {
     tooltipText() {
-      return `${this.job.name} - ${this.job.status.label}`;
+      const { name, status } = this.group;
+      return `${name} - ${status.label}`;
     },
   },
@@ -56,7 +40,7 @@ export default {
   methods: {
     /**
-     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
+     * When the user right clicks or cmd/ctrl + click in the group name or the action icon
      * the dropdown should not be closed so we stop propagation
      * of the click event inside the dropdown.
      *
@@ -90,14 +74,14 @@ export default {
       data-display="static"
       class="dropdown-menu-toggle build-content"
     >
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
+      <ci-icon :status="group.status" />
+      <span class="ci-status-text">
+        {{ group.name }}
+      </span>
       <span class="dropdown-counter-badge">
-        {{ job.size }}
+        {{ group.size }}
       </span>
     </button>
@@ -105,12 +89,12 @@ export default {
       <li class="scrollable-menu">
         <ul>
           <li
-            v-for="(item, i) in job.jobs"
-            :key="i"
+            v-for="job in group.jobs"
+            :key="job.id"
           >
-            <job-component
-              :dropdown-length="job.size"
-              :job="item"
+            <job-item
+              :dropdown-length="group.size"
+              :job="job"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
               @pipelineActionRequestComplete="pipelineActionRequestComplete"
             />

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

 <script>
 import _ from 'underscore';
-import JobComponent from './job_component.vue';
-import DropdownJobComponent from './dropdown_job_component.vue';
+import JobItem from './job_item.vue';
+import JobGroupDropdown from './job_group_dropdown.vue';
 export default {
   components: {
-    JobComponent,
-    DropdownJobComponent,
+    JobItem,
+    JobGroupDropdown,
   },
   props: {
     title: {
@@ -14,7 +14,7 @@ export default {
       required: true,
     },
-    jobs: {
+    groups: {
       type: Array,
       required: true,
     },
@@ -33,12 +33,8 @@ export default {
   },
   methods: {
-    firstJob(list) {
-      return list[0];
-    },
-
-    jobId(job) {
-      return `ci-badge-${_.escape(job.name)}`;
+    groupId(group) {
+      return `ci-badge-${_.escape(group.name)}`;
     },
     buildConnnectorClass(index) {
@@ -61,25 +57,25 @@ export default {
     <div class="builds-container">
       <ul>
         <li
-          v-for="(job, index) in jobs"
-          :id="jobId(job)"
-          :key="job.id"
+          v-for="(group, index) in groups"
+          :id="groupId(group)"
+          :key="group.id"
           :class="buildConnnectorClass(index)"
           class="build"
         >
           <div class="curve"></div>
-          <job-component
-            v-if="job.size === 1"
-            :job="job"
+          <job-item
+            v-if="group.size === 1"
+            :job="group.jobs[0]"
             css-class-job-name="build-content"
             @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
-          <dropdown-job-component
-            v-if="job.size > 1"
-            :job="job"
+          <job-group-dropdown
+            v-if="group.size > 1"
+            :group="group"
             @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />

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

@@ -18,14 +18,14 @@ import Flash from '../../flash';
 import axios from '../../lib/utils/axios_utils';
 import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
-import JobComponent from './graph/job_component.vue';
+import JobItem from './graph/job_item.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { PIPELINES_TABLE } from '../constants';
 export default {
   components: {
     Icon,
-    JobComponent,
+    JobItem,
   },
   directives: {
@@ -198,7 +198,7 @@ export default {
           v-for="job in dropdownContent"
           :key="job.id"
         >
-          <job-component
+          <job-item
             :dropdown-length="dropdownContent.length"
             :job="job"
             css-class-job-name="mini-pipeline-graph-dropdown-item"

qa/qa/page/project/pipeline/show.rb

@@ -9,7 +9,7 @@ module QA::Page
         element :pipeline_graph, /class.*pipeline-graph.*/ # rubocop:disable QA/ElementWithPattern
       end
-      view 'app/assets/javascripts/pipelines/components/graph/job_component.vue' do
+      view 'app/assets/javascripts/pipelines/components/graph/job_item.vue' do
         element :job_component, /class.*ci-job-component.*/ # rubocop:disable QA/ElementWithPattern
         element :job_link, /class.*js-pipeline-graph-job-link.*/ # rubocop:disable QA/ElementWithPattern
       end

spec/javascripts/pipelines/graph/dropdown_job_component_spec.js → spec/javascripts/pipelines/graph/job_group_dropdown_spec.js

 import Vue from 'vue';
-import component from '~/pipelines/components/graph/dropdown_job_component.vue';
+import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-describe('dropdown job component', () => {
-  const Component = Vue.extend(component);
+describe('job group dropdown component', () => {
+  const Component = Vue.extend(JobGroupDropdown);
   let vm;
-  const mock = {
+  const group = {
     jobs: [
       {
         id: 4256,
@@ -71,15 +71,15 @@ describe('dropdown job component', () => {
   });
   beforeEach(() => {
-    vm = mountComponent(Component, { job: mock });
+    vm = mountComponent(Component, { group });
   });
-  it('renders button with job name and size', () => {
-    expect(vm.$el.querySelector('button').textContent).toContain(mock.name);
-    expect(vm.$el.querySelector('button').textContent).toContain(mock.size);
+  it('renders button with group name and size', () => {
+    expect(vm.$el.querySelector('button').textContent).toContain(group.name);
+    expect(vm.$el.querySelector('button').textContent).toContain(group.size);
   });
   it('renders dropdown with jobs', () => {
-    expect(vm.$el.querySelectorAll('.scrollable-menu>ul>li').length).toEqual(mock.jobs.length);
+    expect(vm.$el.querySelectorAll('.scrollable-menu>ul>li').length).toEqual(group.jobs.length);
   });
 });

spec/javascripts/pipelines/graph/job_component_spec.js → spec/javascripts/pipelines/graph/job_item_spec.js

 import Vue from 'vue';
-import jobComponent from '~/pipelines/components/graph/job_component.vue';
+import JobItem from '~/pipelines/components/graph/job_item.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-describe('pipeline graph job component', () => {
-  const JobComponent = Vue.extend(jobComponent);
+describe('pipeline graph job item', () => {
+  const JobComponent = Vue.extend(JobItem);
   let component;
   const mockJob = {

spec/javascripts/pipelines/graph/stage_column_component_spec.js

@@ -25,17 +25,16 @@ describe('stage column component', () => {
   };
   beforeEach(() => {
-
-    const mockJobs = [];
+    const mockGroups = [];
     for (let i = 0; i < 3; i += 1) {
       const mockedJob = Object.assign({}, mockJob);
       mockedJob.id += i;
-      mockJobs.push(mockedJob);
+      mockGroups.push(mockedJob);
     }
     component = mountComponent(StageColumnComponent, {
       title: 'foo',
-      jobs: mockJobs,
+      groups: mockGroups,
     });
   });
@@ -43,14 +42,14 @@ describe('stage column component', () => {
     expect(component.$el.querySelector('.stage-name').textContent.trim()).toEqual('foo');
   });
-  it('should render the provided jobs', () => {
+  it('should render the provided groups', () => {
     expect(component.$el.querySelectorAll('.builds-container > ul > li').length).toEqual(3);
   });
   describe('jobId', () => {
     it('escapes job name', () => {
       component = mountComponent(StageColumnComponent, {
-        jobs: [
+        groups: [
           {
             id: 4259,
             name: '<img src=x onerror=alert(document.domain)>',
@@ -64,9 +63,9 @@ describe('stage column component', () => {
         title: 'test',
       });
-      expect(
-        component.$el.querySelector('.builds-container li').getAttribute('id'),
-      ).toEqual('ci-badge-&lt;img src=x onerror=alert(document.domain)&gt;');
+      expect(component.$el.querySelector('.builds-container li').getAttribute('id')).toEqual(
+        'ci-badge-&lt;img src=x onerror=alert(document.domain)&gt;',
+      );
     });
   });
 });