@startsimpli/ui 0.4.155 → 0.4.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.155",
+  "version": "0.4.157",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -55,9 +55,9 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@startsimpli/api": "^0.5.68",
-    "@startsimpli/auth": "^0.4.41",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/auth": "^0.4.42",
+    "@startsimpli/i18n": "^0.1.3",
+    "@startsimpli/api": "^0.5.68"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -152,8 +152,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/realtime": "0.0.2",
-    "@startsimpli/i18n": "0.1.3"
+    "@startsimpli/i18n": "0.1.3",
+    "@startsimpli/realtime": "0.0.2"
   },
   "keywords": [
     "ui",

package/src/components/collection/ReviewDrawer.tsx

@@ -92,6 +92,16 @@ export interface ReviewDrawerProps {
    * see the decision that was just made.
    */
   renderExtra?: (record: EntityRecord, type: EntityTypeDef) => ReactNode;
+  /**
+   * False for a reader who cannot change this record (bd startsim-m7fdm.32).
+   * The record, its sources, its note and prev/next stay; the State select,
+   * "Edit fields", the decisions, "Add note" and their shortcuts are not drawn,
+   * so a view-only reader is not offered a control that can only end in
+   * "Could not save.". A control the person cannot use is hidden, not greyed
+   * out. The host decides it per record (a share on the record answers).
+   * Defaults to true.
+   */
+  canEdit?: boolean;
 }
 
 export function ReviewDrawer(props: ReviewDrawerProps) {
@@ -111,6 +121,7 @@ function ReviewDrawerInner({
   sourceTierByHost,
   renderEditFields,
   renderExtra,
+  canEdit = true,
 }: ReviewDrawerProps & { record: EntityRecord }) {
   const cfg = useMemo(() => resolveReviewConfig(type, config), [type, config]);
   const decisions = useMemo(() => reviewDecisions(cfg), [cfg]);
@@ -229,7 +240,7 @@ function ReviewDrawerInner({
     if (mode !== 'review') return;
     function onKey(e: KeyboardEvent) {
       if (shouldIgnoreShortcut(e)) return;
-      const d = decisions.find((x) => x.shortcut === e.key);
+      const d = canEdit ? decisions.find((x) => x.shortcut === e.key) : undefined;
       if (d) {
         e.preventDefault();
         applyDecision(d);
@@ -244,16 +255,20 @@ function ReviewDrawerInner({
         case 'ArrowUp':
           if (prev) { e.preventDefault(); onNavigate(prev); }
           break;
-        case 'e': e.preventDefault(); setMode('edit'); break;
+        case 'e':
+          if (canEdit) { e.preventDefault(); setMode('edit'); }
+          break;
         case 'Escape': e.preventDefault(); onClose(); break;
       }
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, prev, next, decisions, data]);
+  }, [mode, prev, next, decisions, data, canEdit]);
 
-  const legend = [...decisions.map((d) => `${d.shortcut} ${d.label.toLowerCase()}`), 'e edit', 'j/k move'].join(' · ');
+  const legend = canEdit
+    ? [...decisions.map((d) => `${d.shortcut} ${d.label.toLowerCase()}`), 'e edit', 'j/k move'].join(' · ')
+    : 'j/k move';
 
   return (
     <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
@@ -270,7 +285,13 @@ function ReviewDrawerInner({
           </div>
           <div className="flex shrink-0 items-center gap-1">
             {/* Current state — and the rare manual override (mark written, un-reject). */}
-            {cfg.statusChoices.length > 0 ? (
+            {!canEdit ? (
+              status ? (
+                <span className="rounded-full bg-muted px-2 py-0.5 text-xs capitalize text-muted-foreground">
+                  {status.replace(/_/g, ' ')}
+                </span>
+              ) : null
+            ) : cfg.statusChoices.length > 0 ? (
               <Select value={status || undefined} onValueChange={overrideStatus}>
                 <SelectTrigger className="h-7 w-auto gap-1 border-border text-xs capitalize">
                   <SelectValue placeholder="State…" />
@@ -302,13 +323,15 @@ function ReviewDrawerInner({
             >
               <ChevronRight className="h-4 w-4" />
             </button>
-            <button
-              onClick={() => setMode((m) => (m === 'review' ? 'edit' : 'review'))}
-              className="ml-1 rounded border border-border px-2.5 py-1 text-xs hover:bg-muted"
-              title="Edit fields (e)"
-            >
-              {mode === 'review' ? 'Edit fields' : 'Review'}
-            </button>
+            {canEdit ? (
+              <button
+                onClick={() => setMode((m) => (m === 'review' ? 'edit' : 'review'))}
+                className="ml-1 rounded border border-border px-2.5 py-1 text-xs hover:bg-muted"
+                title="Edit fields (e)"
+              >
+                {mode === 'review' ? 'Edit fields' : 'Review'}
+              </button>
+            ) : null}
             <button
               onClick={onClose}
               className="rounded p-1 text-muted-foreground hover:bg-muted"
@@ -319,7 +342,7 @@ function ReviewDrawerInner({
           </div>
         </header>
 
-        {mode === 'edit' ? (
+        {mode === 'edit' && canEdit ? (
           <div className="flex-1 overflow-y-auto px-4 py-4">
             {renderEditFields ? (
               renderEditFields({
@@ -374,7 +397,7 @@ function ReviewDrawerInner({
             </div>
 
             <footer className="space-y-3 border-t border-border px-4 py-3">
-              {decisions.length > 0 ? (
+              {canEdit && decisions.length > 0 ? (
                 <div className="flex items-stretch gap-2">
                   {decisions.map((d) => (
                     <DecisionButton
@@ -389,20 +412,24 @@ function ReviewDrawerInner({
               ) : null}
 
               <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setNoteOpen((o) => !o)}
-                  className={cn(
-                    'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
-                    note && 'text-primary',
-                  )}
-                >
-                  <MessageSquarePlus className="h-3.5 w-3.5" />
-                  {note ? 'Note ✓' : 'Add note'}
-                </button>
+                {canEdit ? (
+                  <button
+                    onClick={() => setNoteOpen((o) => !o)}
+                    className={cn(
+                      'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
+                      note && 'text-primary',
+                    )}
+                  >
+                    <MessageSquarePlus className="h-3.5 w-3.5" />
+                    {note ? 'Note ✓' : 'Add note'}
+                  </button>
+                ) : (
+                  <span className="text-xs text-muted-foreground">You can view this {type.label.toLowerCase()}.</span>
+                )}
                 <span className="ml-auto text-[11px] text-muted-foreground">{legend}</span>
               </div>
 
-              {noteOpen ? (
+              {noteOpen && canEdit ? (
                 <div className="space-y-2">
                   <Textarea
                     value={note}

package/src/components/collection/__tests__/review-drawer-reader.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * A reader who cannot change the record is not offered controls that can only
+ * end in "Could not save." (bd startsim-m7fdm.32, review bead startsim-j9agp).
+ *
+ * Before this, the drawer drew the State select, "Edit fields", Approve /
+ * Needs work / Reject and "Add note" for everyone, and a view-only reader
+ * learned the truth from an error toast after pressing one. The host now says
+ * per record whether it may be changed, and the drawer draws accordingly.
+ */
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { ReviewDrawer } from '../ReviewDrawer';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const TOPIC_TYPE: EntityTypeDef = {
+  id: 1,
+  key: 'topic',
+  label: 'Topic',
+  attributes: [
+    {
+      id: 'status',
+      name: 'status',
+      dataType: 'enum',
+      required: false,
+      config: { choices: ['suggested', 'ready', 'written', 'rejected'] },
+    },
+    { id: 'title', name: 'title', dataType: 'text', required: false, config: {} },
+    { id: 'team_notes', name: 'team_notes', dataType: 'text', required: false, config: {} },
+  ],
+};
+
+function topic(id: number, title: string, note = ''): EntityRecord {
+  return {
+    id,
+    entityType: 'topic',
+    externalId: null,
+    name: title,
+    data: { title, status: 'suggested', ...(note ? { team_notes: note } : {}) },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function stubClient(): CollectionClient & { updateEntity: jest.Mock } {
+  const updateEntity = jest.fn(async () => topic(1, 'x'));
+  return {
+    listTypes: jest.fn(async () => page([TOPIC_TYPE])),
+    listAllEntities: jest.fn(async () => []),
+    updateEntity,
+  } as CollectionClient & { updateEntity: jest.Mock };
+}
+
+function renderDrawer(canEdit: boolean | undefined, record = topic(1, 'Oman customs')) {
+  const client = stubClient();
+  const onNavigate = jest.fn();
+  const records = [record, topic(2, 'Bahrain filing')];
+  render(
+    <ReviewDrawer
+      client={client}
+      type={TOPIC_TYPE}
+      records={records}
+      record={record}
+      onClose={() => {}}
+      onNavigate={onNavigate}
+      renderEditFields={() => <div>FIELD EDITOR</div>}
+      {...(canEdit === undefined ? {} : { canEdit })}
+    />,
+  );
+  return { client, onNavigate };
+}
+
+describe('ReviewDrawer for a view-only reader', () => {
+  it('draws no State select, Edit fields, decisions or Add note', () => {
+    renderDrawer(false);
+
+    expect(screen.getByText('Oman customs')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).toBeNull();
+    expect(screen.queryByRole('button', { name: /edit fields/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /approve/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /reject/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /needs work/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /add note/i })).toBeNull();
+    expect(screen.getByText('You can view this topic.')).toBeInTheDocument();
+  });
+
+  it('still shows where the record stands, and its note', () => {
+    renderDrawer(false, topic(1, 'Oman customs', 'Angle too broad.'));
+
+    expect(screen.getByText('suggested')).toBeInTheDocument();
+    expect(screen.getByText('Angle too broad.')).toBeInTheDocument();
+  });
+
+  it('ignores the decision and edit shortcuts, and still walks the queue', () => {
+    const { client, onNavigate } = renderDrawer(false);
+
+    fireEvent.keyDown(window, { key: 'a' });
+    fireEvent.keyDown(window, { key: 'x' });
+    fireEvent.keyDown(window, { key: 'e' });
+    expect(client.updateEntity).not.toHaveBeenCalled();
+    expect(screen.queryByText('FIELD EDITOR')).toBeNull();
+
+    fireEvent.keyDown(window, { key: 'j' });
+    expect(onNavigate).toHaveBeenCalledWith(expect.objectContaining({ id: 2 }));
+  });
+
+  it('an editor still gets every control (the default)', () => {
+    renderDrawer(undefined);
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /edit fields/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /approve/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add note/i })).toBeInTheDocument();
+    expect(screen.queryByText('You can view this topic.')).toBeNull();
+  });
+});