Update connection select UI (#1740)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3164.

<img width="815" height="270" alt="image"
src="https://github.com/user-attachments/assets/480b6977-28d7-4e82-8d21-d131d72d7b65"
/>
<img width="446" height="99" alt="image"
src="https://github.com/user-attachments/assets/73695f57-92e4-4854-b139-a18cf4f44715"
/>
<img width="454" height="104" alt="image"
src="https://github.com/user-attachments/assets/024e9ed2-4c6a-44f9-95a3-fdd130f4893d"
/>
<img width="447" height="111" alt="image"
src="https://github.com/user-attachments/assets/72a5cb02-8e77-459c-b7da-572b49ec6198"
/>


It's on UX

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added Edit and Clear action buttons to the connection selector
interface for improved management and flexibility when working with
connections.
  
* **UI & Style Improvements**
* Enhanced the connection selector layout with better visual
presentation and refined icon styling for trigger controls.
* Updated the connection creation action label text to "Create new
connection" for improved clarity and consistency.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: rSnapkoOpenOps

packages/react-ui/src/app/features/builder/step-settings/block-settings/connection-select.tsx

@@ -18,7 +18,8 @@ import {
   removeConnectionBrackets,
 } from '@openops/shared';
 import { t } from 'i18next';
-import { Plus } from 'lucide-react';
+import { PencilLine, Plus, X } from 'lucide-react';
+import type React from 'react';
 import { memo, useCallback, useState } from 'react';
 import { ControllerRenderProps, useFormContext } from 'react-hook-form';
 
@@ -38,6 +39,7 @@ type ConnectionSelectProps = {
   allowDynamicValues: boolean;
   providerKey: string;
   name: string;
+  displayName?: string;
 };
 
 const ConnectionSelect = memo((params: ConnectionSelectProps) => {
@@ -68,9 +70,9 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
   );
 
   const handleReconnectClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
+    (e?: React.SyntheticEvent<HTMLElement>) => {
+      e?.preventDefault?.();
+      e?.stopPropagation?.();
       const currentValue = form.getValues(params.name);
       const connectionName = removeConnectionBrackets(currentValue ?? '');
 
@@ -85,6 +87,26 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
     [connectionsPage?.data, form, params.name],
   );
 
+  const suppressPointerOrMouseDown = useCallback(
+    (e: React.PointerEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [],
+  );
+
+  const makeActivationKeysHandler = (
+    action: (e: React.KeyboardEvent<HTMLElement>) => void,
+  ) => {
+    return (e: React.KeyboardEvent<HTMLElement>) => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.stopPropagation();
+        e.preventDefault();
+        action(e);
+      }
+    };
+  };
+
   return (
     <FormField
       control={form.control}
@@ -100,7 +122,11 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
           )}
           {!isLoading && (
             <AutoFormFieldWrapper
-              property={params.block.auth!}
+              property={{
+                ...params.block.auth!,
+                displayName:
+                  params.displayName ?? params.block.auth?.displayName ?? '',
+              }}
               propertyName="auth"
               field={field as unknown as ControllerRenderProps}
               disabled={params.disabled}
@@ -138,45 +164,68 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
                 }}
                 disabled={params.disabled}
               >
-                <div className="relative">
-                  {field.value && !field.disabled && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="xs"
-                      className="z-50 absolute right-8 top-2 "
-                      onClick={handleReconnectClick}
-                    >
-                      {t('Reconnect')}
-                    </Button>
-                  )}
-
-                  <SelectTrigger className="flex gap-2 items-center">
+                <SelectTrigger
+                  className="h-14 flex items-center gap-2"
+                  iconClassName="size-5"
+                >
+                  <div className="flex-1 min-w-0 overflow-hidden">
                     <SelectValue
-                      className="truncate flex-grow flex-shrink"
-                      placeholder={t('Select a connection')}
+                      placeholder={
+                        <span className="text-start block">
+                          {t('Select a connection')}
+                        </span>
+                      }
                     >
                       {!!field.value && (
-                        <div className="truncate flex-grow flex-shrink">
+                        <span className="text-start block truncate text-primary-700 text-base font-medium">
                           {removeConnectionBrackets(field.value)}
-                        </div>
+                        </span>
                       )}
                     </SelectValue>
-                    <div className="grow"></div>
-                    {/* Hidden Button to take same space as shown button */}
-                    {field.value && (
+                  </div>
+
+                  {field.value && !field.disabled && !params.disabled && (
+                    <div className="shrink-0 flex items-center gap-1">
+                      {selectConnectionOpen && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="xs"
+                          className="text-primary-700 text-base font-medium"
+                          onPointerDown={suppressPointerOrMouseDown}
+                          onMouseDown={suppressPointerOrMouseDown}
+                          onKeyDown={makeActivationKeysHandler((e) =>
+                            handleReconnectClick(e),
+                          )}
+                          onClick={(e) => {
+                            handleReconnectClick(e);
+                          }}
+                        >
+                          <PencilLine size={16} />
+                          {t('Edit')}
+                        </Button>
+                      )}
+
                       <Button
                         type="button"
                         variant="ghost"
                         size="xs"
-                        className="z-50 opacity-0 pointer-events-none"
+                        className="text-primary-700 text-base font-medium"
+                        onPointerDown={suppressPointerOrMouseDown}
+                        onMouseDown={suppressPointerOrMouseDown}
+                        onKeyDown={makeActivationKeysHandler(() => {
+                          field.onChange('');
+                        })}
+                        onClick={() => {
+                          field.onChange('');
+                        }}
                       >
-                        {t('Reconnect')}
+                        <X size={16} />
+                        {t('Clear')}
                       </Button>
-                    )}
-                  </SelectTrigger>
-                </div>
-
+                    </div>
+                  )}
+                </SelectTrigger>
                 <SelectContent>
                   <SelectAction
                     onClick={() => {
@@ -187,7 +236,7 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
                   >
                     <span className="flex items-center gap-1 text-primary w-full">
                       <Plus size={16} />
-                      {t('Create Connection')}
+                      {t('Create new connection')}
                     </span>
                   </SelectAction>
 

packages/ui-components/src/ui/select.tsx

@@ -21,8 +21,10 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    iconClassName?: string;
+  }
+>(({ className, iconClassName, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -33,7 +35,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="size-4 opacity-50" />
+      <CaretSortIcon className={cn('size-4 opacity-50', iconClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));