Add latest changes from gitlab-org/gitlab@13-4-stable-ee

6 files changed, 424 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/details_row.vue b/app/assets/javascripts/vue_shared/components/registry/details_row.vue
new file mode 100644
index 00000000000..2e245fadead
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/details_row.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    padding: {
+      type: String,
+      default: 'gl-py-2',
+      required: false,
+    },
+    dashed: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    borderClass() {
+      return this.dashed ? 'gl-border-b-solid gl-border-gray-100 gl-border-b-1' : '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-display-flex gl-align-items-center gl-font-monospace gl-font-sm gl-word-break-all"
+    :class="[padding, borderClass]"
+  >
+    <gl-icon :name="icon" class="gl-mr-4" />
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/history_item.vue b/app/assets/javascripts/vue_shared/components/registry/history_item.vue
new file mode 100644
index 00000000000..a60b630b207
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/history_item.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+
+export default {
+  name: 'HistoryItem',
+  components: {
+    GlIcon,
+    TimelineEntryItem,
+  },
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item class="system-note note-wrapper gl-mb-6!">
+    <div class="timeline-icon">
+      <gl-icon :name="icon" />
+    </div>
+    <div class="timeline-content">
+      <div class="note-header">
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+      <div class="note-body">
+        <slot name="body"></slot>
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
new file mode 100644
index 00000000000..50a19dc2156
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
@@ -0,0 +1,135 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'ListItem',
+  components: { GlButton },
+  props: {
+    first: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isDetailsShown: false,
+      detailsSlots: [],
+    };
+  },
+  computed: {
+    optionalClasses() {
+      return {
+        'gl-border-t-transparent': !this.first && !this.selected,
+        'gl-border-t-gray-100': this.first && !this.selected,
+        'disabled-content': this.disabled,
+        'gl-border-b-gray-100': !this.selected,
+        'gl-bg-blue-50 gl-border-blue-200': this.selected,
+      };
+    },
+  },
+  mounted() {
+    this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details_'));
+  },
+  methods: {
+    toggleDetails() {
+      this.isDetailsShown = !this.isDetailsShown;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1"
+    :class="optionalClasses"
+  >
+    <div class="gl-display-flex gl-align-items-center gl-py-5">
+      <div
+        v-if="$slots['left-action']"
+        class="gl-w-7 gl-display-none gl-display-sm-flex gl-justify-content-start gl-pl-2"
+      >
+        <slot name="left-action"></slot>
+      </div>
+      <div
+        class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
+      >
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
+        >
+          <div
+            v-if="$slots['left-primary']"
+            class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
+          >
+            <slot name="left-primary"></slot>
+            <gl-button
+              v-if="detailsSlots.length > 0"
+              :selected="isDetailsShown"
+              icon="ellipsis_h"
+              size="small"
+              class="gl-ml-2 gl-display-none gl-display-sm-block"
+              @click="toggleDetails"
+            />
+          </div>
+          <div
+            v-if="$slots['left-secondary']"
+            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
+          >
+            <slot name="left-secondary"></slot>
+          </div>
+        </div>
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
+        >
+          <div
+            v-if="$slots['right-primary']"
+            class="gl-display-flex gl-align-items-center gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
+          >
+            <slot name="right-primary"></slot>
+          </div>
+          <div
+            v-if="$slots['right-secondary']"
+            class="gl-display-flex gl-align-items-center gl-mt-1 gl-min-h-6"
+          >
+            <slot name="right-secondary"></slot>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="$slots['right-action']"
+        class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
+      >
+        <slot name="right-action"></slot>
+      </div>
+    </div>
+    <div class="gl-display-flex">
+      <div class="gl-w-7"></div>
+      <div
+        v-if="isDetailsShown"
+        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
+      >
+        <div
+          v-for="(row, detailIndex) in detailsSlots"
+          :key="detailIndex"
+          class="gl-px-5 gl-py-2"
+          :class="{
+            'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
+          }"
+        >
+          <slot :name="row"></slot>
+        </div>
+      </div>
+      <div class="gl-w-9"></div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue b/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
new file mode 100644
index 00000000000..8ef623b68eb
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
@@ -0,0 +1,63 @@
+<script>
+import { GlIcon, GlLink } from '@gitlab/ui';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+
+export default {
+  name: 'MetadataItem',
+  components: {
+    GlIcon,
+    GlLink,
+    TooltipOnTruncate,
+  },
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+    link: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 's',
+      validator(value) {
+        return !value || ['xs', 's', 'm', 'l', 'xl'].includes(value);
+      },
+    },
+  },
+  computed: {
+    sizeClass() {
+      return `mw-${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-inline-flex gl-align-items-center">
+    <gl-icon v-if="icon" :name="icon" class="gl-text-gray-500 gl-mr-3" />
+    <tooltip-on-truncate v-if="link" :title="text" class="gl-text-truncate" :class="sizeClass">
+      <gl-link :href="link" class="gl-font-weight-bold">
+        {{ text }}
+      </gl-link>
+    </tooltip-on-truncate>
+    <div
+      v-else
+      data-testid="metadata-item-text"
+      class="gl-font-weight-bold gl-display-inline-flex"
+      :class="sizeClass"
+    >
+      <tooltip-on-truncate :title="text" class="gl-text-truncate">
+        {{ text }}
+      </tooltip-on-truncate>
+    </div>
+  </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>