[pull] main from activepieces:main

packages/react-ui/src/app/builder/sidebar-header.tsx

@@ -9,7 +9,7 @@ type SidebarHeaderProps = {
 };
 const SidebarHeader = ({ children, onClose }: SidebarHeaderProps) => {
   return (
-    <div className="flex px-4 py-3 w-full gap-2 text-lg items-center">
+    <div className="flex px-4 py-2 w-full gap-2 text-lg items-center">
       {children}
       <div className="grow"></div>
       <Button

packages/react-ui/src/app/builder/step-settings/editable-step-name.tsx

@@ -1,27 +1,9 @@
 import { t } from 'i18next'; // Import t directly from i18next
-import { ChevronLeftIcon, ChevronRightIcon, Pencil } from 'lucide-react';
+import { Pencil } from 'lucide-react';
 import React from 'react';
 
-import { Button } from '@/components/ui/button';
 import EditableText from '@/components/ui/editable-text';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { PieceIcon } from '@/features/pieces/components/piece-icon';
-import {
-  PieceStepMetadata,
-  StepMetadataWithActionOrTriggerOrAgentDisplayName,
-} from '@/lib/types';
-import {
-  FlowActionType,
-  FlowTriggerType,
-  flowStructureUtil,
-  isNil,
-} from '@activepieces/shared';
-
-import { useBuilderStateContext } from '../builder-hooks';
+import { isNil } from '@activepieces/shared';
 
 interface EditableStepNameProps {
   selectedBranchIndex: number | null;
@@ -33,55 +15,8 @@ interface EditableStepNameProps {
   isEditingStepOrBranchName: boolean;
   setIsEditingStepOrBranchName: (isEditing: boolean) => void;
   setSelectedBranchIndex: (index: number | null) => void;
-  stepMetadata: StepMetadataWithActionOrTriggerOrAgentDisplayName | undefined;
 }
 
-const PreviousOrNextButton = ({ isNext }: { isNext: boolean }) => {
-  const [selectedStep, setSelectedStep, flowVersion] = useBuilderStateContext(
-    (state) => [state.selectedStep, state.selectStepByName, state.flowVersion],
-  );
-  const allSteps = flowStructureUtil.getAllSteps(flowVersion.trigger);
-  const currentStepIndex = allSteps.findIndex(
-    (step) => step.name === selectedStep,
-  );
-  const nextStep = allSteps.at(currentStepIndex + 1);
-  const previousStep =
-    currentStepIndex > 0 ? allSteps.at(currentStepIndex - 1) : undefined;
-  const isDisabled = (!isNext && !previousStep) || (isNext && !nextStep);
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          disabled={(!isNext && !previousStep) || (isNext && !nextStep)}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (isNext && nextStep) {
-              setSelectedStep(nextStep.name);
-            } else if (!isNext && previousStep) {
-              setSelectedStep(previousStep.name);
-            }
-          }}
-          size="icon"
-          className="size-7"
-        >
-          {isNext ? (
-            <ChevronRightIcon className="size-4"></ChevronRightIcon>
-          ) : (
-            <ChevronLeftIcon className="size-4"></ChevronLeftIcon>
-          )}
-        </Button>
-      </TooltipTrigger>
-      {!isDisabled && (
-        <TooltipContent side="bottom">
-          {isNext ? t('Next step') : t('Previous step')}
-        </TooltipContent>
-      )}
-    </Tooltip>
-  );
-};
-
 const EditableStepName: React.FC<EditableStepNameProps> = ({
   selectedBranchIndex,
   displayName,
@@ -92,107 +27,58 @@ const EditableStepName: React.FC<EditableStepNameProps> = ({
   isEditingStepOrBranchName,
   setIsEditingStepOrBranchName,
   setSelectedBranchIndex,
-  stepMetadata,
 }) => {
-  const isPieceStep =
-    stepMetadata?.type === FlowActionType.PIECE ||
-    stepMetadata?.type === FlowTriggerType.PIECE;
-  const pieceVersion = isPieceStep
-    ? (stepMetadata as PieceStepMetadata)?.pieceVersion
-    : undefined;
-
   return (
-    <div className="flex flex-col w-full">
-      <div className="flex items-center gap-1.5 w-full">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="shrink-0">
-              <PieceIcon
-                logoUrl={stepMetadata?.logoUrl}
-                displayName={stepMetadata?.displayName}
-                showTooltip={false}
-                size="sm"
-              />
-            </div>
-          </TooltipTrigger>
-          {stepMetadata && (
-            <TooltipContent side="bottom" className="max-w-xs">
-              <div className="flex flex-col gap-1">
-                <div className="font-medium">
-                  {stepMetadata.displayName}
-                  {stepMetadata.actionOrTriggerOrAgentDisplayName && (
-                    <span className="font-normal">
-                      {' > '}
-                      {stepMetadata.actionOrTriggerOrAgentDisplayName}
-                    </span>
-                  )}
-                </div>
-                {stepMetadata.actionOrTriggerOrAgentDescription && (
-                  <div className="text-xs">
-                    {stepMetadata.actionOrTriggerOrAgentDescription}
-                  </div>
-                )}
-                {pieceVersion && <div className="text-xs">v{pieceVersion}</div>}
-              </div>
-            </TooltipContent>
-          )}
-        </Tooltip>
-        <div className="flex items-center gap-1 min-w-0 flex-1 text-sm">
-          {isNil(selectedBranchIndex) ? (
-            <EditableText
-              onValueChange={(value) => {
-                if (value) {
-                  setDisplayName(value);
-                }
-              }}
-              readonly={readonly}
-              value={displayName}
-              tooltipContent={readonly ? '' : t('Edit Step Name')}
-              isEditing={isEditingStepOrBranchName}
-              setIsEditing={setIsEditingStepOrBranchName}
-            />
-          ) : (
-            <>
-              <div
-                className="truncate cursor-pointer hover:underline"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSelectedBranchIndex(null);
-                }}
-              >
-                {displayName}
-              </div>
-              /
-              <EditableText
-                key={branchName}
-                onValueChange={(value) => {
-                  if (value) {
-                    setBranchName(value);
-                  }
-                }}
-                readonly={readonly}
-                value={branchName}
-                tooltipContent={readonly ? '' : t('Edit Branch Name')}
-                isEditing={isEditingStepOrBranchName}
-                setIsEditing={setIsEditingStepOrBranchName}
-              />
-            </>
-          )}
-          {!isEditingStepOrBranchName && !readonly && (
-            <Pencil
-              className="h-3 w-3 shrink-0"
-              onClick={() => {
-                setIsEditingStepOrBranchName(true);
-              }}
-            />
-          )}
-        </div>
-        <div className="flex items-center shrink-0">
-          <PreviousOrNextButton isNext={false} />
-          <PreviousOrNextButton isNext={true} />
-        </div>
-      </div>
-    </div>
+    <>
+      {isNil(selectedBranchIndex) ? (
+        <EditableText
+          onValueChange={(value) => {
+            if (value) {
+              setDisplayName(value);
+            }
+          }}
+          readonly={readonly}
+          value={displayName}
+          tooltipContent={readonly ? '' : t('Edit Step Name')}
+          isEditing={isEditingStepOrBranchName}
+          setIsEditing={setIsEditingStepOrBranchName}
+        />
+      ) : (
+        <>
+          <div
+            className="truncate cursor-pointer hover:underline"
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedBranchIndex(null);
+            }}
+          >
+            {displayName}
+          </div>
+          /
+          <EditableText
+            key={branchName}
+            onValueChange={(value) => {
+              if (value) {
+                setBranchName(value);
+              }
+            }}
+            readonly={readonly}
+            value={branchName}
+            tooltipContent={readonly ? '' : t('Edit Branch Name')}
+            isEditing={isEditingStepOrBranchName}
+            setIsEditing={setIsEditingStepOrBranchName}
+          />
+        </>
+      )}
+      {!isEditingStepOrBranchName && !readonly && (
+        <Pencil
+          className="h-4 w-4 shrink-0"
+          onClick={() => {
+            setIsEditingStepOrBranchName(true);
+          }}
+        />
+      )}
+    </>
   );
 };
 

