SLP_Software/slp-modular-cms
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Completes local-dev-master-slave-setup: dual-instance frontend tooling, module-capability gating, and master/slave protocol self-healing fixes

Browse Source 
Frontend (Unit 2 completion): dual dev-server tooling (pnpm dev:slave,
pnpm dev:all), per-instance browser tab titles, and a backend
capability check (SystemController + useSystemCapabilities +
ModuleGuard) so a Master-only page is hidden on a slave instance
instead of assuming every backend has every module.

Master/slave protocol fixes surfaced by actually running master and
slave side by side locally:
- Deactivating a CMS instance (Inactive) now releases the slave's
  master gate instead of leaving it stuck on its last pushed status.
- The periodic integrity check now also re-pushes status to every
  reachable slave (previously URL-verification only) and runs once
  immediately on startup.
- Added the originally-specified (but never implemented) slave-pull
  path: a slave now periodically polls its own status from the master
  (GET /api/v1/SlaveStatus) and fails open to Available if the master
  is unreachable for too long, complementing the existing push.
- The slave's own Settings page can no longer "successfully" change
  local availability while the master controls it; it's now locked
  with an explanatory banner and the backend rejects the write with
  409 instead of silently no-op'ing it.
- CMS instance status badges now match the dashboard's color/icon
  styling instead of a plain grey badge.

