@canva/cli 0.0.1-beta.9 → 1.0.0

package/templates/data_connector/src/api/data_sources/templates.tsx

@@ -0,0 +1,329 @@
+/* eslint-disable formatjs/no-literal-string-in-object */
+import type { SelectOption } from "@canva/app-ui-kit";
+import {
+  Button,
+  HorizontalCard,
+  Rows,
+  TableMergedHeaderCellsIcon,
+} from "@canva/app-ui-kit";
+import { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { Header } from "src/components";
+import {
+  datasetFilter,
+  ownershipFilter,
+  sortOrderField,
+} from "src/components/inputs/messages";
+import { SearchFilter } from "src/components/inputs/search_filter";
+import { SelectField } from "src/components/inputs/select_field";
+import { useAppContext } from "src/context";
+import { Paths } from "src/routes";
+import { dateCell, stringCell } from "src/utils";
+import type { CanvaItemResponse } from "../connect_client";
+import { DataAPIError, DataSourceHandler } from "../data_source";
+import type { APIResponseItem, DataSourceConfig } from "../data_source";
+
+export interface BrandTemplatesDataSource extends DataSourceConfig {
+  query: string;
+  dataset: "any" | "non_empty" | "empty";
+  ownership: "any" | "owned" | "shared";
+  sort_by:
+    | "relevance"
+    | "modified_descending"
+    | "modified_ascending"
+    | "title_descending"
+    | "title_ascending";
+}
+
+export interface CanvaBrandTemplate extends APIResponseItem {
+  title: string;
+  created_at: number;
+  updated_at: number;
+  view_url: string;
+  create_url: string;
+}
+
+export const brandTemplatesSource = new DataSourceHandler<
+  BrandTemplatesDataSource,
+  CanvaBrandTemplate
+>(
+  {
+    schema: "brand_templates/v1",
+    query: "",
+    dataset: "any",
+    ownership: "any",
+    sort_by: "relevance",
+  },
+  [
+    {
+      label: "ID",
+      getValue: (template: CanvaBrandTemplate) => `ID ${template.id}`,
+      toCell: stringCell,
+    },
+    {
+      label: "Title",
+      getValue: "title",
+      toCell: stringCell,
+    },
+    {
+      label: "Created At",
+      getValue: "created_at",
+      toCell: dateCell,
+    },
+    {
+      label: "Updated At",
+      getValue: "updated_at",
+      toCell: dateCell,
+    },
+    {
+      label: "View URL",
+      getValue: "view_url",
+      toCell: stringCell,
+    },
+    {
+      label: "Create URL",
+      getValue: "create_url",
+      toCell: stringCell,
+    },
+  ],
+  (
+    source: BrandTemplatesDataSource,
+    authToken: string,
+    rowLimit: number,
+    signal: AbortSignal | undefined,
+  ) =>
+    getBrandTemplates(
+      authToken,
+      rowLimit,
+      signal,
+      source.query,
+      source.ownership,
+      source.dataset,
+      source.sort_by,
+    ),
+  BrandTemplatesSelection,
+  BrandTemplatesSourceConfig,
+);
+
+export async function getBrandTemplates(
+  authToken: string,
+  rowLimit: number,
+  signal: AbortSignal | undefined,
+  query: string,
+  ownership: string,
+  dataset: string,
+  sort_by: string,
+  continuation?: string,
+  allItems: CanvaBrandTemplate[] = [],
+): Promise<CanvaBrandTemplate[]> {
+  const baseUrl = `https://api.canva.com/rest/v1/brand-templates`;
+
+  const params = new URLSearchParams();
+  if (continuation) {
+    params.set("continuation", continuation);
+  } else {
+    if (query) {
+      params.set("query", query);
+    }
+    params.set("ownership", ownership);
+    params.set("dataset", dataset);
+    params.set("sort_by", sort_by);
+  }
+  const url = `${baseUrl}?${params.toString()}`;
+
+  return fetch(url, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+    signal,
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new DataAPIError(
+          `Canva Connect response was not ok: ${response.statusText || response.status}`,
+        );
+      }
+      return response.json();
+    })
+    .then((data: CanvaItemResponse<CanvaBrandTemplate>) => {
+      const updatedItems = [...allItems, ...data.items];
+
+      if (data.continuation && updatedItems.length < rowLimit) {
+        return getBrandTemplates(
+          authToken,
+          rowLimit,
+          signal,
+          query,
+          ownership,
+          dataset,
+          sort_by,
+          data.continuation,
+          updatedItems,
+        );
+      }
+
+      return updatedItems;
+    });
+}
+
+function BrandTemplatesSelection() {
+  const intl = useIntl();
+  const { setDataSourceHandler } = useAppContext();
+  const navigate = useNavigate();
+
+  const title = intl.formatMessage({
+    defaultMessage: "Brand Templates",
+    description:
+      "Main heading on the brand templates button displayed when selecting the import type.",
+  });
+
+  const description = intl.formatMessage({
+    defaultMessage: "Query brand templates",
+    description:
+      "Subtext on the brand templates button displayed when selecting the import type.",
+  });
+
+  const handleClick = () => {
+    setDataSourceHandler(
+      brandTemplatesSource as unknown as DataSourceHandler<
+        DataSourceConfig,
+        APIResponseItem
+      >,
+    );
+    navigate(Paths.DATA_SOURCE_CONFIG);
+  };
+
+  return (
+    <HorizontalCard
+      key="brand-templates"
+      title={title}
+      thumbnail={{ icon: () => <TableMergedHeaderCellsIcon /> }}
+      onClick={handleClick}
+      description={description}
+      ariaLabel={description}
+    />
+  );
+}
+
+function BrandTemplatesSourceConfig(sourceConfig: BrandTemplatesDataSource) {
+  const intl = useIntl();
+  const { loadDataSource } = useAppContext();
+  const [query, setQuery] = useState<string>(sourceConfig.query);
+  const [ownership, setOwnership] = useState<string>(sourceConfig.ownership);
+  const [sortOrder, setSortOrder] = useState<string>(sourceConfig.sort_by);
+  const [dataset, setDataset] = useState<string>(sourceConfig.dataset);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [filterCount, setFilterCount] = useState(0);
+  useEffect(() => {
+    // Update the filter count based on the selected filters
+    // consider a filter to be applied if not set to the default value
+    setFilterCount(
+      (ownership !== "any" ? 1 : 0) +
+        (dataset !== "any" ? 1 : 0) +
+        (sortOrder !== "relevance" ? 1 : 0),
+    );
+  }, [ownership, dataset, sortOrder]);
+  const resetFilters = () => {
+    setOwnership("any");
+    setDataset("any");
+    setSortOrder("relevance");
+  };
+
+  const loadTemplates = async () => {
+    loadDataSource("Canva Brand Templates", {
+      schema: "brand_templates/v1",
+      query,
+      ownership,
+      dataset,
+      sort_by: sortOrder,
+    } as BrandTemplatesDataSource).then(() => {
+      setIsLoading(false);
+    });
+  };
+
+  const ownershipOptions: SelectOption<string>[] = [
+    { value: "any", label: intl.formatMessage(ownershipFilter.any) },
+    { value: "owned", label: intl.formatMessage(ownershipFilter.owned) },
+    { value: "shared", label: intl.formatMessage(ownershipFilter.shared) },
+  ];
+
+  const sortOrderOptions: SelectOption<string>[] = [
+    { value: "relevance", label: intl.formatMessage(sortOrderField.relevance) },
+    {
+      value: "modified_descending",
+      label: intl.formatMessage(sortOrderField.modifiedDesc),
+    },
+    {
+      value: "modified_ascending",
+      label: intl.formatMessage(sortOrderField.modifiedAsc),
+    },
+    {
+      value: "title_descending",
+      label: intl.formatMessage(sortOrderField.titleDesc),
+    },
+    {
+      value: "title_ascending",
+      label: intl.formatMessage(sortOrderField.titleAsc),
+    },
+  ];
+
+  const datasetOptions: SelectOption<string>[] = [
+    { value: "any", label: intl.formatMessage(datasetFilter.any) },
+    { value: "non_empty", label: intl.formatMessage(datasetFilter.nonEmpty) },
+    { value: "empty", label: intl.formatMessage(datasetFilter.empty) },
+  ];
+
+  return (
+    <div>
+      <Header
+        title={intl.formatMessage({
+          defaultMessage: "Canva Brand Templates",
+          description: "The header text for the brand templates data source",
+        })}
+        showBack={true}
+      />
+      <Rows spacing="2u">
+        <SearchFilter
+          value={query}
+          onChange={setQuery}
+          filterCount={filterCount}
+          resetFilters={resetFilters}
+        >
+          <SelectField
+            label={intl.formatMessage(ownershipFilter.label)}
+            options={ownershipOptions}
+            value={ownership}
+            onChange={setOwnership}
+          />
+          <SelectField
+            label={intl.formatMessage(datasetFilter.label)}
+            options={datasetOptions}
+            value={dataset}
+            onChange={setDataset}
+          />
+          <SelectField
+            label={intl.formatMessage(sortOrderField.label)}
+            options={sortOrderOptions}
+            value={sortOrder}
+            onChange={setSortOrder}
+          />
+        </SearchFilter>
+
+        <Button
+          variant="primary"
+          loading={isLoading}
+          onClick={async () => {
+            loadTemplates();
+          }}
+        >
+          {intl.formatMessage({
+            defaultMessage: "Load Templates",
+            description: "Button for saving and applying the query filter",
+          })}
+        </Button>
+      </Rows>
+    </div>
+  );
+}

