@everystack/admin 0.4.3 → 0.4.5

package/src/screens/ResourceShow.tsx

@@ -5,19 +5,23 @@
  * Fetches via adapter.fetchOne() and displays field values.
  */
 
-import React, { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useCallback, useMemo, useRef } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
-import { LoadingState, ErrorState, Button, Card, Divider } from '@everystack/ui';
+import { LoadingState, ErrorState, Button, Card, Divider, RichContent } from '@everystack/ui';
 import { ImageDisplay } from '../components/ImageDisplay';
 import { TagsDisplay } from '../components/TagsDisplay';
 import { RowActionButton } from '../components/RowActionButton';
+import { DeletePreview } from '../components/DeletePreview';
 import { FieldColumns } from '../components/FieldColumns';
+import { RelationValue } from '../components/RelationValue';
+import { useRelationLabels, type RelationLabels } from '../hooks/useRelationLabels';
 import { useEditors } from '../hooks/useEditors';
 import { resolveColumns, screenLayout } from '../utils/resolve-columns';
 import { wrapBareText } from '../components/CellText';
 import { visibleRowActions } from '../utils/row-actions';
+import { restoreAction, softDeleteColumn } from '../utils/standard-actions';
 import { toCamelCase } from '../utils/naming';
 import { formatDateOnly } from '../utils/format-cell-value';
 import type { FieldDefinition, DataRecord, ResourceConfig } from '../types';
