From 0091b65620047c2399133d3cf6a0d6f41fc84fe0 Mon Sep 17 00:00:00 2001
From: Dan MH <dmizzi-harris@gitlab.com>
Date: Wed, 4 Jun 2025 10:34:22 +0100
Subject: [PATCH] Give each story a moved alert

---
 .storybook/preview.js | 57 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3b8c5e35d1..2f6373c3cf 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { h } from '@vue/compat';
 import { useArgs } from '@storybook/preview-api';
+import GlAlert from '../src/components/base/alert/alert.vue';
 
 import 'iframe-resizer/js/iframeResizer.contentWindow.min.js';
 import setConfigs from '../src/config';
@@ -15,8 +16,60 @@ let decorators = [
     const [_, updateArgs] = useArgs();
     return story({ ...context, updateArgs });
   },
-  () => ({
-    template: '<story />',
+  // Pass context to the component
+  (story, context) => ({
+    components: { GlAlert },
+    data() {
+      return {
+        storyContext: context,
+      };
+    },
+    template: `
+      <div>
+        <gl-alert
+          v-if="!isVisualTest"
+          variant="warning"
+          title="We've moved"
+          :dismissible="false"
+          :sticky="true"
+          class="gl-mb-5"
+        >
+          <p>
+            The GitLab UI project has
+            <a href="https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2035" class="gl-link">moved</a>
+            into the
+            <a href="https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com" class="gl-link">design.gitlab.com repository</a>.
+          </p>
+          <p class="gl-mb-0">
+            Please visit the <a :href="newStorybookUrl" class="gl-link">new site</a> to see an
+            <a :href="newStorybookPageUrl" class="gl-link">up to date version of this page</a>.
+          </p>
+        </gl-alert>
+        <story />
+      </div>
+    `,
+    computed: {
+      isVisualTest() {
+        return process.env.IS_VISUAL_TEST;
+      },
+      newStorybookUrl() {
+        return 'https://design.gitlab.com/storybook';
+      },
+      newStorybookPageUrl() {
+        const NEW_BASE_URL = 'https://design.gitlab.com';
+        const storyId = this.storyContext?.id;
+
+        if (!storyId) return 'https://design.gitlab.com/storybook';
+
+        const { pathname } = window.location;
+        const newPathname = pathname.startsWith('/gitlab-ui/vue3/')
+          ? 'storybook-vue3'
+          : 'storybook';
+
+        const url = new URL(`${newPathname}?path=/story/${storyId}`, NEW_BASE_URL);
+        return url.href;
+      },
+    },
     mounted() {
       this.$nextTick().then(() => {
         this.$el.parentElement.classList.add('vue-component-mounted');
-- 
GitLab