Skip to content

Commit

Permalink
Merge pull request activepieces#6029 from activepieces/fix/e2e-test
Browse files Browse the repository at this point in the history 
fix: e2e test
  • Loading branch information
@AbdulTheActivePiecer
AbdulTheActivePiecer authored Nov 12, 2024
2 parents 9eec2e1 + 8b90e07 commit 0528984
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 87 deletions.
146 changes: 59 additions & 87 deletions packages/react-ui/src/app/builder/pieces-selector/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,7 @@ type PieceGroup = {
pieces: StepMetadataWithSuggestions[];
};

const maxListHeight = 300;
const aboveListSectionHeight = 86;

const PieceSelector = ({
children,
open,
Expand All @@ -62,7 +61,6 @@ const PieceSelector = ({
}: PieceSelectorProps) => {
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery] = useDebounce(searchQuery, 300);
const previousOpenValueRef = useRef<boolean>(open);
const [selectedPieceMetadata, setSelectedMetadata] = useState<
StepMetadata | undefined
>(undefined);
Expand Down Expand Up @@ -169,41 +167,7 @@ const PieceSelector = ({
const piecesIsLoaded = !isLoadingPieces && pieceGroups.length > 0;
const noResultsFound = !isLoadingPieces && pieceGroups.length === 0;

const listHeightRef = useRef<number>(maxListHeight);
const popoverTriggerRef = useRef<HTMLButtonElement | null>(null);
if (!previousOpenValueRef.current && open && popoverTriggerRef.current) {
const popoverTriggerRect =
popoverTriggerRef.current.getBoundingClientRect();
const popOverFullHeight = maxListHeight + aboveListSectionHeight;
const isRenderingPopoverBelowTrigger =
popoverTriggerRect.top <
(window.innerHeight || document.documentElement.clientHeight) -
popoverTriggerRect.bottom;
if (isRenderingPopoverBelowTrigger) {
const isPopoverOverflowing =
popoverTriggerRect.bottom + popOverFullHeight >
(window.innerHeight || document.documentElement.clientHeight);
if (isPopoverOverflowing) {
listHeightRef.current = Math.max(
100,
maxListHeight +
(window.innerHeight || document.documentElement.clientHeight) -
popOverFullHeight -
popoverTriggerRect.bottom,
);
}
} else {
const isPopoverOverflowing =
popoverTriggerRect.top - popOverFullHeight < 0;
if (isPopoverOverflowing) {
listHeightRef.current = Math.max(
100,
maxListHeight - Math.abs(popoverTriggerRect.top - popOverFullHeight),
);
}
}
}
previousOpenValueRef.current = open;
const { listHeightRef, popoverTriggerRef, aboveListSectionHeight, maxListHeight } = pieceSelectorUtils.useAdjustPieceListHeightToAvailableSpace(open);

const resetField = () => {
setSearchQuery('');
Expand Down Expand Up @@ -361,56 +325,64 @@ const PieceSelector = ({
<Separator orientation="horizontal" />
</div>

<div
className=" hidden md:flex flex-row overflow-y-auto max-h-[300px] h-[300px] "
style={{
height: listHeightRef.current + 'px',
}}
>
<PiecesCardList
debouncedQuery={debouncedQuery}
selectedTag={selectedTag}
piecesIsLoaded={piecesIsLoaded}
noResultsFound={noResultsFound}
selectedPieceMetadata={selectedPieceMetadata}
setSelectedMetadata={setSelectedMetadata}
operation={operation}
handleSelect={handleSelect}
pieceGroups={pieceGroups}
isLoadingPieces={isLoadingPieces}
/>
{
(window.innerWidth || document.documentElement.clientWidth) >= 768 &&
<div
className=" flex flex-row overflow-y-auto max-h-[300px] h-[300px] "
style={{
height: listHeightRef.current + 'px',
}}
>
<PiecesCardList
debouncedQuery={debouncedQuery}
selectedTag={selectedTag}
piecesIsLoaded={piecesIsLoaded}
noResultsFound={noResultsFound}
selectedPieceMetadata={selectedPieceMetadata}
setSelectedMetadata={setSelectedMetadata}
operation={operation}
handleSelect={handleSelect}
pieceGroups={pieceGroups}
isLoadingPieces={isLoadingPieces}
/>

{debouncedQuery.length === 0 &&
piecesIsLoaded &&
!noResultsFound && (
<>
<Separator orientation="vertical" className="h-full" />
<StepsCardList
selectedPieceMetadata={selectedPieceMetadata}
handleSelect={handleSelect}
/>
</>
)}
</div>
}

{
(window.innerWidth || document.documentElement.clientWidth) < 768 &&
<div
className=" max-h-[300px] h-[300px]"
style={{
height: listHeightRef.current + 'px',
}}
>
<PiecesCardList
debouncedQuery={debouncedQuery}
selectedTag={selectedTag}
piecesIsLoaded={piecesIsLoaded}
noResultsFound={noResultsFound}
selectedPieceMetadata={selectedPieceMetadata}
setSelectedMetadata={setSelectedMetadata}
operation={operation}
handleSelect={handleSelect}
pieceGroups={pieceGroups}
isLoadingPieces={isLoadingPieces}
/>
</div>
}

{debouncedQuery.length === 0 &&
piecesIsLoaded &&
!noResultsFound && (
<>
<Separator orientation="vertical" className="h-full" />
<StepsCardList
selectedPieceMetadata={selectedPieceMetadata}
handleSelect={handleSelect}
/>
</>
)}
</div>
<div
className="block md:hidden max-h-[300px] h-[300px]"
style={{
height: listHeightRef.current + 'px',
}}
>
<PiecesCardList
debouncedQuery={debouncedQuery}
selectedTag={selectedTag}
piecesIsLoaded={piecesIsLoaded}
noResultsFound={noResultsFound}
selectedPieceMetadata={selectedPieceMetadata}
setSelectedMetadata={setSelectedMetadata}
operation={operation}
handleSelect={handleSelect}
pieceGroups={pieceGroups}
isLoadingPieces={isLoadingPieces}
/>
</div>
</>
</PopoverContent>
</Popover>
Expand Down
52 changes: 52 additions & 0 deletions packages/react-ui/src/app/builder/pieces-selector/piece-selector-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
} from '@activepieces/shared';

import { formUtils } from '../piece-properties/form-utils';
import { useRef } from 'react';

const defaultCode = `export const code = async (inputs) => {
return true;
Expand Down Expand Up @@ -311,6 +312,56 @@ const checkPieceInputValidity = (
return acc;
}, true);
};

const maxListHeight = 300;
const minListHeight = 100;
const aboveListSectionHeight = 86;

const useAdjustPieceListHeightToAvailableSpace = (isPieceSelectorOpen: boolean) => {
const listHeightRef = useRef<number>(maxListHeight);
const popoverTriggerRef = useRef<HTMLButtonElement | null>(null);
const previousOpenValueRef = useRef<boolean>(isPieceSelectorOpen);
if (!previousOpenValueRef.current && isPieceSelectorOpen && popoverTriggerRef.current) {
const popoverTriggerRect =
popoverTriggerRef.current.getBoundingClientRect();
const popOverFullHeight = maxListHeight + aboveListSectionHeight;
const isRenderingPopoverBelowTrigger =
popoverTriggerRect.top <
(window.innerHeight || document.documentElement.clientHeight) -
popoverTriggerRect.bottom;
if (isRenderingPopoverBelowTrigger) {
const isPopoverOverflowing =
popoverTriggerRect.bottom + popOverFullHeight >
(window.innerHeight || document.documentElement.clientHeight);
if (isPopoverOverflowing) {
listHeightRef.current = Math.max(
minListHeight,
maxListHeight +
(window.innerHeight || document.documentElement.clientHeight) -
popOverFullHeight -
popoverTriggerRect.bottom,
);
}
} else {
const isPopoverOverflowing =
popoverTriggerRect.top - popOverFullHeight < 0;
if (isPopoverOverflowing) {
listHeightRef.current = Math.max(
minListHeight,
maxListHeight - Math.abs(popoverTriggerRect.top - popOverFullHeight),
);
}
}
}
previousOpenValueRef.current = isPieceSelectorOpen;
return {
listHeightRef,
popoverTriggerRef,
maxListHeight,
aboveListSectionHeight
}
}

export const pieceSelectorUtils = {
getDefaultStep,
isCorePiece,
Expand All @@ -322,4 +373,5 @@ export const pieceSelectorUtils = {
isUtilityCorePiece,
isFlowController,
isUniversalAiPiece,
useAdjustPieceListHeightToAvailableSpace
};

0 comments on commit 0528984

Please sign in to comment.