package/templates/data_connector/src/api/fetch_data_table.ts

@@ -0,0 +1,55 @@
+import type {
+  GetDataTableRequest,
+  GetDataTableResponse,
+} from "@canva/intents/data";
+import {
+  appError,
+  completeDataTable,
+  outdatedSourceRef,
+  remoteRequestFailed,
+} from "src/utils/fetch_result";
+import { DATA_SOURCES } from "./data_sources";
+import { DataAPIError } from ".";
+
+/**
+ * This function handles parsing the data fetch parameters and calling the appropriate handler for the data source.
+ * @param request
+ * @param authToken
+ * @returns
+ */
+export const buildDataTableResult = async (
+  request: GetDataTableRequest,
+  authToken?: string,
+): Promise<GetDataTableResponse> => {
+  const source = JSON.parse(request.dataSourceRef.source);
+  const rowLimit = request.limit.row - 1; // -1 for the header row
+
+  const dataHandler = DATA_SOURCES.find((handler) =>
+    handler.matchSource(source),
+  );
+  if (!dataHandler) {
+    // the configured source does not match the expected data source type
+    // return an error result which will prompt the user to reconfigure the data source
+    return outdatedSourceRef();
+  }
+  try {
+    const dataTable = await dataHandler.fetchAndBuildTable(
+      source,
+      authToken || "",
+      rowLimit,
+      request.signal,
+    );
+    if (dataTable.rows.length === 0) {
+      // if the data table is empty, return an error to prompt the user to reconfigure the data source
+      return appError("No results found.");
+    }
+    return completeDataTable(dataTable);
+  } catch (error) {
+    if (error instanceof DataAPIError) {
+      return remoteRequestFailed();
+    }
+    return appError(
+      error instanceof Error ? error.message : "An unknown error occurred",
+    );
+  }
+};

