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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.30",
+  "version": "0.0.1-beta.32",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/package.json

@@ -6,11 +6,11 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/app-ui-kit": "^4.10.0",
     "@canva/asset": "^2.2.0",
-    "@canva/design": "^2.4.1",
+    "@canva/design": "^2.6.0",
     "@canva/error": "^2.1.0",
-    "@canva/platform": "^2.1.0",
+    "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "react": "18.3.1",
@@ -64,7 +64,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   },
   "keywords": [

package/templates/base/webpack.config.ts

@@ -199,6 +199,7 @@ function buildDevConfig(options?: DevConfig): {
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
   let devServer: DevServerConfiguration = {
     server: enableHttps
@@ -210,7 +211,8 @@ function buildDevConfig(options?: DevConfig): {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,7 +229,7 @@ function buildDevConfig(options?: DevConfig): {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
@@ -245,7 +247,7 @@ function buildDevConfig(options?: DevConfig): {
     const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
     devServer = {
       ...devServer,
-      allowedHosts: appDomain,
+      allowedHosts: [host, appDomain],
       headers: {
         "Access-Control-Allow-Origin": `https://${appDomain}`,
         "Access-Control-Allow-Credentials": "true",

package/templates/dam/package.json

@@ -20,11 +20,11 @@
   "dependencies": {
     "@canva/app-components": "^1.3.0",
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/app-ui-kit": "^4.10.0",
     "@canva/asset": "^2.2.0",
-    "@canva/design": "^2.4.1",
+    "@canva/design": "^2.6.0",
     "@canva/error": "^2.1.0",
-    "@canva/platform": "^2.1.0",
+    "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
@@ -89,7 +89,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

package/templates/dam/webpack.config.ts

@@ -199,6 +199,7 @@ function buildDevConfig(options?: DevConfig): {
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
   let devServer: DevServerConfiguration = {
     server: enableHttps
@@ -210,7 +211,8 @@ function buildDevConfig(options?: DevConfig): {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,7 +229,7 @@ function buildDevConfig(options?: DevConfig): {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
@@ -245,7 +247,7 @@ function buildDevConfig(options?: DevConfig): {
     const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
     devServer = {
       ...devServer,
-      allowedHosts: appDomain,
+      allowedHosts: [host, appDomain],
       headers: {
         "Access-Control-Allow-Origin": `https://${appDomain}`,
         "Access-Control-Allow-Credentials": "true",

package/templates/data_connector/package.json

@@ -20,12 +20,12 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/app-ui-kit": "^4.10.0",
     "@canva/asset": "^2.2.0",
-    "@canva/design": "^2.4.1",
+    "@canva/design": "^2.6.0",
     "@canva/error": "^2.1.0",
-    "@canva/intents": "^0.0.0-beta.2",
-    "@canva/platform": "^2.1.0",
+    "@canva/intents": "^2.0.0",
+    "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -85,7 +85,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

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

@@ -16,9 +16,11 @@ import { SelectField } from "src/components/inputs/select_field";
 import { dateCell, numberCell, stringCell } from "src/utils";
 import { Paths } from "src/routes";
 import { useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { SearchFilter } from "src/components/inputs/search_filter";
 
 export interface DesignsDataSource extends DataSourceConfig {
+  query: string;
   ownership: "any" | "owned" | "shared";
   sort_by:
     | "relevance"
@@ -41,6 +43,7 @@ export const designsSource = new DataSourceHandler<
 >(
   {
     schema: "designs/v1",
+    query: "",
     ownership: "any",
     sort_by: "relevance",
   },
@@ -77,7 +80,14 @@ export const designsSource = new DataSourceHandler<
     rowLimit: number,
     signal: AbortSignal | undefined,
   ) =>
-    getDesigns(authToken, rowLimit, signal, source.ownership, source.sort_by),
+    getDesigns(
+      authToken,
+      rowLimit,
+      signal,
+      source.query,
+      source.ownership,
+      source.sort_by,
+    ),
   DesignSelection,
   DesignsSourceConfig,
 );
@@ -86,15 +96,24 @@ 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 url = continuation
-    ? `${baseUrl}?continuation=${continuation}`
-    : `${baseUrl}?ownership=${ownership}&sort_by=${sort_by}`;
+  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: {
@@ -118,6 +137,7 @@ export async function getDesigns(
           authToken,
           rowLimit,
           signal,
+          query,
           ownership,
           sort_by,
           data.continuation,
@@ -171,14 +191,29 @@ function DesignSelection() {
 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(() => {
@@ -223,18 +258,26 @@ function DesignsSourceConfig(sourceConfig: DesignsDataSource) {
           showBack={true}
         />
 
-        <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
+          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}

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

@@ -21,9 +21,11 @@ import { SelectField } from "src/components/inputs/select_field";
 import { Header } from "src/components";
 import { useNavigate } from "react-router-dom";
 import { Paths } from "src/routes";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { SearchFilter } from "src/components/inputs/search_filter";
 
 export interface BrandTemplatesDataSource extends DataSourceConfig {
+  query: string;
   dataset: "any" | "non_empty" | "empty";
   ownership: "any" | "owned" | "shared";
   sort_by:
@@ -48,6 +50,7 @@ export const brandTemplatesSource = new DataSourceHandler<
 >(
   {
     schema: "brand_templates/v1",
+    query: "",
     dataset: "any",
     ownership: "any",
     sort_by: "relevance",
@@ -94,8 +97,9 @@ export const brandTemplatesSource = new DataSourceHandler<
       authToken,
       rowLimit,
       signal,
-      source.dataset,
+      source.query,
       source.ownership,
+      source.dataset,
       source.sort_by,
     ),
   BrandTemplatesSelection,
@@ -106,6 +110,7 @@ export async function getBrandTemplates(
   authToken: string,
   rowLimit: number,
   signal: AbortSignal | undefined,
+  query: string,
   ownership: string,
   dataset: string,
   sort_by: string,
@@ -113,9 +118,19 @@ export async function getBrandTemplates(
   allItems: CanvaBrandTemplate[] = [],
 ): Promise<CanvaBrandTemplate[]> {
   const baseUrl = `https://api.canva.com/rest/v1/brand-templates`;
-  const url = continuation
-    ? `${baseUrl}?continuation=${continuation}`
-    : `${baseUrl}?ownership=${ownership}&dataset=${dataset}&sort_by=${sort_by}`;
+
+  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: {
@@ -139,6 +154,7 @@ export async function getBrandTemplates(
           authToken,
           rowLimit,
           signal,
+          query,
           ownership,
           dataset,
           sort_by,
@@ -191,16 +207,34 @@ function BrandTemplatesSelection() {
 }
 
 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 intl = useIntl();
+
+  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,
@@ -251,24 +285,32 @@ function BrandTemplatesSourceConfig(sourceConfig: BrandTemplatesDataSource) {
         showBack={true}
       />
       <Rows spacing="2u">
-        <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
+          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}

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

@@ -1,6 +1,6 @@
 import type {
-  FetchDataTableParams,
-  FetchDataTableResult,
+  GetDataTableRequest,
+  GetDataTableResponse,
 } from "@canva/intents/data";
 import { DATA_SOURCES } from "./data_sources";
 import {
@@ -13,16 +13,16 @@ import { DataAPIError } from ".";
 
 /**
  * This function handles parsing the data fetch parameters and calling the appropriate handler for the data source.
- * @param fetchParams
+ * @param request
  * @param authToken
  * @returns
  */
 export const buildDataTableResult = async (
-  fetchParams: FetchDataTableParams,
+  request: GetDataTableRequest,
   authToken?: string,
-): Promise<FetchDataTableResult> => {
-  const source = JSON.parse(fetchParams.dataSourceRef.source);
-  const rowLimit = fetchParams.limit.row - 1; // -1 for the header row
+): 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),
@@ -37,8 +37,12 @@ export const buildDataTableResult = async (
       source,
       authToken || "",
       rowLimit,
-      fetchParams.signal,
+      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) {

package/templates/data_connector/src/app.tsx

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

package/templates/data_connector/src/components/inputs/messages.tsx

@@ -78,3 +78,22 @@ export const sortOrderField = defineMessages({
     description: "Option for sort order",
   },
 });
+
+export const filterMenu = defineMessages({
+  search: {
+    defaultMessage: "Search",
+    description: "Label for a search input field",
+  },
+  clear: {
+    defaultMessage: "Clear all",
+    description: "Label for a button to clear all filters",
+  },
+  apply: {
+    defaultMessage: "Apply",
+    description: "Label for a button to apply filters",
+  },
+  count: {
+    defaultMessage: "Filter count",
+    description: "Label for the number of active filters",
+  },
+});

package/templates/data_connector/src/components/inputs/search_filter.tsx

@@ -0,0 +1,108 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Column,
+  Columns,
+  Flyout,
+  Rows,
+  SearchInputMenu,
+  SlidersIcon,
+} from "@canva/app-ui-kit";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { filterMenu } from "./messages";
+
+interface SearchFilterProps {
+  value: string;
+  onChange: (value: string) => void;
+  filterCount: number;
+  resetFilters: () => void;
+  children?: React.ReactNode;
+}
+
+export const SearchFilter = ({
+  value,
+  onChange,
+  filterCount,
+  resetFilters,
+  children,
+}: SearchFilterProps) => {
+  const intl = useIntl();
+  const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);
+  const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
+
+  const onFilterClick = () => {
+    setIsFilterMenuOpen(!isFilterMenuOpen);
+  };
+
+  const filterButton = (
+    <Button
+      size="small"
+      variant="tertiary"
+      icon={SlidersIcon}
+      onClick={onFilterClick}
+    />
+  );
+  return (
+    <>
+      <Box paddingStart="0.5u">
+        <SearchInputMenu
+          value={value}
+          placeholder={intl.formatMessage(filterMenu.search)}
+          onChange={(value) => onChange(value)}
+          onClear={() => onChange("")}
+          ref={setTriggerRef}
+          end={
+            filterCount === 0 ? (
+              filterButton
+            ) : (
+              <Badge
+                tone="assist"
+                wrapInset="0"
+                shape="circle"
+                text={filterCount.toString()}
+                ariaLabel={intl.formatMessage(filterMenu.count)}
+              >
+                {filterButton}
+              </Badge>
+            )
+          }
+        />
+      </Box>
+      <Flyout
+        open={isFilterMenuOpen}
+        onRequestClose={() => setIsFilterMenuOpen(false)}
+        width="trigger"
+        trigger={triggerRef}
+        placement="bottom-center"
+        footer={
+          <Box padding="2u" background="surface">
+            <Columns spacing="1u">
+              <Column>
+                <Button variant="secondary" onClick={resetFilters} stretch>
+                  {intl.formatMessage(filterMenu.clear)}
+                </Button>
+              </Column>
+              <Column>
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    setIsFilterMenuOpen(false);
+                  }}
+                  stretch
+                >
+                  {intl.formatMessage(filterMenu.apply)}
+                </Button>
+              </Column>
+            </Columns>
+          </Box>
+        }
+      >
+        <Box padding="2u">
+          <Rows spacing="2u">{children}</Rows>
+        </Box>
+      </Flyout>
+    </>
+  );
+};