From 2b9bb5adfa6c027124f2d35014b1573e290a258c Mon Sep 17 00:00:00 2001
From: Robert Hunt <rhunt@gitlab.com>
Date: Thu, 23 Jul 2020 22:46:36 +0100
Subject: [PATCH 1/2] Created new branch details component for the compliance
 dashboard

The new component is only shown when we have at least the source and
target branch names. If we have that then we will render at least the
names of each branch

If we also have URI's we will show the branch names as links instead
---
 .../merge_requests/branch_details.vue         | 76 ++++++++++++++++
 .../components/merge_requests/grid.vue        | 16 ++++
 .../compliance_dashboard/dashboard.scss       |  2 +-
 ...on-branch-data-to-compliance-dashboard.yml |  5 ++
 .../__snapshots__/grid_spec.js.snap           |  4 +
 .../merge_requests/branch_details_spec.js     | 87 +++++++++++++++++++
 .../components/merge_requests/grid_spec.js    | 23 +++--
 .../compliance_dashboard/mock_data.js         | 21 +----
 locale/gitlab.pot                             |  3 +
 9 files changed, 214 insertions(+), 23 deletions(-)
 create mode 100644 ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
 create mode 100644 ee/changelogs/unreleased/216279-add-source-and-destination-branch-data-to-compliance-dashboard.yml
 create mode 100644 ee/spec/frontend/compliance_dashboard/components/merge_requests/branch_details_spec.js

diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
new file mode 100644
index 00000000000000..b2af959f86b9c7
--- /dev/null
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlLink,
+    GlSprintf,
+    GlTruncate,
+  },
+  props: {
+    sourceBranch: {
+      type: Object,
+      required: true,
+    },
+    targetBranch: {
+      type: Object,
+      required: true,
+    },
+  },
+  strings: {
+    branchDetails: __('%{sourceBranch} into %{targetBranch}'),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center gl-justify-content-end">
+    <gl-sprintf :message="this.$options.strings.branchDetails">
+      <template #sourceBranch>
+        <span class="gl-mr-2 gl-min-w-0">
+          <gl-link v-if="sourceBranch.uri" :href="targetBranch.uri" data-testid="source-branch-uri">
+            <gl-truncate
+              v-gl-tooltip
+              :title="sourceBranch.name"
+              :text="sourceBranch.name"
+              position="middle"
+            />
+          </gl-link>
+          <span v-else>
+            <gl-truncate
+              v-gl-tooltip
+              :title="sourceBranch.name"
+              :text="sourceBranch.name"
+              position="middle"
+            />
+          </span>
+        </span>
+      </template>
+      <template #targetBranch>
+        <span class="gl-ml-2 gl-min-w-0">
+          <gl-link v-if="targetBranch.uri" :href="targetBranch.uri" data-testid="target-branch-uri">
+            <gl-truncate
+              v-gl-tooltip
+              :title="targetBranch.name"
+              :text="targetBranch.name"
+              position="middle"
+            />
+          </gl-link>
+          <span v-else>
+            <gl-truncate
+              v-gl-tooltip
+              :title="targetBranch.name"
+              :text="targetBranch.name"
+              position="middle"
+            />
+          </span>
+        </span>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue
index 98ebe3f92e5621..86db63da90f995 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue
@@ -7,6 +7,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 import ApprovalStatus from './approval_status.vue';
 import Approvers from './approvers.vue';
+import BranchDetails from './branch_details.vue';
 import MergeRequest from './merge_request.vue';
 import PipelineStatus from './pipeline_status.vue';
 import GridColumnHeading from '../shared/grid_column_heading.vue';
@@ -19,6 +20,7 @@ export default {
   components: {
     ApprovalStatus,
     Approvers,
+    BranchDetails,
     GridColumnHeading,
     MergeRequest,
     PipelineStatus,
@@ -51,6 +53,9 @@ export default {
     hasStatus(status) {
       return !isEmpty(status);
     },
+    hasBranchDetails(mergeRequest) {
+      return mergeRequest.target_branch && mergeRequest.source_branch;
+    },
   },
   strings: {
     mergeRequestLabel: __('Merge Request'),
@@ -105,6 +110,17 @@ export default {
           class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
         >
           <approvers :approvers="mergeRequest.approved_by_users" />
+          <branch-details
+            v-if="hasBranchDetails(mergeRequest)"
+            :source-branch="{
+              name: mergeRequest.source_branch,
+              uri: mergeRequest.source_branch_uri,
+            }"
+            :target-branch="{
+              name: mergeRequest.target_branch,
+              uri: mergeRequest.target_branch_uri,
+            }"
+          />
           <span class="gl-text-gray-700">
             <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
               timeAgoString(mergeRequest.merged_at)
diff --git a/ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss b/ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss
index 88b03bdc395b6d..f8fddef2f7da7a 100644
--- a/ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss
+++ b/ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss
@@ -3,6 +3,6 @@
   min-width: 550px;
 
   .dashboard-grid {
-    grid-template-columns: 1fr auto auto auto;
+    grid-template-columns: 1fr auto auto 35%;
   }
 }
diff --git a/ee/changelogs/unreleased/216279-add-source-and-destination-branch-data-to-compliance-dashboard.yml b/ee/changelogs/unreleased/216279-add-source-and-destination-branch-data-to-compliance-dashboard.yml
new file mode 100644
index 00000000000000..5992251fcbf4cd
--- /dev/null
+++ b/ee/changelogs/unreleased/216279-add-source-and-destination-branch-data-to-compliance-dashboard.yml
@@ -0,0 +1,5 @@
+---
+title: Add source and destination branch data to Compliance Dashboard
+merge_request: 37628
+author:
+type: added
diff --git a/ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap b/ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap
index 63ae22d7643a43..d676f5ea5fb684 100644
--- a/ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap
+++ b/ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap
@@ -49,6 +49,8 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
         approvers=""
       />
        
+      <!---->
+       
       <span
         class="gl-text-gray-700"
       >
@@ -82,6 +84,8 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
         approvers=""
       />
        
+      <!---->
+       
       <span
         class="gl-text-gray-700"
       >
diff --git a/ee/spec/frontend/compliance_dashboard/components/merge_requests/branch_details_spec.js b/ee/spec/frontend/compliance_dashboard/components/merge_requests/branch_details_spec.js
new file mode 100644
index 00000000000000..2e1c569459221f
--- /dev/null
+++ b/ee/spec/frontend/compliance_dashboard/components/merge_requests/branch_details_spec.js
@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+
+import BranchDetails from 'ee/compliance_dashboard/components/merge_requests/branch_details.vue';
+
+describe('BranchDetails component', () => {
+  let wrapper;
+
+  // The truncate component adds left-to-right marks into the text that we have to remove
+  const getText = () => wrapper.text().replace(/\u200E/gi, '');
+  const linkExists = testId => wrapper.find(`[data-testid="${testId}"]`).exists();
+
+  const createComponent = ({ sourceUri = '', targetUri = '' } = {}) => {
+    return mount(BranchDetails, {
+      propsData: {
+        sourceBranch: {
+          name: 'feature',
+          uri: sourceUri,
+        },
+        targetBranch: {
+          name: 'master',
+          uri: targetUri,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with branch details', () => {
+    describe('and no branch URIs', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      it('has no links', () => {
+        expect(wrapper.find(GlLink).exists()).toBe(false);
+      });
+
+      it('has the correct text', () => {
+        expect(getText()).toEqual('feature into master');
+      });
+    });
+
+    describe('and one branch URI', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ targetUri: '/master-uri' });
+      });
+
+      it('has one link', () => {
+        expect(wrapper.findAll(GlLink)).toHaveLength(1);
+      });
+
+      it('has a link to the target branch', () => {
+        expect(linkExists('target-branch-uri')).toBe(true);
+      });
+
+      it('has the correct text', () => {
+        expect(getText()).toEqual('feature into master');
+      });
+    });
+
+    describe('and both branch URIs', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ sourceUri: '/feature-uri', targetUri: '/master-uri' });
+      });
+
+      it('has two links', () => {
+        expect(wrapper.findAll(GlLink)).toHaveLength(2);
+      });
+
+      it('has a link to the source branch', () => {
+        expect(linkExists('source-branch-uri')).toBe(true);
+      });
+
+      it('has a link to the target branch', () => {
+        expect(linkExists('target-branch-uri')).toBe(true);
+      });
+
+      it('has the correct text', () => {
+        expect(getText()).toEqual('feature into master');
+      });
+    });
+  });
+});
diff --git a/ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js b/ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js
index 0a05cf8c345266..0cf010a5e9506b 100644
--- a/ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js
@@ -2,9 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 
 import MergeRequestsGrid from 'ee/compliance_dashboard/components/merge_requests/grid.vue';
 import ApprovalStatus from 'ee/compliance_dashboard/components/merge_requests/approval_status.vue';
+import BranchDetails from 'ee/compliance_dashboard/components/merge_requests/branch_details.vue';
 import PipelineStatus from 'ee/compliance_dashboard/components/merge_requests/pipeline_status.vue';
 import Approvers from 'ee/compliance_dashboard/components/merge_requests/approvers.vue';
