@nocobase/app-template-default 1.0.0-beta.83 → 1.0.0-beta.85

package/tests/fixtures/form-feedback/verify-inline.mjs

@@ -0,0 +1,174 @@
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { Buffer } from 'node:buffer';
+import { log } from 'node:console';
+const require = createRequire(path.join(process.cwd(), 'package.json'));
+const { chromium, expect } = require('@playwright/test');
+const [base, out, name] = process.argv.slice(2);
+if (!/^http:\/\/127\.0\.0\.1:\d+\/main\/$/.test(base ?? ''))
+  throw new Error('Supply the isolated application entry.');
+fs.mkdirSync(out, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
+const pageErrors = [];
+page.on('pageerror', (error) => pageErrors.push(error.message));
+const shot = (point) =>
+  page.screenshot({
+    path: path.join(out, `${name}-${point}.png`),
+    fullPage: true,
+  });
+try {
+  await page.goto(base + 'login');
+  await page
+    .getByLabel('Username or email')
+    .fill(process.env.TEST_ADMIN_USERNAME ?? 'nocobase');
+  await page
+    .getByLabel('Password', { exact: true })
+    .fill(process.env.TEST_ADMIN_PASSWORD ?? 'admin123');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await expect(page.getByLabel('Username or email')).not.toBeVisible();
+  await page.goto(base + 'equipment-validation');
+  const group = page.getByRole('form', {
+    name: 'Equipment group',
+    exact: true,
+  });
+  const save = group.getByRole('button', {
+    name: 'Save equipment group',
+    exact: true,
+  });
+  const entry = group.getByRole('button', {
+    name: 'Equipment group',
+    exact: true,
+  });
+  await save.click();
+  await expect(entry).toBeFocused();
+  await expect(group.getByRole('alert')).toHaveCount(0);
+  await expect(group.getByRole('list')).toHaveCount(0);
+  const errorId = await entry.getAttribute('aria-describedby');
+  await expect(page.locator(`[id="${errorId}"]`)).toHaveText(
+    'Add at least two equipment items.',
+  );
+  await save.click();
+  await expect(
+    group.getByText('Add at least two equipment items.', { exact: true }),
+  ).toHaveCount(1);
+  await expect(group.getByLabel('Equipment item 1')).toHaveValue('Camera');
+  await shot('group-inline');
+  await entry.click();
+  await save.click();
+  await expect(group.getByRole('status')).toHaveText('Equipment group saved.');
+  await expect(group.locator('[data-form-feedback-error]')).toHaveCount(0);
+  const unique = page.getByLabel('Unique name', { exact: true });
+  await page
+    .getByRole('button', { name: 'Save unique name', exact: true })
+    .click();
+  const controlled = page.getByRole('form', {
+    name: 'Unique equipment',
+    exact: true,
+  });
+  await expect(unique).toBeFocused();
+  await expect(controlled.getByRole('alert')).toHaveCount(0);
+  await expect(
+    controlled.getByText('Choose a unique equipment name.', { exact: true }),
+  ).toHaveCount(1);
+  await unique.fill('Retained correction');
+  await expect(
+    controlled.getByText('Choose a unique equipment name.', { exact: true }),
+  ).toHaveCount(0);
+  await expect(unique).toHaveAttribute('aria-invalid', 'false');
+  await expect(unique).toHaveAttribute('aria-describedby', 'updated-help');
+  await expect(unique).toHaveValue('Retained correction');
+  await shot('corrected-inline');
+  await page.goto(base + 'equipment/drawer');
+  const draft = page.getByLabel('Equipment name', { exact: true });
+  await draft.fill('Retained equipment draft');
+  const file = page.getByLabel('Attachment', { exact: true });
+  await file.setInputFiles({
+    name: 'equipment.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from('retained equipment'),
+  });
+  const submit = page.getByRole('button', {
+    name: 'Save request',
+    exact: true,
+  });
+  await submit.click();
+  await expect(page.locator('#row-camera')).toBeFocused();
+  await expect(
+    page.getByRole('tab', { name: 'Items', exact: true }),
+  ).toHaveAttribute('aria-selected', 'true');
+  await expect(
+    page.getByRole('button', { name: 'Borrowed items', exact: true }),
+  ).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.getByRole('alert')).toHaveCount(0);
+  await expect(page.locator('[data-form-feedback-error]')).toHaveCount(2);
+  expect(page.url()).toBe(base + 'equipment/drawer');
+  await page.locator('#row-camera').fill('Corrected camera');
+  await expect(page.locator('[data-form-feedback-error]')).toHaveCount(1);
+  await expect(page.locator('#row-tripod')).toHaveAttribute(
+    'aria-invalid',
+    'true',
+  );
+  await expect(draft).toHaveValue('Retained equipment draft');
+  expect(await file.evaluate((input) => input.files[0].name)).toBe(
+    'equipment.txt',
+  );
+  await shot('drawer-inline');
+  await page.locator('#row-tripod').fill('Corrected tripod');
+  await expect(page.locator('[data-form-feedback-error]')).toHaveCount(0);
+  await page.getByLabel('Response', { exact: true }).selectOption('success');
+  await submit.click();
+  await expect(page.getByRole('status')).toHaveText(
+    'Saved; workflow submitted.',
+  );
+  await expect(page.getByRole('alert')).toHaveCount(0);
+  await page.getByLabel('Response', { exact: true }).selectOption('unknown');
+  await submit.click();
+  await expect(page.getByRole('alert')).toBeFocused();
+  await expect(page.getByRole('alert')).toContainText('Unable to save.');
+  await expect(page.getByRole('alert').getByRole('button')).toHaveCount(0);
+  await expect(page.getByRole('alert')).not.toContainText('Private');
+  await shot('form-error');
+  await page.getByLabel('Response', { exact: true }).selectOption('network');
+  await submit.click();
+  await expect(page.getByRole('alert')).toContainText('Unable to connect.');
+  await expect(draft).toHaveValue('Retained equipment draft');
+  await page.getByLabel('Response', { exact: true }).selectOption('denied');
+  await submit.click();
+  await expect(page.getByRole('alert')).toContainText('current access');
+  await page.getByLabel('Response', { exact: true }).selectOption('structured');
+  await page
+    .getByRole('button', { name: 'Toggle disabled', exact: true })
+    .click();
+  await submit.click();
+  await expect(page.getByRole('alert')).toBeFocused();
+  await expect(page.getByRole('alert')).toContainText('Unable to save.');
+  await expect(page.getByRole('alert').getByRole('button')).toHaveCount(0);
+  expect(pageErrors).toEqual([]);
+  fs.writeFileSync(
+    path.join(out, `${name}-inline-checks.json`),
+    JSON.stringify(
+      {
+        base,
+        checked: [
+          'array-level error is inline only and first editable entry focused',
+          'repeated submission and successful group retry clean errors',
+          'controlled field reason, correction and help association',
+          'real drawer remains open and regions reveal before row focus',
+          'row reasons are inline only and clear independently',
+          'draft, file and successful request retry retained',
+          'unknown, network and permission failures keep safe form copy',
+          'unavailable field focus uses a safe accessible fallback',
+        ],
+        pageErrors,
+      },
+      null,
+      2,
+    ),
+  );
+  log(`${name}: inline feedback browser checks passed`);
+} finally {
+  await browser.close();
+}

