From e2b020aaf5a6c60b5b3450f71ec21c22e800e3d4 Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 08:50:53 -0800
Subject: [PATCH 1/6] SelectApp has a SingleValue now with icon

---
 .../src/components/SelectApp.tsx              | 36 ++++++++++++++++---
 .../src/components/SelectComponent.tsx        | 20 +++++------
 packages/connect-react/src/hooks/use-apps.tsx |  5 ++-
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 61fe7bd27098f..6ca2ecfaed030 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -6,7 +6,7 @@ import { useApps } from "../hooks/use-apps";
 import { AppResponse } from "@pipedream/sdk";
 
 type SelectAppProps = {
-  value?: Partial<AppResponse> & { name_slug: string; };
+  value?: Partial<AppResponse> & { name_slug: string; name: string; id: string };
   onChange?: (app?: AppResponse) => void;
 };
 
@@ -25,7 +25,9 @@ export function SelectApp({
   } = useApps({
     q,
   });
-  const { Option } = components;
+  console.log("apps: ", apps);
+  const { Option, SingleValue } = components;
+  const selectedValue = apps?.find((o) => o.name_slug === value?.name_slug) || null;
   return (
     <Select
       instanceId={instanceId}
@@ -52,14 +54,38 @@ export function SelectApp({
             </div>
           </Option>
         ),
+        SingleValue: (singleValueProps) => (
+          <SingleValue {...singleValueProps}>
+            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+              <img
+                src={`https://pipedream.com/s.v0/${singleValueProps.data.id}/logo/48`}
+                style={{ height: 24, width: 24 }}
+                alt={singleValueProps.data.name}
+              />
+              <span style={{ whiteSpace: "nowrap" }}>
+                {singleValueProps.data.name}
+              </span>
+            </div>
+          </SingleValue>
+        ),
         IndicatorSeparator: () => null,
       }}
       options={apps || []}
+      //options={[...(value ? [value] : []), ...apps]}
       getOptionLabel={(o) => o.name || o.name_slug} // TODO fetch initial value app so we show name
       getOptionValue={(o) => o.name_slug}
-      value={value}
-      onChange={(o) => onChange?.((o as AppResponse) || undefined)}
-      onInputChange={(v) => setQ(v)}
+      value={selectedValue}
+//      value={apps?.find((app) => app.name_slug === value?.name_slug) || null}
+      onChange={(o) => {
+        console.log("onChange", o);
+        onChange?.((o as AppResponse) || undefined)
+      }}
+      onInputChange={(v) => {
+        console.log("onInputChange", v);
+        if (v) {
+          setQ(v)
+        }
+      }}
       isLoading={isLoading}
     />
   );
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 90e4ec77cb165..1e29eac76784b 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -1,14 +1,12 @@
-import { useId } from "react";
+import { useId, useEffect } from "react";
 import Select from "react-select";
 import { useComponents } from "../hooks/use-components";
-import {
-  AppResponse, V1Component,
-} from "@pipedream/sdk";
+import { AppResponse, V1Component } from "@pipedream/sdk";
 
 type SelectComponentProps = {
-  app?: Partial<AppResponse> & { name_slug: string; };
+  app?: Partial<AppResponse> & { name_slug: string };
   componentType?: "action" | "trigger";
-  value?: Partial<V1Component> & { key: string; };
+  value?: Partial<V1Component> & { key: string };
   onChange?: (component?: V1Component) => void;
 };
 