package/templates/data_connector/src/api/index.ts

@@ -0,0 +1,4 @@
+export * from "./connect_client";
+export * from "./fetch_data_table";
+export * from "./data_source";
+export * from "./oauth";

package/templates/data_connector/src/api/oauth.ts

@@ -0,0 +1,8 @@
+/**
+ * The scopes to request as part of the OAuth flow.
+ * These scopes are required to read the user's designs and brand templates.
+ *
+ * @see https://www.canva.dev/docs/apps/authenticating-users/oauth/#overview - for more information about using the @canva/user package to support OAuth login.
+ * @see https://www.canva.dev/docs/connect/appendix/scopes/ - for a full list of Canva Connect API scopes.
+ */
+export const scope = new Set(["design:meta:read", "brandtemplate:meta:read"]);

package/templates/data_connector/src/api/tests/data_source.test.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable formatjs/no-literal-string-in-object */
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import { toDataTable } from "src/utils";
+import type { APIResponseItem, DataSourceConfig } from "../data_source";
+import { DataAPIError, DataSourceHandler } from "../data_source";
+
+// Mock dependencies
+jest.mock("src/utils", () => ({
+  toDataTable: jest.fn().mockReturnValue({ rows: [] }),
+}));
+
+describe("DataSourceHandler", () => {
+  // Test interface
+  interface TestConfig extends DataSourceConfig {
+    testField: string;
+  }
+
+  interface TestResponse extends APIResponseItem {
+    name: string;
+  }
+
+  // Test data
+  const mockConfig: TestConfig = {
+    schema: "test/v1",
+    testField: "value",
+  };
+
+  const mockColumns = [
+    {
+      label: "ID",
+      getValue: (item: TestResponse) => `ID ${item.id}`,
+      toCell: jest.fn().mockReturnValue({ type: "string", value: "id-123" }),
+    },
+    {
+      label: "Name",
+      getValue: "name" as const,
+      toCell: jest.fn().mockReturnValue({ type: "string", value: "Test Name" }),
+    },
+  ];
+
+  const mockFetchData = jest.fn();
+  const mockSelectionPage = jest.fn().mockReturnValue(<div>Selection</div>);
+  const mockConfigPage = jest.fn().mockReturnValue(<div>Config</div>);
+
+  let handler: DataSourceHandler<TestConfig, TestResponse>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    handler = new DataSourceHandler<TestConfig, TestResponse>(
+      mockConfig,
+      mockColumns,
+      mockFetchData,
+      mockSelectionPage,
+      mockConfigPage,
+    );
+  });
+
+  test("creates handler with correct schema", () => {
+    expect(handler.schema).toBe("test/v1");
+    expect(handler.sourceConfig).toEqual(mockConfig);
+  });
+
+  test("matchSource returns true for matching schema", () => {
+    const result = handler.matchSource({ schema: "test/v1" });
+    expect(result).toBe(true);
+  });
+
+  test("matchSource returns false for non-matching schema", () => {
+    const result = handler.matchSource({ schema: "wrong/v1" });
+    expect(result).toBe(false);
+  });
+
+  test("fetchAndBuildTable calls fetchData with correct parameters", async () => {
+    const mockData = [{ id: "id-123", name: "Test Item" }];
+    mockFetchData.mockResolvedValueOnce(mockData);
+
+    const authToken = "test-token";
+    const rowLimit = 10;
+    const signal = new AbortController().signal;
+
+    await handler.fetchAndBuildTable(mockConfig, authToken, rowLimit, signal);
+
+    expect(mockFetchData).toHaveBeenCalledWith(
+      mockConfig,
+      authToken,
+      rowLimit,
+      signal,
+    );
+    expect(toDataTable).toHaveBeenCalledWith(mockData, mockColumns, rowLimit);
+  });
+
+  test("fetchAndBuildTable throws DataAPIError when fetchData fails", async () => {
+    mockFetchData.mockRejectedValueOnce(new Error("Network error"));
+
+    await expect(
+      handler.fetchAndBuildTable(mockConfig, "token", 10, undefined),
+    ).rejects.toThrow(DataAPIError);
+  });
+});

