1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages/details/components/code_instruction.vue b/app/assets/javascripts/packages/details/components/code_instruction.vue
new file mode 100644
index 00000000000..0719ddfcd2b
--- /dev/null
+++ b/app/assets/javascripts/packages/details/components/code_instruction.vue
@@ -0,0 +1,63 @@
+<script>
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Tracking from '~/tracking';
+import { TrackingLabels } from '../constants';
+
+export default {
+  name: 'CodeInstruction',
+  components: {
+    ClipboardButton,
+  },
+  mixins: [
+    Tracking.mixin({
+      label: TrackingLabels.CODE_INSTRUCTION,
+    }),
+  ],
+  props: {
+    instruction: {
+      type: String,
+      required: true,
+    },
+    copyText: {
+      type: String,
+      required: true,
+    },
+    multiline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trackingAction: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    trackCopy() {
+      if (this.trackingAction) {
+        this.track(this.trackingAction);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="!multiline" class="input-group gl-mb-3">
+    <input
+      :value="instruction"
+      type="text"
+      class="form-control monospace js-instruction-input"
+      readonly
+      @copy="trackCopy"
+    />
+    <span class="input-group-append js-instruction-button" @click="trackCopy">
+      <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
+    </span>
+  </div>
+
+  <div v-else>
+    <pre class="js-instruction-pre" @copy="trackCopy">{{ instruction }}</pre>
+  </div>
+</template>