@nocobase/app-template-default 1.0.0-beta.73 → 1.0.0-beta.74

package/AGENTS.md

@@ -101,7 +101,7 @@ When reporting or opening this application's address, use the `Local:` URL print
 
 Scope all verification — formatting, lint, type checking, tests, builds and runtime checks — to the affected files, projects, or packages and their affected consumers. Do not run full-application or workspace-wide checks, or an aggregate `pnpm check`, as a routine step after each edit. Documentation-only changes need formatting and link checks for the changed documents, not type checking, runtime tests, or builds. Report which checks ran, their scope, and any unverified behavior.
 
-Add tests for what you changed — a route's authenticated, unauthenticated, and unauthorized responses; a migration's `up` and `down` against a real database; a page's actual behavior — in `tests/`, never beside the source; browser tests go in `tests/playwright/`. See [testing and verification](.agents/skills/nocobase-app-development/references/testing.md).
+Add tests for what you changed — a route's authenticated, unauthenticated, and unauthorized responses; a migration's `up` and `down` against a real database; a page's actual behavior — in `tests/`, never beside the source; browser tests go in `tests/playwright/`. Start page tests from `tests/components/page-harness.test.tsx`, which keeps application hooks real and supplies external responses through the test fixture. See [testing and verification](.agents/skills/nocobase-app-development/references/testing.md).
 
 For any UI work, start with [the frontend workflow](.agents/skills/nocobase-app-development/references/frontend/ui-workflow.md), which decides the workflow and routes to the styling rules, the theme token contract and the rest.
 

package/README.MD

@@ -401,6 +401,8 @@ An environment variable a section declares takes precedence over the file, and t
 
 Tests live in `tests/`, never beside the source they cover. Put logic and integration tests under `tests/logic/` and component tests under `tests/components/`. Browser tests belong in `tests/playwright/`, which Vitest skips. Playwright does not start the application: start it first (`pnpm dev`, or `pnpm build` and then the built application), then run `pnpm test:e2e`; each test reads the application URL, including its base path, from `APP_URL`. Tests that only need a real server, real authentication, or a real database run under Vitest with `createAppTest()` from `@nocobase/app-testing/server`.
 
+Application tests use the `/server`, `/client` and `/cli` entries of `@nocobase/app-testing`. Start page tests from `tests/components/page-harness.test.tsx`: it uses `renderWithApp()` with real application hooks, strict translations, permission checks and a test toaster. Answer requests through `answerApi()` and replace external services through `services`, without also registering their owning plugins. The template's Vitest configuration includes client plugins in custom package scopes so their contexts and service tokens remain shared. See `.agents/skills/nocobase-app-development/references/testing.md` for fixture ownership and complete server, migration and CLI examples.
+
 ### Notification testing
 
 With the `notification:test` `send` permission, send a real message through the durable Notification Manager with `POST <APP_BASE_PATH>/api/notifications/testSends`. `GET <APP_BASE_PATH>/api/notifications/testTargets` lists each configured channel and the fields its test takes: Email tests require an address and IM tests use the configured logical target. The server enforces the permission when the message is submitted.

package/client/components/default-access-editor.tsx