package/templates/data_connector/src/app.tsx

@@ -0,0 +1,20 @@
+import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
+import { ErrorBoundary } from "react-error-boundary";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
+import { ErrorPage } from "./pages";
+import { routes } from "./routes";
+
+export const App = ({ request }: { request: RenderSelectionUiRequest }) => (
+  <AppI18nProvider>
+    <AppUiProvider>
+      <ErrorBoundary fallback={<ErrorPage />}>
+        <ContextProvider renderSelectionUiRequest={request}>
+          <RouterProvider router={createHashRouter(routes)} />
+        </ContextProvider>
+      </ErrorBoundary>
+    </AppUiProvider>
+  </AppI18nProvider>
+);

package/templates/data_connector/src/components/app_error.tsx

@@ -0,0 +1,15 @@
+import { Alert } from "@canva/app-ui-kit";
+import { useAppContext } from "src/context";
+
+export const AppError = () => {
+  const { appError, setAppError } = useAppContext();
+  if (!appError) {
+    return null;
+  }
+
+  return (
+    <Alert tone="critical" onDismiss={() => setAppError("")}>
+      {appError}
+    </Alert>
+  );
+};

package/templates/data_connector/src/components/footer.tsx

@@ -0,0 +1,26 @@
+import { Button, Rows } from "@canva/app-ui-kit";
+import { useIntl } from "react-intl";
+import { useAppContext } from "src/context";
+
+export const Footer = () => {
+  const { isAuthenticated, logout } = useAppContext();
+  const intl = useIntl();
+
+  return (
+    <Rows spacing="1u">
+      {isAuthenticated && (
+        <Button
+          variant="tertiary"
+          onClick={async () => {
+            logout();
+          }}
+        >
+          {intl.formatMessage({
+            defaultMessage: "Log Out",
+            description: "Button for logging out of the data source",
+          })}
+        </Button>
+      )}
+    </Rows>
+  );
+};

package/templates/data_connector/src/components/header.tsx

@@ -0,0 +1,40 @@
+import {
+  ArrowLeftIcon,
+  Box,
+  Button,
+  Column,
+  Columns,
+  Title,
+} from "@canva/app-ui-kit";
+import { useNavigate } from "react-router-dom";
+import { Paths } from "src/routes";
+
+export const Header = ({
+  title,
+  showBack,
+}: {
+  title: string;
+  showBack: boolean;
+}) => {
+  const navigate = useNavigate();
+  return (
+    <Box paddingBottom="1u">
+      <Columns spacing="0" alignY="center" align="start">
+        {showBack && (
+          <Column width="content">
+            <Button
+              onClick={() => navigate(Paths.DATA_SOURCE_SELECTION)}
+              icon={ArrowLeftIcon}
+              variant="tertiary"
+            />
+          </Column>
+        )}
+        <Column>
+          <Title size="small" lineClamp={1}>
+            {title}
+          </Title>
+        </Column>
+      </Columns>
+    </Box>
+  );
+};

package/templates/data_connector/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./app_error";
+export * from "./footer";
+export * from "./header";