From 2c4901357f246f0c4121d2254df43022bbdd316b Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Tue, 11 Jun 2024 08:41:51 +0200
Subject: [PATCH] fix: popover trigger used outside popover
(cherry picked from commit b3fa44e308a456df97b58e3f8fb6ba026536f823)
---
apps/web/src/components/navbar/navbar.tsx | 2 +-
.../shared/lib/components/dropdowns/index.tsx | 30 ++++++++++++-------
.../panel/querysidepanel/queryMLDialog.tsx | 1 -
.../logicpill/QueryLogicPill.tsx | 1 +
libs/shared/lib/vis/components/bar.tsx | 2 +-
5 files changed, 23 insertions(+), 13 deletions(-)
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index d6c6923a7..c8554d064 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -13,7 +13,7 @@ import logo_white from './gp-logo-white.svg';
import logo from './gp-logo.svg';
import { useAuthorizationCache, useAuth } from '@graphpolaris/shared/lib/data-access';
import DatabaseSelector from './DatabaseManagement/dbConnectionSelector';
-import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
+import { DropdownItem } from '@graphpolaris/shared/lib/components/dropdowns';
import GpLogo from './gp-logo';
import { Popover, PopoverContent, PopoverTrigger } from '@graphpolaris/shared/lib/components/layout/Popover';
diff --git a/libs/shared/lib/components/dropdowns/index.tsx b/libs/shared/lib/components/dropdowns/index.tsx
index 7a56352d3..cc2171f84 100644
--- a/libs/shared/lib/components/dropdowns/index.tsx
+++ b/libs/shared/lib/components/dropdowns/index.tsx
@@ -12,10 +12,11 @@ type DropdownTriggerProps = {
disabled?: boolean;
variant?: 'primary' | 'ghost' | 'outline';
className?: string;
+ popover?: boolean;
onClick?: () => void;
};
-export function DropdownTrigger({ title, size, disabled, variant, className, onClick }: DropdownTriggerProps) {
+export function DropdownTrigger({ title, size, disabled, variant, className, onClick, popover = true }: DropdownTriggerProps) {
const paddingClass = size === 'xs' ? 'py-0' : size === 'sm' ? 'px-1 py-1' : size === 'md' ? 'px-2 py-1' : 'px-4 py-2';
const textSizeClass = size === 'xs' ? 'text-xs' : size === 'sm' ? 'text-sm' : size === 'md' ? 'text-base' : 'text-lg';
@@ -25,16 +26,25 @@ export function DropdownTrigger({ title, size, disabled, variant, className, onC
: variant === 'ghost'
? 'bg-transparent shadow-none'
: 'border rounded bg-transparent';
- return (
- <PopoverTrigger onClick={onClick}>
- <div
- className={`inline-flex w-full truncate justify-between items-center gap-x-1.5 ${variantClass} ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400 pl-1 truncate${className ? ` ${className}` : ''}`}
- >
- <span className={`text-${size}`}>{title}</span>
- <Icon component={<ArrowDropDown />} size={16} />
- </div>
- </PopoverTrigger>
+
+ const inner = (
+ <div
+ className={`inline-flex w-full truncate justify-between items-center gap-x-1.5 ${variantClass} ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400 pl-1 truncate${className ? ` ${className}` : ''}`}
+ >
+ <span className={`text-${size}`}>{title}</span>
+ <Icon component={<ArrowDropDown />} size={16} />
+ </div>
);
+
+ if (popover) {
+ return <PopoverTrigger onClick={onClick}>{inner}</PopoverTrigger>;
+ } else
+ return (
+ <button className="w-full" onClick={onClick}>
+ {' '}
+ {inner}
+ </button>
+ );
}
type DropdownItemContainerProps = {
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
index 213807e6b..8fd52cdd7 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
@@ -8,7 +8,6 @@ import {
} from '@graphpolaris/shared/lib/data-access/store/mlSlice';
import { FormDiv, FormCard, FormBody, FormTitle, FormHBar } from '@graphpolaris/shared/lib/components/forms';
import { Input } from '@graphpolaris/shared/lib/components/inputs';
-import { PopoverTrigger } from '@graphpolaris/shared/lib/components/layout/Popover';
export const QueryMLDialog = () => {
const dispatch = useAppDispatch();
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
index 09a9e534b..79cdea0e8 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
@@ -74,6 +74,7 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) {
<div className={`py-1 h-fit border-[1px] border-secondary-200 ${data.selected ? 'bg-secondary-400' : 'bg-secondary-100'}`}>
{/* <div className="m-1 mx-2 text-left">{output.name}</div> */}
<DropdownTrigger
+ popover={false}
title={output.name}
variant="ghost"
size="xs"
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index fe25a8bc0..fa1c79de7 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, DropdownTrigger, DropdownItemContainer, DropdownItem, Icon, DropdownContainer } from '../../components';
+import { Button, DropdownItem } from '../../components';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { Add, Close, Fullscreen } from '@mui/icons-material';
import { ControlContainer } from '../../components/controls';
--
GitLab