@strato-admin/cloudscape 0.1.1 → 0.3.0

package/src/edit/Edit.tsx

@@ -1,54 +1,90 @@
 import React from 'react';
-import { EditBase, useEditContext, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import { EditBase, useEditContext, type RaRecord, type EditBaseProps, useNotify, useRedirect } from '@strato-admin/ra-core';
+import {
+  ResourceSchemaProvider,
+  useResourceSchema,
+  useConstructedPageTitle,
+  useSettingValue,
+} from '@strato-admin/core';
 import Container from '@cloudscape-design/components/container';
 import { EditHeader } from './EditHeader';
 import Form from '../form/Form';
 
-export interface EditProps<_RecordType extends RaRecord = RaRecord> {
+export interface EditProps<RecordType extends RaRecord = RaRecord, ErrorType = Error> extends EditBaseProps<
+  RecordType,
+  ErrorType
+> {
   children?: React.ReactNode;
-  inputSchema?: React.ReactNode;
-  title?: React.ReactNode;
+  title?: React.ReactNode | ((record: RecordType) => React.ReactNode);
+  description?: React.ReactNode | ((record: RecordType) => React.ReactNode);
   actions?: React.ReactNode;
-  resource?: string;
-  id?: any;
-  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
-  mutationOptions?: any;
-  queryOptions?: any;
-  redirect?: any;
-  transform?: any;
   include?: string[];
   exclude?: string[];
+  saveButtonLabel?: string;
+  redirect?: false | 'list' | 'detail';
 }
 
 const EditUI = ({
   children,
-  resource,
-  inputSchema,
   title,
   actions,
+  description,
   include,
   exclude,
+  saveButtonLabel,
 }: {
   children?: React.ReactNode;
-  resource?: string;
-  inputSchema?: React.ReactNode;
-  title?: React.ReactNode;
+  title?: React.ReactNode | ((record: any) => React.ReactNode);
   actions?: React.ReactNode;
+  description?: React.ReactNode | ((record: any) => React.ReactNode);
   include?: string[];
   exclude?: string[];
+  saveButtonLabel?: string;
 }) => {
   const { record, isLoading } = useEditContext();
+  const { label, editTitle, editDescription } = useResourceSchema();
+  const constructedTitle = useConstructedPageTitle('edit', label);
+
+  const finalTitle = React.useMemo(() => {
+    if (isLoading || !record) {
+      return '';
+    }
+    const resolvedTitle = title ?? editTitle ?? constructedTitle;
+    if (typeof resolvedTitle === 'function') {
+      return resolvedTitle(record);
+    }
+    return resolvedTitle;
+  }, [isLoading, record, title, editTitle, constructedTitle]);
+
+  const finalDescription = React.useMemo(() => {
+    if (isLoading || !record) {
+      return '';
+    }
+    const resolvedDescription = description ?? editDescription;
+    if (typeof resolvedDescription === 'function') {
+      return resolvedDescription(record);
+    }
+    return resolvedDescription;
+  }, [isLoading, record, description, editDescription]);
 
   if (isLoading || !record) {
     return null;
   }
-
-  const finalChildren = children || <Form include={include} exclude={exclude} />;
+  const finalSaveButtonLabel = saveButtonLabel // || <Message>Save</Message>
+  const finalChildren = children || <Form include={include} exclude={exclude} saveButtonLabel={finalSaveButtonLabel} />;
 
   return (
-    <ResourceSchemaProvider resource={resource} inputSchema={inputSchema}>
-      <Container header={<EditHeader title={title} actions={actions} />}>{finalChildren}</Container>
-    </ResourceSchemaProvider>
+    <Container
+      header={
+        <EditHeader
+          title={finalTitle}
+          description={finalDescription}
+          actions={actions}
+        />
+      }
+    >
+      {finalChildren}
+    </Container>
   );
 };
 
@@ -61,38 +97,54 @@ const EditUI = ({
  *     <TextInput source="name" />
  *   </Form>
  * </Edit>
- * 
+ *
  * @example
  * // Using InputSchema from context
  * <Edit include={['name', 'price']} />
- * 
- * @example
- * // Passing a custom input schema
- * <Edit inputSchema={<InputSchema>...</InputSchema>}>
- *   <Form />
- * </Edit>
  */
 export const Edit = <RecordType extends RaRecord = any>({
   children,
-  inputSchema,
   title,
   actions,
+  description,
   include,
   exclude,
+  redirect,
+  saveButtonLabel,
   ...props
 }: EditProps<RecordType>) => {
+  const { queryOptions, editTitle } = useResourceSchema(props.resource);
+  const resolve = useSettingValue();
+  const resolvedRedirect = resolve(redirect, 'editRedirect');
+  const editSuccessMessage = resolve(undefined, 'editSuccessMessage');
+  const notify = useNotify();
+  const redirectFn = useRedirect();
+
+  const mutationOptions = React.useMemo(() => {
+    if (!editSuccessMessage || props.mutationOptions?.onSuccess) return props.mutationOptions;
+    return {
+      ...props.mutationOptions,
+      onSuccess: (data: RecordType) => {
+        notify(editSuccessMessage, { type: 'info' });
+        redirectFn(resolvedRedirect ?? 'detail', props.resource ?? '', data.id, data);
+      },
+    };
+  }, [editSuccessMessage, props.mutationOptions, props.resource, notify, redirectFn, resolvedRedirect]);
+
   return (
-    <EditBase {...props}>
-      <EditUI 
-        resource={props.resource}
-        title={title} 
-        actions={actions} 
-        include={include} 
-        exclude={exclude}
-        inputSchema={inputSchema}
-      >
-        {children}
-      </EditUI>
+    <EditBase redirect={resolvedRedirect} queryOptions={queryOptions} {...props} mutationOptions={mutationOptions}>
+      <ResourceSchemaProvider resource={props.resource}>
+        <EditUI
+          title={title ?? editTitle ?? undefined}
+          actions={actions}
+          description={description}
+          include={include}
+          exclude={exclude}
+          saveButtonLabel={saveButtonLabel}
+        >
+          {children}
+        </EditUI>
+      </ResourceSchemaProvider>
     </EditBase>
   );
 };

package/src/edit/EditHeader.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import Header, { HeaderProps } from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useResourceContext, useEditContext, useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { useEditContext, useTranslate } from '@strato-admin/ra-core';
+import { DeleteButton } from '../button/DeleteButton';
 
-export interface EditHeaderProps extends Omit<HeaderProps, 'children'> {
+export interface EditHeaderProps
+  extends Pick<HeaderProps, 'variant' | 'counter' | 'actions' | 'description' | 'info' | 'headingTagOverride'> {
   title?: React.ReactNode;
 }
 
-export const EditHeader = ({ title, actions, ...props }: EditHeaderProps) => {
+export const EditHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }: EditHeaderProps) => {
   const translate = useTranslate();
   const { defaultTitle } = useEditContext();
 
@@ -20,12 +22,12 @@ export const EditHeader = ({ title, actions, ...props }: EditHeaderProps) => {
 
   const headerActions = actions || (
     <SpaceBetween direction="horizontal" size="xs">
-      {/* Add default edit actions here if needed */}
+      <DeleteButton />
     </SpaceBetween>
   );
 
   return (
-    <Header variant="h2" {...props} actions={headerActions}>
+    <Header variant={variant} actions={headerActions} description={description} counter={counter} info={info} headingTagOverride={headingTagOverride}>
       {headerTitle}
     </Header>
   );

package/src/field/ArrayField.tsx

@@ -1,11 +1,19 @@
-import { useRecordContext, useList, ListContextProvider, ResourceContextProvider, type RaRecord } from '@strato-admin/core';
+import React, { ReactNode } from 'react';
+import {
+  useRecordContext,
+  useList,
+  ListContextProvider,
+  ResourceContextProvider,
+  type RaRecord,
+} from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
+import Table from '../list/Table';
 
 export interface ArrayFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
   /**
-   * Thecomponents to render for each item in the array.
+   * The components to render for each item in the array.
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Number of items per page if pagination is used within the field.
    */
@@ -17,18 +25,30 @@ export interface ArrayFieldProps<RecordType extends RaRecord = RaRecord> extends
  * and ResourceContextProvider initialized with the array data and resource name.
  *
  * This allows using components that expect a ListContext or ResourceContext
- * (like DataTable) to display nested arrays within a record.
+ * (like Table) to display nested arrays within a record.
  *
  * @example
- * <ArrayField source="products" resource="products">
- *   <DataTable variant="embedded">
- *     <DataTable.Col source="title" label="Title" />
- *     <DataTable.NumberCol source="price" label="Price" />
- *   </DataTable>
+ * <ArrayField source="items" label="Items">
+ *   <ReferenceField source="product_id" reference="products" label="Product" />
+ *   <NumberField source="quantity" label="Quantity" />
+ *   <NumberField source="unit_price" label="Price" options={{ style: 'currency', currency: 'USD' }} />
  * </ArrayField>
+ *
+ * NOTE ON FILTERING:
+ * Client-side filtering via useList (used by the implicit Table) only searches
+ * properties directly present in the array items.
+ *
+ * If you have a <ReferenceField> child, filtering by the referenced record's
+ * name (e.g. Product Name) will NOT work by default because that data is fetched
+ * asynchronously and is not in the local array.
+ *
+ * To enable "Deep Filtering", you can:
+ * 1. Denormalize your data at the API level to include the labels in the nested items.
+ * 2. Augment the 'data' array before passing it to useList by pre-fetching labels
+ *    for all referenced IDs and injecting them into the items.
  */
 export const ArrayField = <RecordType extends RaRecord = any>(props: ArrayFieldProps<RecordType>) => {
-  const { source, resource, children, perPage = 10 } = props;
+  const { source, resource, children, perPage = 10, label = props.source } = props;
 
   const record = useRecordContext<RecordType>();
   const data = (source && record?.[source]) || [];
@@ -43,9 +63,35 @@ export const ArrayField = <RecordType extends RaRecord = any>(props: ArrayFieldP
 
   return (
     <ResourceContextProvider value={targetResource}>
-      <ListContextProvider value={listContext}>{children as any}</ListContextProvider>
+      <ListContextProvider value={listContext as any}>
+        <ArrayFieldUI title={label}>{children}</ArrayFieldUI>
+      </ListContextProvider>
     </ResourceContextProvider>
   );
 };
 
+const ArrayFieldUI = ({ children, title }: { children?: ReactNode; title?: ReactNode }) => {
+  if (!children) return null;
+
+  const childrenArray = React.Children.toArray(children);
+
+  // Check if children already contain a Table
+  const hasTable = childrenArray.some(
+    (child) => React.isValidElement(child) && (child.type === Table || (child.type as any).displayName === 'Table'),
+  );
+
+  if (hasTable) {
+    return <>{children}</>;
+  }
+
+  // If children are provided but no Table, wrap them in a Table.
+  // This supports the shorthand <ArrayField><TextField source="foo" /></ArrayField>
+  return (
+    <Table variant="embedded" title={title} selectionType={undefined} actions={null}>
+      {children}
+    </Table>
+  );
+};
+
 export default ArrayField;
+ArrayField.isCollectionField = true;

package/src/field/BadgeField.tsx

@@ -1,10 +1,9 @@
 import Badge, { type BadgeProps } from '@cloudscape-design/components/badge';
-import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 
-export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord>
-  extends FieldProps<RecordType> {
+export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
   /**
    * The color of the badge.
    * @default "grey"

package/src/field/BooleanField.test.tsx

@@ -1,10 +1,9 @@
-
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect } from 'vitest';
-import { useFieldValue, useRecordContext } from '@strato-admin/core';
+import { useFieldValue, useRecordContext } from '@strato-admin/ra-core';
 import BooleanField from './BooleanField';
 
-// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock Cloudscape components

package/src/field/BooleanField.tsx

@@ -1,5 +1,5 @@
 import StatusIndicator from '@cloudscape-design/components/status-indicator';
-import { RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/core';
+import { RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 
@@ -28,11 +28,11 @@ const BooleanField = <RecordType extends RaRecord = RaRecord>(props: BooleanFiel
 
   const content = isTrue ? (
     <StatusIndicator type="success" colorOverride="green">
-      {showLabel ? (trueLabel ?? translate('ra.boolean.true', { _: 'Yes' })) : null}
+      {showLabel ? (trueLabel ?? translate('strato.boolean.true', { _: 'Yes' })) : null}
     </StatusIndicator>
   ) : (
     <StatusIndicator type="not-started">
-      {showLabel ? (falseLabel ?? translate('ra.boolean.false', { _: 'No' })) : null}
+      {showLabel ? (falseLabel ?? translate('strato.boolean.false', { _: 'No' })) : null}
     </StatusIndicator>
   );
 

package/src/field/CurrencyField.tsx

@@ -1,4 +1,4 @@
-import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 

package/src/field/DateField.tsx

@@ -1,4 +1,4 @@
-import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 

package/src/field/IdField.test.tsx

@@ -1,14 +1,10 @@
 import { render, cleanup } from '@testing-library/react';
 import { vi, describe, it, expect, afterEach } from 'vitest';
-import {
-  useFieldValue,
-  useRecordContext,
-  useResourceDefinition,
-} from '@strato-admin/core';
+import { useFieldValue, useRecordContext, useResourceDefinition } from '@strato-admin/ra-core';
 import IdField from './IdField';
 
-// Mock strato-core
-vi.mock('@strato-admin/core', () => ({
+// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => ({
   useRecordContext: vi.fn(),
   useFieldValue: vi.fn(),
   useResourceDefinition: vi.fn(),
@@ -32,24 +28,20 @@ describe('IdField', () => {
   it('should render the ID and link to show by default if hasShow is true', () => {
     const record = { id: '123' };
     (useRecordContext as any).mockReturnValue(record);
-    (useFieldValue as any).mockImplementation(
-      ({ source }: any) => (record as any)[source]
-    );
+    (useFieldValue as any).mockImplementation(({ source }: any) => (record as any)[source]);
     (useResourceDefinition as any).mockReturnValue({ hasShow: true });
 
     const { getByTestId, getByText } = render(<IdField />);
 
     expect(getByText('123')).toBeDefined();
     const link = getByTestId('record-link');
-    expect(link.getAttribute('data-link')).toBe('show');
+    expect(link.getAttribute('data-link')).toBe('detail');
   });
 
   it('should not link by default if hasShow is false', () => {
     const record = { id: '123' };
     (useRecordContext as any).mockReturnValue(record);
-    (useFieldValue as any).mockImplementation(
-      ({ source }: any) => (record as any)[source]
-    );
+    (useFieldValue as any).mockImplementation(({ source }: any) => (record as any)[source]);
     (useResourceDefinition as any).mockReturnValue({ hasShow: false });
 
     const { getByTestId, getByText } = render(<IdField />);
@@ -62,9 +54,7 @@ describe('IdField', () => {
   it('should use custom source if provided', () => {
     const record = { identifier: 'abc' };
     (useRecordContext as any).mockReturnValue(record);
-    (useFieldValue as any).mockImplementation(
-      ({ source }: any) => (record as any)[source]
-    );
+    (useFieldValue as any).mockImplementation(({ source }: any) => (record as any)[source]);
     (useResourceDefinition as any).mockReturnValue({ hasShow: true });
 
     const { getByText } = render(<IdField source="identifier" />);
@@ -75,9 +65,7 @@ describe('IdField', () => {
   it('should allow overriding link', () => {
     const record = { id: '123' };
     (useRecordContext as any).mockReturnValue(record);
-    (useFieldValue as any).mockImplementation(
-      ({ source }: any) => (record as any)[source]
-    );
+    (useFieldValue as any).mockImplementation(({ source }: any) => (record as any)[source]);
     (useResourceDefinition as any).mockReturnValue({ hasShow: true });
 
     const { getByTestId } = render(<IdField link="edit" />);

package/src/field/IdField.tsx

@@ -1,8 +1,7 @@
-import { type RaRecord, useResourceDefinition } from '@strato-admin/core';
+import { type RaRecord, useResourceDefinition } from '@strato-admin/ra-core';
 import TextField, { type TextFieldProps } from './TextField';
 
-export type IdFieldProps<RecordType extends RaRecord = RaRecord> =
-  TextFieldProps<RecordType>;
+export type IdFieldProps<RecordType extends RaRecord = RaRecord> = TextFieldProps<RecordType>;
 
 /**
  * A field that displays the record's ID.
@@ -16,25 +15,11 @@ export type IdFieldProps<RecordType extends RaRecord = RaRecord> =
  * <IdField />
  * <IdField source="identifier" />
  */
-const IdField = <RecordType extends RaRecord = RaRecord>(
-  props: IdFieldProps<RecordType>
-) => {
+const IdField = <RecordType extends RaRecord = RaRecord>(props: IdFieldProps<RecordType>) => {
   const { hasShow } = useResourceDefinition(props);
-  const {
-    source = 'id',
-    link = hasShow ? 'show' : undefined,
-    input = false,
-    ...rest
-  } = props;
+  const { source = 'id', link = hasShow ? 'detail' : undefined, input = false, ...rest } = props;
 
-  return (
-    <TextField<RecordType>
-      source={source}
-      link={link}
-      input={input}
-      {...rest}
-    />
-  );
+  return <TextField<RecordType> source={source as any} link={link} input={input} {...rest} />;
 };
 
 export default IdField;

package/src/field/NumberField.tsx

@@ -1,4 +1,4 @@
-import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 

package/src/field/ReferenceField.test.tsx

@@ -1,20 +1,29 @@
-
 import { render, screen } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import ReferenceField from './ReferenceField';
-import { useRecordContext, useGetRecordRepresentation } from '@strato-admin/core';
+import { useRecordContext, useGetRecordRepresentation } from '@strato-admin/ra-core';
 
 // Mock ra-core
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   ReferenceFieldBase: vi.fn(({ children }: any) => <div data-testid="ra-reference-field-base">{children}</div>),
   useRecordContext: vi.fn(),
   useGetRecordRepresentation: vi.fn(),
   useResourceDefinition: vi.fn(),
   useResourceContext: vi.fn(() => 'categories'),
-  useCreatePath: vi.fn(() => (params: any) => `/${params.resource}/${params.id}/${params.type}`),
   ResourceContextProvider: ({ children }: any) => <div data-testid="resource-context-provider">{children}</div>,
 }));
 
+// Mock strato-core
+vi.mock('@strato-admin/core', () => ({
+  useCreatePath: vi.fn(() => (params: any) => {
+    if (params.type === 'detail') return `/${params.resource}/${params.id}`;
+    if (params.type === 'edit') return `/${params.resource}/${params.id}/edit`;
+    if (params.type === 'create') return `/${params.resource}/create`;
+    return `/${params.resource}`;
+  }),
+  useResourceSchema: vi.fn(() => ({ queryOptions: undefined })),
+}));
+
 // Mock react-router-dom
 vi.mock('react-router-dom', () => ({
   useNavigate: vi.fn(),
@@ -78,11 +87,11 @@ describe('ReferenceField', () => {
     (useRecordContext as any).mockReturnValue(record);
     (useGetRecordRepresentation as any).mockReturnValue(() => 'Category 1');
 
-    render(<ReferenceField source="categoryId" reference="categories" link="show" />);
+    render(<ReferenceField source="categoryId" reference="categories" link="detail" />);
 
     const link = screen.getByTestId('cloudscape-link');
     expect(link).toBeDefined();
-    expect(link.getAttribute('href')).toBe('/categories/1/show');
+    expect(link.getAttribute('href')).toBe('/categories/1');
     expect(link.textContent).toBe('Category 1');
   });
 });

package/src/field/ReferenceField.tsx

@@ -1,10 +1,6 @@
 import { type ReactNode } from 'react';
-import {
-  ReferenceFieldBase,
-  type RaRecord,
-  useRecordContext,
-  useGetRecordRepresentation,
-} from '@strato-admin/core';
+import { ReferenceFieldBase, type RaRecord, useRecordContext, useGetRecordRepresentation } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 
@@ -22,13 +18,20 @@ export type ReferenceFieldProps<RecordType extends RaRecord = RaRecord> = FieldP
 
 const ReferenceField = <RecordType extends RaRecord = RaRecord>(props: ReferenceFieldProps<RecordType>) => {
   const { source, reference, children, emptyText, record, link } = props;
+  const { queryOptions } = useResourceSchema(reference);
 
   if (!source) {
     return null; // Or some fallback
   }
 
   return (
-    <ReferenceFieldBase source={source} reference={reference} record={record} empty={<>{emptyText ?? null}</>}>
+    <ReferenceFieldBase
+      source={source}
+      reference={reference}
+      record={record}
+      empty={<>{emptyText ?? null}</>}
+      queryOptions={queryOptions}
+    >
       <ReferenceFieldValue emptyText={emptyText} link={link} reference={reference}>
         {children}
       </ReferenceFieldValue>