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

package/package.json

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

package/templates/data_connector/package.json

@@ -24,7 +24,7 @@
     "@canva/asset": "^2.2.0",
     "@canva/design": "^2.4.1",
     "@canva/error": "^2.1.0",
-    "@canva/intents": "^0.0.0-beta.2",
+    "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.1.0",
     "@canva/user": "^2.1.0",
     "react": "18.3.1",

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>
+    </>
+  );
+};

package/templates/data_connector/src/context/app_context.tsx

@@ -1,5 +1,5 @@
 import { createContext, useState, useCallback } from "react";
-import type { RenderSelectionUiParams } from "@canva/intents/data";
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import type { AccessTokenResponse } from "@canva/user";
 import { auth } from "@canva/user";
 import type { APIResponseItem, DataSourceHandler } from "src/api/data_source";
@@ -8,7 +8,7 @@ import { type DataSourceConfig } from "src/api/data_source";
 export interface AppContextType {
   appError: string;
   setAppError: (value: string) => void;
-  dataParams: RenderSelectionUiParams;
+  request: RenderSelectionUiRequest;
   isAuthenticated: boolean;
   accessToken: AccessTokenResponse | undefined;
   setAccessToken: (token: AccessTokenResponse | undefined) => void;
@@ -27,7 +27,7 @@ export interface AppContextType {
 export const AppContext = createContext<AppContextType>({
   appError: "",
   setAppError: () => {},
-  dataParams: {} as RenderSelectionUiParams,
+  request: {} as RenderSelectionUiRequest,
   isAuthenticated: false,
   accessToken: undefined,
   setAccessToken: () => {},
@@ -51,15 +51,15 @@ export const AppContext = createContext<AppContextType>({
  * For more information on React Context, refer to the official React documentation: {@link https://react.dev/learn/passing-data-deeply-with-context}.
  */
 export const ContextProvider = ({
-  renderSelectionUiParams,
+  renderSelectionUiRequest,
   children,
 }: {
-  renderSelectionUiParams: RenderSelectionUiParams;
+  renderSelectionUiRequest: RenderSelectionUiRequest;
   children: React.ReactNode;
 }): JSX.Element => {
   const [appError, setAppError] = useState<string>("");
-  const [dataParams] = useState<RenderSelectionUiParams>(
-    renderSelectionUiParams,
+  const [request] = useState<RenderSelectionUiRequest>(
+    renderSelectionUiRequest,
   );
 
   // authentication
@@ -77,7 +77,7 @@ export const ContextProvider = ({
   // data connection
   const loadDataSource = useCallback(
     async (title: string, source: DataSourceConfig) => {
-      const result = await dataParams.updateDataRef({
+      const result = await request.updateDataRef({
         title,
         source: JSON.stringify(source),
       });
@@ -91,7 +91,7 @@ export const ContextProvider = ({
         setAppError("");
       }
     },
-    [dataParams],
+    [request],
   );
 
   const logout = useCallback(async () => {
@@ -107,7 +107,7 @@ export const ContextProvider = ({
   const value: AppContextType = {
     appError,
     setAppError,
-    dataParams,
+    request,
     isAuthenticated,
     accessToken,
     setAccessToken,

package/templates/data_connector/src/entrypoint.tsx

@@ -26,27 +26,24 @@ const parseDataSource = (source: string) => {
 export const Entrypoint = () => {
   const navigate = useNavigate();
   const context = useAppContext();
-  const { dataParams, setAppError, setDataSourceHandler } = context;
+  const { request, setAppError, setDataSourceHandler } = context;
 
   useEffect(() => {
     // if the app was loaded with a populated data ref, we should reload the previous state.
     // otherwise, if this is a first launch or there is an error, we should navigate to the first screen for a user - selecting a data source
     let navigateTo: Paths | undefined;
 
-    if (isDataRefEmpty(dataParams)) {
+    if (isDataRefEmpty(request)) {
       // probably a first time launch - the user will need to select a data source
       navigateTo = Paths.DATA_SOURCE_SELECTION;
-    } else if (
-      isOutdatedSource(dataParams) ||
-      isLaunchedWithError(dataParams)
-    ) {
+    } else if (isOutdatedSource(request) || isLaunchedWithError(request)) {
       // the configured source does not match the expected data source types
       // so prompt the user to reconfigure the data source
       setAppError("The data source configuration needs to be updated.");
       navigateTo = Paths.DATA_SOURCE_SELECTION;
     } else {
       // there is a data ref, so we should parse it and navigate to the appropriate page
-      const dataRef = dataParams.invocationContext.dataSourceRef;
+      const dataRef = request.invocationContext.dataSourceRef;
       const parsedSource = parseDataSource(dataRef?.source ?? "");
 
       if (parsedSource) {
@@ -67,7 +64,7 @@ export const Entrypoint = () => {
     }
 
     navigate(navigateTo || Paths.DATA_SOURCE_SELECTION);
-  }, [dataParams]);
+  }, [request]);
 
   return <LoadingIndicator />;
 };

package/templates/data_connector/src/index.tsx

@@ -1,7 +1,7 @@
 import type {
-  RenderSelectionUiParams,
-  FetchDataTableParams,
-  FetchDataTableResult,
+  RenderSelectionUiRequest,
+  GetDataTableRequest,
+  GetDataTableResponse,
 } from "@canva/intents/data";
 import { prepareDataConnector } from "@canva/intents/data";
 import { createRoot } from "react-dom/client";
@@ -19,15 +19,15 @@ prepareDataConnector({
    *
    * This action is called in two scenarios:
    *
-   * - During data selection to preview data before import (when {@link RenderSelectionUiParams.updateDataRef} is called).
+   * - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
    * - When refreshing previously imported data (when the user requests an update).
    *
    * @param params - Parameters for the data fetching operation.
    * @returns A promise resolving to either a successful result with data or an error.
    */
-  fetchDataTable: async (
-    params: FetchDataTableParams,
-  ): Promise<FetchDataTableResult> => {
+  getDataTable: async (
+    params: GetDataTableRequest,
+  ): Promise<GetDataTableResponse> => {
     const oauth = auth.initOauth();
     const token = await oauth.getAccessToken({ scope });
     return buildDataTableResult(params, token?.token);
@@ -39,12 +39,12 @@ prepareDataConnector({
    * When selection is complete, the implementation must call the `updateDataRef`
    * callback provided in the params to preview and confirm the data selection.
    *
-   * @param params - parameters that provide context and configuration for the data selection UI.
+   * @param request - parameters that provide context and configuration for the data selection UI.
    * Contains invocation context, size limits, and the updateDataRef callback
    */
-  renderSelectionUi: async (params: RenderSelectionUiParams) => {
+  renderSelectionUi: async (request: RenderSelectionUiRequest) => {
     function render() {
-      root.render(<App dataParams={params} />);
+      root.render(<App request={request} />);
     }
 
     render();