@epcare/esm-report-builder 0.1.1-pre.76 → 0.1.1-pre.78

package/src/components/app-shell/report-builder-shell.component.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { InlineLoading } from '@carbon/react';
 import {
     SideNav,
     SideNavItems,
@@ -7,6 +8,7 @@ import {
     SideNavMenu,
     SideNavMenuItem,
 } from '@carbon/react';
+import type { CarbonIconType } from '@carbon/icons-react';
 import {
     Home,
     Report,
@@ -24,178 +26,201 @@ import {
     Activity,
 } from '@carbon/icons-react';
 
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
 import styles from './report-builder-shell.scss';
 
-const ReportBuilderShell: React.FC = () => {
+interface NavItem {
+    label: string;
+    path: string;
+    icon?: CarbonIconType;
+    required: string[];
+    /** Extra paths (besides `path`) that mark this item active. */
+    activePaths?: string[];
+}
+
+interface NavSection {
+    /** Sections without a title render their items as top-level links. */
+    title?: string;
+    icon?: CarbonIconType;
+    /** Extra paths that mark this whole section active (e.g. the admin landing). */
+    activePaths?: string[];
+    items: NavItem[];
+}
+
+const NAV: NavSection[] = [
+    {
+        items: [
+            { label: 'Home', path: '/', icon: Home, required: [RB.REPORT_VIEW] },
+            { label: 'Run Reports', path: '/run', icon: Play, required: [RB.REPORT_RUN] },
+            {
+                label: 'Dashboards',
+                path: '/dashboards',
+                icon: Dashboard,
+                required: [RB.DASHBOARD_VIEW],
+            },
+        ],
+    },
+    {
+        title: 'Report Design',
+        icon: Folder,
+        items: [
+            {
+                label: 'Aggregate Reports',
+                path: '/reports',
+                icon: Report,
+                required: [RB.REPORT_VIEW],
+                activePaths: ['/new', '/edit'],
+            },
+            { label: 'Linelist Reports', path: '/linelist', icon: List, required: [RB.REPORT_VIEW] },
+            {
+                label: 'Indicators',
+                path: '/indicators',
+                icon: ChartColumn,
+                required: [RB.INDICATOR_VIEW],
+            },
+            { label: 'Sections', path: '/sections', icon: Layers, required: [RB.SECTION_VIEW] },
+        ],
+    },
+    {
+        title: 'Admin',
+        icon: Settings,
+        activePaths: ['/admin'],
+        items: [
+            {
+                label: 'Import / Export',
+                path: '/import-export',
+                icon: ArrowRight,
+                required: [RB.PACKAGE_IMPORT, RB.PACKAGE_EXPORT],
+            },
+            {
+                label: 'Dashboards',
+                path: '/admin/dashboards',
+                required: [RB.DASHBOARD_VIEW],
+            },
+            {
+                label: 'Report Categories',
+                path: '/admin/report-categories',
+                required: [RB.CATEGORY_VIEW],
+            },
+            {
+                label: 'Report Library',
+                path: '/admin/report-library',
+                required: [RB.LIBRARY_VIEW],
+            },
+            { label: 'Data Themes', path: '/admin/themes', required: [RB.THEME_VIEW] },
+            {
+                label: 'Age Categories',
+                path: '/admin/age-categories',
+                required: [RB.AGEGROUP_VIEW],
+            },
+            { label: 'Age Groups', path: '/admin/age-groups', required: [RB.AGEGROUP_VIEW] },
+        ],
+    },
+    {
+        title: 'ETL',
+        icon: DataBase,
+        items: [
+            {
+                label: 'Sources',
+                path: '/admin/etl-sources',
+                icon: DataBase,
+                required: [RB.ETLSOURCE_VIEW],
+            },
+            { label: 'Tasks', path: '/admin/etl-tasks', icon: Task, required: [RB.PACKAGE_IMPORT] },
+            {
+                label: 'Data Browser',
+                path: '/admin/etl-browser',
+                icon: TableBuilt,
+                required: [RB.ETLSOURCE_VIEW],
+            },
+            {
+                label: 'Monitoring',
+                path: '/admin/etl-monitors',
+                icon: Activity,
+                required: [RB.ETLMONITOR_VIEW],
+            },
+        ],
+    },
+];
+
+const ShellSkeleton: React.FC = () => (
+    <div className={styles.shell}>
+        <aside className={styles.leftNav} />
+        <main className={styles.main}>
+            <InlineLoading description="Loading…" />
+        </main>
+    </div>
+);
+
+const ReportBuilderShellInner: React.FC = () => {
     const navigate = useNavigate();
     const location = useLocation();
-
-    const isActive = (path: string) =>
-        location.pathname === path || location.pathname.startsWith(`${path}/`);
+    const { has } = useReportBuilderPrivileges();
+
+    const isActive = (path: string, extraPaths?: string[]) =>
+        location.pathname === path ||
+        location.pathname.startsWith(`${path}/`) ||
+        (extraPaths ?? []).some(
+            (extra) => location.pathname === extra || location.pathname.startsWith(`${extra}/`),
+        );
+
+    const visibleSections = React.useMemo(
+        () =>
+            NAV.map((section) => ({
+                ...section,
+                items: section.items.filter((item) => has(...item.required)),
+            })).filter((section) => section.items.length > 0),
+        [has],
+    );
 
     return (
         <div className={styles.shell}>
             <aside className={styles.leftNav}>
                 <SideNav expanded isPersistent={false} aria-label="Report Builder navigation">
                     <SideNavItems>
-                        <SideNavLink
-                            renderIcon={Home}
-                            isActive={location.pathname === '/'}
-                            onClick={() => navigate('/')}
-                        >
-                            Home
-                        </SideNavLink>
-
-                        <SideNavLink
-                            renderIcon={Play}
-                            isActive={isActive('/run')}
-                            onClick={() => navigate('/run')}
-                        >
-                            Run Reports
-                        </SideNavLink>
-
-                        <SideNavLink
-                            renderIcon={Dashboard}
-                            isActive={isActive('/dashboards')}
-                            onClick={() => navigate('/dashboards')}
-                        >
-                            Dashboards
-                        </SideNavLink>
-
-                        <SideNavMenu
-                            renderIcon={Folder}
-                            title="Report Design"
-                            isActive={isActive('/reports') || isActive('/linelist') || isActive('/indicators') || isActive('/sections')}
-                            defaultExpanded={false}
-                        >
-                            <SideNavMenuItem
-                                renderIcon={Report}
-                                isActive={isActive('/reports') || isActive('/new') || isActive('/edit')}
-                                onClick={() => navigate('/reports')}
-                            >
-                                Aggregate Reports
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={List}
-                                isActive={isActive('/linelist')}
-                                onClick={() => navigate('/linelist')}
-                            >
-                                Linelist Reports
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={ChartColumn}
-                                isActive={isActive('/indicators')}
-                                onClick={() => navigate('/indicators')}
-                            >
-                                Indicators
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={Layers}
-                                isActive={isActive('/sections')}
-                                onClick={() => navigate('/sections')}
-                            >
-                                Sections
-                            </SideNavMenuItem>
-                        </SideNavMenu>
-
-                        <SideNavMenu
-                            renderIcon={Settings}
-                            title="Admin"
-                            isActive={isActive('/admin') || isActive('/import-export')}
-                            defaultExpanded={false}
-                        >
-                            <SideNavMenuItem
-                                renderIcon={ArrowRight}
-                                isActive={isActive('/import-export')}
-                                onClick={() => navigate('/import-export')}
-                            >
-                                Import / Export
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/dashboards')}
-                                onClick={() => navigate('/admin/dashboards')}
-                            >
-                                Dashboards
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/report-categories')}
-                                onClick={() => navigate('/admin/report-categories')}
-                            >
-                                Report Categories
+                        {visibleSections.length === 0 && (
+                            <SideNavMenuItem>
+                                No accessible sections — contact your administrator
                             </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/report-library')}
-                                onClick={() => navigate('/admin/report-library')}
-                            >
-                                Report Library
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/themes')}
-                                onClick={() => navigate('/admin/themes')}
-                            >
-                                Data Themes
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/age-categories')}
-                                onClick={() => navigate('/admin/age-categories')}
-                            >
-                                Age Categories
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                isActive={isActive('/admin/age-groups')}
-                                onClick={() => navigate('/admin/age-groups')}
-                            >
-                                Age Groups
-                            </SideNavMenuItem>
-                        </SideNavMenu>
-
-                        <SideNavMenu
-                            renderIcon={DataBase}
-                            title="ETL"
-                            isActive={isActive('/admin/etl')}
-                            defaultExpanded={false}
-                        >
-                            <SideNavMenuItem
-                                renderIcon={DataBase}
-                                isActive={isActive('/admin/etl-sources')}
-                                onClick={() => navigate('/admin/etl-sources')}
-                            >
-                                Sources
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={Task}
-                                isActive={isActive('/admin/etl-tasks')}
-                                onClick={() => navigate('/admin/etl-tasks')}
-                            >
-                                Tasks
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={TableBuilt}
-                                isActive={isActive('/admin/etl-browser')}
-                                onClick={() => navigate('/admin/etl-browser')}
-                            >
-                                Data Browser
-                            </SideNavMenuItem>
-
-                            <SideNavMenuItem
-                                renderIcon={Activity}
-                                isActive={isActive('/admin/etl-monitors')}
-                                onClick={() => navigate('/admin/etl-monitors')}
-                            >
-                                Monitoring
-                            </SideNavMenuItem>
-                        </SideNavMenu>
+                        )}
+                        {visibleSections.map((section) =>
+                            section.title ? (
+                                <SideNavMenu
+                                    key={section.title}
+                                    renderIcon={section.icon}
+                                    title={section.title}
+                                    isActive={
+                                        section.items.some((item) =>
+                                            isActive(item.path, item.activePaths),
+                                        ) || (section.activePaths ?? []).some((path) => isActive(path))
+                                    }
+                                    defaultExpanded={false}
+                                >
+                                    {section.items.map((item) => (
+                                        <SideNavMenuItem
+                                            key={item.path}
+                                            renderIcon={item.icon}
+                                            isActive={isActive(item.path, item.activePaths)}
+                                            onClick={() => navigate(item.path)}
+                                        >
+                                            {item.label}
+                                        </SideNavMenuItem>
+                                    ))}
+                                </SideNavMenu>
+                            ) : (
+                                section.items.map((item) => (
+                                    <SideNavLink
+                                        key={item.path}
+                                        renderIcon={item.icon}
+                                        isActive={isActive(item.path, item.activePaths)}
+                                        onClick={() => navigate(item.path)}
+                                    >
+                                        {item.label}
+                                    </SideNavLink>
+                                ))
+                            ),
+                        )}
                     </SideNavItems>
                 </SideNav>
             </aside>
@@ -207,4 +232,11 @@ const ReportBuilderShell: React.FC = () => {
     );
 };
 
+/** Session-backed privilege gating suspends on first load — show a skeleton, not a blank page. */
+const ReportBuilderShell: React.FC = () => (
+    <Suspense fallback={<ShellSkeleton />}>
+        <ReportBuilderShellInner />
+    </Suspense>
+);
+
 export default ReportBuilderShell;

package/src/components/app-shell/report-builder-shell.scss

@@ -11,5 +11,8 @@
 }
 
 .main {
-  overflow: auto;
+  /* Vertical scroll only — wide content (e.g. ETL browser tables) must scroll
+     inside its own container (etl-browser gridScroll), never push the shell sideways */
+  overflow-y: auto;
+  overflow-x: hidden;
 }

package/src/components/dashboards/dashboards-page.component.tsx

@@ -19,8 +19,13 @@ import {
     updateDashboard,
 } from '../../resources/dashboard/dashboard.api';
 import type { DashboardDto } from '../../types/dashboard/dashboard.types';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
 
 export default function DashboardsPage() {
+    const { has: hasPrivilege } = useReportBuilderPrivileges();
+    const canEditDashboard = hasPrivilege(RB.DASHBOARD_ADD, RB.DASHBOARD_EDIT);
+    const canDeleteDashboard = hasPrivilege(RB.DASHBOARD_PURGE);
     const [q, setQ] = React.useState('');
     const [rows, setRows] = React.useState<DashboardDto[]>([]);
     const [loading, setLoading] = React.useState(false);
@@ -106,11 +111,13 @@ export default function DashboardsPage() {
                 subtitle="Configure dashboards composed of sections and widgets (ETL monitors, reports)."
             />
 
-            <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 1rem' }}>
-                <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
-                    Create Dashboard
-                </Button>
-            </div>
+            {canEditDashboard && (
+                <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 1rem' }}>
+                    <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
+                        Create Dashboard
+                    </Button>
+                </div>
+            )}
 
             <div style={{ padding: '0 1rem', display: 'grid', gap: '1rem' }}>
                 <Search
@@ -131,7 +138,7 @@ export default function DashboardsPage() {
                     />
                 )}
 
-                <DashboardsTable rows={rows} loading={loading} onEdit={onEdit} onDelete={onDelete} />
+                <DashboardsTable rows={rows} loading={loading} onEdit={onEdit} onDelete={onDelete} canEdit={canEditDashboard} canDelete={canDeleteDashboard} />
             </div>
 
             <DashboardFormModal

package/src/components/dashboards/dashboards-table.component.tsx

@@ -35,9 +35,12 @@ interface DashboardsTableProps {
     loading?: boolean;
     onEdit: (uuid: string) => void;
     onDelete: (uuid: string) => void;
+    /** Row actions the signed-in user may see (privilege gating). */
+    canEdit?: boolean;
+    canDelete?: boolean;
 }
 
-export default function DashboardsTable({ rows, loading, onEdit, onDelete }: DashboardsTableProps) {
+export default function DashboardsTable({ rows, loading, onEdit, onDelete, canEdit = true, canDelete = true }: DashboardsTableProps) {
     if (loading && rows.length === 0) {
         return <DataTableSkeleton rowCount={4} columnCount={7} showHeader={false} showToolbar={false} />;
     }
@@ -93,22 +96,26 @@ export default function DashboardsTable({ rows, loading, onEdit, onDelete }: Das
                                         <TableCell>{row.cells[5].value}</TableCell>
                                         <TableCell>
                                             <div className={styles['dashboards-table__actions']}>
-                                                <Button
-                                                    kind="ghost"
-                                                    size="sm"
-                                                    renderIcon={Edit}
-                                                    iconDescription="Edit"
-                                                    hasIconOnly
-                                                    onClick={() => original && onEdit(original.uuid)}
-                                                />
-                                                <Button
-                                                    kind="ghost"
-                                                    size="sm"
-                                                    renderIcon={TrashCan}
-                                                    iconDescription="Retire"
-                                                    hasIconOnly
-                                                    onClick={() => original && onDelete(original.uuid)}
-                                                />
+                                                {canEdit && (
+                                                    <Button
+                                                        kind="ghost"
+                                                        size="sm"
+                                                        renderIcon={Edit}
+                                                        iconDescription="Edit"
+                                                        hasIconOnly
+                                                        onClick={() => original && onEdit(original.uuid)}
+                                                    />
+                                                )}
+                                                {canDelete && (
+                                                    <Button
+                                                        kind="ghost"
+                                                        size="sm"
+                                                        renderIcon={TrashCan}
+                                                        iconDescription="Retire"
+                                                        hasIconOnly
+                                                        onClick={() => original && onDelete(original.uuid)}
+                                                    />
+                                                )}
                                             </div>
                                         </TableCell>
                                     </TableRow>

package/src/components/data-themes/data-themes-page.component.tsx

@@ -8,10 +8,15 @@ import DataThemeModal from './data-theme-modal.component';
 import Header from '../shared/header/header.component';
 
 import type { DataTheme, DataThemeRow } from '../../types/theme/data-theme.types';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
 import { listThemes, createTheme, updateTheme, deleteTheme, getTheme } from '../../resources/theme/data-theme.api';
 
 export default function DataThemesPage() {
     const { t } = useTranslation();
+    const { has: hasPrivilege } = useReportBuilderPrivileges();
+    const canEditTheme = hasPrivilege(RB.THEME_ADD, RB.THEME_EDIT);
+    const canDeleteTheme = hasPrivilege(RB.THEME_PURGE);
     const [q, setQ] = React.useState('');
     const [rows, setRows] = React.useState<DataThemeRow[]>([]);
     const [loading, setLoading] = React.useState(false);
@@ -102,9 +107,11 @@ export default function DataThemesPage() {
                 <div>
                 </div>
 
-                <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
-                    Create Theme
-                </Button>
+                {canEditTheme && (
+                    <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
+                        Create Theme
+                    </Button>
+                )}
             </div>
 
             <Search
@@ -118,7 +125,7 @@ export default function DataThemesPage() {
             {loading ? <div>Loading…</div> : null}
             {!loading && error ? <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{error}</div> : null}
 
-            <DataThemesTable rows={rows} onEdit={onEdit} onDelete={onDelete} />
+            <DataThemesTable rows={rows} onEdit={onEdit} onDelete={onDelete} canEdit={canEditTheme} canDelete={canDeleteTheme} />
 
             <DataThemeModal
                 open={open}

package/src/components/data-themes/data-themes-table.component.tsx

@@ -20,6 +20,9 @@ type Props = {
   rows: DataThemeRow[];
   onEdit: (uuid: string) => void;
   onDelete: (uuid: string) => Promise<void> | void;
+  /** Row actions the signed-in user may see (privilege gating). */
+  canEdit?: boolean;
+  canDelete?: boolean;
 };
 
 const headers = [
@@ -30,7 +33,7 @@ const headers = [
   { key: 'actions', header: '' },
 ];
 
-export default function DataThemesTable({ rows, onEdit, onDelete }: Props) {
+export default function DataThemesTable({ rows, onEdit, onDelete, canEdit = true, canDelete = true }: Props) {
   const tableRows = React.useMemo(
     () =>
       (rows ?? []).map((r) => ({
@@ -71,8 +74,12 @@ export default function DataThemesTable({ rows, onEdit, onDelete }: Props) {
                       return (
                         <TableCell key={cell.id}>
                           <OverflowMenu size="sm" ariaLabel="Theme actions">
-                            <OverflowMenuItem itemText="Edit" onClick={() => onEdit(row.id)} />
-                            <OverflowMenuItem hasDivider isDelete itemText="Delete" onClick={() => onDelete(row.id)} />
+                            {canEdit && (
+                              <OverflowMenuItem itemText="Edit" onClick={() => onEdit(row.id)} />
+                            )}
+                            {canDelete && (
+                              <OverflowMenuItem hasDivider isDelete itemText="Delete" onClick={() => onDelete(row.id)} />
+                            )}
                           </OverflowMenu>
                         </TableCell>
                       );