@object-ui/plugin-view 3.0.3 → 3.1.0

package/src/ObjectView.tsx

@@ -49,12 +49,14 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerDescription,
+  NavigationOverlay,
   Button,
   Tabs,
   TabsList,
   TabsTrigger,
 } from '@object-ui/components';
 import { Plus } from 'lucide-react';
+import { buildExpandFields } from '@object-ui/core';
 import { ViewSwitcher } from './ViewSwitcher';
 
 /**
@@ -139,6 +141,16 @@ export interface ObjectViewProps {
    * Toolbar addon: extra elements to render in the toolbar (e.g., MetadataToggle)
    */
   toolbarAddon?: React.ReactNode;
+
+  /**
+   * Callback when the "+" create view button is clicked in ViewSwitcher.
+   */
+  onCreateView?: () => void;
+
+  /**
+   * Callback when a per-view action is triggered in ViewSwitcher.
+   */
+  onViewAction?: (action: string, viewType: ViewType) => void;
 }
 
 type FormMode = 'create' | 'edit' | 'view';
@@ -203,6 +215,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   onEdit: onEditProp,
   renderListView,
   toolbarAddon,
+  onCreateView,
+  onViewAction,
 }) => {
   const [objectSchema, setObjectSchema] = useState<Record<string, unknown> | null>(null);
   const [isFormOpen, setIsFormOpen] = useState(false);
@@ -308,10 +322,13 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           ? sortConfig.map(s => ({ field: s.field, order: s.direction }))
           : (currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort || undefined);
 
+        // Auto-inject $expand for lookup/master_detail fields
+        const expand = buildExpandFields((objectSchema as any)?.fields);
         const results = await dataSource.find(schema.objectName, {
           $filter: finalFilter.length > 0 ? finalFilter : undefined,
           $orderby: sort,
           $top: 100,
+          ...(expand.length > 0 ? { $expand: expand } : {}),
         });
 
         let items: any[] = [];
@@ -336,7 +353,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     fetchData();
     return () => { isMounted = false; };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView]);
+  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView, objectSchema]);
 
   // Determine layout mode
   const layout = schema.layout || 'drawer';
@@ -425,6 +442,12 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         }
         return;
       }
+      if (navigationConfig.mode === 'split' || navigationConfig.mode === 'popover') {
+        setFormMode('view');
+        setSelectedRecord(record);
+        setIsFormOpen(true);
+        return;
+      }
     }
 
     // Default behavior
@@ -490,8 +513,10 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           icon: iconMap[v.type] || 'table',
         };
       }),
+      allowCreateView: schema.allowCreateView,
+      viewActions: schema.viewActions,
     };
-  }, [hasMultiView, viewsPropResolved, activeView, schema.objectName]);
+  }, [hasMultiView, viewsPropResolved, activeView, schema.objectName, schema.allowCreateView, schema.viewActions]);
 
   // Handle view type change from ViewSwitcher → map back to view ID
   const handleViewTypeChange = useCallback((viewType: ViewType) => {
@@ -558,7 +583,10 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   }, [schema.showFilters, schema.filterableFields, objectSchema, filterValues]);
 
   // --- SortUI schema ---
+  const showSort = (schema as ObjectViewSchema).showSort;
   const sortSchema: SortUISchema | null = useMemo(() => {
+    if (showSort === false) return null;
+
     const fields = (objectSchema as any)?.fields || {};
     const sortableFields = Object.entries(fields)
       .filter(([, f]: [string, any]) => !f.hidden)
@@ -574,7 +602,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       fields: sortableFields,
       sort: sortConfig,
     };
-  }, [objectSchema, sortConfig]);
+  }, [objectSchema, sortConfig, showSort]);
 
   // --- Generate view component schema for non-grid views ---
   const generateViewSchema = useCallback((viewType: string): any => {
@@ -582,7 +610,12 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       objectName: schema.objectName,
       fields: currentNamedViewConfig?.columns || activeView?.columns || schema.table?.fields,
       className: 'h-full w-full',
-      showSearch: false,
+      showSearch: activeView?.showSearch ?? schema.showSearch ?? false,
+      showSort: activeView?.showSort ?? schema.showSort ?? false,
+      showFilters: activeView?.showFilters ?? schema.showFilters ?? false,
+      striped: activeView?.striped ?? false,
+      bordered: activeView?.bordered ?? false,
+      color: activeView?.color,
     };
 
     // Resolve type-specific options from current named view or active view
@@ -679,6 +712,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     defaultSort: currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort,
     pageSize: schema.table?.pageSize,
     selectable: schema.table?.selectable,
+    striped: activeView?.striped ?? schema.table?.striped,
+    bordered: activeView?.bordered ?? schema.table?.bordered,
     className: schema.table?.className,
   }), [schema, operations, currentNamedViewConfig, activeView]);
 
