Rework modular architecture deployment modes. (#15)

Signed-off-by: Lucas Fernandez <[email protected]>

Author: lucferbux

README.md

@@ -73,6 +73,114 @@ The repository contains the following modules:
 - **style**: Global styles
 - **types**: TypeScript type definitions
 
+## Provider Setup
+
+The Modular Architecture library requires proper context setup to function correctly. The library provides two essential providers that must be configured at the root of your application:
+
+### ModularArchContextProvider
+
+The `ModularArchContextProvider` is **mandatory** for using this library. It provides essential configuration and state management for:
+
+- **Deployment mode configuration** (Standalone, Federated, or Kubeflow)
+- **Namespace management** and selection
+- **API endpoint configuration**
+- **Script loading state** for Kubeflow integration
+- **Mandatory namespace enforcement** when required
+
+### ThemeProvider
+
+The `ThemeProvider` manages UI theming and supports:
+
+- **PatternFly theme** (default)
+- **Material-UI theme** with CSS variables support
+- **Dynamic theme switching** at runtime
+
+### Complete Setup Example
+
+Here's how to properly set up your application root with both providers:
+
+```typescript
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { 
+  ModularArchContextProvider, 
+  ThemeProvider,
+  BrowserStorageContextProvider,
+  NotificationContextProvider,
+  DeploymentMode,
+  Theme
+} from 'mod-arch-shared';
+
+// Define your configuration
+const modularArchConfig: ModularArchConfig = {
+  deploymentMode: DeploymentMode.Standalone, // or Federated, Kubeflow
+  URL_PREFIX: '/api',
+  BFF_API_VERSION: 'v1',
+  // Optional: Force a specific namespace
+  // mandatoryNamespace: 'production'
+};
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
+  <React.StrictMode>
+    <Router>
+      <ModularArchContextProvider config={modularArchConfig}>
+        <ThemeProvider theme={Theme.Patternfly}>
+          <BrowserStorageContextProvider>
+            <NotificationContextProvider>
+              <App />
+            </NotificationContextProvider>
+          </BrowserStorageContextProvider>
+        </ThemeProvider>
+      </ModularArchContextProvider>
+    </Router>
+  </React.StrictMode>,
+);
+```
+
+### Configuration Options
+
+#### Deployment Modes
+
+- **`DeploymentMode.Standalone`**: For single-application deployments
+- **`DeploymentMode.Federated`**: For micro-frontend architectures
+- **`DeploymentMode.Kubeflow`**: For integration with Kubeflow environments
+
+#### Theme Options
+
+- **`Theme.Patternfly`**: Red Hat PatternFly design system (default)
+- **`Theme.MUI`**: Material-UI design system with CSS variables
+
+### Using the Context in Components
+
+Once providers are set up, you can access the configuration and state throughout your application:
+
+```typescript
+import { useModularArchContext, useThemeContext } from 'mod-arch-shared';
+
+const MyComponent = () => {
+  const { 
+    config, 
+    namespaces, 
+    preferredNamespace, 
+    updatePreferredNamespace 
+  } = useModularArchContext();
+  
+  const { theme } = useThemeContext();
+  
+  return (
+    <div>
+      <p>Current deployment mode: {config.deploymentMode}</p>
+      <p>Available namespaces: {namespaces.length}</p>
+      <p>Current theme: {theme}</p>
+    </div>
+  );
+};
+```
+
 ## Configuration
 
 ### ModularArchConfig
@@ -82,7 +190,6 @@ The library supports various configuration options through the `ModularArchConfi
 ```typescript
 interface ModularArchConfig {
   deploymentMode: DeploymentMode;
-  platformMode: PlatformMode;
   URL_PREFIX: string;
   BFF_API_VERSION: string;
   mandatoryNamespace?: string; // Optional: Force a specific namespace
@@ -96,7 +203,6 @@ The `mandatoryNamespace` option allows you to enforce a specific namespace throu
 ```typescript
 const config = {
   deploymentMode: DeploymentMode.Standalone,
-  platformMode: PlatformMode.Default,
   URL_PREFIX: '/api',
   BFF_API_VERSION: 'v1',
   mandatoryNamespace: 'production' // Force the use of 'production' namespace

components/__tests__/NavBar.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import * as useFetchStateModule from '~/utilities/useFetchState';
 import { ModularArchContextProvider } from '~/context/ModularArchContext';
-import { DeploymentMode, PlatformMode } from '~/utilities';
+import { DeploymentMode } from '~/utilities';
 import { ModularArchConfig } from '~/types';
 import NavBar from '../NavBar';
 
@@ -20,10 +20,8 @@ const mockUseFetchState = useFetchStateModule.useFetchState as jest.MockedFuncti
 const createMockConfig = (
   mandatoryNamespace?: string,
   deploymentMode: DeploymentMode = DeploymentMode.Standalone,
-  platformMode: PlatformMode = PlatformMode.Default,
 ): ModularArchConfig => ({
   deploymentMode,
-  platformMode,
   URL_PREFIX: 'test',
   BFF_API_VERSION: 'v1',
   ...(mandatoryNamespace && { mandatoryNamespace }),

context/ModularArchContext.tsx

@@ -28,7 +28,7 @@ export const ModularArchContextProvider: React.FC<ModularArchContextProviderProp
   children,
   config,
 }) => {
-  const { deploymentMode, platformMode, mandatoryNamespace } = config;
+  const { deploymentMode, mandatoryNamespace } = config;
 
   const [scriptLoaded, setScriptLoaded] = useState(false);
   const [preferredNamespace, setPreferredNamespace] = useState<Namespace | undefined>(undefined);
@@ -55,15 +55,14 @@ export const ModularArchContextProvider: React.FC<ModularArchContextProviderProp
   useEffect(() => {
     kubeflowScriptLoader(
       deploymentMode,
-      platformMode,
       () => setScriptLoaded(true),
       (scriptError) => {
         // eslint-disable-next-line no-console
         console.error('Error loading kubeflow script:', scriptError);
         setScriptLoaded(true); // Still set to true to not block the UI
       },
     );
-  }, [deploymentMode, platformMode]);
+  }, [deploymentMode]);
 
   // Namespace selector for kubeflow integration
   useEffect(() => {
@@ -74,7 +73,6 @@ export const ModularArchContextProvider: React.FC<ModularArchContextProviderProp
 
     kubeflowNamespaceLoader(
       deploymentMode,
-      platformMode,
       scriptLoaded,
       (newNamespace: string) => {
         setPreferredNamespace({ name: newNamespace });
@@ -84,7 +82,7 @@ export const ModularArchContextProvider: React.FC<ModularArchContextProviderProp
       },
       mandatoryNamespace,
     );
-  }, [deploymentMode, platformMode, scriptLoaded, mandatoryNamespace]);
+  }, [deploymentMode, scriptLoaded, mandatoryNamespace]);
 
   const contextValue = React.useMemo(
     () => ({

context/ThemeContext.tsx

@@ -10,11 +10,11 @@ type ThemeProviderProps = {
 };
 
 export const ThemeContext = React.createContext({
-  theme: Theme.Default,
+  theme: Theme.Patternfly,
 });
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  theme = Theme.Default,
+  theme = Theme.Patternfly,
   children,
 }) => {
   const themeValue = React.useMemo(() => ({ theme }), [theme]);

context/__tests__/ModularArchContext.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import * as React from 'react';
 import { render, screen, act, waitFor } from '@testing-library/react';
 import { ModularArchContext, ModularArchContextProvider } from '~/context/ModularArchContext';
-import { DeploymentMode, PlatformMode } from '~/utilities';
+import { DeploymentMode } from '~/utilities';
 import { ModularArchConfig } from '~/types';
 import * as useFetchStateModule from '~/utilities/useFetchState';
 
@@ -18,11 +18,9 @@ const mockNamespaces = [{ name: 'namespace-2' }, { name: 'namespace-3' }, { name
 
 const createMockConfig = (
   deploymentMode: DeploymentMode = DeploymentMode.Standalone,
-  platformMode: PlatformMode = PlatformMode.Default,
   mandatoryNamespace?: string,
 ): ModularArchConfig => ({
   deploymentMode,
-  platformMode,
   URL_PREFIX: 'model-registry',
   BFF_API_VERSION: 'v1',
   ...(mandatoryNamespace && { mandatoryNamespace }),
@@ -48,7 +46,6 @@ describe('ModularArchContext', () => {
     return (
       <div>
         <div data-testid="deployment-mode">{config.deploymentMode}</div>
-        <div data-testid="platform-mode">{config.platformMode}</div>
         <div data-testid="loading-state">{namespacesLoaded.toString()}</div>
         <div data-testid="error-state">{namespacesLoadError?.message || 'no-error'}</div>
         <div data-testid="init-error">{initializationError?.message || 'no-init-error'}</div>
@@ -83,7 +80,6 @@ describe('ModularArchContext', () => {
     );
 
     expect(screen.getByTestId('deployment-mode')).toHaveTextContent('standalone');
-    expect(screen.getByTestId('platform-mode')).toHaveTextContent('default');
     expect(screen.getByTestId('loading-state')).toHaveTextContent('true');
     expect(screen.getByTestId('error-state')).toHaveTextContent('no-error');
     expect(screen.getByTestId('namespaces')).toHaveTextContent('');
@@ -128,7 +124,7 @@ describe('ModularArchContext', () => {
     expect(screen.getByTestId('preferred')).toHaveTextContent('none');
   });
 
-  it('should initialize central dashboard client when integrated', async () => {
+  it('should initialize central dashboard client when kubeflow', async () => {
     mockUseFetchState.mockReturnValue([mockNamespaces, true, undefined, jest.fn()]);
 
     // Mock fetch to resolve successfully for script loading
@@ -174,7 +170,7 @@ describe('ModularArchContext', () => {
       return mockScript as Node;
     });
 
-    const config = createMockConfig(DeploymentMode.Integrated, PlatformMode.Kubeflow);
+    const config = createMockConfig(DeploymentMode.Kubeflow);
 
     render(
       <ModularArchContextProvider config={config}>
@@ -265,7 +261,7 @@ describe('ModularArchContext', () => {
       return mockScript as HTMLScriptElement;
     });
 
-    const config = createMockConfig(DeploymentMode.Integrated, PlatformMode.Kubeflow);
+    const config = createMockConfig(DeploymentMode.Kubeflow);
 
     render(
       <ModularArchContextProvider config={config}>
@@ -335,7 +331,7 @@ describe('ModularArchContext', () => {
     });
     (global.fetch as jest.Mock).mockReturnValue(promise);
 
-    const config = createMockConfig(DeploymentMode.Integrated, PlatformMode.Kubeflow);
+    const config = createMockConfig(DeploymentMode.Kubeflow);
 
     render(
       <ModularArchContextProvider config={config}>
@@ -374,11 +370,7 @@ describe('ModularArchContext', () => {
         jest.fn(),
       ]);
 
-      const config = createMockConfig(
-        DeploymentMode.Standalone,
-        PlatformMode.Default,
-        mandatoryNamespace,
-      );
+      const config = createMockConfig(DeploymentMode.Federated);
 
       render(
         <ModularArchContextProvider config={config}>
@@ -400,11 +392,7 @@ describe('ModularArchContext', () => {
         jest.fn(),
       ]);
 
-      const config = createMockConfig(
-        DeploymentMode.Standalone,
-        PlatformMode.Default,
-        mandatoryNamespace,
-      );
+      const config = createMockConfig(DeploymentMode.Federated, mandatoryNamespace);
 
       render(
         <ModularArchContextProvider config={config}>
@@ -464,11 +452,7 @@ describe('ModularArchContext', () => {
         },
       };
 
-      const config = createMockConfig(
-        DeploymentMode.Integrated,
-        PlatformMode.Kubeflow,
-        mandatoryNamespace,
-      );
+      const config = createMockConfig(DeploymentMode.Kubeflow, mandatoryNamespace);
 
       render(
         <ModularArchContextProvider config={config}>

hooks/__tests__/useModularArchContext.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { renderHook } from '@testing-library/react';
 import { ModularArchContextProvider } from '~/context/ModularArchContext';
-import { DeploymentMode, PlatformMode } from '~/utilities';
+import { DeploymentMode } from '~/utilities';
 import { useModularArchContext } from '../useModularArchContext';
 
 // Mock the k8s API module
@@ -12,7 +12,6 @@ jest.mock('~/api/k8s', () => ({
 
 const mockConfig = {
   deploymentMode: DeploymentMode.Standalone,
-  platformMode: PlatformMode.Default,
   URL_PREFIX: 'test',
   BFF_API_VERSION: 'v1',
 };

hooks/__tests__/useNamespaces.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { renderHook } from '@testing-library/react';
 import * as useFetchStateModule from '~/utilities/useFetchState';
-import { DeploymentMode, PlatformMode } from '~/utilities';
+import { DeploymentMode } from '~/utilities';
 import { ModularArchConfig } from '~/types';
 import { useNamespacesWithConfig } from '../useNamespaces';
 
@@ -17,11 +17,9 @@ const mockUseFetchState = useFetchStateModule.useFetchState as jest.MockedFuncti
 
 const createMockConfig = (
   mandatoryNamespace?: string,
-  deploymentMode: DeploymentMode = DeploymentMode.Standalone,
-  platformMode: PlatformMode = PlatformMode.Default,
+  deploymentMode: DeploymentMode = DeploymentMode.Federated,
 ): ModularArchConfig => ({
   deploymentMode,
-  platformMode,
   URL_PREFIX: 'test',
   BFF_API_VERSION: 'v1',
   ...(mandatoryNamespace && { mandatoryNamespace }),
@@ -64,8 +62,8 @@ describe('useNamespacesWithConfig', () => {
     expect(result.current[2]).toBeUndefined(); // error
   });
 
-  it('should return empty array for kubeflow integrated mode when no mandatory namespace', () => {
-    const config = createMockConfig(undefined, DeploymentMode.Integrated, PlatformMode.Kubeflow);
+  it('should return empty array for kubeflow mode when no mandatory namespace', () => {
+    const config = createMockConfig(undefined, DeploymentMode.Kubeflow);
 
     mockUseFetchState.mockReturnValue([[], true, undefined, jest.fn()]);
 
@@ -76,13 +74,9 @@ describe('useNamespacesWithConfig', () => {
     expect(result.current[2]).toBeUndefined(); // error
   });
 
-  it('should return mandatory namespace even in kubeflow integrated mode', () => {
+  it('should return mandatory namespace even in kubeflow mode', () => {
     const mandatoryNamespace = 'mandatory-namespace';
-    const config = createMockConfig(
-      mandatoryNamespace,
-      DeploymentMode.Integrated,
-      PlatformMode.Kubeflow,
-    );
+    const config = createMockConfig(mandatoryNamespace, DeploymentMode.Kubeflow);
 
     mockUseFetchState.mockReturnValue([[{ name: mandatoryNamespace }], true, undefined, jest.fn()]);