@object-ui/plugin-detail 3.1.0 → 3.1.2

package/src/DetailView.tsx

@@ -21,6 +21,10 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
 } from '@object-ui/components';
 import { 
   ArrowLeft, 
@@ -40,6 +44,8 @@ import {
 import { DetailSection } from './DetailSection';
 import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
+import { SectionGroup } from './SectionGroup';
+import { HeaderHighlight } from './HeaderHighlight';
 import { RecordComments } from './RecordComments';
 import { ActivityTimeline } from './ActivityTimeline';
 import { SchemaRenderer } from '@object-ui/react';
@@ -47,6 +53,9 @@ import { buildExpandFields } from '@object-ui/core';
 import type { DetailViewSchema, DataSource } from '@object-ui/types';
 import { useDetailTranslation } from './useDetailTranslation';
 
+/** Default page size for related lists in the detail view */
+const DEFAULT_RELATED_PAGE_SIZE = 5;
+
 export interface DetailViewProps {
   schema: DetailViewSchema;
   dataSource?: DataSource;
@@ -121,14 +130,8 @@ export const DetailView: React.FC<DetailViewProps> = ({
           ? dataSource.findOne(objectName, resourceId, params)
           : dataSource.findOne(objectName, resourceId);
 
-        return findOnePromise.then((result) => {
-          if (!isMounted) return;
-          if (result) {
-            setData(result);
-            setLoading(false);
-            return;
-          }
-          // Fallback: try alternate ID format for backward compatibility
+        // Helper: try alternate ID format (strip or prepend objectName prefix)
+        const tryAltId = () => {
           const resIdStr = String(resourceId);
           const altId = resIdStr.startsWith(prefix)
             ? resIdStr.slice(prefix.length)   // strip prefix
@@ -147,6 +150,19 @@ export const DetailView: React.FC<DetailViewProps> = ({
               setLoading(false);
             }
           });
+        };
+
+        return findOnePromise
+          .catch(() => null) // Convert any error to null to trigger alternate ID fallback
+          .then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          return tryAltId();
         });
       }).catch((err) => {
          if (isMounted) {
@@ -288,6 +304,42 @@ export const DetailView: React.FC<DetailViewProps> = ({
     return () => document.removeEventListener('keydown', handler);
   }, [schema.recordNavigation]);
 
+  // Auto-discover related lists from objectSchema reference fields
+  const discoveredRelated = React.useMemo(() => {
+    if (!schema.autoDiscoverRelated || !objectSchema?.fields) return [];
+    // Only auto-discover when no explicit related config is provided
+    if (schema.related && schema.related.length > 0) return [];
+    const refs: Array<{ title: string; type: 'list' | 'grid' | 'table'; objectName: string; referenceField: string }> = [];
+    const fields = objectSchema.fields;
+    for (const [fieldName, fieldDef] of Object.entries<any>(fields)) {
+      const refTarget = fieldDef?.reference_to || fieldDef?.reference;
+      if (
+        fieldDef &&
+        (fieldDef.type === 'lookup' || fieldDef.type === 'master_detail') &&
+        refTarget
+      ) {
+        refs.push({
+          title: fieldDef.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+          type: 'table',
+          objectName: refTarget,
+          referenceField: fieldName,
+        });
+      }
+    }
+    return refs;
+  }, [schema.autoDiscoverRelated, schema.related, objectSchema]);
+
+  // Merge explicit and auto-discovered related lists
+  const effectiveRelated: NonNullable<DetailViewSchema['related']> = React.useMemo(() => {
+    if (schema.related && schema.related.length > 0) return schema.related;
+    return discoveredRelated.map((r) => ({
+      title: r.title,
+      type: r.type,
+      api: r.objectName,
+      data: [] as any[],
+    }));
+  }, [schema.related, discoveredRelated]);
+
   if (loading || schema.loading) {
     return (
       <div className={cn('space-y-4', className)}>
@@ -427,7 +479,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               <SchemaRenderer key={index} schema={action} data={data} />
             ))}
 
-            {/* Inline Edit Toggle */}
+            {/* Inline Edit Toggle - hidden on mobile, accessible via more menu */}
             {inlineEdit && (
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -435,7 +487,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     variant={isInlineEditing ? 'default' : 'outline'} 
                     size="sm"
                     onClick={handleInlineEditToggle}
-                    className="gap-2"
+                    className="gap-2 hidden sm:inline-flex"
                   >
                     {isInlineEditing ? (
                       <>
@@ -456,21 +508,21 @@ export const DetailView: React.FC<DetailViewProps> = ({
               </Tooltip>
             )}
 
-            {/* Share Button */}
+            {/* Share Button - hidden on mobile, accessible via more menu */}
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="outline" size="icon" onClick={handleShare}>
+                <Button variant="outline" size="icon" onClick={handleShare} className="hidden sm:inline-flex">
                   <Share2 className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{t('detail.share')}</TooltipContent>
             </Tooltip>
 
-            {/* Edit Button */}
+            {/* Edit Button - hidden on mobile, accessible via more menu */}
             {schema.showEdit && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="default" onClick={handleEdit} className="gap-2">
+                  <Button variant="default" onClick={handleEdit} className="gap-2 hidden sm:inline-flex">
                     <Edit className="h-4 w-4" />
                     <span className="hidden sm:inline">{t('detail.edit')}</span>
                   </Button>
@@ -492,6 +544,24 @@ export const DetailView: React.FC<DetailViewProps> = ({
                 <TooltipContent>{t('detail.moreActions')}</TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-[calc(100vw-2rem)] sm:w-48 max-h-[60vh] overflow-y-auto">
+                {/* Mobile-only: Share, Edit, Inline Edit */}
+                <DropdownMenuItem onClick={handleShare} className="sm:hidden">
+                  <Share2 className="h-4 w-4 mr-2" />
+                  {t('detail.share')}
+                </DropdownMenuItem>
+                {schema.showEdit && (
+                  <DropdownMenuItem onClick={handleEdit} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {t('detail.edit')}
+                  </DropdownMenuItem>
+                )}
+                {inlineEdit && (
+                  <DropdownMenuItem onClick={handleInlineEditToggle} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {isInlineEditing ? t('detail.save') : t('detail.editInline')}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator className="sm:hidden" />
                 <DropdownMenuItem onClick={handleDuplicate}>
                   <Copy className="h-4 w-4 mr-2" />
                   {t('detail.duplicate')}
@@ -528,70 +598,217 @@ export const DetailView: React.FC<DetailViewProps> = ({
         </div>
       )}
 
-      {/* Sections */}
-      {schema.sections && schema.sections.length > 0 && (
-        <div className="space-y-3 sm:space-y-4">
-          {schema.sections.map((section, index) => (
+      {/* Header Highlight Area */}
+      {schema.highlightFields && schema.highlightFields.length > 0 && (
+        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} />
+      )}
+
+      {/* Auto Tabs mode: wrap sections, related, activity into tabs */}
+      {schema.autoTabs && !schema.tabs?.length ? (
+        <Tabs defaultValue="details" className="w-full">
+          <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
+            <TabsTrigger
+              value="details"
+              className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+            >
+              {t('detail.details')}
+            </TabsTrigger>
+            {effectiveRelated.length > 0 && (
+              <TabsTrigger
+                value="related"
+                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                <span className="flex items-center gap-1.5">
+                  {t('detail.related')}
+                  <Badge variant="secondary" className="text-xs">{effectiveRelated.length}</Badge>
+                </span>
+              </TabsTrigger>
+            )}
+            {schema.activities && schema.activities.length > 0 && (
+              <TabsTrigger
+                value="activity"
+                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                <span className="flex items-center gap-1.5">
+                  {t('detail.activity')}
+                  <Badge variant="secondary" className="text-xs">{schema.activities.length}</Badge>
+                </span>
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {/* Details Tab Content */}
+          <TabsContent value="details" className="mt-4">
+            <div className="space-y-3 sm:space-y-4">
+              {/* Section Groups */}
+              {schema.sectionGroups && schema.sectionGroups.length > 0 && (
+                schema.sectionGroups.map((group, index) => (
+                  <SectionGroup
+                    key={index}
+                    group={group}
+                    data={{ ...data, ...editedValues }}
+                    objectSchema={objectSchema}
+                    objectName={schema.objectName}
+                    isEditing={isInlineEditing}
+                    onFieldChange={handleInlineFieldChange}
+                  />
+                ))
+              )}
+              {schema.sections && schema.sections.length > 0 && (
+                schema.sections.map((section, index) => (
+                  <DetailSection
+                    key={index}
+                    section={section}
+                    data={{ ...data, ...editedValues }}
+                    objectSchema={objectSchema}
+                    objectName={schema.objectName}
+                    isEditing={isInlineEditing}
+                    onFieldChange={handleInlineFieldChange}
+                  />
+                ))
+              )}
+              {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
+                <DetailSection
+                  section={{
+                    fields: schema.fields,
+                    columns: schema.columns,
+                  }}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              )}
+              {/* Comments in details tab */}
+              {schema.comments && (
+                <RecordComments
+                  comments={schema.comments}
+                  onAddComment={schema.onAddComment}
+                />
+              )}
+            </div>
+          </TabsContent>
+
+          {/* Related Tab Content */}
+          {effectiveRelated.length > 0 && (
+            <TabsContent value="related" className="mt-4">
+              <div className="space-y-4">
+                {effectiveRelated.map((related, index) => (
+                  <RelatedList
+                    key={index}
+                    title={related.title}
+                    type={related.type}
+                    api={related.api}
+                    data={related.data}
+                    columns={related.columns as any}
+                    dataSource={dataSource}
+                    objectName={related.api}
+                    collapsible
+                    pageSize={DEFAULT_RELATED_PAGE_SIZE}
+                  />
+                ))}
+              </div>
+            </TabsContent>
+          )}
+
+          {/* Activity Tab Content */}
+          {schema.activities && schema.activities.length > 0 && (
+            <TabsContent value="activity" className="mt-4">
+              <ActivityTimeline activities={schema.activities} />
+            </TabsContent>
+          )}
+        </Tabs>
+      ) : (
+        <>
+          {/* Section Groups */}
+          {schema.sectionGroups && schema.sectionGroups.length > 0 && (
+            <div className="space-y-3 sm:space-y-4">
+              {schema.sectionGroups.map((group, index) => (
+                <SectionGroup
+                  key={index}
+                  group={group}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Sections */}
+          {schema.sections && schema.sections.length > 0 && (
+            <div className="space-y-3 sm:space-y-4">
+              {schema.sections.map((section, index) => (
+                <DetailSection
+                  key={index}
+                  section={section}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Direct Fields (if no sections) */}
+          {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
             <DetailSection
-              key={index}
-              section={section}
+              section={{
+                fields: schema.fields,
+                columns: schema.columns,
+              }}
               data={{ ...data, ...editedValues }}
               objectSchema={objectSchema}
+              objectName={schema.objectName}
               isEditing={isInlineEditing}
               onFieldChange={handleInlineFieldChange}
             />
-          ))}
-        </div>
-      )}
-
-      {/* Direct Fields (if no sections) */}
-      {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
-        <DetailSection
-          section={{
-            fields: schema.fields,
-            columns: schema.columns,
-          }}
-          data={{ ...data, ...editedValues }}
-          objectSchema={objectSchema}
-          isEditing={isInlineEditing}
-          onFieldChange={handleInlineFieldChange}
-        />
-      )}
-
-      {/* Tabs */}
-      {schema.tabs && schema.tabs.length > 0 && (
-        <DetailTabs tabs={schema.tabs} data={data} />
-      )}
+          )}
+
+          {/* Tabs */}
+          {schema.tabs && schema.tabs.length > 0 && (
+            <DetailTabs tabs={schema.tabs} data={data} />
+          )}
+
+          {/* Related Lists */}
+          {effectiveRelated.length > 0 && (
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">{t('detail.related')}</h2>
+              {effectiveRelated.map((related, index) => (
+                <RelatedList
+                  key={index}
+                  title={related.title}
+                  type={related.type}
+                  api={related.api}
+                  data={related.data}
+                  columns={related.columns as any}
+                  dataSource={dataSource}
+                  objectName={related.api}
+                  collapsible
+                  pageSize={DEFAULT_RELATED_PAGE_SIZE}
+                />
+              ))}
+            </div>
+          )}
 
-      {/* Related Lists */}
-      {schema.related && schema.related.length > 0 && (
-        <div className="space-y-4">
-          <h2 className="text-xl font-semibold">{t('detail.related')}</h2>
-          {schema.related.map((related, index) => (
-            <RelatedList
-              key={index}
-              title={related.title}
-              type={related.type}
-              api={related.api}
-              data={related.data}
-              columns={related.columns as any}
-              dataSource={dataSource}
+          {/* Comments */}
+          {schema.comments && (
+            <RecordComments
+              comments={schema.comments}
+              onAddComment={schema.onAddComment}
             />
-          ))}
-        </div>
-      )}
-
-      {/* Comments */}
-      {schema.comments && (
-        <RecordComments
-          comments={schema.comments}
-          onAddComment={schema.onAddComment}
-        />
-      )}
+          )}
 
-      {/* Activity Timeline */}
-      {schema.activities && schema.activities.length > 0 && (
-        <ActivityTimeline activities={schema.activities} />
+          {/* Activity Timeline */}
+          {schema.activities && schema.activities.length > 0 && (
+            <ActivityTimeline activities={schema.activities} />
+          )}
+        </>
       )}
 
       {/* Custom Footer */}

package/src/HeaderHighlight.tsx

@@ -0,0 +1,67 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Card, CardContent } from '@object-ui/components';
+import type { HighlightField } from '@object-ui/types';
+import { useSafeFieldLabel } from '@object-ui/react';
+
+export interface HeaderHighlightProps {
+  fields: HighlightField[];
+  data?: any;
+  className?: string;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
+}
+
+export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
+  fields,
+  data,
+  className,
+  objectName,
+}) => {
+  const { fieldLabel } = useSafeFieldLabel();
+  if (!fields.length || !data) return null;
+
+  // Filter to only fields with values
+  const visibleFields = fields.filter((f) => {
+    const val = data?.[f.name];
+    return val !== null && val !== undefined && val !== '';
+  });
+
+  if (visibleFields.length === 0) return null;
+
+  return (
+    <Card className={cn('bg-muted/30 border-dashed', className)}>
+      <CardContent className="py-3 px-4">
+        <div className={cn(
+          'grid gap-4',
+          visibleFields.length === 1 ? 'grid-cols-1' :
+          visibleFields.length === 2 ? 'grid-cols-2' :
+          visibleFields.length === 3 ? 'grid-cols-3' :
+          'grid-cols-2 md:grid-cols-4'
+        )}>
+          {visibleFields.map((field) => {
+            const value = data[field.name];
+            return (
+              <div key={field.name} className="flex flex-col gap-0.5">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  {field.icon && <span className="mr-1">{field.icon}</span>}
+                  {fieldLabel(objectName || '', field.name, field.label)}
+                </span>
+                <span className="text-sm font-semibold truncate">
+                  {String(value)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};