Adding app sort and filter opts, discord async options (#18105)

* Adding app sort and filter opts, discord async options

* Update SelectApp.tsx

* Update SelectApp.tsx

* Update SelectApp.tsx

Author: dannyroosevelt

packages/connect-react/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 # Changelog
 
+## [1.5.0] - 2025-08-18
+
+### Fixed
+
+- Added special handling to support `$.discord.channel[]` prop type
+
+### Added
+
+- Support for app sorting and filtering in `SelectApp` component and `useApps` hook
+- Added `appsOptions` prop to `SelectApp` for controlling sort order and filtering
+- Apps can now be sorted by `name`, `featured_weight`, or `name_slug`
+- Support for filtering apps by whether they have actions, triggers, or components
+
 ## [1.4.0] - 2025-08-01
 
 ### Added

packages/connect-react/README.md

@@ -183,6 +183,34 @@ This allows you to use your own OAuth applications for specific integrations, pr
 
 **Note**: OAuth app IDs are not sensitive, and are safe to expose in the client.
 
+### App Sorting and Filtering
+
+When using the `SelectApp` component or `useApps` hook, you can control how apps are sorted and filtered:
+
+```tsx
+<SelectApp
+  value={selectedApp}
+  onChange={setSelectedApp}
+  appsOptions={{
+    sortKey: "featured_weight", // Sort by: "name" | "featured_weight" | "name_slug"
+    sortDirection: "desc", // "asc" | "desc"
+    hasActions: true, // Only show apps with actions
+    hasTriggers: false, // Exclude apps with triggers
+  }}
+/>
+```
+
+The `useApps` hook accepts the same options:
+
+```tsx
+const { apps, isLoading } = useApps({
+  q: "slack", // Search query
+  sortKey: "featured_weight",
+  sortDirection: "desc",
+  hasActions: true,
+});
+```
+
 ## Customization
 
 Style individual components using the `CustomizeProvider` and a `CustomizationConfig`.
@@ -454,7 +482,7 @@ customization options available.
 - `useFrontendClient` — _allows use of provided Pipedream frontendClient_
 - `useAccounts` — _react-query wrapper to list Pipedream connect accounts (for app, external user, etc.)_
 - `useApp` — _react-query wrapper to retrieve a Pipedream app_
-- `useApps` — _react-query wrapper to list Pipedream apps_
+- `useApps` — _react-query wrapper to list Pipedream apps with support for sorting and filtering_
 - `useComponent` — _react-query wrapper to retrieve a Pipedream component (action or trigger)_
 - `useComponents` — _react-query wrapper to list Pipedream components (actions or triggers)_
 

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/src/components/Control.tsx

@@ -32,8 +32,7 @@ export function Control<T extends ConfigurableProps, U extends ConfigurableProp>
   const app = "app" in field.extra
     ? field.extra.app
     : undefined;
-
-  if (prop.remoteOptions || prop.type === "$.discord.channel") {
+  if (prop.remoteOptions || prop.type === "$.discord.channel" || prop.type === "$.discord.channel[]") {
     return <RemoteOptionsContainer queryEnabled={queryDisabledIdx == null || queryDisabledIdx >= idx} />;
   }
 

packages/connect-react/src/components/SelectApp.tsx

@@ -3,15 +3,21 @@ import {
 } from "react";
 import Select, { components } from "react-select";
 import { useApps } from "../hooks/use-apps";
-import { AppResponse } from "@pipedream/sdk";
+import type {
+  AppResponse, GetAppsOpts,
+} from "@pipedream/sdk";
 
 type SelectAppProps = {
   value?: Partial<AppResponse> & { name_slug: string; };
   onChange?: (app?: AppResponse) => void;
+  /**
+   * Additional options for fetching apps (sorting, filtering, etc.)
+   */
+  appsOptions?: Omit<GetAppsOpts, "q">;
 };
 
 export function SelectApp({
-  value, onChange,
+  value, onChange, appsOptions,
 }: SelectAppProps) {
   const [
     inputValue,
@@ -40,6 +46,7 @@ export function SelectApp({
     // TODO error
     apps,
   } = useApps({
+    ...appsOptions ?? {},
     q,
   });
   const {