packages/react-ui/src/app/builder/step-settings/index.tsx

@@ -11,6 +11,7 @@ import {
   ResizablePanelGroup,
 } from '@/components/ui/resizable-panel';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
 import { pieceSelectorUtils } from '@/features/pieces/lib/piece-selector-utils';
 import { stepsHooks } from '@/features/pieces/lib/steps-hooks';
 import { projectCollectionUtils } from '@/hooks/project-collection';
@@ -38,6 +39,7 @@ import { LoopsSettings } from './loops-settings';
 import { PieceSettings } from './piece-settings';
 import { useResizableVerticalPanelsContext } from './resizable-vertical-panels-context';
 import { RouterSettings } from './router-settings';
+import { StepInfo } from './step-info';
 import { useStepSettingsContext } from './step-settings-context';
 
 const StepSettingsContainer = () => {
@@ -190,17 +192,20 @@ const StepSettingsContainer = () => {
               setSelectedBranchIndex={setSelectedBranchIndex}
               isEditingStepOrBranchName={isEditingStepOrBranchName}
               setIsEditingStepOrBranchName={setIsEditingStepOrBranchName}
-              stepMetadata={stepMetadata}
             ></EditableStepName>
           </SidebarHeader>
-          <div className="h-px bg-border w-full mb-4" />
+          <Separator className="w-full h-px" />
         </div>
+
         <DynamicPropertiesProvider
           key={`${selectedStep.name}-${selectedStep.type}`}
         >
           <ResizablePanelGroup direction="vertical">
             <ResizablePanel className="min-h-[80px]">
               <ScrollArea className="h-full">
+                <div className="w-full my-2 px-3">
+                  {stepMetadata && <StepInfo step={selectedStep} />}
+                </div>
                 <div
                   className={cn(
                     'flex flex-col px-4 pb-6',

packages/react-ui/src/app/builder/step-settings/step-info.tsx

@@ -1,10 +1,5 @@
 import { t } from 'i18next';
-import {
-  ChevronLeftIcon,
-  ChevronRight,
-  ChevronRightIcon,
-  Info,
-} from 'lucide-react';
+import { ChevronLeftIcon, ChevronRightIcon, Info } from 'lucide-react';
 import React from 'react';
 
 import { TextWithTooltip } from '@/components/custom/text-with-tooltip';
@@ -49,40 +44,21 @@ const StepInfo: React.FC<StepInfoProps> = ({ step }) => {
 
   return (
     <div className="flex items-center justify-between gap-1">
-      <PreviousOrNextButton isNext={false} />
       <div className="flex grow items-center justify-between gap-3 min-h-[36px] min-w-0">
         <div className="flex items-center gap-2 min-w-0 ">
           <PieceIcon
             logoUrl={stepMetadata?.logoUrl}
             displayName={stepMetadata?.displayName}
-            showTooltip={false}
+            showTooltip={true}
             size="md"
           />
           <div className="flex items-center gap-0.5 min-w-0 text-sm">
-            {!isNil(stepMetadata?.displayName) ? (
-              <>
-                <span
-                  className={`shrink-0 ${
-                    !actionOrTriggerDisplayName
-                      ? 'text-foreground font-medium'
-                      : 'text-muted-foreground'
-                  }`}
-                >
-                  {stepMetadata.displayName}
+            {!isNil(actionOrTriggerDisplayName) ? (
+              <TextWithTooltip tooltipMessage={actionOrTriggerDisplayName}>
+                <span className="font-medium text-foreground min-w-0">
+                  {actionOrTriggerDisplayName}
                 </span>
-                {actionOrTriggerDisplayName && (
-                  <>
-                    <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-                    <TextWithTooltip
-                      tooltipMessage={actionOrTriggerDisplayName}
-                    >
-                      <span className="font-medium text-foreground min-w-0">
-                        {actionOrTriggerDisplayName}
-                      </span>
-                    </TextWithTooltip>
-                  </>
-                )}
-              </>
+              </TextWithTooltip>
             ) : (
               <Skeleton className="h-4 w-32 rounded" />
             )}
@@ -105,6 +81,7 @@ const StepInfo: React.FC<StepInfoProps> = ({ step }) => {
           </div>
         )}
       </div>
+      <PreviousOrNextButton isNext={false} />
       <PreviousOrNextButton isNext={true} />
     </div>
   );