Creates CI Header component to use in pipelines and job details pages

3 files changed, 198 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
new file mode 100644
index 00000000000..fd0dcd716d6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -0,0 +1,122 @@
+<script>
+import ciIconBadge from './ci_badge_link.vue';
+import timeagoTooltip from './time_ago_tooltip.vue';
+import tooltipMixin from '../mixins/tooltip';
+import userAvatarLink from './user_avatar/user_avatar_link.vue';
+
+/**
+ * Renders header component for job and pipeline page based on UI mockups
+ *
+ * Used in:
+ * - job show page
+ * - pipeline show page
+ */
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+    itemName: {
+      type: String,
+      required: true,
+    },
+    itemId: {
+      type: Number,
+      required: true,
+    },
+    time: {
+      type: String,
+      required: true,
+    },
+    user: {
+      type: Object,
+      required: true,
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+
+  mixins: [
+    tooltipMixin,
+  ],
+
+  components: {
+    ciIconBadge,
+    timeagoTooltip,
+    userAvatarLink,
+  },
+
+  computed: {
+    userAvatarAltText() {
+      return `${this.user.name}'s avatar`;
+    },
+  },
+
+  methods: {
+    onClickAction(action) {
+      this.$emit('postAction', action);
+    },
+  },
+};
+</script>
+<template>
+  <header class="page-content-header top-area">
+    <section class="header-main-content">
+
+      <ci-icon-badge :status="status" />
+
+      <strong>
+        {{itemName}} #{{itemId}}
+      </strong>
+
+      triggered
+
+      <timeago-tooltip :time="time" />
+
+      by
+
+      <user-avatar-link
+        :link-href="user.web_url"
+        :img-src="user.avatar_url"
+        :img-alt="userAvatarAltText"
+        :tooltip-text="user.name"
+        :img-size="24"
+        />
+
+      <a
+        :href="user.web_url"
+        :title="user.email"
+        class="js-user-link commit-committer-link"
+        ref="tooltip">
+        {{user.name}}
+      </a>
+    </section>
+
+    <section
+      class="header-action-button nav-controls"
+      v-if="actions.length">
+      <template
+        v-for="action in actions">
+        <a
+          v-if="action.type === 'link'"
+          :href="action.path"
+          :class="action.cssClass">
+          {{action.label}}
+        </a>
+
+        <button
+          v-else="action.type === 'button'"
+          @click="onClickAction(action)"
+          :class="action.cssClass"
+          type="button">
+          {{action.label}}
+        </button>
+
+      </template>
+    </section>
+  </header>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
new file mode 100644
index 00000000000..af2b4c6786e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -0,0 +1,58 @@
+<script>
+import tooltipMixin from '../mixins/tooltip';
+import timeagoMixin from '../mixins/timeago';
+import '../../lib/utils/datetime_utility';
+
+/**
+ * Port of ruby helper time_ago_with_tooltip
+ */
+
+export default {
+  props: {
+    time: {
+      type: String,
+      required: true,
+    },
+
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+
+    shortFormat: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    cssClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  mixins: [
+    tooltipMixin,
+    timeagoMixin,
+  ],
+
+  computed: {
+    timeagoCssClass() {
+      return this.shortFormat ? 'js-short-timeago' : 'js-timeago';
+    },
+  },
+};
+</script>
+<template>
+  <time
+    :class="[timeagoCssClass, cssClass]"
+    class="js-timeago js-timeago-render"
+    :title="tooltipTitle(time)"
+    :data-placement="tooltipPlacement"
+    data-container="body"
+    ref="tooltip">
+    {{timeFormated(time)}}
+  </time>
+</template>
diff --git a/app/assets/javascripts/vue_shared/mixins/timeago.js b/app/assets/javascripts/vue_shared/mixins/timeago.js
new file mode 100644
index 00000000000..20f63ab663c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/timeago.js
@@ -0,0 +1,18 @@
+import '../../lib/utils/datetime_utility';
+
+/**
+ * Mixin with time ago methods used in some vue components
+ */
+export default {
+  methods: {
+    timeFormated(time) {
+      const timeago = gl.utils.getTimeago();
+
+      return timeago.format(time);
+    },
+
+    tooltipTitle(time) {
+      return gl.utils.formatDate(time);
+    },
+  },
+};