@@ -30,10 +34,15 @@ export interface ResourceShowProps {
   id: string | number;
   /** Called when the edit button is pressed */
   onEditPress?: () => void;
-  /** Called when the delete button is pressed */
-  onDeletePress?: () => void;
+  /**
+   * Called when the delete button is pressed. When the resource declares
+   * `associations`, Delete opens the delete preview and its Confirm calls this.
+   */
+  onDeletePress?: () => void | Promise<void>;
   /** Called when the back/list button is pressed */
   onBackPress?: () => void;
+  /** Open the delete preview on mount (a resource with `associations` only). */
+  confirmDelete?: boolean;
 }
 
 export function ResourceShow({
@@ -42,6 +51,7 @@ export function ResourceShow({
   onEditPress,
   onDeletePress,
   onBackPress,
+  confirmDelete,
 }: ResourceShowProps): React.ReactElement {
   const config = useAdminConfig();
   const adapter = useDataAdapter();
@@ -51,6 +61,8 @@ export function ResourceShow({
   const [record, setRecord] = useState<DataRecord | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  // Declared associations put a preview of the linked rows between Delete and the delete.
+  const [previewOpen, setPreviewOpen] = useState(Boolean(confirmDelete));
 
   // Latest-request guard: only the most recent load may write state, so an older
   // id's or an older request's response can't land over a newer one.
@@ -90,6 +102,15 @@ export function ResourceShow({
     fetchRecord();
   }, [fetchRecord]);
 
+  // Relation fields print the related row's displayField (one request per related resource).
+  const relationFields = useMemo(() => {
+    if (!resourceConfig) return [];
+    const shown = new Set(resourceConfig.showFields ?? resourceConfig.fields.map(f => f.name));
+    return resourceConfig.fields.filter(f => shown.has(f.name) && f.type === 'relation' && !f.render);
+  }, [resourceConfig]);
+  const relationRows = useMemo(() => (record ? [record] : []), [record]);
+  const relationLabels = useRelationLabels(adapter, relationFields, relationRows);
+
   if (!resourceConfig) {
     return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
   }
@@ -109,8 +130,14 @@ export function ResourceShow({
   const label = resourceConfig.label ?? resourceConfig.name;
   const showFields = resourceConfig.showFields ?? resourceConfig.fields.map(f => f.name);
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
-  const canEdit = resourceConfig.actions?.edit !== false;
-  const canDelete = resourceConfig.actions?.delete !== false;
+  // A soft-deleted row shows a banner with Restore instead of Edit and Delete.
+  const deletedColumn = softDeleteColumn(resourceConfig);
+  const deletedAt = deletedColumn ? record[deletedColumn] : undefined;
+  const isDeleted = deletedAt != null;
+  const restore = isDeleted ? restoreAction(resourceConfig) : undefined;
+  const canEdit = resourceConfig.actions?.edit !== false && !isDeleted;
+  const canDelete = resourceConfig.actions?.delete !== false && !isDeleted;
+  const associations = resourceConfig.associations?.length ? resourceConfig.associations : undefined;
   const rowActions = visibleRowActions(resourceConfig.rowActions, record);
   const layout = screenLayout(resourceConfig, 'show');
   const columns = layout
@@ -148,11 +175,30 @@ export function ResourceShow({
             <Button label="Edit" variant="outline" onPress={onEditPress} />
           )}
           {canDelete && onDeletePress && (
-            <Button label="Delete" variant="destructive" onPress={onDeletePress} />
+            <Button label="Delete" variant="destructive" onPress={associations ? () => setPreviewOpen(true) : onDeletePress} />
           )}
         </View>
       </View>
 
+      {previewOpen && associations && canDelete && onDeletePress && (
+        <DeletePreview
+          adapter={adapter}
+          label={label}
+          id={id}
+          associations={associations}
+          softDelete={Boolean(deletedColumn)}
+          onConfirm={async () => { await onDeletePress(); setPreviewOpen(false); }}
+          onCancel={() => setPreviewOpen(false)}
+        />
+      )}
+
+      {restore && (
+        <View testID="soft-delete-banner" className="flex-row items-center justify-between mx-4 mb-4 p-3 rounded-md bg-red-50">
+          <Text className="text-sm text-red-700">{`Deleted ${formatDateTime(deletedAt)}`}</Text>
+          <RowActionButton action={restore} record={record} recordId={id} adapter={adapter} refetch={refetchQuietly} />
+        </View>
+      )}
+
       {/* Fields */}
       <Card style={{ marginHorizontal: 16, marginBottom: 16 }}>
         {columns ? (
@@ -161,7 +207,7 @@ export function ResourceShow({
             renderField={(fieldDef, idx) => (
               <>
                 {idx > 0 && <Divider />}
-                <FieldRow field={fieldDef} value={record[fieldDef.name]} record={record} />
+                <FieldRow field={fieldDef} value={record[fieldDef.name]} record={record} labels={relationLabels} />
               </>
             )}
           />
@@ -172,7 +218,7 @@ export function ResourceShow({
           return (
             <React.Fragment key={fieldName}>
               {idx > 0 && <Divider />}
-              <FieldRow field={fieldDef} value={value} record={record} />
+              <FieldRow field={fieldDef} value={value} record={record} labels={relationLabels} />
             </React.Fragment>
           );
         })}
@@ -204,7 +250,12 @@ async function fetchDetail(
     }
     return (await adapter.rpc(`${toCamelCase(resource)}EventDetail`, { id })) as DataRecord;
   }
-  return adapter.fetchOne(resource, id);
+  const select = resourceConfig?.select;
+  // A soft-delete resource loads the row even when it is deleted, so Show can offer Restore.
+  if (resourceConfig?.softDelete) {
+    return adapter.fetchOne(resource, id, { ...(select ? { select } : {}), deleted: 'include' });
+  }
+  return select ? adapter.fetchOne(resource, id, { select }) : adapter.fetchOne(resource, id);
 }
 
 // =============================================================================
@@ -215,9 +266,10 @@ interface FieldRowProps {
   field: FieldDefinition;
   value: unknown;
   record: DataRecord;
+  labels: RelationLabels;
 }
 
-function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
+function FieldRow({ field, value, record, labels }: FieldRowProps): React.ReactElement {
   return (
     <View className="py-3">
       <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
@@ -229,6 +281,11 @@ function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
         <ImageDisplay field={field} value={value} view="show" />
       ) : field.type === 'tags' ? (
         <TagsDisplay field={field} value={value} />
+      ) : field.type === 'relation' && field.relation && value != null && value !== '' ? (
+        <RelationValue resource={field.relation.resource} value={value} labels={labels.get(field.name)} />
+      ) : value != null && (field.format === 'html' || field.format === 'markdown') ? (
+        // Stored rich text is sanitised at render by ui RichContent (web-only).
+        <RichContent value={value} format={field.format} className="text-sm text-gray-900" />
       ) : (
         <Text className="text-sm text-gray-900">{formatFieldValue(value, field)}</Text>
       )}
@@ -236,6 +293,11 @@ function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
   );
 }
 
+function formatDateTime(value: unknown): string {
+  const date = new Date(String(value));
+  return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+}
+
 function formatFieldValue(value: unknown, field: FieldDefinition): string {
   if (value == null) return '\u2014';
 
@@ -244,10 +306,8 @@ function formatFieldValue(value: unknown, field: FieldDefinition): string {
       return value ? 'Yes' : 'No';
     case 'date':
       return formatDateOnly(value);
-    case 'datetime': {
-      const date = new Date(String(value));
-      return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
-    }
+    case 'datetime':
+      return formatDateTime(value);
     case 'json':
       return JSON.stringify(value, null, 2);
     case 'url':

package/src/types.ts

@@ -60,6 +60,8 @@ export interface InputContext {
   /**
    * The whole form's current values, keyed by field name (what Save would
    * send). Read another field here to render a block that depends on it.
+   * Required since 0.4.3: code that builds an InputContext by hand, such as a
+   * test, must pass it.
    */
   values: Record<string, unknown>;
 }
@@ -314,6 +316,12 @@ export interface ResourceConfig {
   editFields?: string[];
   /** Primary key field name */
   primaryKey?: string;
+  /**
+   * PostgREST select string for list, show and edit, embeds included, e.g.
+   * '*,user:users(name)'. One string for all three. Show an embedded value
+   * through a field `render`. RPC-backed resources ignore it.
+   */
+  select?: string;
   /** How the show view fetches one record. 'rpc' calls the role-gated
    *  {camelResource}EventDetail RPC (the resource stays off the REST surface);
    *  'rest' (default) uses adapter.fetchOne. Lets a plain list (no dashboard) —
@@ -328,6 +336,21 @@ export interface ResourceConfig {
   rowActions?: RowActionConfig[];
   /** Tabs above the list, each a named filter. Without this the list shows no tabs. */
   scopes?: ScopeConfig[];
+  /**
+   * The table soft-deletes. Turns on Restore for deleted rows (in a scope with
+   * `deleted: 'only'`, and on Show) and makes Show load a deleted row. Delete
+   * stays shown unless `actions.delete` is false.
+   */
+  softDelete?: {
+    /** The soft-delete column, as the API names it. Default 'deletedAt'. */
+    column?: string;
+  };
+  /**
+   * Rows in other tables that point at this record. Before a delete, Show lists
+   * each one with a count of the linked rows (one request each, at most 12).
+   * Without it, Delete works as before.
+   */
+  associations?: AssociationConfig[];
   /**
    * Show a row count on each tab. Off unless set: counts cost queries. The values of one
    * enum column share one grouped query; every other tab costs one count. Counts follow the
@@ -564,6 +587,24 @@ export interface AdminConfig {
 // Data Types
 // =============================================================================
 
+/**
+ * A table that links to a record, counted in the delete preview. A polymorphic
+ * link (`resource_id` + `resource_type`, often with no foreign key) sets
+ * `typeColumn` and `typeValue` as well.
+ */
+export interface AssociationConfig {
+  /** Shown in the preview, e.g. 'Bookmarks'. */
+  label: string;
+  /** The related table or resource name, as the adapter knows it. */
+  resource: string;
+  /** The column on the related table that holds this record's id. */
+  foreignKey: string;
+  /** The polymorphic type column on the related table, e.g. 'resource_type'. */
+  typeColumn?: string;
+  /** The value of `typeColumn` that means this resource, e.g. 'Content'. */
+  typeValue?: string;
+}
+
 /**
  * A named filter shown as a tab above a list ("Current", "Draft"). Scopes are
  * ANDed with the search and any column filters.
@@ -576,8 +617,13 @@ export interface ScopeConfig {
   filter?: Record<string, unknown>;
   /** The scope active when the URL names none. If none is marked, the first is. */
   default?: boolean;
+  /** Soft-deleted rows: 'include' adds them, 'only' lists nothing else. See ListParams.deleted. */
+  deleted?: DeletedMode;
 }
 
+/** Soft-delete reads: 'include' returns live and deleted rows, 'only' deleted rows. */
+export type DeletedMode = 'include' | 'only';
+
 export interface ListParams {
   /** Page number (1-indexed) */
   page?: number;
@@ -597,6 +643,17 @@ export interface ListParams {
    * returning unfiltered rows. Plain column names only.
    */
   searchFields?: string[];
+  /**
+   * PostgREST select string, embeds included, e.g. '*,user:users(name)'.
+   * Passed verbatim to the query builder. Ignored by RPC-backed resources
+   * (listRpcs); an RPC decides its own shape.
+   */
+  select?: string;
+  /**
+   * Soft-deleted rows, sent as `?deleted=` to the API. RPC-backed resources
+   * get it in the RPC body, and the RPC owner decides.
+   */
+  deleted?: DeletedMode;
 }
 
 export interface ListResult<T = Record<string, unknown>> {
@@ -643,6 +700,8 @@ export interface AggregateParams {
   search?: string;
   /** Columns `search` looks in. Required with `search`. Plain column names only. */
   searchFields?: string[];
+  /** Soft-deleted rows, exactly as `ListParams.deleted`, so a Deleted tab counts deleted rows. */
+  deleted?: DeletedMode;
 }
 
 export interface AggregateResult {

package/src/utils/list-query.ts

@@ -15,7 +15,7 @@
  */
 
 import type { ViewParams } from '../hooks/useViewState';
-import type { ListParams } from '../types';
+import type { DeletedMode, ListParams } from '../types';
 
 /** Longest search text kept. A pasted paragraph is not a search. */
 export const MAX_SEARCH_LENGTH = 200;
@@ -86,15 +86,15 @@ export function parseListQuery(params: ViewParams): ListQuery {
 /**
  * List state → a `setParams` delta. Every key is present, so a cleared field
  * removes its key from the URL. Defaults (page 1, no search, the resource's
- * `defaultPerPage`) are not written.
+ * `defaultPerPage` and `defaultScope`) are not written.
  */
 export function listQueryToParams(
   query: ListQuery,
-  options: { defaultPerPage?: number } = {},
+  options: { defaultPerPage?: number; defaultScope?: string } = {},
 ): Record<string, string | undefined> {
   return {
     q: query.search || undefined,
-    tab: query.scope || undefined,
+    tab: query.scope && query.scope !== options.defaultScope ? query.scope : undefined,
     sort: query.sort || undefined,
     dir: query.order,
     page: query.page && query.page > 1 ? String(query.page) : undefined,
@@ -145,6 +145,8 @@ export interface BuildListParamsOptions {
   baseFilter?: Record<string, unknown>;
   /** The active scope's filter, already resolved from the scope id. */
   scopeFilter?: Record<string, unknown>;
+  /** The active scope's `deleted`, copied into ListParams beside the filter. */
+  scopeDeleted?: DeletedMode;
   /** Columns a user may sort by. A sort outside this set is dropped. */
   sortableFields?: ReadonlySet<string>;
   /** Used when the query has no valid sort of its own. */
@@ -172,6 +174,7 @@ export function buildListParams(query: ListQuery, options: BuildListParamsOption
     sort,
     order,
     filter: mergeFilters(options.baseFilter, options.scopeFilter),
+    ...(options.scopeDeleted ? { deleted: options.scopeDeleted } : {}),
   };
 }
 

package/src/utils/scope-counts.ts

@@ -21,6 +21,8 @@ export interface ScopeCountPlan {
 
 /** `{ state: 'eq.draft' }` is the one shape that can ride a grouped query. */
 function equality(scope: ScopeConfig): { column: string; value: string } | null {
+  // The grouped query reads live rows only, so a scope over deleted rows counts alone.
+  if (scope.deleted) return null;
   const entries = Object.entries(scope.filter ?? {});
   if (entries.length !== 1) return null;
   const [column, raw] = entries[0];

package/src/utils/standard-actions.ts

@@ -6,6 +6,9 @@
  * the same actions column as custom rowActions and share the confirm/busy/error
  * chrome. Show/Edit navigate via the supplied callbacks; Delete self-serves
  * through adapter.delete and lets RowActionButton refetch afterward.
+ *
+ * In a scope with `deleted: 'only'` the rows are soft-deleted: Edit and Delete
+ * are hidden, and a resource that declares `softDelete` gets Restore instead.
  */
 
 import type { ResourceConfig, RowActionConfig, DataRecord } from '../types';
@@ -15,32 +18,65 @@ export interface StandardActionNav {
   onShow?: (record: DataRecord) => void;
   /** Navigate to the record's edit screen. */
   onEdit?: (record: DataRecord) => void;
+  /**
+   * Navigate to the record's Show with its delete preview open. Used by Delete
+   * when the resource declares `associations`; without it Delete keeps its two taps.
+   */
+  onConfirmDelete?: (record: DataRecord) => void;
+}
+
+const idOf = (resourceConfig: ResourceConfig, record: DataRecord): string | number =>
+  (record[resourceConfig.primaryKey ?? 'id'] as string | number) ?? (record.id as string | number);
+
+/** The soft-delete column of a resource that declares `softDelete`, else undefined. */
+export function softDeleteColumn(resourceConfig: ResourceConfig): string | undefined {
+  return resourceConfig.softDelete ? resourceConfig.softDelete.column ?? 'deletedAt' : undefined;
+}
+
+/** Restore a soft-deleted row: clear its column, matching deleted rows only. Undefined without `softDelete`. */
+export function restoreAction(resourceConfig: ResourceConfig): RowActionConfig | undefined {
+  const column = softDeleteColumn(resourceConfig);
+  if (!column) return undefined;
+  return {
+    id: '__restore',
+    label: 'Restore',
+    variant: 'outline',
+    confirm: 'Confirm restore',
+    onPress: async ({ record, adapter }) => {
+      await adapter.update(resourceConfig.name, idOf(resourceConfig, record), { [column]: null }, { deleted: 'only' });
+    },
+  };
 }
 
 export function standardRowActions(
   resourceConfig: ResourceConfig,
   nav: StandardActionNav,
+  scope: { deletedOnly?: boolean } = {},
 ): RowActionConfig[] {
   const actions = resourceConfig.actions ?? {};
-  const primaryKey = resourceConfig.primaryKey ?? 'id';
-  const idOf = (record: DataRecord): string | number =>
-    (record[primaryKey] as string | number) ?? (record.id as string | number);
 
   const out: RowActionConfig[] = [];
 
   if (actions.show !== false && nav.onShow) {
     out.push({ id: '__show', label: 'Show', variant: 'outline', onPress: ({ record }) => nav.onShow!(record) });
   }
+  if (scope.deletedOnly) {
+    const restore = restoreAction(resourceConfig);
+    if (restore) out.push(restore);
+    return out;
+  }
   if (actions.edit !== false && nav.onEdit) {
     out.push({ id: '__edit', label: 'Edit', variant: 'outline', onPress: ({ record }) => nav.onEdit!(record) });
   }
-  if (actions.delete !== false) {
+  if (actions.delete !== false && resourceConfig.associations?.length && nav.onConfirmDelete) {
+    out.push({ id: '__delete', label: 'Delete', variant: 'destructive', onPress: ({ record }) => nav.onConfirmDelete!(record) });
+  } else if (actions.delete !== false) {
     out.push({
       id: '__delete',
       label: 'Delete',
       variant: 'destructive',
       confirm: 'Confirm delete',
-      onPress: ({ record, adapter }) => adapter.delete(resourceConfig.name, idOf(record)),
+      onPress: ({ record, adapter }) => adapter.delete(resourceConfig.name, idOf(resourceConfig, record)),
     });
   }
 

package/src/utils/view-filters.ts

@@ -15,6 +15,7 @@ export function paramsToFilters(params: ViewParams, dimensions: DimensionConfig[
   const filters: DashboardFilters = {};
   if (params.from && params.to) filters.time = [params.from, params.to];
   for (const dim of dimensions) {
+    if (RESERVED_PARAMS.has(dim.column)) continue;
     const v = params[dim.column];
     if (v) filters[dim.column] = v.split(',');
   }
@@ -24,12 +25,13 @@ export function paramsToFilters(params: ViewParams, dimensions: DimensionConfig[
 /** Analytics filters → a query-param delta that clears then sets controlled keys. */
 export function filtersToParams(filters: DashboardFilters, dimensions: DimensionConfig[]): Record<string, string | undefined> {
   const update: Record<string, string | undefined> = { from: undefined, to: undefined };
-  for (const dim of dimensions) update[dim.column] = undefined;
+  for (const dim of dimensions) if (!RESERVED_PARAMS.has(dim.column)) update[dim.column] = undefined;
   if (filters.time && filters.time[0] && filters.time[1]) {
     update.from = filters.time[0];
     update.to = filters.time[1];
   }
   for (const dim of dimensions) {
+    if (RESERVED_PARAMS.has(dim.column)) continue;
     const v = filters[dim.column] as string[] | undefined;
     if (v && v.length) update[dim.column] = v.join(',');
   }