Improve Look of SelectApp and SelectComponent

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

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"

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

@@ -25,7 +25,8 @@
   } = useApps({
     q,
   });
-  const { Option } = components;
+  const { Option, SingleValue } = components;
+  const selectedValue = apps?.find((o) => o.name_slug === value?.name_slug) || null;
   return (
     <Select
       instanceId={instanceId}
@@ -52,14 +53,30 @@
             </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 || []}
       getOptionLabel={(o) => o.name || o.name_slug} // TODO fetch initial value app so we show name
       getOptionValue={(o) => o.name_slug}
-      value={value}
+      value={selectedValue}
       onChange={(o) => onChange?.((o as AppResponse) || undefined)}
-      onInputChange={(v) => setQ(v)}
+      onInputChange={(v) => {
+        if(v) setQ(v)
+      }}
       isLoading={isLoading}
     />
   );

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

@@ -1,9 +1,7 @@
 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; };
@@ -19,23 +17,22 @@ export function SelectComponent({
   onChange,
 }: SelectComponentProps) {
   const instanceId = useId();
-  const {
-    isLoading,
-    // TODO error
-    components,
-  } = useComponents({
+  const { isLoading, components } = useComponents({
     app: app?.name_slug,
     componentType,
   });
+
+  const selectedValue = components?.find((c) => c.key === value?.key) || null;
+
   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}
+      value={selectedValue}
       onChange={(o) => onChange?.((o as V1Component) || undefined)}
       isLoading={isLoading}
       components={{

packages/connect-react/src/hooks/use-apps.tsx

@@ -17,6 +17,6 @@ export const useApps = (input?: GetAppsOpts) => {
 
   return {
     ...query,
-    apps: query.data?.data,
+    apps: query.data?.data || [],
   };
 };