1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_detail.vue b/app/assets/javascripts/runner/components/runner_detail.vue
new file mode 100644
index 00000000000..b1234818b7e
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_detail.vue
@@ -0,0 +1,50 @@
+<script>
+import { __ } from '~/locale';
+
+/**
+ * Usage:
+ *
+ * With a `value` prop:
+ *
+ * <runner-detail label="Field Name" :value="value" />
+ *
+ * Or a `value` slot:
+ *
+ * <runner-detail label="Field Name">
+ *   <template #value>
+ *     <strong>{{ value }}</strong>
+ *   </template>
+ * </runner-detail>
+ *
+ */
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    emptyValue: {
+      type: String,
+      default: __('None'),
+      required: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-pb-4">
+    <dt class="gl-mr-2">{{ label }}</dt>
+    <dd class="gl-mb-0">
+      <template v-if="value || $slots.value">
+        <slot name="value">{{ value }}</slot>
+      </template>
+      <span v-else class="gl-text-gray-500">{{ emptyValue }}</span>
+    </dd>
+  </div>
+</template>