package/tests/fixtures/form-feedback/verify.mjs

@@ -0,0 +1,373 @@
+import process from 'node:process';
+import console from 'node:console';
+import { Buffer } from 'node:buffer';
+import { URL } from 'node:url';
+/* global document */
+// Run only against an authorized isolated application with the equipment fixture installed.
+import { chromium, expect } from '@playwright/test';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+const [base, output, name = 'application', legacy] = process.argv.slice(2);
+if (
+  !base ||
+  !output ||
+  !/^http:\/\/(127\.0\.0\.1|localhost):\d+\/main\/$/.test(base)
+)
+  throw new Error(
+    'Supply the isolated server entry URL and an evidence directory.',
+  );
+await mkdir(output, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1280, height: 960 } });
+const failures = [];
+page.on('pageerror', (error) => failures.push(error.message));
+await page.goto(`${base}login`, { waitUntil: 'domcontentloaded' });
+if (legacy !== '--legacy') {
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await expect(page.getByLabel('Username or email')).toBeFocused();
+  await expect(page.getByLabel('Username or email')).toHaveAttribute(
+    'aria-invalid',
+    'true',
+  );
+  await page
+    .getByLabel('Username or email')
+    .fill(process.env.TEST_ADMIN_USERNAME ?? 'nocobase');
+  await page
+    .getByLabel('Password', { exact: true })
+    .fill('incorrect-fixture-password');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+  await expect(page.locator('form [role="alert"]').first()).toBeVisible();
+  await expect(page.getByLabel('Password', { exact: true })).toHaveValue(
+    'incorrect-fixture-password',
+  );
+  await page.screenshot({
+    path: join(output, `${name}-native-login.png`),
+    fullPage: true,
+    animations: 'disabled',
+  });
+}
+await page
+  .getByLabel('Username or email')
+  .fill(process.env.TEST_ADMIN_USERNAME ?? 'nocobase');
+await page
+  .getByLabel('Password', { exact: true })
+  .fill(process.env.TEST_ADMIN_PASSWORD ?? 'admin123');
+await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+await expect(page.getByLabel('Username or email')).not.toBeVisible();
+
+async function open(container = 'page') {
+  await page.goto(`${base}equipment`, { waitUntil: 'domcontentloaded' });
+  await expect(page.getByTestId('retained-record')).toContainText(
+    'Legacy camera',
+  );
+  if (container !== 'page') {
+    await page.getByLabel('Container', { exact: true }).selectOption(container);
+    await expect(page).toHaveURL(
+      new RegExp(
+        container === 'detail-edit'
+          ? '/equipment/retained/edit$'
+          : `/equipment/${container}$`,
+      ),
+    );
+    await expect(
+      page.getByLabel('Equipment name', { exact: true }),
+    ).toBeVisible();
+  }
+}
+async function save() {
+  await page.getByRole('button', { name: 'Save request', exact: true }).click();
+}
+async function inline(locator) {
+  await expect(locator).toHaveAttribute('aria-invalid', 'true');
+  const ids = (await locator.getAttribute('aria-describedby')).split(/\s+/);
+  expect(
+    await page.evaluate(
+      (ids) => ids.every((id) => document.getElementById(id)),
+      ids,
+    ),
+  ).toBe(true);
+}
+async function delayedRequest(action) {
+  let release;
+  let reached;
+  let complete;
+  const completed = new Promise((resolve) => {
+    complete = resolve;
+  });
+  const reachedPromise = new Promise((resolve) => {
+    reached = resolve;
+  });
+  const gate = new Promise((resolve) => {
+    release = resolve;
+  });
+  await page.route('**/api/equipmentFixture', async (route) => {
+    if (route.request().method() !== 'POST') return route.continue();
+    reached();
+    await gate;
+    await route.continue();
+    complete();
+  });
+  await save();
+  await reachedPromise;
+  await action();
+  release();
+  await completed;
+  await page.unroute('**/api/equipmentFixture');
+}
+
+await open();
+const before = await page.getByTestId('retained-record').innerText();
+await writeFile(join(output, `${name}-record.json`), before);
+if (legacy === '--legacy') {
+  await save();
+  await expect(page.getByRole('alert')).toHaveText('Unable to save equipment.');
+  await expect(page.locator('#row-camera')).toHaveCount(0);
+  await page.screenshot({
+    path: join(output, `${name}-before.png`),
+    fullPage: true,
+    animations: 'disabled',
+  });
+  await browser.close();
+  console.log(`${name}: legacy failure reproduced; record captured`);
+  process.exit(0);
+}
+
+const checked = [
+  'native template sign-in validation and request failure preserve input',
+];
+for (const container of ['page', 'dialog', 'drawer', 'detail-edit']) {
+  await open(container);
+  const routeBeforeFailure = page.url();
+  const title = page.getByLabel('Equipment name', { exact: true });
+  await title.fill('');
+  await save();
+  await expect(title).toBeFocused();
+  await inline(title);
+  expect(await title.getAttribute('aria-describedby')).toContain('name-help');
+  await title.fill('Retained equipment draft');
+  await page.getByLabel('Attachment', { exact: true }).setInputFiles({
+    name: 'equipment.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from('attachment fixture'),
+  });
+  await save();
+  await expect(page.locator('#row-camera')).toBeFocused();
+  await inline(page.locator('#row-camera'));
+  await expect(
+    page.getByRole('tab', { name: 'Items', exact: true }),
+  ).toHaveAttribute('aria-selected', 'true');
+  await expect(
+    page.getByRole('button', { name: 'Borrowed items', exact: true }),
+  ).toHaveAttribute('aria-expanded', 'true');
+  await expect(title).toHaveValue('Retained equipment draft');
+  expect(
+    await page
+      .getByLabel('Attachment', { exact: true })
+      .evaluate((input) => input.files[0]?.name),
+  ).toBe('equipment.txt');
+  await page.locator('#row-camera').fill('Corrected camera');
+  await expect(page.locator('#row-camera')).toBeFocused();
+  await expect(page.locator('#row-camera')).not.toHaveAttribute('aria-invalid');
+  await page.screenshot({
+    path: join(output, `${name}-${container}.png`),
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(page.url()).toBe(routeBeforeFailure);
+  checked.push(
+    `${container}: native errors, region reveal, inline association, scroll/focus, input and file retention`,
+  );
+}
+
+await open();
+await delayedRequest(() =>
+  page.getByRole('button', { name: 'Reorder rows', exact: true }).click(),
+);
+await expect(page.locator('#row-tripod')).toBeFocused();
+await inline(page.locator('#row-camera'));
+checked.push('request snapshot follows stable rows after reordering');
+await open();
+await delayedRequest(() =>
+  page.getByRole('button', { name: 'Delete camera row', exact: true }).click(),
+);
+await expect(page.locator('#row-tripod')).toBeFocused();
+await expect(page.locator('#row-camera')).toHaveCount(0);
+checked.push('deleted rows do not receive response errors');
+await open();
+await page.getByRole('tab', { name: 'Items', exact: true }).click();
+await page.getByRole('button', { name: 'Borrowed items', exact: true }).click();
+await delayedRequest(() =>
+  page.locator('#row-camera').fill('Edited while request was pending'),
+);
+await expect(page.locator('#row-tripod')).toBeFocused();
+await expect(page.locator('#row-camera')).not.toHaveAttribute('aria-invalid');
+checked.push('edits during a request discard stale field errors');
+
+await open();
+await page.route('**/api/equipmentFixture', (route) =>
+  route.request().method() === 'POST'
+    ? route.abort('failed')
+    : route.continue(),
+);
+await page.getByLabel('Response', { exact: true }).selectOption('success');
+await save();
+await expect(page.getByRole('alert')).toBeFocused();
+await expect(page.getByRole('alert')).toContainText('Unable to connect');
+await page.unroute('**/api/equipmentFixture');
+checked.push(
+  'aborted HTTP transport preserves input and reports a connection failure',
+);
+for (const mode of ['unknown', 'denied', 'network']) {
+  await open();
+  await page.getByLabel('Response', { exact: true }).selectOption(mode);
+  await save();
+  await expect(page.getByRole('alert')).toBeFocused();
+  await expect(page.getByLabel('Equipment name', { exact: true })).toHaveValue(
+    'Equipment draft',
+  );
+  await expect(page.locator('body')).not.toContainText('Private developer');
+  await expect(page.locator('body')).not.toContainText('Secret salary');
+  checked.push(`${mode}: safe form error and retained input`);
+}
+await open();
+await page
+  .getByRole('button', { name: 'Toggle field access', exact: true })
+  .click();
+await save();
+await expect(page.getByRole('alert')).toBeFocused();
+await expect(page.locator('#row-camera')).toHaveCount(0);
+await expect(page.getByRole('alert')).not.toContainText('Camera item');
+await expect(
+  page.getByRole('tab', { name: 'Details', exact: true }),
+).toHaveAttribute('aria-selected', 'true');
+checked.push('inaccessible fields do not appear or open their region');
+await open();
+await page
+  .getByRole('button', { name: 'Toggle disabled', exact: true })
+  .click();
+await save();
+await expect(page.getByRole('alert')).toBeFocused();
+await page.keyboard.press('Tab');
+await expect(page.getByLabel('Equipment name', { exact: true })).toBeFocused();
+checked.push('disabled fields fall back to a keyboard-accessible safe message');
+await open();
+await page.getByLabel('Response', { exact: true }).selectOption('business');
+await save();
+await expect(page.getByLabel('Department', { exact: true })).toBeFocused();
+await inline(page.getByLabel('Department', { exact: true }));
+await page.getByLabel('Department', { exact: true }).fill('Operations');
+await page.getByLabel('Response', { exact: true }).selectOption('success');
+await save();
+await expect(page.getByRole('status')).toHaveText('Saved; workflow submitted.');
+await expect(page.getByRole('alert')).toHaveCount(0);
+await expect(page.getByTestId('workflow-status')).toContainText('submitted');
+const submittedId = (
+  await page.getByTestId('workflow-status').innerText()
+).split(':')[0];
+await page
+  .getByRole('button', { name: 'Approve request', exact: true })
+  .click();
+await expect(page.getByTestId('workflow-status')).toContainText('approved');
+const persisted = await (
+  await page.request.get(`${base}api/equipmentFixture`)
+).json();
+expect(persisted.requests.find((row) => row.id === submittedId)?.workflow).toBe(
+  'approved',
+);
+expect(
+  persisted.history
+    .filter((row) => row.recordId === submittedId)
+    .map((row) => row.event)
+    .sort(),
+).toEqual(['approved', 'submitted']);
+await page.screenshot({
+  path: join(output, `${name}-approved-workflow.png`),
+  fullPage: true,
+  animations: 'disabled',
+});
+checked.push(
+  'real equipment submission and approval persist with both history events',
+);
+checked.push(
+  'trusted business copy and successful retry clear obsolete errors',
+);
+await open();
+expect(await page.getByTestId('retained-record').innerText()).toBe(before);
+await expect(page.getByTestId('custom-style')).toHaveCSS(
+  'font-family',
+  /serif/,
+);
+const restricted = await browser.newContext();
+const member = {
+  email: 'restricted@example.test',
+  password: 'fixture-member-password',
+};
+const nativeHeaders = { origin: new URL(base).origin };
+let signedIn = await restricted.request.post(`${base}api/auth/sign-in/email`, {
+  headers: nativeHeaders,
+  data: member,
+});
+if (!signedIn.ok()) {
+  const registered = await restricted.request.post(
+    `${base}api/auth/sign-up/email`,
+    {
+      headers: nativeHeaders,
+      data: {
+        ...member,
+        username: 'restricted_fixture',
+        name: 'Restricted fixture member',
+      },
+    },
+  );
+  expect(registered.ok()).toBe(true);
+  signedIn = await restricted.request.post(`${base}api/auth/sign-in/email`, {
+    headers: nativeHeaders,
+    data: member,
+  });
+}
+expect(signedIn.ok()).toBe(true);
+const deniedRead = await restricted.request.get(`${base}api/equipmentFixture`);
+expect(deniedRead.status()).toBe(403);
+expect(await deniedRead.text()).not.toContain('Legacy camera');
+const deniedWrite = await restricted.request.post(
+  `${base}api/equipmentFixture`,
+  {
+    headers: nativeHeaders,
+    data: {
+      mode: 'success',
+      name: 'Denied request',
+      department: 'Operations',
+      items: [],
+      attachment: '',
+    },
+  },
+);
+expect(deniedWrite.status()).toBe(403);
+const restrictedPage = await restricted.newPage();
+await restrictedPage.goto(`${base}equipment`, {
+  waitUntil: 'domcontentloaded',
+});
+await expect(
+  restrictedPage.getByRole('heading', { name: 'Access denied', exact: true }),
+).toBeVisible();
+await expect(
+  restrictedPage.getByLabel('Equipment name', { exact: true }),
+).toHaveCount(0);
+await restricted.close();
+checked.push(
+  'native ordinary identity is denied both business reads and writes without record disclosure',
+);
+expect(failures).toEqual([]);
+await writeFile(
+  join(output, `${name}-checks.json`),
+  JSON.stringify(
+    { base, checked, recordPreserved: true, pageErrors: failures },
+    null,
+    2,
+  ),
+);
+await browser.close();
+console.log(
+  `${name}: ${checked.length} scenario groups passed; business record and custom style preserved`,
+);

package/tests/fixtures/permission-alignment.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:," />
+    <title>Permission alignment verification</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/tests/fixtures/permission-alignment.tsx"
+    ></script>
+  </body>
+</html>

package/tests/fixtures/permission-alignment.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { PermissionEditor } from '../../client/components/permission-editor';
+import { Button } from '../../client/components/ui/button';
+import { AppThemeProvider } from '../../client/theme';
+import '../../client/styles.css';
+
+// A browser fixture for real editor geometry; no server permissions are changed.
+const fields = [
+  'Alerts',
+  'Monitoring rules',
+  'Business processes',
+  'Rule calculations with a deliberately long English label',
+  'Process nodes',
+];
+const levels = [
+  { value: '', label: 'No additional record access' },
+  { value: 'all', label: 'All records' },
+  { value: 'custom', label: 'Custom conditions' },
+];
+
+export default function Fixture() {
+  const params = new URLSearchParams(location.search);
+  const readOnly = params.has('readonly');
+  const chinese = params.has('chinese');
+  const [enabled, setEnabled] = useState<Record<string, boolean>>({});
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [condition, setCondition] = useState(false);
+  return (
+    <AppThemeProvider>
+      <main className='mx-auto grid max-w-6xl gap-4 p-4'>
+        <h1 className='text-xl'>
+          Roles and permissions · Alignment verification
+        </h1>
+        <PermissionEditor
+          readOnly={readOnly}
+          sections={[
+            {
+              id: 'business',
+              title: 'Business operations',
+              groups: [
+                ...['Alerts', 'Monitoring rules', 'Responsible units'].map(
+                  (group) => ({
+                    id: group,
+                    title: group,
+                    rows: (group === 'Monitoring rules'
+                      ? ['View', 'Configure', 'Run']
+                      : ['Manage']
+                    ).map((action) => {
+                      const id = `${action} ${group.toLowerCase()}`;
+                      return {
+                        id,
+                        label: id,
+                        levels: [],
+                        hint: 'Existing permission descriptions remain visible.',
+                        enabled: enabled[id] ?? true,
+                        scopes: (group === 'Responsible units'
+                          ? ['Responsible units']
+                          : group === 'Alerts'
+                            ? fields.slice(0, 2)
+                            : fields
+                        ).map((label, index) => {
+                          const scopeId = `${id}:${index}`;
+                          return {
+                            id: scopeId,
+                            label:
+                              chinese && index === 3
+                                ? '需要完整显示名称的跨部门监控规则计算数据范围长标签'
+                                : label,
+                            levels,
+                            level:
+                              values[scopeId] ?? (index === 0 ? 'custom' : ''),
+                            hint:
+                              index % 2 === 0
+                                ? 'Other roles and default rules still apply.'
+                                : undefined,
+                            configuration:
+                              index === 0 ? (
+                                <Button
+                                  size='sm'
+                                  variant='outline'
+                                  disabled={readOnly}
+                                  onClick={() =>
+                                    setCondition((value) => !value)
+                                  }
+                                >
+                                  Conditions
+                                </Button>
+                              ) : undefined,
+                          };
+                        }),
+                      };
+                    }),
+                  }),
+                ),
+                {
+                  id: 'without-ranges',
+                  title: 'Other operations',
+                  rows: [
+                    { id: 'create', label: 'Create alert', enabled: true },
+                    { id: 'delete', label: 'Delete alert', enabled: false },
+                  ],
+                },
+              ],
+            },
+          ]}
+          onEnabledChange={(id, value) =>
+            setEnabled((current) => ({ ...current, [id]: value }))
+          }
+          onLevelChange={(id, value) =>
+            setValues((current) => ({ ...current, [id]: value }))
+          }
+        />
+        <p role='status'>
+          {condition
+            ? 'Condition editor requested'
+            : 'No condition editor requested'}
+        </p>
+      </main>
+    </AppThemeProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<Fixture />);