Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

3 files changed, 56 insertions, 40 deletions

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>