@@ -19,21 +17,18 @@ export function SelectComponent({
   onChange,
 }: SelectComponentProps) {
   const instanceId = useId();
-  const {
-    isLoading,
-    // TODO error
-    components,
-  } = useComponents({
+  const { isLoading, components } = useComponents({
     app: app?.name_slug,
     componentType,
   });
+
   return (
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
       classNamePrefix="react-select"
       options={components}
-      getOptionLabel={(o) => o.name || o.key} // TODO fetch default component so we show name (or just prime correctly in demo)
+      getOptionLabel={(o) => o.name || o.key}
       getOptionValue={(o) => o.key}
       value={value}
       onChange={(o) => onChange?.((o as V1Component) || undefined)}
@@ -44,3 +39,4 @@ export function SelectComponent({
     />
   );
 }
+
diff --git a/packages/connect-react/src/hooks/use-apps.tsx b/packages/connect-react/src/hooks/use-apps.tsx
index d14780a242ac7..8ec6c8fbdf0a0 100644
--- a/packages/connect-react/src/hooks/use-apps.tsx
+++ b/packages/connect-react/src/hooks/use-apps.tsx
@@ -13,10 +13,13 @@ export const useApps = (input?: GetAppsOpts) => {
       input,
     ],
     queryFn: () => client.apps(input),
+//    keepPreviousData: true,
+//    staleTime: 1000 * 60 * 5, // Cache results for 5 minutes
+//    cacheTime: 1000 * 60 * 10, // Keep cache for 10 minutes
   });
 
   return {
     ...query,
-    apps: query.data?.data,
+    apps: query.data?.data || [],
   };
 };

From 4eb47484daee1d958e07e5ed33c050ab2b714e6a Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 09:13:29 -0800
Subject: [PATCH 2/6] better label when component is selected

---
 packages/connect-react/src/components/SelectComponent.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 1e29eac76784b..4dd122d213cc6 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -1,4 +1,4 @@
-import { useId, useEffect } from "react";
+import { useId } from "react";
 import Select from "react-select";
 import { useComponents } from "../hooks/use-components";
 import { AppResponse, V1Component } from "@pipedream/sdk";
@@ -22,6 +22,8 @@ export function SelectComponent({
     componentType,
   });
 
+  const selectedValue = components?.find((c) => c.key === value?.key) || null;
+
   return (
     <Select
       instanceId={instanceId}
@@ -30,7 +32,7 @@ export function SelectComponent({
       options={components}
       getOptionLabel={(o) => o.name || o.key}
       getOptionValue={(o) => o.key}
-      value={value}
+      value={selectedValue}
       onChange={(o) => onChange?.((o as V1Component) || undefined)}
       isLoading={isLoading}
       components={{

From 7b7b2f63d06b6413bf54c656de83ca5ebd733c83 Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 09:27:59 -0800
Subject: [PATCH 3/6] cleanup

---
 .../connect-react/src/components/SelectApp.tsx    | 15 +++------------
 .../src/components/SelectComponent.tsx            |  5 ++---
 packages/connect-react/src/hooks/use-apps.tsx     |  3 ---
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 6ca2ecfaed030..3d8385263f180 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -6,7 +6,7 @@ import { useApps } from "../hooks/use-apps";
 import { AppResponse } from "@pipedream/sdk";
 
 type SelectAppProps = {
-  value?: Partial<AppResponse> & { name_slug: string; name: string; id: string };
+  value?: Partial<AppResponse> & { name_slug: string; };
   onChange?: (app?: AppResponse) => void;
 };
 
@@ -25,7 +25,6 @@ export function SelectApp({
   } = useApps({
     q,
   });
-  console.log("apps: ", apps);
   const { Option, SingleValue } = components;
   const selectedValue = apps?.find((o) => o.name_slug === value?.name_slug) || null;
   return (
@@ -71,20 +70,12 @@ export function SelectApp({
         IndicatorSeparator: () => null,
       }}
       options={apps || []}
-      //options={[...(value ? [value] : []), ...apps]}
       getOptionLabel={(o) => o.name || o.name_slug} // TODO fetch initial value app so we show name
       getOptionValue={(o) => o.name_slug}
       value={selectedValue}
-//      value={apps?.find((app) => app.name_slug === value?.name_slug) || null}
-      onChange={(o) => {
-        console.log("onChange", o);
-        onChange?.((o as AppResponse) || undefined)
-      }}
+      onChange={(o) => onChange?.((o as AppResponse) || undefined)}
       onInputChange={(v) => {
-        console.log("onInputChange", v);
-        if (v) {
-          setQ(v)
-        }
+        if(v) setQ(v)
       }}
       isLoading={isLoading}
     />
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 4dd122d213cc6..c870d1727fefb 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -4,9 +4,9 @@ import { useComponents } from "../hooks/use-components";
 import { AppResponse, V1Component } from "@pipedream/sdk";
 
 type SelectComponentProps = {
-  app?: Partial<AppResponse> & { name_slug: string };
+  app?: Partial<AppResponse> & { name_slug: string; };
   componentType?: "action" | "trigger";
-  value?: Partial<V1Component> & { key: string };
+  value?: Partial<V1Component> & { key: string; };
   onChange?: (component?: V1Component) => void;
 };
 
@@ -41,4 +41,3 @@ export function SelectComponent({
     />
   );
 }
-
diff --git a/packages/connect-react/src/hooks/use-apps.tsx b/packages/connect-react/src/hooks/use-apps.tsx
index 8ec6c8fbdf0a0..8c34c3754f48b 100644
--- a/packages/connect-react/src/hooks/use-apps.tsx
+++ b/packages/connect-react/src/hooks/use-apps.tsx
@@ -13,9 +13,6 @@ export const useApps = (input?: GetAppsOpts) => {
       input,
     ],
     queryFn: () => client.apps(input),
-//    keepPreviousData: true,
-//    staleTime: 1000 * 60 * 5, // Cache results for 5 minutes
-//    cacheTime: 1000 * 60 * 10, // Keep cache for 10 minutes
   });
 
   return {

From 5e1019720032e8b6656e3c51b1a739dedb38888d Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 14:53:18 -0800
Subject: [PATCH 4/6] version/changelog bump

---
 packages/connect-react/CHANGELOG.md | 4 ++++
 packages/connect-react/package.json | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
index 38e1803094e71..dabfb9b89ddc7 100644
--- a/packages/connect-react/CHANGELOG.md
+++ b/packages/connect-react/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.30] - 2025-02-19
+
+- SelectApp and SelectComponent Improvements
+
 # [1.0.0-preview.29] - 2025-02-10
 
 - Fix enableDebugging state update bug
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index 171975abc31c8..655f5f65e9ad0 100644
--- a/packages/connect-react/package.json
+++ b/packages/connect-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.29",
+  "version": "1.0.0-preview.30",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
@@ -18,7 +18,8 @@
   },
   "scripts": {
     "build": "vite build",
-    "prepare": "pnpm run build"
+    "prepare": "pnpm run build",
+    "watch": "NODE_ENV=development vite build --watch --mode development"
   },
   "publishConfig": {
     "access": "public"

From 3dab83f765e6acd7fcbcc9cd18fdd90d99c30337 Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 14:56:02 -0800
Subject: [PATCH 5/6] .

---
 pnpm-lock.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb6beb3642cc8..9f85f52b6791c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16801,6 +16801,7 @@ packages:
 
   '@readme/json-schema-ref-parser@1.2.0':
     resolution: {integrity: sha512-Bt3QVovFSua4QmHa65EHUmh2xS0XJ3rgTEUPH998f4OW4VVJke3BuS16f+kM0ZLOGdvIrzrPRqwihuv5BAjtrA==}
+    deprecated: This package is no longer maintained. Please use `@apidevtools/json-schema-ref-parser` instead.
 
   '@readme/oas-extensions@14.4.0':
     resolution: {integrity: sha512-vNrZ1s7SyvWfqJAW9OI3lciDe9fbgJYXz2XIGoyi6f3Q8MMHbKx1GCVsX4SiAFai7lUIZDe2ltEKKtoxTfOKNQ==}
@@ -22570,6 +22571,7 @@ packages:
 
   lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
 
   lodash.has@4.5.2:
     resolution: {integrity: sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==}
@@ -22616,6 +22618,7 @@ packages:
 
   lodash.pick@4.4.0:
     resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
+    deprecated: This package is deprecated. Use destructuring assignment syntax instead.
 
   lodash.pickby@4.6.0:
     resolution: {integrity: sha512-AZV+GsS/6ckvPOVQPXSiFFacKvKB4kOQu6ynt9wz0F3LO4R9Ij4K1ddYsIytDpSgLz88JHd9P+oaLeej5/Sl7Q==}

From 6f7b748d24f9fd74a2b63ce0be2b23b558c3b0e4 Mon Sep 17 00:00:00 2001
From: Jason Endo <jason@pipedream.com>
Date: Wed, 19 Feb 2025 15:35:14 -0800
Subject: [PATCH 6/6] linting

---
 .../src/components/SelectApp.tsx              | 22 ++++++++++++++-----
 .../src/components/SelectComponent.tsx        |  8 +++++--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 3d8385263f180..834082c2b7ba2 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -25,7 +25,10 @@ export function SelectApp({
   } = useApps({
     q,
   });
-  const { Option, SingleValue } = components;
+  const {
+    Option,
+    SingleValue,
+  } = components;
   const selectedValue = apps?.find((o) => o.name_slug === value?.name_slug) || null;
   return (
     <Select
@@ -55,13 +58,22 @@ export function SelectApp({
         ),
         SingleValue: (singleValueProps) => (
           <SingleValue {...singleValueProps}>
-            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+            <div style={{
+              display: "flex",
+              gap: 10,
+              alignItems: "center",
+            }}>
               <img
                 src={`https://pipedream.com/s.v0/${singleValueProps.data.id}/logo/48`}
-                style={{ height: 24, width: 24 }}
+                style={{
+                  height: 24,
+                  width: 24,
+                }}
                 alt={singleValueProps.data.name}
               />
-              <span style={{ whiteSpace: "nowrap" }}>
+              <span style={{
+                whiteSpace: "nowrap",
+              }}>
                 {singleValueProps.data.name}
               </span>
             </div>
@@ -75,7 +87,7 @@ export function SelectApp({
       value={selectedValue}
       onChange={(o) => onChange?.((o as AppResponse) || undefined)}
       onInputChange={(v) => {
-        if(v) setQ(v)
+        if (v) setQ(v)
       }}
       isLoading={isLoading}
     />
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index c870d1727fefb..b20a6073da49c 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -1,7 +1,9 @@
 import { useId } from "react";
 import Select from "react-select";
 import { useComponents } from "../hooks/use-components";
-import { AppResponse, V1Component } from "@pipedream/sdk";
+import {
+  AppResponse, V1Component,
+} from "@pipedream/sdk";
 
 type SelectComponentProps = {
   app?: Partial<AppResponse> & { name_slug: string; };
@@ -17,7 +19,9 @@ export function SelectComponent({
   onChange,
 }: SelectComponentProps) {
   const instanceId = useId();
-  const { isLoading, components } = useComponents({
+  const {
+    isLoading, components,
+  } = useComponents({
     app: app?.name_slug,
     componentType,
   });