WebUI module split; docs

webui/src/components/AccessBoundary.tsx

@@ -3,17 +3,20 @@ import { Navigate } from "react-router-dom";
 import type { AuthInfo } from "../types";
 import { isApiError } from "../api/client";
 import DismissibleAlert from "./DismissibleAlert";
-import { hasAnyScope } from "../utils/permissions";
+import { hasAnyScope, hasScope } from "../utils/permissions";
 
 type PermissionBoundaryProps = {
   auth: AuthInfo;
-  anyOf: string[];
+  anyOf?: string[];
+  allOf?: string[];
   fallback: string;
   children: ReactNode;
 };
 
-export function PermissionBoundary({ auth, anyOf, fallback, children }: PermissionBoundaryProps) {
-  return hasAnyScope(auth, anyOf) ? <>{children}</> : <Navigate to={fallback} replace />;
+export function PermissionBoundary({ auth, anyOf = [], allOf = [], fallback, children }: PermissionBoundaryProps) {
+  if (allOf.length && !allOf.every((scope) => hasScope(auth, scope))) return <Navigate to={fallback} replace />;
+  if (anyOf.length && !hasAnyScope(auth, anyOf)) return <Navigate to={fallback} replace />;
+  return <>{children}</>;
 }
 
 type ResourceAccessBoundaryProps = {

webui/src/components/table/DataGrid.tsx

@@ -670,7 +670,7 @@ export default function DataGrid<T>({
                         startX: event.clientX,
                         startWidth: currentWidth,
                         minWidth: effectiveColumnMinWidth(column),
-                        maxWidth: Math.max(effectiveColumnMinWidth(column), column.maxWidth ?? 2000),
+                        maxWidth: effectiveColumnMaxWidth(column),
                         baseWidths,
                         rightResizeTargets,
                         bufferTarget: canUseBuffer ? {
@@ -1223,7 +1223,7 @@ function sanitizePersistedColumnState<T>(
       const column = columnMap.get(columnId);
       if (!column || !Number.isFinite(width)) return [];
       const minimum = effectiveColumnMinWidth(column);
-      const maximum = Math.max(minimum, column.maxWidth ?? 2000);
+      const maximum = effectiveColumnMaxWidth(column, minimum);
       return [[columnId, Math.min(maximum, Math.max(minimum, width))]];
     })
   );
@@ -1246,7 +1246,7 @@ function sanitizePersistedColumnState<T>(
 
 function widthForColumn<T>(column: DataGridColumn<T>, savedWidth?: number): string {
   const minimum = effectiveColumnMinWidth(column);
-  const maximum = Math.max(minimum, column.maxWidth ?? 2000);
+  const maximum = effectiveColumnMaxWidth(column, minimum);
   if (savedWidth !== undefined) return `${Math.min(maximum, Math.max(minimum, savedWidth))}px`;
   if (typeof column.width === "number") return `${Math.min(maximum, Math.max(minimum, column.width))}px`;
   if (column.width) return columnTrackWithMinimum(column.width, minimum);
@@ -1291,7 +1291,7 @@ function resizeTargetForColumn<T>(column: DataGridColumn<T>, baseWidths: Record<
     columnId: column.id,
     startWidth: baseWidths[column.id] ?? columnPixelWidth(column),
     minWidth: minimum,
-    maxWidth: Math.max(minimum, column.maxWidth ?? 2000)
+    maxWidth: effectiveColumnMaxWidth(column, minimum)
   };
 }
 
@@ -1303,6 +1303,11 @@ function effectiveColumnMinWidth<T>(column: DataGridColumn<T>): number {
   return Math.max(column.minWidth ?? 0, affordanceWidth);
 }
 
+function effectiveColumnMaxWidth<T>(column: DataGridColumn<T>, minimum = effectiveColumnMinWidth(column)): number {
+  if (column.maxWidth !== undefined) return Math.max(minimum, column.maxWidth);
+  return Math.max(minimum, isFlexibleWidth(column.width) ? BUFFER_MAX_WIDTH : 2000);
+}
+
 function totalColumnWidth<T>(columns: DataGridColumn<T>[], widths: Record<string, number>): number {
   return columns.reduce((total, column) => total + (widths[column.id] ?? columnPixelWidth(column)), 0);
 }
@@ -1450,7 +1455,7 @@ function isFlexibleWidth(width?: string | number): boolean {
 
 function columnPixelWidth<T>(column: DataGridColumn<T>, savedWidth?: number, measuredWidth?: number): number {
   const minimum = effectiveColumnMinWidth(column);
-  const maximum = Math.max(minimum, column.maxWidth ?? 2000);
+  const maximum = effectiveColumnMaxWidth(column, minimum);
   const configured = measuredWidth
     ?? savedWidth
     ?? (typeof column.width === "number" ? column.width : parsePixelWidth(column.width))