@@ -798,7 +833,54 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           fields: currentNamedViewConfig?.columns || activeView?.columns || schema.table?.fields,
           filters: mergedFilters,
           sort: mergedSort,
+          // Propagate appearance/view-config properties for live preview
+          rowHeight: activeView?.rowHeight,
+          densityMode: activeView?.densityMode,
+          groupBy: activeView?.groupBy,
           options: currentNamedViewConfig?.options || activeView,
+          // Propagate toolbar toggle flags
+          showSearch: activeView?.showSearch ?? schema.showSearch,
+          showFilters: activeView?.showFilters ?? schema.showFilters,
+          showSort: activeView?.showSort ?? schema.showSort,
+          showHideFields: activeView?.showHideFields ?? (schema as any).showHideFields,
+          showGroup: activeView?.showGroup ?? (schema as any).showGroup,
+          showColor: activeView?.showColor ?? (schema as any).showColor,
+          showDensity: activeView?.showDensity ?? (schema as any).showDensity,
+          allowExport: activeView?.allowExport ?? (schema as any).allowExport,
+          // Propagate display properties
+          striped: activeView?.striped ?? (schema as any).striped,
+          bordered: activeView?.bordered ?? (schema as any).bordered,
+          color: activeView?.color ?? (schema as any).color,
+          // Propagate view-config properties (Bug 4 / items 14-22)
+          inlineEdit: activeView?.inlineEdit ?? (schema as any).inlineEdit,
+          wrapHeaders: activeView?.wrapHeaders ?? (schema as any).wrapHeaders,
+          clickIntoRecordDetails: activeView?.clickIntoRecordDetails ?? (schema as any).clickIntoRecordDetails,
+          addRecordViaForm: activeView?.addRecordViaForm ?? (schema as any).addRecordViaForm,
+          addDeleteRecordsInline: activeView?.addDeleteRecordsInline ?? (schema as any).addDeleteRecordsInline,
+          collapseAllByDefault: activeView?.collapseAllByDefault ?? (schema as any).collapseAllByDefault,
+          fieldTextColor: activeView?.fieldTextColor ?? (schema as any).fieldTextColor,
+          prefixField: activeView?.prefixField ?? (schema as any).prefixField,
+          showDescription: activeView?.showDescription ?? (schema as any).showDescription,
+          // Propagate new spec properties (P0/P1/P2)
+          navigation: activeView?.navigation ?? (schema as any).navigation,
+          selection: activeView?.selection ?? (schema as any).selection,
+          pagination: activeView?.pagination ?? (schema as any).pagination,
+          searchableFields: activeView?.searchableFields ?? (schema as any).searchableFields,
+          filterableFields: activeView?.filterableFields ?? (schema as any).filterableFields,
+          resizable: activeView?.resizable ?? (schema as any).resizable,
+          hiddenFields: activeView?.hiddenFields ?? (schema as any).hiddenFields,
+          rowActions: activeView?.rowActions ?? (schema as any).rowActions,
+          bulkActions: activeView?.bulkActions ?? (schema as any).bulkActions,
+          sharing: activeView?.sharing ?? (schema as any).sharing,
+          addRecord: activeView?.addRecord ?? (schema as any).addRecord,
+          conditionalFormatting: activeView?.conditionalFormatting ?? (schema as any).conditionalFormatting,
+          quickFilters: activeView?.quickFilters ?? (schema as any).quickFilters,
+          showRecordCount: activeView?.showRecordCount ?? (schema as any).showRecordCount,
+          allowPrinting: activeView?.allowPrinting ?? (schema as any).allowPrinting,
+          virtualScroll: activeView?.virtualScroll ?? (schema as any).virtualScroll,
+          emptyState: activeView?.emptyState ?? (schema as any).emptyState,
+          aria: activeView?.aria ?? (schema as any).aria,
+          tabs: (schema as any).tabs,
         },
         dataSource,
         onEdit: handleEdit,