Also corrected the master-cms-module design docs to match this
as-built behavior, and flagged (without a full rewrite) a larger,
pre-existing divergence between its inception-stage application
design and what construction actually built.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Sluijsens
2026-07-04 19:53:52 +02:00
co-authored by Claude Sonnet 5
parent 274946dbff
commit 0447993181
81 changed files with 2191 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/ModuleGuard.tsx
+44
View File
@@ -0,0 +1,44 @@
import type { ReactNode } from 'react';
import { Link } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import { useSystemCapabilities } from '@/api/useSystemCapabilities';
interface ModuleGuardProps {
requiredModule: string;
children: ReactNode;
}
/**
* Hides a feature that only exists on backend instances with a given module loaded
* (e.g. the CMS-instance management page requires Modules.Master — a local slave
* instance without it should not expose this page even to an Owner).
*/
export function ModuleGuard({ requiredModule, children }: ModuleGuardProps) {
const { t } = useTranslation();
const { data: capabilities, isPending } = useSystemCapabilities();
if (isPending) {
return (
<div className="flex min-h-40 items-center justify-center text-muted-foreground">
<span className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
);
}
if (capabilities?.modules.includes(requiredModule)) {
return <>{children}</>;
}
return (
<div
data-testid="feature-unavailable-message"
className="flex flex-col items-center justify-center gap-4 py-16 text-center"
>
<h1 className="text-2xl font-semibold">{t('errors.featureUnavailableTitle')}</h1>
<p className="max-w-sm text-sm text-muted-foreground">{t('errors.featureUnavailable')}</p>
<Link to="/dashboard" className="text-sm text-primary underline-offset-4 hover:underline">
{t('nav.dashboard')}
</Link>
</div>
);
}
frontend/src/components/cms/CmsInstanceList.tsx
+28 -13
View File
@@ -1,6 +1,5 @@
import { useTranslation } from 'react-i18next';
import { MoreHorizontal } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { MoreHorizontal, CheckCircle, XCircle, MinusCircle } from 'lucide-react';
import {
Table,
TableBody,
@@ -18,11 +17,23 @@ import {
import { Button } from '@/components/ui/button';
import type { CmsInstance, CmsInstanceStatus } from '@/api/types';
function statusBadgeVariant(status: CmsInstanceStatus) {
if (status === 'Available') return 'secondary';
if (status === 'NotAvailable') return 'destructive';
return 'outline';
}
const STATUS_BADGE_CONFIG: Record<
CmsInstanceStatus,
{ colorClass: string; Icon: React.ComponentType<{ className?: string }> }
> = {
Available: {
colorClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
Icon: CheckCircle,
},
NotAvailable: {
colorClass: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
Icon: XCircle,
},
Inactive: {
colorClass: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
Icon: MinusCircle,
},
};
function formatDate(iso: string | null): string {
if (!iso) return '—';
@@ -50,7 +61,9 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
</TableRow>
</TableHeader>
<TableBody>
{instances.map((instance) => (
{instances.map((instance) => {
const { colorClass, Icon } = STATUS_BADGE_CONFIG[instance.status];
return (
<TableRow
key={instance.id}
data-testid="cms-instance-row"
@@ -59,12 +72,13 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
<TableCell>{instance.name}</TableCell>
<TableCell>{instance.url}</TableCell>
<TableCell>
<Badge
variant={statusBadgeVariant(instance.status)}
<div
data-testid="cms-instance-status-badge"
className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium ${colorClass}`}
>
{t(`cms.status.${instance.status}`)}
</Badge>
<Icon className="size-4" />
<span>{t(`cms.status.${instance.status}`)}</span>
</div>
</TableCell>
<TableCell>{formatDate(instance.lastContactedAt)}</TableCell>
<TableCell>{instance.disableMessage ?? '—'}</TableCell>
@@ -90,7 +104,8 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
</DropdownMenu>
</TableCell>
</TableRow>
))}
);
})}
</TableBody>
</Table>
);
frontend/src/components/layout/Sidebar.test.tsx
+19 -1
View File
@@ -27,7 +27,8 @@ describe('Sidebar role filtering (BR-U3-01 – BR-U3-06)', () => {
expect(await screen.findByTestId('nav-dashboard')).toBeInTheDocument();
expect(screen.getByTestId('nav-users')).toBeInTheDocument();
expect(screen.getByTestId('nav-settings')).toBeInTheDocument();
expect(screen.getByTestId('nav-cms')).toBeInTheDocument();
// CMS nav item also waits on the async system-capabilities check (Master module presence).
expect(await screen.findByTestId('nav-cms')).toBeInTheDocument();
expect(screen.queryByTestId('nav-profile')).not.toBeInTheDocument();
});
@@ -41,6 +42,23 @@ describe('Sidebar role filtering (BR-U3-01 – BR-U3-06)', () => {
expect(screen.queryByTestId('nav-profile')).not.toBeInTheDocument();
});
it('Owner does not see CMS when the backend has no Master module (slave instance)', async () => {
mockAuthenticatedAs('Owner');
server.use(
http.get('*/System/capabilities', () =>
HttpResponse.json({ modules: ['Availability', 'Identity'] }),
),
);
renderApp('/dashboard');
expect(await screen.findByTestId('nav-dashboard')).toBeInTheDocument();
expect(screen.getByTestId('nav-users')).toBeInTheDocument();
expect(screen.getByTestId('nav-settings')).toBeInTheDocument();
// Let the async system-capabilities query settle before asserting its absence,
// otherwise this would also pass trivially during the loading state.
await new Promise((resolve) => setTimeout(resolve, 50));
expect(screen.queryByTestId('nav-cms')).not.toBeInTheDocument();
});
it('User sees Dashboard only', async () => {
mockAuthenticatedAs('User');
renderApp('/dashboard');
frontend/src/components/layout/Sidebar.tsx
+7 -2
View File
@@ -5,6 +5,7 @@ import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/auth-context';
import { useAvailabilityStatus } from '@/api/useAvailability';
import { useSystemCapabilities } from '@/api/useSystemCapabilities';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { ThemeToggle } from './ThemeToggle';
import { UserMenu } from './UserMenu';
@@ -17,6 +18,7 @@ interface NavItem {
icon: LucideIcon;
testId: string;
roles?: Role[];
requiredModule?: string;
}
const ALLOWED_WHEN_UNAVAILABLE = ['/dashboard', '/settings'];
@@ -24,7 +26,7 @@ const ALLOWED_WHEN_UNAVAILABLE = ['/dashboard', '/settings'];
const NAV_ITEMS: NavItem[] = [
{ to: '/dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard, testId: 'nav-dashboard' },
{ to: '/users', labelKey: 'nav.users', icon: Users, testId: 'nav-users', roles: ['Owner', 'Administrator'] },
{ to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms', roles: ['Owner'] },
{ to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms', roles: ['Owner'], requiredModule: 'Master' },
];
const SETTINGS_ITEM: NavItem = {
@@ -39,11 +41,14 @@ export function Sidebar({ onClose }: SidebarProps = {}) {
const { t } = useTranslation();
const { user } = useAuth();
const { data: availability } = useAvailabilityStatus();
const { data: capabilities } = useSystemCapabilities();
const role = user?.role as Role | undefined;
const systemUnavailable = availability?.status === 'NotAvailable';
const visibleItems = NAV_ITEMS.filter(
(item) => !item.roles || (role && item.roles.includes(role))
(item) =>
(!item.roles || (role && item.roles.includes(role))) &&
(!item.requiredModule || capabilities?.modules.includes(item.requiredModule))
);
const showSettings = !SETTINGS_ITEM.roles || (role && SETTINGS_ITEM.roles.includes(role));