Merge pull request #6981 from Sage/FE-6734

feat(version-picker): reintroduce the version picker for storybook

.storybook/manager.ts

@@ -1,7 +1,20 @@
-import { addons } from "@storybook/manager-api";
+import { addons, types } from "@storybook/manager-api";
 import sageTheme from "./sage-docs-theme";
+import { ADDON_ID, TOOL_ID } from "./version-picker/constants";
+import { VersionPicker } from "./version-picker";
 import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";
 
+if (process.env.NODE_ENV === "production") {
+  addons.register(ADDON_ID, () => {
+    addons.add(TOOL_ID, {
+      type: types.TOOL,
+      title: "Version picker",
+      match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+      render: VersionPicker,
+    });
+  });
+}
+
 addons.setConfig({
   theme: sageTheme,
   panelPosition: "bottom",

.storybook/version-picker/fetch-data.ts

@@ -1,15 +1,28 @@
+import mockData from "./mock-data/metadata.json";
+
 interface Metadata {
   versions: Record<string, string>;
 }
 
-const fetchData = async () => {
-  const response = await fetch(
-    "https://carbon.sage.com/metadata/metadata.json"
-  );
+const fetchData = async (): Promise<Metadata | null> => {
+  try {
+    const response = await fetch(
+      "https://carbon.sage.com/metadata/metadata.json"
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const metadata: Metadata = await response.json();
 
-  const metadata: Metadata = await response.json();
+    return metadata;
+  } catch (error) {
+    console.error("Failed to fetch metadata:", error);
 
-  return metadata;
+    console.log("Returning mock data as fallback");
+    return mockData as Metadata;
+  }
 };
 
 export default fetchData;

.storybook/version-picker/index.tsx

@@ -49,8 +49,17 @@ export const VersionPicker = () => {
     }
 
     const getData = async () => {
-      const data = await fetchData();
-      setVersions(data.versions);
+      try {
+        const data = await fetchData();
+        if (data) {
+          setVersions(data.versions);
+        } else {
+          throw new Error("Failed to fetch metadata");
+        }
+      } catch (error) {
+        console.error("Failed to retrieve version data:", error);
+        setVersions(undefined);
+      }
     };
 
     getData();