Add latest changes from gitlab-org/gitlab@master

3 files changed, 106 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/deployment_instance.vue b/app/assets/javascripts/vue_shared/components/deployment_instance.vue
new file mode 100644
index 00000000000..41b783aa011
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/deployment_instance.vue
@@ -0,0 +1,91 @@
+<script>
+/**
+ * An instance in deploy board is represented by a square in this mockup:
+ * https://gitlab.com/gitlab-org/gitlab-foss/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
+ *
+ * Each instance has a state and a tooltip.
+ * The state needs to be represented in different colors,
+ * see more information about this in
+ * https://gitlab.com/gitlab-org/gitlab/uploads/f1f00df6293d30f241dbeaa876a1e939/Screen_Shot_2019-11-26_at_3.35.43_PM.png
+ *
+ * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
+ * this information in the tooltip and the colors.
+ * Mockup is https://gitlab.com/gitlab-org/gitlab/issues/35570
+ */
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+export default {
+  components: {
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+
+  props: {
+    /**
+     * Represents the status of the pod. Each state is represented with a different
+     * color.
+     * It should be one of the following:
+     * succeeded || running || failed || pending || unknown
+     */
+    status: {
+      type: String,
+      required: true,
+      default: 'succeeded',
+    },
+
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    stable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    podName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    logsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  computed: {
+    isLink() {
+      return this.logsPath !== '' && this.podName !== '';
+    },
+
+    cssClass() {
+      return {
+        [`deployment-instance-${this.status}`]: true,
+        'deployment-instance-canary': !this.stable,
+        link: this.isLink,
+      };
+    },
+
+    computedLogPath() {
+      return this.isLink ? mergeUrlParams({ pod_name: this.podName }, this.logsPath) : null;
+    },
+  },
+};
+</script>
+<template>
+  <gl-link
+    v-gl-tooltip
+    :class="cssClass"
+    :title="tooltipText"
+    :href="computedLogPath"
+    class="deployment-instance d-flex justify-content-center align-items-center"
+  />
+</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
index 8ef623b68eb..93396219a54 100644
--- a/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 export default {
@@ -9,6 +9,9 @@ export default {
     GlLink,
     TooltipOnTruncate,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     icon: {
       type: String,
@@ -32,6 +35,11 @@ export default {
         return !value || ['xs', 's', 'm', 'l', 'xl'].includes(value);
       },
     },
+    textTooltip: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     sizeClass() {
@@ -55,9 +63,12 @@ export default {
       class="gl-font-weight-bold gl-display-inline-flex"
       :class="sizeClass"
     >
-      <tooltip-on-truncate :title="text" class="gl-text-truncate">
+      <tooltip-on-truncate v-if="!textTooltip" :title="text" class="gl-text-truncate">
         {{ text }}
       </tooltip-on-truncate>
+      <span v-else v-gl-tooltip="{ title: textTooltip }" data-testid="text-tooltip-container">
+        {{ text }}</span
+      >
     </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
index afe114517b5..c63d91b78d3 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -50,7 +50,7 @@ export default {
 <template>
   <div class="gl-display-flex gl-flex-direction-column">
     <div class="gl-display-flex gl-justify-content-space-between gl-py-3">
-      <div class="gl-flex-direction-column">
+      <div class="gl-flex-direction-column gl-flex-grow-1">
         <div class="gl-display-flex">
           <gl-avatar
             v-if="avatar"
@@ -85,7 +85,7 @@ export default {
           </template>
           <template v-else>
             <div class="gl-w-full">
-              <gl-skeleton-loader :width="200" :height="16" preserve-aspect-ratio="xMinYMax meet">
+              <gl-skeleton-loader :width="960" :height="16" preserve-aspect-ratio="xMinYMax meet">
                 <circle cx="6" cy="8" r="6" />
                 <rect x="16" y="4" width="200" height="8" rx="4" />
               </gl-skeleton-loader>