Improve Look of SelectApp and SelectComponent (#15674)

* SelectApp has a SingleValue now with icon

* better label when component is selected

* cleanup

* version/changelog bump

* .

* linting

Author: jsendo

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,11 @@ export function SelectApp({
   } = 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 +56,39 @@ 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 || []}
       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

@@ -20,22 +20,23 @@ export function SelectComponent({
 }: SelectComponentProps) {
   const instanceId = useId();
   const {
-    isLoading,
-    // TODO error
-    components,
+    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 || [],
   };
 };