1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_detail.vue b/app/assets/javascripts/ci/runner/components/runner_detail.vue
new file mode 100644
index 00000000000..c260670b517
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_detail.vue
@@ -0,0 +1,55 @@
+<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,
+      default: null,
+      required: false,
+    },
+    value: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    emptyValue: {
+      type: String,
+      default: __('None'),
+      required: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-contents">
+    <dt class="gl-mb-5 gl-mr-6 gl-max-w-26">
+      <template v-if="label || $scopedSlots.label">
+        <slot name="label">{{ label }}</slot>
+      </template>
+    </dt>
+    <dd class="gl-mb-5">
+      <template v-if="value || $scopedSlots.value">
+        <slot name="value">{{ value }}</slot>
+      </template>
+      <span v-else class="gl-text-gray-500">{{ emptyValue }}</span>
+    </dd>
+  </div>
+</template>