@canva/cli 1.19.0 → 1.21.0

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

@@ -1,296 +0,0 @@
-/* eslint-disable formatjs/no-literal-string-in-object */
-
-import type { SelectOption } from "@canva/app-ui-kit";
-import { Button, DatabaseIcon, HorizontalCard, Rows } 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 {
-  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/paths";
-import { dateCell, numberCell, 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 DesignsDataSource extends DataSourceConfig {
-  query: string;
-  ownership: "any" | "owned" | "shared";
-  sort_by:
-    | "relevance"
-    | "modified_descending"
-    | "modified_ascending"
-    | "title_descending"
-    | "title_ascending";
-}
-
-export interface CanvaDesign extends APIResponseItem {
-  title: string;
-  created_at: number;
-  updated_at: number;
-  page_count: number;
-}
-
-export const designsSource = new DataSourceHandler<
-  DesignsDataSource,
-  CanvaDesign
->(
-  {
-    schema: "designs/v1",
-    query: "",
-    ownership: "any",
-    sort_by: "relevance",
-  },
-  [
-    {
-      label: "ID",
-      getValue: (design: CanvaDesign) => `ID ${design.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: "Page Count",
-      getValue: "page_count",
-      toCell: numberCell,
-    },
-  ],
-  (
-    source: DesignsDataSource,
-    authToken: string,
-    rowLimit: number,
-    signal: AbortSignal | undefined,
-  ) =>
-    getDesigns(
-      authToken,
-      rowLimit,
-      signal,
-      source.query,
-      source.ownership,
-      source.sort_by,
-    ),
-  DesignSelection,
-  DesignsSourceConfig,
-);
-
-export async function getDesigns(
-  authToken: string,
-  rowLimit: number,
-  signal: AbortSignal | undefined,
-  query: string,
-  ownership: string,
-  sort_by: string,
-  continuation?: string,
-  allItems: CanvaDesign[] = [],
-): Promise<CanvaDesign[]> {
-  const baseUrl = `https://api.canva.com/rest/v1/designs`;
-  const params = new URLSearchParams();
-  if (continuation) {
-    params.set("continuation", continuation);
-  } else {
-    if (query) {
-      params.set("query", query);
-    }
-    params.set("ownership", ownership);
-    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<CanvaDesign>) => {
-      const updatedItems = [...allItems, ...data.items];
-
-      if (data.continuation && updatedItems.length < rowLimit) {
-        return getDesigns(
-          authToken,
-          rowLimit,
-          signal,
-          query,
-          ownership,
-          sort_by,
-          data.continuation,
-          updatedItems,
-        );
-      }
-
-      return updatedItems;
-    });
-}
-
-function DesignSelection() {
-  const intl = useIntl();
-  const { setDataSourceHandler } = useAppContext();
-  const navigate = useNavigate();
-
-  const title = intl.formatMessage({
-    defaultMessage: "Designs",
-    description:
-      "Main heading on the designs button displayed when selecting the import type.",
-  });
-
-  const description = intl.formatMessage({
-    defaultMessage: "Query designs",
-    description:
-      "Subtext on the designs selection button displayed when selecting the import type.",
-  });
-
-  const handleClick = () => {
-    setDataSourceHandler(
-      designsSource as unknown as DataSourceHandler<
-        DataSourceConfig,
-        APIResponseItem
-      >,
-    );
-    navigate(Paths.DATA_SOURCE_CONFIG);
-  };
-
-  return (
-    <HorizontalCard
-      key="designs"
-      title={title}
-      thumbnail={{ icon: () => <DatabaseIcon /> }}
-      onClick={handleClick}
-      description={description}
-      ariaLabel={description}
-    />
-  );
-}
-
-function DesignsSourceConfig(sourceConfig: DesignsDataSource) {
-  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 [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) + (sortOrder !== "relevance" ? 1 : 0),
-    );
-  }, [ownership, sortOrder]);
-  const resetFilters = () => {
-    setOwnership("any");
-    setSortOrder("relevance");
-  };
-
-  const loadDesigns = async () => {
-    setIsLoading(true);
-    loadDataSource("Canva Designs", {
-      schema: "designs/v1",
-      query,
-      ownership,
-      sort_by: sortOrder,
-    } as DesignsDataSource).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),
-    },
-  ];
-
-  return (
-    <div>
-      <Rows spacing="2u">
-        <Header
-          title={intl.formatMessage({
-            defaultMessage: "Canva Designs",
-            description: "The header text for the designs data source",
-          })}
-          showBack={true}
-        />
-
-        <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(sortOrderField.label)}
-            options={sortOrderOptions}
-            value={sortOrder}
-            onChange={setSortOrder}
-          />
-        </SearchFilter>
-
-        <Button
-          variant="primary"
-          loading={isLoading}
-          onClick={async () => {
-            loadDesigns();
-          }}
-        >
-          {intl.formatMessage({
-            defaultMessage: "Load Designs",
-            description: "Button for saving and applying the query filter",
-          })}
-        </Button>
-      </Rows>
-    </div>
-  );
-}

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

@@ -1,4 +0,0 @@
-import { designsSource } from "./designs";
-import { brandTemplatesSource } from "./templates";
-
-export const DATA_SOURCES = [designsSource, brandTemplatesSource];

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

@@ -1,328 +0,0 @@
-/* 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/paths";
-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";
-  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) },
-  ];
-
-  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

@@ -1,55 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-/**
- * 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"]);