gitlab-org--gitlab-foss/app/assets/javascripts/jobs/components/sidebar_detail_row.vue

<script>
import { GlIcon, GlLink } from '@gitlab/ui';

export default {
  name: 'SidebarDetailRow',
  components: {
    GlIcon,
    GlLink,
  },
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    value: {
      type: String,
      required: true,
    },
    helpUrl: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    hasTitle() {
      return this.title.length > 0;
    },
    hasHelpURL() {
      return this.helpUrl.length > 0;
    },
  },
};
</script>
<template>
  <p class="build-detail-row">
    <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
    <span v-if="hasHelpURL" class="help-button float-right">
      <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
        <gl-icon name="question-o" />
      </gl-link>
    </span>
  </p>
</template>