From 0b264f29798934c0b2ad704ccd76b5265baa737b Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Tue, 18 Jun 2024 17:35:19 +0200
Subject: [PATCH] fix(paoh): make style of entity dropdown match qb

---
 libs/shared/lib/components/buttons/Button.tsx |  4 +--
 libs/shared/lib/components/inputs/index.tsx   |  4 ++-
 .../vis/visualizations/paohvis/paohvis.tsx    | 36 ++++++++++++++-----
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/libs/shared/lib/components/buttons/Button.tsx b/libs/shared/lib/components/buttons/Button.tsx
index c5d5e5ef2..0b09a140f 100644
--- a/libs/shared/lib/components/buttons/Button.tsx
+++ b/libs/shared/lib/components/buttons/Button.tsx
@@ -135,7 +135,7 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | H
 
     return (
       <ButtonComponent
-        className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${className}`}
+        className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${className ? className : ''}`}
         onClick={onClick}
         disabled={disabled}
         aria-label={ariaLabel}
@@ -145,7 +145,7 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | H
       >
         {iconPosition === 'leading' && icon}
         {label && <span>{label}</span>}
-        {children && <span>{children}</span>}
+        {children && <span style={{ transform: 'translate(0, -1px)' }}>{children}</span>}
         {iconPosition === 'trailing' && icon}
       </ButtonComponent>
     );
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index 637887824..c3a3e9838 100644
--- a/libs/shared/lib/components/inputs/index.tsx
+++ b/libs/shared/lib/components/inputs/index.tsx
@@ -418,7 +418,9 @@ export const DropdownInput = ({
             onClick={() => {
               setIsDropdownOpen(!isDropdownOpen);
             }}
-          />
+          >
+            {overrideRender}
+          </DropdownTrigger>
           {isDropdownOpen && (
             <DropdownItemContainer className="w-fit">
               {options &&
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index ec1353d1b..d8591de16 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -14,7 +14,7 @@ import { Input } from '@graphpolaris/shared/lib/components/inputs';
 import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
 import { Button } from '@graphpolaris/shared/lib/components/buttons';
 import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
-import { ArrowDropDown } from '@mui/icons-material';
+import { ArrowDropDown, ArrowRight } from '@mui/icons-material';
 import { cloneDeep } from 'lodash-es';
 import { useImmer } from 'use-immer';
 
@@ -918,20 +918,30 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
         <div>
           <span className="text-xs font-semibold">Node used in Row</span>
           <Input
+            className="w-full text-justify justify-start"
             type="dropdown"
             value={settings.rowNode}
             options={graphMetadata.nodes.labels}
             onChange={(val) => updateSettings({ rowNode: val as string })}
-            overrideRender={<EntityPill title={settings.rowNode} />}
-          />
+            overrideRender={
+              <EntityPill
+                title={
+                  <div className="flex flex-row justify-between items-center cursor-pointer">
+                    <span>{settings.rowNode || ''}</span>
+                    <Button variantType="secondary" variant="ghost" size="2xs" iconComponent={<ArrowDropDown />} />
+                  </div>
+                }
+              />
+            }
+          ></Input>
         </div>
         <Button
-          className="w-full text-justify justify-start"
           variantType="secondary"
           variant="ghost"
           size="sm"
+          className="-pt-3 mt-1"
           onClick={toggleCollapseAttrRows}
-          iconComponent={<ArrowDropDown />}
+          iconComponent={areCollapsedAttrRows ? <ArrowRight /> : <ArrowDropDown />}
         >
           attributes:{' '}
         </Button>
@@ -952,21 +962,31 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
         <div>
           <span className="text-xs font-semibold">Node used in Column</span>
           <Input
+            className="w-full text-justify justify-start"
             type="dropdown"
             value={settings.columnNode}
             options={graphMetadata.nodes.labels}
             onChange={(val) => updateSettings({ columnNode: val as string })}
-            overrideRender={<EntityPill title={settings.columnNode} />}
+            overrideRender={
+              <EntityPill
+                title={
+                  <div className="flex flex-row justify-between items-center cursor-pointer">
+                    <span>{settings.columnNode || ''}</span>
+                    <Button variantType="secondary" variant="ghost" size="2xs" iconComponent={<ArrowDropDown />} />
+                  </div>
+                }
+              />
+            }
           />
         </div>
 
         <Button
-          className="w-full text-justify justify-start"
           variantType="secondary"
           variant="ghost"
           size="sm"
+          className="-pt-3 mt-1"
           onClick={toggleCollapseAttrColumns}
-          iconComponent={<ArrowDropDown />}
+          iconComponent={areCollapsedAttrColumns ? <ArrowRight /> : <ArrowDropDown />}
         >
           attributes:{' '}
         </Button>
-- 
GitLab