Merge pull request RedHatInsights#255 from apinkert/learn-journey

Add user journey support + learn tab

Author: apinkert

.storybook/hooks/scalprum.js

@@ -0,0 +1,25 @@
+/**
+ * Mock @scalprum/react-core for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+// Mock Models object for virtual assistant
+const mockModels = {
+  ASK_RED_HAT: 'mock-ask-red-hat-model',
+};
+
+// Mock useLoadModule hook - returns mock module and loading: false
+export const useLoadModule = () => [mockModels, { loading: false }];
+
+// Mock useRemoteHook - returns empty hook result and loading: false
+export const useRemoteHook = () => ({
+  hookResult: [null, () => {}], // Mock state and setState
+  loading: false
+});
+
+// Mock useGetState - returns empty state
+export const useGetState = () => ({});
+
+// Mock other exports that might be needed
+export const initialize = () => {};
+export const getScalprum = () => ({});

.storybook/hooks/unleash.js

@@ -0,0 +1,14 @@
+/**
+ * Mock @unleash/proxy-client-react for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+// Mock useFlag hook - always returns false
+export const useFlag = () => false;
+
+// Mock other exports
+export const FlagProvider = ({ children }) => children;
+export const UnleashClient = class {};
+export const useUnleashContext = () => ({});
+export const useVariant = () => ({ name: 'disabled', enabled: false });
+export const useFlags = () => [];

.storybook/hooks/useChrome.tsx

@@ -0,0 +1,20 @@
+/**
+ * Mock useChrome for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+import { defaultMockChrome } from '../mocks/chromeMock';
+
+export default function useChrome() {
+  // Return the mock chrome from window if available
+  if (typeof window !== 'undefined' && window.insights?.chrome) {
+    // @ts-ignore
+    return window.insights.chrome;
+  }
+
+  // Fallback to shared mock
+  return defaultMockChrome;
+}
+
+// Named export for compatibility
+export { useChrome };

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import remarkGfm from 'remark-gfm';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/docs/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -15,6 +16,7 @@ const config: StorybookConfig = {
         },
       },
     },
+    'msw-storybook-addon',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -24,6 +26,27 @@ const config: StorybookConfig = {
     defaultName: 'Documentation',
   },
   webpackFinal: async (config) => {
+    // Mock external dependencies for Storybook (same pattern as insights-rbac-ui)
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        // External dependency mocks
+        '@redhat-cloud-services/frontend-components/useChrome': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/useChrome.tsx'
+        ),
+        '@unleash/proxy-client-react': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/unleash.js'
+        ),
+        '@scalprum/react-core': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/scalprum.js'
+        ),
+      },
+    };
+
     // Add SCSS support
     config.module = config.module || {};
     config.module.rules = config.module.rules || [];
@@ -44,6 +67,7 @@ const config: StorybookConfig = {
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },
+  staticDirs: ['../public'],
 };
 
 export default config;

.storybook/mocks/chromeMock.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared Chrome mock for Storybook
+ * Single source of truth for chrome API mocking
+ */
+
+export const defaultMockChrome = {
+  auth: {
+    getUser: async () => ({
+      identity: {
+        account_number: '12345',
+        org_id: '67890',
+        user: {
+          username: 'testuser',
+          email: 'test@example.com',
+          first_name: 'Test',
+          last_name: 'User',
+          is_active: true,
+          is_org_admin: false,
+        },
+        internal: {
+          account_id: '12345',
+        },
+      },
+    }),
+  },
+  getBundleData: () => ({ bundleId: 'insights' }),
+  getAvailableBundles: () => [
+    { id: 'insights', title: 'Red Hat Insights' },
+    { id: 'ansible', title: 'Ansible Automation Platform' },
+    { id: 'openshift', title: 'OpenShift' },
+    { id: 'settings', title: 'Settings' },
+  ],
+  updateDocumentTitle: (title: string) => {
+    if (typeof document !== 'undefined') {
+      document.title = title;
+    }
+  },
+  hideGlobalFilter: () => {},
+  isBeta: () => false,
+  isProd: () => false,
+  getEnvironment: () => 'stage',
+};

.storybook/preview.tsx

@@ -1,13 +1,26 @@
 import type { Preview } from '@storybook/react-webpack5';
 import '@patternfly/react-core/dist/styles/base.css';
 import React from 'react';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { defaultMockChrome } from './mocks/chromeMock';
+
+// Set up global chrome mock immediately
+if (typeof window !== 'undefined') {
+  // @ts-ignore
+  window.insights = { chrome: defaultMockChrome };
+}
 
 const preview: Preview = {
+  beforeAll: async () => {
+    // Initialize MSW with error on unhandled requests to catch missing mocks
+    initialize({ onUnhandledRequest: 'warn' });
+  },
+  loaders: [mswLoader],
   parameters: {
     options: {
       storySort: {
         method: 'alphabetical',
-        order: ['Documentation', '*'],
+        order: ['Documentation', 'User Journeys', 'Components', '*'],
       },
     },
     layout: 'fullscreen',