@canva/cli 0.0.1-beta.30 → 0.0.1-beta.31

package/templates/data_connector/src/utils/data_params.ts

@@ -1,17 +1,17 @@
-import type { RenderSelectionUiParams } from "@canva/intents/data";
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
 
-export const isLaunchedWithError = (dataParams: RenderSelectionUiParams) => {
-  return dataParams.invocationContext.reason === "app_error";
+export const isLaunchedWithError = (request: RenderSelectionUiRequest) => {
+  return request.invocationContext.reason === "app_error";
 };
 
-export const isOutdatedSource = (dataParams: RenderSelectionUiParams) => {
-  return dataParams.invocationContext.reason === "outdated_source_ref";
+export const isOutdatedSource = (request: RenderSelectionUiRequest) => {
+  return request.invocationContext.reason === "outdated_source_ref";
 };
 
-export const isDataRefEmpty = (dataParams: RenderSelectionUiParams) => {
+export const isDataRefEmpty = (request: RenderSelectionUiRequest) => {
   return (
-    !dataParams?.invocationContext ||
-    (!isLaunchedWithError(dataParams) &&
-      !dataParams.invocationContext.dataSourceRef?.source)
+    !request?.invocationContext ||
+    (!isLaunchedWithError(request) &&
+      !request.invocationContext.dataSourceRef?.source)
   );
 };

package/templates/data_connector/src/utils/data_table.ts

@@ -5,6 +5,7 @@ import type {
   DateDataTableCell,
   NumberDataTableCell,
   StringDataTableCell,
+  ColumnConfig,
 } from "@canva/intents/data";
 import type { APIResponseItem } from "src/api";
 
@@ -20,9 +21,9 @@ export function toDataTable<T extends APIResponseItem>(
   rowLimit: number,
 ): DataTable {
   const items = apiData.slice(0, rowLimit);
-  const headerRow = columns.map((column) => stringCell(column.label));
   const dataTable: DataTable = {
-    rows: [{ cells: headerRow }],
+    columnConfigs: columnConfig(columns),
+    rows: [],
   };
   items.forEach((item) => {
     const cells = columns.map((column) => {
@@ -37,6 +38,20 @@ export function toDataTable<T extends APIResponseItem>(
   return dataTable;
 }
 
+/**
+ * Converts an array of DataTableColumn to ColumnConfig.
+ * @param columns Array of DataTableColumn
+ * @returns Array of ColumnConfig
+ */
+function columnConfig<T extends APIResponseItem>(
+  columns: DataTableColumn<T>[],
+): ColumnConfig[] {
+  return columns.map((column) => ({
+    name: column.label,
+    type: column.toCell({} as unknown).type, // Use an empty object to infer the type
+  }));
+}
+
 /**
  * Creates a string cell for the data table.
  * @param value  String containing up to 10,000 characters

package/templates/data_connector/src/utils/fetch_result.ts

@@ -1,14 +1,14 @@
 import type {
   DataTable,
   DataTableMetadata,
-  FetchDataTableError,
-  FetchDataTableCompleted,
+  GetDataTableError,
+  GetDataTableCompleted,
 } from "@canva/intents/data";
 
 export const completeDataTable = (
   dataTable: DataTable,
   metadata?: DataTableMetadata,
-): FetchDataTableCompleted => {
+): GetDataTableCompleted => {
   return {
     status: "completed",
     dataTable,
@@ -16,20 +16,20 @@ export const completeDataTable = (
   };
 };
 
-export const appError = (message?: string): FetchDataTableError => {
+export const appError = (message?: string): GetDataTableError => {
   return {
     status: "app_error",
     message,
   };
 };
 
-export const outdatedSourceRef = (): FetchDataTableError => {
+export const outdatedSourceRef = (): GetDataTableError => {
   return {
     status: "outdated_source_ref",
   };
 };
 
-export const remoteRequestFailed = (): FetchDataTableError => {
+export const remoteRequestFailed = (): GetDataTableError => {
   return {
     status: "remote_request_failed",
   };

package/templates/data_connector/src/utils/tests/data_table.test.ts

@@ -68,11 +68,11 @@ describe("data table utils", () => {
     },
   ];
 
-  test("toDataTable creates correct structure with header row", () => {
+  test("toDataTable creates correct structure", () => {
     const result = toDataTable(testItems, columns, 10);
 
-    expect(result.rows.length).toBe(3); // header + 2 data rows
-    expect(result.rows[0].cells.map((cell) => cell.value)).toEqual([
+    expect(result.rows.length).toBe(testItems.length);
+    expect(result.columnConfigs?.map((cell) => cell.name)).toEqual([
       "ID",
       "Name",
       "Count",
@@ -85,15 +85,15 @@ describe("data table utils", () => {
   test("toDataTable respects row limit", () => {
     const result = toDataTable(testItems, columns, 1);
 
-    expect(result.rows.length).toBe(2); // header + 1 data row (limited)
+    expect(result.rows.length).toBe(1);
   });
 
   test("toDataTable handles function-based getValue", () => {
     const result = toDataTable(testItems, columns, 10);
 
     // Check the custom column values
-    expect(result.rows[1].cells[5].value).toBe("Test Item 1 (42)");
-    expect(result.rows[2].cells[5].value).toBe("Test Item 2 (0)");
+    expect(result.rows[0].cells[5].value).toBe("Test Item 1 (42)");
+    expect(result.rows[1].cells[5].value).toBe("Test Item 2 (0)");
   });
 
   test("cell formatter functions create correct cell structures", () => {