@@ -0,0 +1,183 @@
+import { useId, type ReactElement, type ReactNode } from 'react';
+import { Input } from '#components/ui/input';
+import { Label } from '#components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
+
+export interface DefaultAccessChoice {
+  readonly value: string;
+  readonly label: string;
+}
+export interface DefaultAccessScopeControl {
+  readonly id: string;
+  readonly action: string;
+  readonly scope: string;
+  readonly value: string;
+  readonly options: readonly DefaultAccessChoice[];
+  readonly configuration?: ReactNode;
+  readonly error?: string | undefined;
+}
+export interface DefaultAccessEditorProps {
+  readonly ruleKey: string;
+  readonly resource: string;
+  readonly resources: readonly DefaultAccessChoice[];
+  readonly scopes: readonly DefaultAccessScopeControl[];
+  readonly existing?: boolean;
+  readonly readOnly?: boolean;
+  readonly keyError?: string | undefined;
+  readonly resourceError?: string | undefined;
+  readonly labels: {
+    readonly key: string;
+    readonly resource: string;
+    readonly chooseResource: string;
+    readonly action: string;
+    readonly scope: string;
+    readonly noScopes: string;
+  };
+  readonly onKeyChange: (value: string) => void;
+  readonly onResourceChange: (value: string) => void;
+  readonly onScopeChange: (id: string, value: string) => void;
+}
+
+/** Controlled fields only: the host owns API authorization, drafts, validation and writes. */
+export function DefaultAccessEditor({
+  ruleKey,
+  resource,
+  resources,
+  scopes,
+  existing = false,
+  readOnly = false,
+  keyError,
+  resourceError,
+  labels,
+  onKeyChange,
+  onResourceChange,
+  onScopeChange,
+}: DefaultAccessEditorProps): ReactElement {
+  const id = useId();
+  return (
+    <div className='flex min-w-0 flex-col gap-6'>
+      <div className='grid gap-4 sm:grid-cols-2'>
+        <div className='flex min-w-0 flex-col gap-2'>
+          <Label htmlFor={`${id}-key`}>{labels.key} *</Label>
+          <Input
+            id={`${id}-key`}
+            name='ruleKey'
+            value={ruleKey}
+            required
+            disabled={existing || readOnly}
+            aria-invalid={Boolean(keyError)}
+            aria-describedby={keyError ? `${id}-key-error` : undefined}
+            onChange={(event) => onKeyChange(event.target.value)}
+          />
+          {keyError && (
+            <p id={`${id}-key-error`} className='text-sm text-destructive'>
+              {keyError}
+            </p>
+          )}
+        </div>
+        <div className='flex min-w-0 flex-col gap-2'>
+          <Label htmlFor={`${id}-resource`}>{labels.resource} *</Label>
+          <Select
+            value={resource}
+            items={resources}
+            disabled={existing || readOnly}
+            onValueChange={(value) => {
+              if (value !== null) onResourceChange(value);
+            }}
+          >
+            <SelectTrigger
+              id={`${id}-resource`}
+              className='w-full'
+              aria-invalid={Boolean(resourceError)}
+              aria-describedby={
+                resourceError ? `${id}-resource-error` : undefined
+              }
+            >
+              <SelectValue placeholder={labels.chooseResource} />
+            </SelectTrigger>
+            <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
+              <SelectGroup>
+                {resources.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          {resourceError && (
+            <p id={`${id}-resource-error`} className='text-sm text-destructive'>
+              {resourceError}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className='overflow-hidden rounded-lg border'>
+        {scopes.length ? (
+          scopes.map((scope) => (
+            <div
+              key={scope.id}
+              className='grid min-w-0 gap-3 border-b p-4 last:border-b-0 sm:grid-cols-3'
+            >
+              <div className='min-w-0 break-words text-sm font-medium'>
+                {scope.action}
+              </div>
+              <div className='flex min-w-0 flex-col gap-2 sm:col-span-2'>
+                <Label htmlFor={`${id}-${scope.id}`}>
+                  {scope.scope || labels.scope}
+                </Label>
+                <Select
+                  value={scope.value}
+                  items={scope.options}
+                  disabled={readOnly}
+                  onValueChange={(value) => {
+                    if (value !== null) onScopeChange(scope.id, value);
+                  }}
+                >
+                  <SelectTrigger
+                    id={`${id}-${scope.id}`}
+                    className='w-full'
+                    aria-label={`${scope.action} · ${scope.scope || labels.scope}`}
+                    aria-invalid={Boolean(scope.error)}
+                    aria-describedby={
+                      scope.error ? `${id}-${scope.id}-error` : undefined
+                    }
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
+                    <SelectGroup>
+                      {scope.options.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                {scope.error && (
+                  <p
+                    id={`${id}-${scope.id}-error`}
+                    className='text-sm text-destructive'
+                  >
+                    {scope.error}
+                  </p>
+                )}
+                {scope.configuration}
+              </div>
+            </div>
+          ))
+        ) : (
+          <p className='p-4 text-sm text-muted-foreground'>{labels.noScopes}</p>
+        )}
+      </div>
+    </div>
+  );
+}