Merge pull request activepieces#5699 from activepieces/fix/piece-search

fix: remove gap in piece search
Luigi31415 · Sep 26, 2024 · 9a22db0 · 9a22db0
2 parents 84b977a + 991dd95
commit 9a22db0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/react-ui/src/app/builder/pieces-selector/index.tsx b/packages/react-ui/src/app/builder/pieces-selector/index.tsx
@@ -30,7 +30,6 @@ import {
   toast,
 } from '@/components/ui/use-toast';
 import { PieceIcon } from '@/features/pieces/components/piece-icon';
-import { PieceOperationSuggestions } from '@/features/pieces/components/piece-operations-suggestions';
 import { piecesApi } from '@/features/pieces/lib/pieces-api';
 import { piecesHooks } from '@/features/pieces/lib/pieces-hook';
 import {
@@ -53,6 +52,8 @@ import {
 
 import { SearchInput } from '../../../components/ui/search-input';
 
+import { PieceSearchSuggestions } from './piece-search-suggestions';
+
 type PieceSelectorProps = {
   children: React.ReactNode;
   open: boolean;
@@ -337,7 +338,7 @@ const PieceSelector = ({
                           setSelectedPieceMetadata(pieceMetadata);
                         }}
                       >
-                        <PieceOperationSuggestions
+                        <PieceSearchSuggestions
                           pieceMetadata={pieceMetadata}
                           operation={operation}
                           handleSelectOperationSuggestion={handleSelect}
@@ -371,7 +372,10 @@ const PieceSelector = ({
 
           <Separator orientation="vertical" className="h-full" />
           <ScrollArea className="h-full">
-            <CardList className="w-[350px] min-w-[350px] h-full">
+            <CardList
+              className="w-[350px] min-w-[350px] h-full gap-0"
+              listClassName="gap-0"
+            >
               {!isLoadingPieces && (
                 <>
                   {isLoadingSelectedPieceMetadata && (

diff --git a/...mponents/piece-operations-suggestions.tsx → ...ces-selector/piece-search-suggestions.tsx b/...mponents/piece-operations-suggestions.tsx → ...ces-selector/piece-search-suggestions.tsx
@@ -1,38 +1,37 @@
 import { CardListItem } from '@/components/ui/card-list';
 import { FlowOperationType } from '@activepieces/shared';
 
+import { PieceIcon } from '@/features/pieces/components/piece-icon';
 import {
   StepMetadata,
   ActionOrTriggerListItem,
   PieceSelectorOperation,
   PieceStepMetadataWithSuggestions,
-} from '../lib/types';
-
-import { PieceIcon } from './piece-icon';
+} from '@/features/pieces/lib/types';
 
 type HandleSelectCallback = (
   piece: StepMetadata,
   item: ActionOrTriggerListItem,
 ) => void;
 
-type PieceOperationSuggestionsProps = {
+type PieceSearchSuggestionsProps = {
   pieceMetadata: PieceStepMetadataWithSuggestions;
   handleSelectOperationSuggestion: HandleSelectCallback;
   operation: PieceSelectorOperation;
 };
 
-const PieceOperationSuggestions = ({
+const PieceSearchSuggestions = ({
   pieceMetadata,
   handleSelectOperationSuggestion,
   operation,
-}: PieceOperationSuggestionsProps) => {
+}: PieceSearchSuggestionsProps) => {
   const suggestions =
     operation.type === FlowOperationType.UPDATE_TRIGGER
       ? pieceMetadata.suggestedTriggers
       : pieceMetadata.suggestedActions;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-0">
       {suggestions?.map((suggestion) => (
         <CardListItem
           className="p-3 px-0 text-sm gap-2 items-start "
@@ -58,4 +57,4 @@ const PieceOperationSuggestions = ({
   );
 };
 
-export { PieceOperationSuggestions };
+export { PieceSearchSuggestions };