gitlab-org--gitlab-foss/app/assets/javascripts/pipelines/components/pipeline_url.vue

<script>
  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
  import tooltip from '../../vue_shared/directives/tooltip';
  import popover from '../../vue_shared/directives/popover';

  export default {
    props: {
      pipeline: {
        type: Object,
        required: true,
      },
      autoDevopsHelpPath: {
        type: String,
        required: true,
      },
    },
    components: {
      userAvatarLink,
    },
    directives: {
      tooltip,
      popover,
    },
    computed: {
      user() {
        return this.pipeline.user;
      },
      autoDevOpsTitle() {
        return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
      },
      autoDevOpsContent() {
        return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
      },
    },
  };
</script>
<template>
  <div class="table-section section-15 hidden-xs hidden-sm">
    <a
      :href="pipeline.path"
      class="js-pipeline-url-link">
      <span class="pipeline-id">#{{pipeline.id}}</span>
    </a>
    <span>by</span>
    <user-avatar-link
      v-if="user"
      class="js-pipeline-url-user"
      :link-href="pipeline.user.path"
      :img-src="pipeline.user.avatar_url"
      :tooltip-text="pipeline.user.name"
    />
    <span
      v-if="!user"
      class="js-pipeline-url-api api">
      API
    </span>
    <div class="label-container">
      <span
        v-if="pipeline.flags.latest"
        v-tooltip
        class="js-pipeline-url-latest label label-success"
        title="Latest pipeline for this branch">
        latest
      </span>
      <span
        v-if="pipeline.flags.yaml_errors"
        v-tooltip
        class="js-pipeline-url-yaml label label-danger"
        :title="pipeline.yaml_errors">
        yaml invalid
      </span>
      <a
        v-if="pipeline.flags.auto_devops"
        class="js-pipeline-url-autodevops label label-info"
        v-popover:html
        tabindex="0"
        role="button"
        data-trigger="focus"
        data-placement="top"
        :title="autoDevOpsTitle"
        :data-content="autoDevOpsContent">
        Auto DevOps
      </a>
      <span
        v-if="pipeline.flags.stuck"
        class="js-pipeline-url-stuck label label-warning">
        stuck
      </span>
    </div>
  </div>
</template>