Merge "Use change label in filter dropdown on QueueItem"

web/src/containers/status/Misc.jsx

@@ -254,7 +254,7 @@ PipelineIcon.propTypes = {
   size: PropTypes.string,
 }
 
-function ChangeLink({ change }) {
+const getChangeLabel = (change) => {
   let changeId = change.id || 'NA'
   let changeTitle = changeId
   // Fall back to display the ref if there is no change id
@@ -273,9 +273,19 @@ function ChangeLink({ change }) {
   } else if (changeId.length === 40) {
     changeText = changeId.slice(0, 7)
   }
+
+  if (changeText !== '') {
+    return changeText
+  }
+  return changeTitle
+}
+
+
+function ChangeLink({ change }) {
+  const label = getChangeLabel(change)
   return (
     <ExternalLink target={change.url}>
-      {changeText !== '' ? changeText : changeTitle}
+      {label}
     </ExternalLink>
   )
 }
@@ -540,6 +550,7 @@ export {
   ChangeLink,
   countQueueItems,
   countPipelineItems,
+  getChangeLabel,
   getJobResultIconConfig,
   getJobStrResult,
   getQueueItemIconConfig,

web/src/containers/status/QueueItem.jsx

@@ -47,6 +47,7 @@ import {
 import {
   calculateQueueItemTimes,
   ChangeLink,
+  getChangeLabel,
   getJobStrResult,
   getRefs,
   JobLink,
@@ -101,17 +102,7 @@ function FilterDropdown({ item, pipeline }) {
     applyFilters(filterParams)
   }
 
-  // Using the full ref.id to display the helper text could break the
-  // layout of the Dropdown. This seems to be only an issue for Github
-  // changes, as the ref.if contains the full SHA. To prevent this,
-  // only display the PR number in this case. This is a very simplified
-  // version of the formatting we do in the ChangeLink component in
-  // containers/status/Misc.jsx.
-  let changeText = ref.id || ref.ref
-  let githubId = changeText.match(/^([0-9]+),([0-9a-f]{40})$/)
-  if (githubId) {
-    changeText = '#' + githubId[1]
-  }
+  const changeText = getChangeLabel(ref)
 
   const filterDropdownItems = [
     <DropdownItem