Add latest changes from gitlab-org/gitlab@master

2 files changed, 148 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue b/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
new file mode 100644
index 00000000000..08ee23d25bf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
@@ -0,0 +1,82 @@
+<script>
+import { uniqueId } from 'lodash';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Tracking from '~/tracking';
+
+export default {
+  name: 'CodeInstruction',
+  components: {
+    ClipboardButton,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    instruction: {
+      type: String,
+      required: true,
+    },
+    copyText: {
+      type: String,
+      required: true,
+    },
+    multiline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trackingAction: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    trackingLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  created() {
+    this.uniqueId = uniqueId();
+  },
+  methods: {
+    trackCopy() {
+      if (this.trackingAction) {
+        this.track(this.trackingAction, { label: this.trackingLabel });
+      }
+    },
+    generateFormId(name) {
+      return `${name}_${this.uniqueId}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="!multiline" class="gl-mb-3">
+    <label v-if="label" :for="generateFormId('instruction-input')">{{ label }}</label>
+    <div class="input-group gl-mb-3">
+      <input
+        :id="generateFormId('instruction-input')"
+        :value="instruction"
+        type="text"
+        class="form-control gl-font-monospace"
+        data-testid="instruction-input"
+        readonly
+        @copy="trackCopy"
+      />
+      <span class="input-group-append" data-testid="instruction-button" @click="trackCopy">
+        <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
+      </span>
+    </div>
+  </div>
+
+  <div v-else>
+    <pre class="gl-font-monospace" data-testid="multiline-instruction" @copy="trackCopy">{{
+      instruction
+    }}</pre>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
new file mode 100644
index 00000000000..cc33b8f85cd
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlAvatar } from '@gitlab/ui';
+
+export default {
+  name: 'TitleArea',
+  components: {
+    GlAvatar,
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    title: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      metadataSlots: [],
+    };
+  },
+  mounted() {
+    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata_'));
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-justify-content-space-between gl-py-3">
+    <div class="gl-flex-direction-column">
+      <div class="gl-display-flex">
+        <gl-avatar v-if="avatar" :src="avatar" shape="rect" class="gl-align-self-center gl-mr-4" />
+
+        <div class="gl-display-flex gl-flex-direction-column">
+          <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2" data-testid="title">
+            <slot name="title">{{ title }}</slot>
+          </h1>
+
+          <div
+            v-if="$slots['sub-header']"
+            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
+          >
+            <slot name="sub-header"></slot>
+          </div>
+        </div>
+      </div>
+
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3">
+        <div
+          v-for="(row, metadataIndex) in metadataSlots"
+          :key="metadataIndex"
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <slot :name="row"></slot>
+        </div>
+      </div>
+    </div>
+    <div v-if="$slots['right-actions']" class="gl-mt-3">
+      <slot name="right-actions"></slot>
+    </div>
+  </div>
+</template>