feat(editor): Display created and updated at data table columns (no-changelog) (#18948)

packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ColumnHeader.test.ts

@@ -38,6 +38,7 @@ const renderComponent = createComponentRenderer(ColumnHeader, {
 			displayName: 'My Column',
 			column: { getColId: () => 'col-1', getColDef: () => ({ cellDataType: 'string' }) },
 			onDelete: onDeleteMock,
+			allowMenuActions: true,
 		},
 	},
 });

packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ColumnHeader.vue

@@ -7,6 +7,7 @@ import { isAGGridCellType } from '@/features/dataStore/typeGuards';
 
 type HeaderParamsWithDelete = IHeaderParams & {
 	onDelete: (columnId: string) => void;
+	allowMenuActions: boolean;
 };
 
 const props = defineProps<{
@@ -42,7 +43,7 @@ const onDropdownVisibleChange = (visible: boolean) => {
 };
 
 const isDropdownVisible = computed(() => {
-	return isHovered.value || isDropdownOpen.value;
+	return props.params.allowMenuActions && (isHovered.value || isDropdownOpen.value);
 });
 
 const typeIcon = computed(() => {

packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/DataStoreTable.vue

@@ -24,6 +24,7 @@ import type {
 	CellEditingStartedEvent,
 	CellEditingStoppedEvent,
 	CellKeyDownEvent,
+	ValueFormatterParams,
 } from 'ag-grid-community';
 import {
 	ModuleRegistry,
@@ -67,6 +68,7 @@ import NullEmptyCellRenderer from '@/features/dataStore/components/dataGrid/Null
 import { onClickOutside } from '@vueuse/core';
 import { useClipboard } from '@/composables/useClipboard';
 import { reorderItem } from '@/features/dataStore/utils';
+import { convertToDisplayDate } from '@/utils/formatters/dateFormatter';
 
 // Register only the modules we actually use
 ModuleRegistry.registerModules([
@@ -255,8 +257,8 @@ const createColumnDef = (col: DataStoreColumn, extraProps: Partial<ColDef> = {})
 		resizable: true,
 		lockPinned: true,
 		headerComponent: ColumnHeader,
+		headerComponentParams: { onDelete: onDeleteColumn, allowMenuActions: true },
 		cellEditorPopup: false,
-		headerComponentParams: { onDelete: onDeleteColumn },
 		cellDataType: mapToAGCellType(col.type),
 		cellClass: (params) => {
 			if (params.data?.id === ADD_ROW_ROW_ID) {
@@ -389,17 +391,13 @@ const onAddRowClick = async () => {
 		}
 		contentLoading.value = true;
 		emit('toggleSave', true);
-		const newRowId = await dataStoreStore.insertEmptyRow(props.dataStore);
-		const newRow: DataStoreRow = { id: newRowId };
-		// Add nulls for the rest of the columns
-		props.dataStore.columns.forEach((col) => {
-			newRow[col.name] = null;
-		});
+		const insertedRow = await dataStoreStore.insertEmptyRow(props.dataStore);
+		const newRow: DataStoreRow = insertedRow;
 		rowData.value.push(newRow);
 		totalItems.value += 1;
 		refreshGridData();
 		await nextTick();
-		focusFirstEditableCell(newRowId);
+		focusFirstEditableCell(newRow.id as number);
 	} catch (error) {
 		toast.showError(error, i18n.baseText('dataStore.addRow.error'));
 	} finally {
@@ -409,6 +407,20 @@ const onAddRowClick = async () => {
 };
 
 const initColumnDefinitions = () => {
+	const systemDateColumnOptions: Partial<ColDef> = {
+		editable: false,
+		suppressMovable: true,
+		lockPinned: true,
+		lockPosition: 'right',
+		headerComponentParams: {
+			allowMenuActions: false,
+		},
+		valueFormatter: (params: ValueFormatterParams<DataStoreRow>) => {
+			if (!params.value) return '';
+			const { date, time } = convertToDisplayDate(params.value as Date | string | number);
+			return `${date}, ${time}`;
+		},
+	};
 	colDefs.value = [
 		// Always add the ID column, it's not returned by the back-end but all data stores have it
 		// We use it as a placeholder for new datastores
@@ -446,6 +458,24 @@ const initColumnDefinitions = () => {
 		createColumnDef(
 			{
 				index: props.dataStore.columns.length + 1,
+				id: 'createdAt',
+				name: 'createdAt',
+				type: 'date',
+			},
+			systemDateColumnOptions,
+		),
+		createColumnDef(
+			{
+				index: props.dataStore.columns.length + 2,
+				id: 'updatedAt',
+				name: 'updatedAt',
+				type: 'date',
+			},
+			systemDateColumnOptions,
+		),
+		createColumnDef(
+			{
+				index: props.dataStore.columns.length + 3,
 				id: 'add-column',
 				name: 'Add Column',
 				type: 'string',

packages/frontend/editor-ui/src/features/dataStore/dataStore.api.ts

@@ -151,11 +151,12 @@ export const insertDataStoreRowApi = async (
 	row: DataStoreRow,
 	projectId: string,
 ) => {
-	return await makeRestApiRequest<Array<{ id: number }>>(
+	return await makeRestApiRequest<DataStoreRow[]>(
 		context,
 		'POST',
 		`/projects/${projectId}/data-tables/${dataStoreId}/insert`,
 		{
+			returnData: true,
 			data: [row],
 		},
 	);

packages/frontend/editor-ui/src/features/dataStore/dataStore.store.ts

@@ -177,17 +177,13 @@ export const useDataStoreStore = defineStore(DATA_STORE_STORE, () => {
 	};
 
 	const insertEmptyRow = async (dataStore: DataStore) => {
-		const emptyRow: DataStoreRow = {};
-		dataStore.columns.forEach((column) => {
-			emptyRow[column.name] = null;
-		});
 		const inserted = await insertDataStoreRowApi(
 			rootStore.restApiContext,
 			dataStore.id,
-			emptyRow,
+			{},
 			dataStore.projectId,
 		);
-		return inserted[0].id;
+		return inserted[0];
 	};
 
 	const updateRow = async (