@@ -887,6 +969,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
                 <ViewSwitcher
                   schema={viewSwitcherSchema}
                   onViewChange={handleViewTypeChange}
+                  onCreateView={onCreateView}
+                  onViewAction={onViewAction}
                   className="overflow-x-auto"
                 />
               )}
@@ -911,10 +995,59 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   // Determine which form container to render
   const formLayout = navigationConfig?.mode === 'modal' ? 'modal'
     : navigationConfig?.mode === 'drawer' ? 'drawer'
+    : navigationConfig?.mode === 'split' ? 'split'
+    : navigationConfig?.mode === 'popover' ? 'popover'
     : layout;
 
+  // Build the record detail content for NavigationOverlay (split/popover modes)
+  const renderOverlayDetail = (_record: Record<string, unknown>) => (
+    <div className="space-y-3">
+      <ObjectForm schema={buildFormSchema()} dataSource={dataSource} />
+    </div>
+  );
+
+  // Shared handler for NavigationOverlay onOpenChange — close form when overlay is dismissed
+  const handleOverlayOpenChange = useCallback((open: boolean) => {
+    if (!open) handleFormCancel();
+  }, [handleFormCancel]);
+
+  // For split mode, wrap content inside NavigationOverlay with mainContent
+  if (formLayout === 'split') {
+    const objectLabel = (objectSchema?.label as string) || schema.objectName;
+    return (
+      <div className={cn('flex flex-col h-full min-w-0 overflow-hidden', className)}>
+        {(schema.title || schema.description) && (
+          <div className="mb-4 shrink-0">
+            {schema.title && <h2 className="text-2xl font-bold tracking-tight">{schema.title}</h2>}
+            {schema.description && <p className="text-muted-foreground mt-1">{schema.description}</p>}
+          </div>
+        )}
+        <div className="mb-4 shrink-0">{renderToolbar()}</div>
+        <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
+          {isFormOpen && selectedRecord ? (
+            <NavigationOverlay
+              isOpen={isFormOpen}
+              selectedRecord={selectedRecord}
+              mode="split"
+              close={handleFormCancel}
+              setIsOpen={handleOverlayOpenChange}
+              width={navigationConfig?.width}
+              isOverlay={true}
+              title={`${objectLabel} Detail`}
+              mainContent={<div className="h-full overflow-auto">{renderContent()}</div>}
+            >
+              {renderOverlayDetail}
+            </NavigationOverlay>
+          ) : (
+            renderContent()
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className={cn('flex flex-col h-full', className)}>
+    <div className={cn('flex flex-col h-full min-w-0 overflow-hidden', className)}>
       {/* Title and description */}
       {(schema.title || schema.description) && (
         <div className="mb-4 shrink-0">
@@ -933,13 +1066,28 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       </div>
 
       {/* Content */}
-      <div className="flex-1 min-h-0">
+      <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
         {renderContent()}
       </div>
 
       {/* Form (drawer or modal) */}
       {formLayout === 'drawer' && renderDrawerForm()}
       {formLayout === 'modal' && renderModalForm()}
+      {/* Popover mode — uses NavigationOverlay Dialog fallback (no popoverTrigger) */}
+      {formLayout === 'popover' && isFormOpen && selectedRecord && (
+        <NavigationOverlay
+          isOpen={isFormOpen}
+          selectedRecord={selectedRecord}
+          mode="popover"
+          close={handleFormCancel}
+          setIsOpen={handleOverlayOpenChange}
+          width={navigationConfig?.width}
+          isOverlay={true}
+          title={getFormTitle()}
+        >
+          {renderOverlayDetail}
+        </NavigationOverlay>
+      )}
     </div>
   );
 };

package/src/SharedViewLink.tsx

@@ -0,0 +1,199 @@
+/**
+ * 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,
+  Button,
+  Badge,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@object-ui/components';
+import { Share2, Copy, Check, Lock, Calendar } from 'lucide-react';
+
+export interface SharedViewLinkProps {
+  /** The object name used in the share URL path */
+  objectName: string;
+  /** Optional view identifier; defaults to "default" */
+  viewId?: string;
+  /** Base URL for the shareable link (defaults to window.location.origin) */
+  baseUrl?: string;
+  /** Callback fired after a share URL is generated */
+  onShare?: (shareUrl: string, options?: { password?: string; expiresAt?: string }) => void;
+  className?: string;
+}
+
+function generateToken(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  // Fallback for environments without crypto.randomUUID
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+  }
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
+
+function buildShareUrl(baseUrl: string, objectName: string, viewId: string, token: string): string {
+  return `${baseUrl}/share/${objectName}/${viewId}?mode=readonly&token=${token}`;
+}
+
+export const SharedViewLink: React.FC<SharedViewLinkProps> = ({
+  objectName,
+  viewId = 'default',
+  baseUrl,
+  onShare,
+  className,
+}) => {
+  const [shareUrl, setShareUrl] = React.useState<string | null>(null);
+  const [copied, setCopied] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [password, setPassword] = React.useState('');
+  const [expiresIn, setExpiresIn] = React.useState('');
+
+  const resolvedBaseUrl = baseUrl ?? (typeof window !== 'undefined' ? window.location.origin : '');
+
+  const handleGenerateLink = React.useCallback(() => {
+    const token = generateToken();
+    const url = buildShareUrl(resolvedBaseUrl, objectName, viewId, token);
+    setShareUrl(url);
+    setCopied(false);
+    const expiresAt = expiresIn ? new Date(Date.now() + parseInt(expiresIn, 10) * 86400000).toISOString() : undefined;
+    onShare?.(url, { password: password || undefined, expiresAt });
+  }, [resolvedBaseUrl, objectName, viewId, onShare, password, expiresIn]);
+
+  const handleCopy = React.useCallback(async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for environments without clipboard API
+      const textarea = document.createElement('textarea');
+      textarea.value = shareUrl;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [shareUrl]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className={cn('gap-2', className)}>
+          <Share2 className="h-4 w-4" />
+          Share
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-96 space-y-4" align="end">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium">Share View</h4>
+            <Badge variant="secondary" className="text-xs">
+              Read-only
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Generate a public link to share this view. Recipients can view data without logging in.
+          </p>
+        </div>
+
+        {!shareUrl ? (
+          <div className="space-y-3">
+            {/* Password protection */}
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                <Lock className="h-3.5 w-3.5" />
+                Password protection (optional)
+              </label>
+              <Input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter password..."
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* Expiration */}
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                <Calendar className="h-3.5 w-3.5" />
+                Expires after (optional)
+              </label>
+              <select
+                value={expiresIn}
+                onChange={(e) => setExpiresIn(e.target.value)}
+                className="w-full h-8 text-xs rounded-md border border-input bg-background px-3"
+              >
+                <option value="">Never</option>
+                <option value="1">1 day</option>
+                <option value="7">7 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+              </select>
+            </div>
+
+            <Button onClick={handleGenerateLink} className="w-full gap-2" size="sm">
+              <Share2 className="h-4 w-4" />
+              Generate Link
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center gap-2">
+              <Input
+                value={shareUrl}
+                readOnly
+                className="h-8 text-xs"
+                onClick={(e) => (e.target as HTMLInputElement).select()}
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopy}
+                className="shrink-0 gap-1"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+            {/* Share options indicators */}
+            {(password || expiresIn) && (
+              <div className="flex items-center gap-2 flex-wrap">
+                {password && (
+                  <Badge variant="outline" className="text-xs gap-1">
+                    <Lock className="h-3 w-3" />
+                    Password protected
+                  </Badge>
+                )}
+                {expiresIn && (
+                  <Badge variant="outline" className="text-xs gap-1">
+                    <Calendar className="h-3 w-3" />
+                    Expires in {expiresIn} day{expiresIn !== '1' ? 's' : ''}
+                  </Badge>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/ViewSwitcher.tsx

@@ -26,10 +26,17 @@ import {
   Activity,
   Calendar,
   FileText,
+  GanttChartSquare,
   Grid,
+  Images,
   LayoutGrid,
   List,
   Map,
+  Plus,
+  Share2,
+  Settings,
+  Copy,
+  Trash2,
   icons,
   type LucideIcon,
 } from 'lucide-react';
@@ -40,6 +47,9 @@ export type ViewSwitcherProps = {
   schema: ViewSwitcherSchema;
   className?: string;
   onViewChange?: (view: ViewType) => void;
+  onCreateView?: () => void;
+  onViewAction?: (action: string, view: ViewType) => void;
+  createViewLabel?: string;
   [key: string]: any;
 };
 
@@ -51,6 +61,8 @@ const DEFAULT_VIEW_LABELS: Record<ViewType, string> = {
   calendar: 'Calendar',
   timeline: 'Timeline',
   map: 'Map',
+  gallery: 'Gallery',
+  gantt: 'Gantt',
 };
 
 const DEFAULT_VIEW_ICONS: Record<ViewType, LucideIcon> = {
@@ -61,6 +73,8 @@ const DEFAULT_VIEW_ICONS: Record<ViewType, LucideIcon> = {
   calendar: Calendar,
   timeline: Activity,
   map: Map,
+  gallery: Images,
+  gantt: GanttChartSquare,
 };
 
 const viewSwitcherLayout = cva('flex gap-4', {
@@ -149,10 +163,27 @@ function getInitialView(schema: ViewSwitcherSchema): ViewType | undefined {
   return schema.views?.[0]?.type;
 }
 
+const DEFAULT_VIEW_ACTION_ICONS: Record<string, LucideIcon> = {
+  share: Share2,
+  settings: Settings,
+  duplicate: Copy,
+  delete: Trash2,
+};
+
+const DEFAULT_VIEW_ACTION_LABELS: Record<string, string> = {
+  share: 'Share',
+  settings: 'Settings',
+  duplicate: 'Duplicate',
+  delete: 'Delete',
+};
+
 export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   schema,
   className,
   onViewChange,
+  onCreateView,
+  onViewAction,
+  createViewLabel = 'Create view',
   ...props
 }) => {
   const storageKey = React.useMemo(() => {
@@ -219,8 +250,42 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   const isVertical = position === 'left' || position === 'right';
   const orientation = isVertical ? 'vertical' : 'horizontal';
 
+  const viewActionButtons = schema.viewActions && schema.viewActions.length > 0 ? (
+    <div className="flex items-center gap-1">
+      {schema.viewActions.map((action, idx) => {
+        const ActionIcon = action.icon
+          ? resolveIcon(action.icon) || DEFAULT_VIEW_ACTION_ICONS[action.type]
+          : DEFAULT_VIEW_ACTION_ICONS[action.type];
+        return (
+          <Button
+            key={`action-${action.type}-${idx}`}
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => onViewAction?.(action.type, currentView!)}
+            title={DEFAULT_VIEW_ACTION_LABELS[action.type] || action.type}
+          >
+            {ActionIcon ? <ActionIcon className="h-3.5 w-3.5" /> : null}
+          </Button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  const createViewButton = schema.allowCreateView ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      onClick={() => onCreateView?.()}
+      title={createViewLabel}
+    >
+      <Plus className="h-3.5 w-3.5" />
+    </Button>
+  ) : null;
+
   const switcher = (
-    <div className={cn(viewSwitcherWidth({ orientation }))}>
+    <div className={cn(viewSwitcherWidth({ orientation }), 'flex items-center gap-1')}>
       {variant === 'dropdown' && (
         <Select value={currentViewValue} onValueChange={(value) => handleViewChange(value as ViewType)}>
           <SelectTrigger className={cn('w-full', isVertical ? 'h-10' : 'h-9')}>
@@ -278,6 +343,9 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
           </TabsList>
         </Tabs>
       )}
+
+      {viewActionButtons}
+      {createViewButton}
     </div>
   );