@qwickapps/server 1.6.0 → 1.6.1

package/ui/src/pages/PreferencesPage.tsx

@@ -0,0 +1,240 @@
+/**
+ * PreferencesPage Component
+ *
+ * User preferences management page with JSON editor.
+ * Preferences are stored as flexible JSON objects per user.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  TextField,
+  Typography,
+  Alert,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import { Button } from '@qwickapps/react-framework';
+import { api } from '../api/controlPanelApi';
+import { MAX_PREFERENCES_SIZE, MAX_NESTING_DEPTH } from '../config/preferences';
+
+/**
+ * Check if an object exceeds maximum nesting depth
+ */
+function exceedsMaxDepth(obj: unknown, depth = 0): boolean {
+  if (depth > MAX_NESTING_DEPTH) return true;
+  if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+    return Object.values(obj as Record<string, unknown>).some(v => exceedsMaxDepth(v, depth + 1));
+  }
+  if (Array.isArray(obj)) {
+    return obj.some(v => exceedsMaxDepth(v, depth + 1));
+  }
+  return false;
+}
+
+export function PreferencesPage() {
+  const [jsonText, setJsonText] = useState('{}');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // Load preferences on mount
+  useEffect(() => {
+    const fetchPreferences = async () => {
+      try {
+        const response = await api.getPreferences();
+        setJsonText(JSON.stringify(response.preferences, null, 2));
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load preferences');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPreferences();
+  }, []);
+
+  // Handle JSON text changes
+  const handleJsonChange = (value: string) => {
+    setJsonText(value);
+    setHasChanges(true);
+    setSuccess(false);
+
+    // Validate JSON syntax and nesting depth
+    try {
+      const parsed = JSON.parse(value);
+
+      // Check nesting depth
+      if (exceedsMaxDepth(parsed)) {
+        setJsonError(`Preferences object too deeply nested (max ${MAX_NESTING_DEPTH} levels)`);
+        return;
+      }
+
+      setJsonError(null);
+    } catch (err) {
+      setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
+    }
+  };
+
+  // Save preferences
+  const handleSave = async () => {
+    if (jsonError) {
+      return;
+    }
+
+    try {
+      const parsedPreferences = JSON.parse(jsonText);
+      setSaving(true);
+      setError(null);
+
+      const response = await api.updatePreferences(parsedPreferences);
+      setJsonText(JSON.stringify(response.preferences, null, 2));
+      setSuccess(true);
+      setHasChanges(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save preferences');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Reset to defaults
+  const handleReset = async () => {
+    if (!confirm('Reset all preferences to defaults? This cannot be undone.')) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      setError(null);
+
+      await api.deletePreferences();
+
+      // Reload preferences after reset
+      const response = await api.getPreferences();
+      setJsonText(JSON.stringify(response.preferences, null, 2));
+      setSuccess(true);
+      setHasChanges(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset preferences');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Format JSON
+  const handleFormat = () => {
+    try {
+      const parsed = JSON.parse(jsonText);
+      setJsonText(JSON.stringify(parsed, null, 2));
+      setJsonError(null);
+    } catch (err) {
+      // JSON already invalid, error already shown
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  const charCount = jsonText.length;
+  const sizePercent = (charCount / MAX_PREFERENCES_SIZE) * 100;
+
+  return (
+    <Box>
+      <Box sx={{ mb: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Box>
+          <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
+            Preferences
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)', mt: 0.5 }}>
+            Manage your user preferences as JSON
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Chip
+            label={`${charCount.toLocaleString()} / ${MAX_PREFERENCES_SIZE.toLocaleString()} bytes`}
+            size="small"
+            color={sizePercent > 90 ? 'error' : sizePercent > 75 ? 'warning' : 'default'}
+          />
+        </Box>
+      </Box>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+
+      {success && (
+        <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(false)}>
+          Preferences saved successfully
+        </Alert>
+      )}
+
+      <Card sx={{ bgcolor: 'var(--theme-surface)', mb: 2 }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+            <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+              Preferences JSON
+            </Typography>
+            <Button
+              variant="outlined"
+              onClick={handleFormat}
+              disabled={!!jsonError}
+            >
+              Format JSON
+            </Button>
+          </Box>
+
+          <TextField
+            fullWidth
+            multiline
+            rows={20}
+            value={jsonText}
+            onChange={(e) => handleJsonChange(e.target.value)}
+            error={!!jsonError}
+            helperText={jsonError || `Edit your preferences as JSON. Max ${MAX_PREFERENCES_SIZE.toLocaleString()} bytes, max ${MAX_NESTING_DEPTH} levels deep.`}
+            sx={{
+              '& .MuiInputBase-root': {
+                fontFamily: 'monospace',
+                fontSize: '0.875rem',
+              },
+            }}
+          />
+        </CardContent>
+      </Card>
+
+      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+        <Button
+          variant="outlined"
+          onClick={handleReset}
+          disabled={saving}
+          color="error"
+        >
+          Reset to Defaults
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={!!jsonError || !hasChanges || saving}
+          loading={saving}
+        >
+          Save Preferences
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/ui/src/pages/__tests__/PreferencesPage.test.tsx

@@ -0,0 +1,273 @@
+/**
+ * PreferencesPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { PreferencesPage } from '../PreferencesPage';
+import { api } from '../../api/controlPanelApi';
+
+// Mock the API
+jest.mock('../../api/controlPanelApi', () => ({
+  api: {
+    getPreferences: jest.fn(),
+    updatePreferences: jest.fn(),
+    deletePreferences: jest.fn(),
+  },
+}));
+
+// Mock window.confirm
+global.confirm = jest.fn();
+
+describe('PreferencesPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (global.confirm as jest.Mock).mockReturnValue(true);
+  });
+
+  it('loads and displays preferences on mount', async () => {
+    const mockPreferences = { theme: 'dark', language: 'en' };
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: mockPreferences,
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue(/"theme": "dark"/)).toBeInTheDocument();
+    });
+
+    expect(api.getPreferences).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays loading state initially', () => {
+    (api.getPreferences as jest.Mock).mockImplementation(() => new Promise(() => {}));
+
+    render(<PreferencesPage />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('displays error message when loading fails', async () => {
+    (api.getPreferences as jest.Mock).mockRejectedValue(new Error('Network error'));
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Network error/i)).toBeInTheDocument();
+    });
+  });
+
+  it('validates JSON syntax in real-time', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+
+    // Enter invalid JSON
+    fireEvent.change(editor, { target: { value: '{invalid json}' } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Unexpected token/i)).toBeInTheDocument();
+    });
+  });
+
+  it('validates nesting depth', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+
+    // Create deeply nested object (11 levels)
+    const deeplyNested = {
+      a: { b: { c: { d: { e: { f: { g: { h: { i: { j: { k: 'too deep' } } } } } } } } } },
+    };
+
+    fireEvent.change(editor, { target: { value: JSON.stringify(deeplyNested) } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/too deeply nested/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables save button when JSON is invalid', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+    const saveButton = screen.getByRole('button', { name: /Save Preferences/i });
+
+    // Invalid JSON
+    fireEvent.change(editor, { target: { value: '{invalid}' } });
+
+    expect(saveButton).toBeDisabled();
+  });
+
+  it('saves preferences successfully', async () => {
+    const initialPrefs = { theme: 'light' };
+    const updatedPrefs = { theme: 'dark', language: 'en' };
+
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: initialPrefs,
+    });
+    (api.updatePreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: updatedPrefs,
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+    const saveButton = screen.getByRole('button', { name: /Save Preferences/i });
+
+    fireEvent.change(editor, { target: { value: JSON.stringify(updatedPrefs) } });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(api.updatePreferences).toHaveBeenCalledWith(updatedPrefs);
+      expect(screen.getByText(/saved successfully/i)).toBeInTheDocument();
+    });
+  });
+
+  it('displays error when save fails', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+    (api.updatePreferences as jest.Mock).mockRejectedValue(new Error('Save failed'));
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+    const saveButton = screen.getByRole('button', { name: /Save Preferences/i });
+
+    fireEvent.change(editor, { target: { value: '{"new": "value"}' } });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Save failed/i)).toBeInTheDocument();
+    });
+  });
+
+  it('resets preferences to defaults with confirmation', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: { custom: 'value' },
+    });
+    (api.deletePreferences as jest.Mock).mockResolvedValue(undefined);
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const resetButton = screen.getByRole('button', { name: /Reset to Defaults/i });
+
+    fireEvent.click(resetButton);
+
+    await waitFor(() => {
+      expect(global.confirm).toHaveBeenCalledWith(
+        expect.stringContaining('Reset all preferences')
+      );
+      expect(api.deletePreferences).toHaveBeenCalled();
+    });
+  });
+
+  it('does not reset if user cancels confirmation', async () => {
+    (global.confirm as jest.Mock).mockReturnValue(false);
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: { custom: 'value' },
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const resetButton = screen.getByRole('button', { name: /Reset to Defaults/i });
+
+    fireEvent.click(resetButton);
+
+    expect(api.deletePreferences).not.toHaveBeenCalled();
+  });
+
+  it('formats JSON when format button is clicked', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+    const formatButton = screen.getByRole('button', { name: /Format JSON/i });
+
+    // Enter compact JSON
+    const compactJson = '{"a":"b","c":"d"}';
+    fireEvent.change(editor, { target: { value: compactJson } });
+    fireEvent.click(formatButton);
+
+    // Should be formatted with indentation
+    expect(editor).toHaveValue(JSON.stringify(JSON.parse(compactJson), null, 2));
+  });
+
+  it('displays size indicator with correct color', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const sizeChip = screen.getByText(/bytes/i);
+    expect(sizeChip).toBeInTheDocument();
+  });
+
+  it('shows warning color when approaching size limit', async () => {
+    (api.getPreferences as jest.Mock).mockResolvedValue({
+      user_id: 'user-123',
+      preferences: {},
+    });
+
+    render(<PreferencesPage />);
+
+    await waitFor(() => screen.getByLabelText(/Preferences JSON/i));
+
+    const editor = screen.getByRole('textbox', { name: /Preferences JSON/i });
+
+    // Create large JSON (>75% of limit)
+    const largeValue = 'x'.repeat(80000);
+    fireEvent.change(editor, { target: { value: `{"data":"${largeValue}"}` } });
+
+    // The chip should exist (we can't easily test color without CSS)
+    expect(screen.getByText(/bytes/i)).toBeInTheDocument();
+  });
+});

package/ui/src/pages/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Page components for QwickApps Server control panel
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+export { DashboardPage } from './DashboardPage';
+export { LogsPage } from './LogsPage';
+export { SystemPage } from './SystemPage';
+export { AuthPage } from './AuthPage';
+export { UsersPage } from './UsersPage';
+export { APIKeysPage } from './APIKeysPage';
+export { PluginsPage } from './PluginsPage';
+export { PreferencesPage } from './PreferencesPage';
+export { NotFoundPage } from './NotFoundPage';
+export { ContentOpsJobsPage } from './ContentOpsJobsPage';

package/ui/tsconfig.lib.json

@@ -5,7 +5,9 @@
     "declarationDir": "../dist-ui-lib",
     "emitDeclarationOnly": true,
     "noEmit": false,
-    "allowImportingTsExtensions": false
+    "allowImportingTsExtensions": false,
+    "rootDir": "."
   },
-  "include": ["src/components/index.ts", "src/components/**/*.ts", "src/components/**/*.tsx", "src/pages/**/*.tsx", "src/api/**/*.ts", "src/config/**/*.ts"]
+  "include": ["src/components/index.ts", "src/components/**/*.ts", "src/components/**/*.tsx", "src/api/**/*.ts", "src/config/**/*.ts", "src/hooks/**/*.ts"],
+  "exclude": ["**/__tests__/**", "**/*.test.ts", "**/*.test.tsx"]
 }

package/dist/plugins/auth/adapter-wrapper.test.d.ts

@@ -1,7 +0,0 @@
-/**
- * Auth Adapter Wrapper Tests
- *
- * Unit tests for the hot-reload adapter wrapper.
- */
-export {};
-//# sourceMappingURL=adapter-wrapper.test.d.ts.map

package/dist/plugins/auth/adapter-wrapper.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"adapter-wrapper.test.d.ts","sourceRoot":"","sources":["../../../src/plugins/auth/adapter-wrapper.test.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}