Add latest changes from gitlab-org/gitlab@master

9 files changed, 124 insertions, 63 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_observability.js b/app/assets/javascripts/behaviors/markdown/render_observability.js
index 85aae6f53c4..6346fb8ab48 100644
--- a/app/assets/javascripts/behaviors/markdown/render_observability.js
+++ b/app/assets/javascripts/behaviors/markdown/render_observability.js
@@ -1,25 +1,19 @@
 import Vue from 'vue';
-import { darkModeEnabled } from '~/lib/utils/color_utils';
-import { setUrlParams } from '~/lib/utils/url_utility';
-
-export function getFrameSrc(url) {
-  return `${setUrlParams({ theme: darkModeEnabled() ? 'dark' : 'light' }, url)}&kiosk=inline-embed`;
-}
+import ObservabilityApp from '~/observability/components/observability_app.vue';
+import { SKELETON_VARIANT_EMBED, INLINE_EMBED_DIMENSIONS } from '~/observability/constants';
 
 const mountVueComponent = (element) => {
-  const url = [element.dataset.frameUrl];
-
+  const url = element.dataset.frameUrl;
   return new Vue({
     el: element,
     render(h) {
-      return h('iframe', {
-        style: {
-          height: '366px',
-          width: '768px',
-        },
-        attrs: {
-          src: getFrameSrc(url),
-          frameBorder: '0',
+      return h(ObservabilityApp, {
+        props: {
+          observabilityIframeSrc: url,
+          inlineEmbed: true,
+          skeletonVariant: SKELETON_VARIANT_EMBED,
+          height: INLINE_EMBED_DIMENSIONS.HEIGHT,
+          width: INLINE_EMBED_DIMENSIONS.WIDTH,
         },
       });
     },
@@ -27,7 +21,5 @@ const mountVueComponent = (element) => {
 };
 
 export default function renderObservability(elements) {
-  elements.forEach((element) => {
-    mountVueComponent(element);
-  });
+  return elements.map(mountVueComponent);
 }
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index ded54d60d1d..c4b9bdb150b 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -102,10 +102,10 @@ export default {
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
     }"
-    class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-px-3 gl-py-2 py-xl-0 gl-mx-n2"
+    class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-mx-n2"
   >
     <div
-      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 flex-xl-nowrap gl-min-h-7"
+      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 gl-px-3 gl-py-2 py-xl-0 flex-xl-nowrap gl-min-h-7"
     >
       <!-- Title area: Status icon (XL) and title -->
       <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0">
diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
index 92d1a2ffc22..c3f87699d58 100644
--- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
@@ -96,8 +96,12 @@ export default {
         label="Fetching related merge requests"
         class="gl-py-4"
       />
-      <ul v-else class="content-list related-items-list">
-        <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-px-4! gl-py-3!">
+      <ul v-else class="content-list related-items-list gl-px-4! gl-py-3!">
+        <li
+          v-for="mr in mergeRequests"
+          :key="mr.id"
+          class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
+        >
           <related-issuable-item
             :id-key="mr.id"
             :display-reference="mr.reference"
diff --git a/app/assets/javascripts/observability/components/observability_app.vue b/app/assets/javascripts/observability/components/observability_app.vue
index ff9cf6ff6c5..36cbe715149 100644
--- a/app/assets/javascripts/observability/components/observability_app.vue
+++ b/app/assets/javascripts/observability/components/observability_app.vue
@@ -2,7 +2,7 @@
 import { darkModeEnabled } from '~/lib/utils/color_utils';
 import { setUrlParams } from '~/lib/utils/url_utility';
 
-import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '../constants';
+import { MESSAGE_EVENT_TYPE, FULL_APP_DIMENSIONS } from '../constants';
 import ObservabilitySkeleton from './skeleton/index.vue';
 
 export default {
@@ -14,25 +14,33 @@ export default {
       type: String,
       required: true,
     },
+    inlineEmbed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    skeletonVariant: {
+      type: String,
+      required: false,
+      default: 'dashboards',
+    },
+    height: {
+      type: String,
+      required: false,
+      default: FULL_APP_DIMENSIONS.HEIGHT,
+    },
+    width: {
+      type: String,
+      required: false,
+      default: FULL_APP_DIMENSIONS.WIDTH,
+    },
   },
   computed: {
     iframeSrcWithParams() {
-      return setUrlParams(
+      return `${setUrlParams(
         { theme: darkModeEnabled() ? 'dark' : 'light', username: gon?.current_username },
         this.observabilityIframeSrc,
-      );
-    },
-    getSkeletonVariant() {
-      const [, variant] =
-        Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) =>
-          this.$route.path.endsWith(path),
-        ) || [];
-
-      const DEFAULT_SKELETON = 'dashboards';
-
-      if (!variant) return DEFAULT_SKELETON;
-
-      return variant;
+      )}${this.inlineEmbed ? '&kiosk=inline-embed' : ''}`;
     },
   },
   mounted() {
@@ -54,38 +62,24 @@ export default {
           this.$refs.observabilitySkeleton.onContentLoaded();
           break;
         case MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE:
-          this.routeUpdateHandler(payload);
+          this.$emit('route-update', payload);
           break;
         default:
           break;
       }
     },
-    routeUpdateHandler(payload) {
-      const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url;
-
-      const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath;
-
-      if (shouldNotHandleMessage) {
-        return;
-      }
-
-      // this will update the `observability_path` query param on each route change inside Observability UI
-      this.$router.replace({
-        name: this.$route.pathname,
-        query: { ...this.$route.query, observability_path: payload.url },
-      });
-    },
   },
 };
 </script>
 
 <template>
-  <observability-skeleton ref="observabilitySkeleton" :variant="getSkeletonVariant">
+  <observability-skeleton ref="observabilitySkeleton" :variant="skeletonVariant">
     <iframe
       id="observability-ui-iframe"
       data-testid="observability-ui-iframe"
       frameborder="0"
-      height="100%"
+      :width="width"
+      :height="height"
       :src="iframeSrcWithParams"
       sandbox="allow-same-origin allow-forms allow-scripts"
     ></iframe>
diff --git a/app/assets/javascripts/observability/components/skeleton/embed.vue b/app/assets/javascripts/observability/components/skeleton/embed.vue
new file mode 100644
index 00000000000..7abaf2b1bc7
--- /dev/null
+++ b/app/assets/javascripts/observability/components/skeleton/embed.vue
@@ -0,0 +1,15 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+};
+</script>
+<template>
+  <gl-skeleton-loader>
+    <rect y="5" width="400" height="30" rx="2" ry="2" />
+    <rect y="50" width="400" height="80" rx="2" ry="2" />
+  </gl-skeleton-loader>
+</template>
diff --git a/app/assets/javascripts/observability/components/skeleton/index.vue b/app/assets/javascripts/observability/components/skeleton/index.vue
index c8f196a43f4..d91f2874943 100644
--- a/app/assets/javascripts/observability/components/skeleton/index.vue
+++ b/app/assets/javascripts/observability/components/skeleton/index.vue
@@ -8,10 +8,12 @@ import {
   OBSERVABILITY_ROUTES,
   TIMEOUT_ERROR_LABEL,
   TIMEOUT_ERROR_MESSAGE,
+  SKELETON_VARIANT_EMBED,
 } from '../../constants';
 import DashboardsSkeleton from './dashboards.vue';
 import ExploreSkeleton from './explore.vue';
 import ManageSkeleton from './manage.vue';
+import EmbedSkeleton from './embed.vue';
 
 export default {
   components: {
@@ -19,11 +21,13 @@ export default {
     DashboardsSkeleton,
     ExploreSkeleton,
     ManageSkeleton,
+    EmbedSkeleton,
     GlAlert,
   },
   SKELETON_VARIANTS_BY_ROUTE,
   SKELETON_STATE,
   OBSERVABILITY_ROUTES,
+  SKELETON_VARIANT_EMBED,
   i18n: {
     TIMEOUT_ERROR_LABEL,
     TIMEOUT_ERROR_MESSAGE,
@@ -102,6 +106,7 @@ export default {
         <dashboards-skeleton v-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.DASHBOARDS)" />
         <explore-skeleton v-else-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.EXPLORE)" />
         <manage-skeleton v-else-if="isSkeletonShown($options.OBSERVABILITY_ROUTES.MANAGE)" />
+        <embed-skeleton v-else-if="variant === $options.SKELETON_VARIANT_EMBED" />
 
         <gl-skeleton-loader v-else>
           <rect y="2" width="10" height="8" />
@@ -122,12 +127,14 @@ export default {
       {{ $options.i18n.TIMEOUT_ERROR_MESSAGE }}
     </gl-alert>
 
-    <div
-      v-show="state === $options.SKELETON_STATE.HIDDEN"
-      data-testid="observability-wrapper"
-      class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch"
-    >
-      <slot></slot>
-    </div>
+    <transition>
+      <div
+        v-show="state === $options.SKELETON_STATE.HIDDEN"
+        data-testid="observability-wrapper"
+        class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch"
+      >
+        <slot></slot>
+      </div>
+    </transition>
   </div>
 </template>
diff --git a/app/assets/javascripts/observability/constants.js b/app/assets/javascripts/observability/constants.js
index e4827dd169f..6b97c51e997 100644
--- a/app/assets/javascripts/observability/constants.js
+++ b/app/assets/javascripts/observability/constants.js
@@ -17,6 +17,8 @@ export const SKELETON_VARIANTS_BY_ROUTE = Object.freeze({
   [OBSERVABILITY_ROUTES.MANAGE]: 'manage',
 });
 
+export const SKELETON_VARIANT_EMBED = 'embed';
+
 export const SKELETON_STATE = Object.freeze({
   ERROR: 'error',
   VISIBLE: 'visible',
@@ -30,3 +32,13 @@ export const DEFAULT_TIMERS = Object.freeze({
 
 export const TIMEOUT_ERROR_LABEL = __('Unable to load the page');
 export const TIMEOUT_ERROR_MESSAGE = __('Reload the page to try again.');
+
+export const INLINE_EMBED_DIMENSIONS = Object.freeze({
+  HEIGHT: '366px',
+  WIDTH: '768px',
+});
+
+export const FULL_APP_DIMENSIONS = Object.freeze({
+  HEIGHT: '100%',
+  WIDTH: '100%',
+});
diff --git a/app/assets/javascripts/observability/index.js b/app/assets/javascripts/observability/index.js
index cd342ebee3e..72ff1357551 100644
--- a/app/assets/javascripts/observability/index.js
+++ b/app/assets/javascripts/observability/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import ObservabilityApp from './components/observability_app.vue';
+import { SKELETON_VARIANTS_BY_ROUTE } from './constants';
 
 Vue.use(VueRouter);
 
@@ -17,10 +18,41 @@ export default () => {
   return new Vue({
     el,
     router,
+    computed: {
+      skeletonVariant() {
+        const [, variant] =
+          Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) =>
+            this.$route.path.endsWith(path),
+          ) || [];
+
+        return variant;
+      },
+    },
+    methods: {
+      routeUpdateHandler(payload) {
+        const isNewObservabilityPath = this.$route?.query?.observability_path !== payload?.url;
+
+        const shouldNotHandleMessage = !payload.url || !isNewObservabilityPath;
+
+        if (shouldNotHandleMessage) {
+          return;
+        }
+
+        // this will update the `observability_path` query param on each route change inside Observability UI
+        this.$router.replace({
+          name: this.$route?.pathname,
+          query: { ...this.$route.query, observability_path: payload.url },
+        });
+      },
+    },
     render(h) {
       return h(ObservabilityApp, {
         props: {
           observabilityIframeSrc: el.dataset.observabilityIframeSrc,
+          skeletonVariant: this.skeletonVariant,
+        },
+        on: {
+          'route-update': (payload) => this.routeUpdateHandler(payload),
         },
       });
     },
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 6cb7dcca27d..0b30b4c3ef0 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -159,6 +159,11 @@ $item-remove-button-space: 42px;
 
 .mr-ci-status {
   line-height: 0;
+
+  a:focus {
+    @include gl-rounded-full;
+    @include gl-focus;
+  }
 }
 
 @include media-breakpoint-down(xs) {