feat(editor): enhance ControlsClientPage with friendly date formatting and UI improvements

- Added a helper function to format dates in a user-friendly manner.
- Introduced a custom column configuration for displaying formatted dates in the grid.
- Adjusted column widths for better layout and readability.
- Enhanced search functionality in RelationalCell to include sublabels.
- Cleaned up unused create control dialog functionality in the ControlsClientPage.

Author: claudfuen

apps/framework-editor/app/(pages)/controls/ControlsClientPage.tsx

@@ -27,7 +27,8 @@ import {
     DataSheetGrid,
     dateColumn,
     keyColumn,
-    textColumn
+    textColumn,
+    type CellProps,
 } from 'react-datasheet-grid';
 import 'react-datasheet-grid/dist/style.css';
 
@@ -53,9 +54,44 @@ const controlsSortConfig: SortConfig<ControlsPageSortableColumnKey> = {
   updatedAt: 'number',
 };
 
+// Helper function to format dates in a friendly way
+const formatFriendlyDate = (date: Date | string | number | null | undefined): string => {
+  if (date === null || date === undefined) return '';
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return 'Invalid Date'; // Handle invalid date objects
+  return new Intl.DateTimeFormat(undefined, { // 'undefined' uses the browser's default locale
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).format(d);
+};
+
+// Custom base column configuration for displaying friendly dates
+const friendlyDateColumnBase: Partial<Column<Date | null, any, string>> = {
+  component: ({ rowData }: CellProps<Date | null, any>) => (
+    <div 
+        style={{ 
+            padding: '5px', 
+            whiteSpace: 'nowrap', 
+            overflow: 'hidden', 
+            textOverflow: 'ellipsis', 
+            width: '100%', 
+            height: '100%', 
+            display: 'flex', 
+            alignItems: 'center' 
+        }}
+        title={formatFriendlyDate(rowData)}
+    >
+      {formatFriendlyDate(rowData)}
+    </div>
+  ),
+  // copyValue can be added if needed: ({ rowData }) => formatFriendlyDate(rowData),
+};
+
 export function ControlsClientPage({ initialControls }: ControlsClientPageProps) {
-    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-    
     const initialGridData: ControlsPageGridData[] = useMemo(() => {
       return initialControls.map(control => {
         let cDate: Date | null = null;
@@ -137,8 +173,8 @@ export function ControlsClientPage({ initialControls }: ControlsClientPageProps)
     }, [sortedDataWithPotentialTimestamps]);
 
     const columns: Column<ControlsPageGridData>[] = [
-      { ...keyColumn('name', textColumn), title: 'Name', minWidth: 150 },
-      { ...keyColumn('description', textColumn), title: 'Description', minWidth: 250 },
+      { ...keyColumn('name', textColumn), title: 'Name', minWidth: 300 },
+      { ...keyColumn('description', textColumn), title: 'Description', minWidth: 420, grow: 1 },
       {
         ...(relationalColumn<ControlsPageGridData, 'policyTemplates'> ({
           itemsKey: 'policyTemplates',
@@ -221,8 +257,27 @@ export function ControlsClientPage({ initialControls }: ControlsClientPageProps)
           createdRowIds: createdRowIds,
         })), 
       },
-      { ...keyColumn('createdAt', dateColumn), title: 'Created At', minWidth: 180, disabled: true },
-      { ...keyColumn('updatedAt', dateColumn), title: 'Updated At', minWidth: 180, disabled: true },
+      { 
+        ...keyColumn('createdAt', friendlyDateColumnBase), 
+        title: 'Created At', 
+        minWidth: 220, // Adjusted minWidth
+        disabled: true 
+      },
+      { 
+        ...keyColumn('updatedAt', friendlyDateColumnBase), 
+        title: 'Updated At', 
+        minWidth: 220, // Adjusted minWidth
+        disabled: true 
+      },
+      { 
+        ...keyColumn(
+          'id', 
+          textColumn as Partial<Column<string, any, string>>
+        ), 
+        title: 'ID', 
+        minWidth: 300, 
+        disabled: true 
+      },
     ];
 
     return (
@@ -239,9 +294,6 @@ export function ControlsClientPage({ initialControls }: ControlsClientPageProps)
               isDirty={isDirty}
               onCommit={handleCommit}
               onCancel={handleCancel}
-              showCreateButton={true}
-              onCreateClick={() => setIsCreateDialogOpen(true)}
-              createButtonLabel="Create New Control"
               commitButtonDetailText={changesSummaryString}
             />
 
@@ -271,14 +323,6 @@ export function ControlsClientPage({ initialControls }: ControlsClientPageProps)
                 updatedAt: new Date(),
               })}
             />
-            
-            <CreateControlDialog 
-                isOpen={isCreateDialogOpen} 
-                onOpenChange={setIsCreateDialogOpen} 
-                onControlCreated={() => {
-                  setIsCreateDialogOpen(false);
-                }}
-            />
         </PageLayout>
     );
 } 

apps/framework-editor/app/(pages)/controls/components/RelationalCell.tsx

@@ -82,7 +82,8 @@ const RelationalCellComponent = <TRowDataType extends { id?: string }, TItemsKey
           // If already fetched, just ensure filteredItems is up-to-date with current search term (e.g. if term was persisted)
           setFilteredItems(
             allSearchableItems.filter(item => 
-              item.name.toLowerCase().includes(searchTerm.toLowerCase())
+              item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+              (item.sublabel && item.sublabel.toLowerCase().includes(searchTerm.toLowerCase()))
             )
           );
         }
@@ -96,7 +97,8 @@ const RelationalCellComponent = <TRowDataType extends { id?: string }, TItemsKey
       } else {
         setFilteredItems(
           allSearchableItems.filter(item =>
-            item.name.toLowerCase().includes(searchTerm.toLowerCase())
+            item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            (item.sublabel && item.sublabel.toLowerCase().includes(searchTerm.toLowerCase()))
           )
         );
       }

apps/framework-editor/app/components/TableToolbar.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import React from 'react';
 import { Button } from '@comp/ui/button';
 import { Input } from '@comp/ui/input';
-import { 
-  Select, 
-  SelectContent, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@comp/ui/select';
-import { SortAsc, SortDesc, Search as SearchIcon } from 'lucide-react';
+import { Search as SearchIcon, SortAsc, SortDesc } from 'lucide-react';
+import React from 'react';
 // Import types from the common types definition file
-import type { SortDirection, SortableColumnOption } from '../types/common'; 
+import type { SortDirection, SortableColumnOption } from '../types/common';
 
 export interface TableToolbarProps {
   searchTerm: string;
@@ -48,9 +48,6 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   onCommit,
   onCancel,
   commitButtonDetailText = '',
-  showCreateButton = false,
-  onCreateClick,
-  createButtonLabel = 'Create New',
   children
 }) => {
   let commitButtonLabelText = 'No Changes';
@@ -120,11 +117,6 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
             </Button>
           </>
         )}
-        {showCreateButton && (
-          <Button onClick={onCreateClick}>
-            {createButtonLabel}
-          </Button>
-        )}
         {children} { /* For any additional elements passed from parent */}
       </div>
   );