-import { createMergeRequests } from '../../mock_data';
+import { createMergeRequests, createPipelineStatus } from '../../mock_data';
 
 describe('MergeRequestsGrid component', () => {
   let wrapper;
@@ -14,11 +15,12 @@ describe('MergeRequestsGrid component', () => {
   const findApprovalStatus = () => wrapper.find(ApprovalStatus);
   const findPipelineStatus = () => wrapper.find(PipelineStatus);
   const findApprovers = () => wrapper.find(Approvers);
+  const findBranchDetails = () => wrapper.find(BranchDetails);
 
-  const createComponent = (options = {}) => {
+  const createComponent = (mergeRequestProps = {}) => {
     return shallowMount(MergeRequestsGrid, {
       propsData: {
-        mergeRequests: createMergeRequests({ count: 2, options }),
+        mergeRequests: createMergeRequests({ count: 2, props: mergeRequestProps }),
         isLastPage: false,
       },
       stubs: {
@@ -53,7 +55,7 @@ describe('MergeRequestsGrid component', () => {
       });
 
       it('renders if there is an approval status', () => {
-        wrapper = createComponent({ approvalStatus: 'success' });
+        wrapper = createComponent({ approval_status: 'success' });
         expect(findApprovalStatus().exists()).toBe(true);
       });
     });
@@ -64,11 +66,22 @@ describe('MergeRequestsGrid component', () => {
       });
 
       it('renders if there is a pipeline', () => {
-        wrapper = createComponent({ addPipeline: true });
+        wrapper = createComponent({ pipeline_status: createPipelineStatus('success') });
         expect(findPipelineStatus().exists()).toBe(true);
       });
     });
 
+    describe('branch details', () => {
+      it('does not render if there are no branch details', () => {
+        expect(findBranchDetails().exists()).toBe(false);
+      });
+
+      it('renders if there are branch details', () => {
+        wrapper = createComponent({ target_branch: 'master', source_branch: 'feature' });
+        expect(findBranchDetails().exists()).toBe(true);
+      });
+    });
+
     it('renders the approvers list', () => {
       expect(findApprovers().exists()).toBe(true);
     });
diff --git a/ee/spec/frontend/compliance_dashboard/mock_data.js b/ee/spec/frontend/compliance_dashboard/mock_data.js
index 494451c94620d6..e80e53cc9543bd 100644
--- a/ee/spec/frontend/compliance_dashboard/mock_data.js
+++ b/ee/spec/frontend/compliance_dashboard/mock_data.js
@@ -13,7 +13,7 @@ const createUser = id => ({
   web_url: `http://localhost:3000/user-${id}`,
 });
 
-export const createMergeRequest = ({ id = 1, pipeline, approvers, approvalStatus } = {}) => {
+export const createMergeRequest = ({ id = 1, props } = {}) => {
   const mergeRequest = {
     id,
     approved_by_users: [],
@@ -26,19 +26,7 @@ export const createMergeRequest = ({ id = 1, pipeline, approvers, approvalStatus
 
   mergeRequest.author = createUser(id);
 
-  if (pipeline) {
-    mergeRequest.pipeline_status = pipeline;
-  }
-
-  if (approvers) {
-    mergeRequest.approved_by_users = approvers;
-  }
-
-  if (approvalStatus) {
-    mergeRequest.approval_status = approvalStatus;
-  }
-
-  return mergeRequest;
+  return { ...mergeRequest, ...props };
 };
 
 export const createPipelineStatus = status => ({
@@ -59,14 +47,13 @@ export const createApprovers = count => {
     .map((_, id) => createUser(id));
 };
 
-export const createMergeRequests = ({ count = 1, options = {} } = {}) => {
+export const createMergeRequests = ({ count = 1, props = {} } = {}) => {
   return Array(count)
     .fill()
     .map((_, id) =>
       createMergeRequest({
         id,
-        approvalStatus: options.approvalStatus,
-        pipeline: options.addPipeline ? createPipelineStatus('success') : null,
+        props,
       }),
     );
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ca5cc089d83e89..39c63799dbe8f5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -670,6 +670,9 @@ msgstr ""
 msgid "%{size} bytes"
 msgstr ""
 
+msgid "%{sourceBranch} into %{targetBranch}"
+msgstr ""
+
 msgid "%{spammable_titlecase} was submitted to Akismet successfully."
 msgstr ""
 
-- 
GitLab


From 4a06656a132ca511e9d202fe3f855faaa4f58a09 Mon Sep 17 00:00:00 2001
From: Robert Hunt <rhunt@gitlab.com>
Date: Thu, 6 Aug 2020 16:17:41 +0100
Subject: [PATCH 2/2] Remove superfluous span

---
 .../merge_requests/branch_details.vue         | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
index b2af959f86b9c7..c7a42451def483 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/branch_details.vue
@@ -41,14 +41,13 @@ export default {
               position="middle"
             />
           </gl-link>
-          <span v-else>
-            <gl-truncate
-              v-gl-tooltip
-              :title="sourceBranch.name"
-              :text="sourceBranch.name"
-              position="middle"
-            />
-          </span>
+          <gl-truncate
+            v-else
+            v-gl-tooltip
+            :title="sourceBranch.name"
+            :text="sourceBranch.name"
+            position="middle"
+          />
         </span>
       </template>
       <template #targetBranch>
@@ -61,14 +60,13 @@ export default {
               position="middle"
             />
           </gl-link>
-          <span v-else>
-            <gl-truncate
-              v-gl-tooltip
-              :title="targetBranch.name"
-              :text="targetBranch.name"
-              position="middle"
-            />
-          </span>
+          <gl-truncate
+            v-else
+            v-gl-tooltip
+            :title="targetBranch.name"
+            :text="targetBranch.name"
+            position="middle"
+          />
         </span>
       </template>
     </gl-sprintf>
-- 
GitLab