IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-08-18 17:15:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Integrate Explore actions into topnav (#56381)

Browse Source 
* integrate Explore actions into topnav toolbar

* add keys

* fix unit test

* fix bug with ToolbarButtonRow overflow

* make the render function a bit more readable

* fix overflow not updating when children change
This commit is contained in:
Ashley Harrison
2022-10-11 12:59:17 +01:00
committed by GitHub
parent d6fa12c5bc
commit 90cf76e05e
5 changed files with 174 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const PageToolbar: FC<Props> = React.memo(
</>
)}
{(title || leftItems?.length) && (
{(title || Boolean(leftItems?.length)) && (
<div className={styles.titleWrapper}>
{title && (
<h1 className={styles.h1Styles}>
packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+8 -4
View File
@@ -15,6 +15,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
alignment?: 'left' | 'right';
}
const OVERFLOW_BUTTON_ID = 'overflow-button';
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
({ alignment = 'left', className, children, ...rest }, ref) => {
const [childVisibility, setChildVisibility] = useState<boolean[]>(
@@ -53,7 +55,10 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
);
if (containerRef.current) {
Array.from(containerRef.current.children).forEach((item) => {
intersectionObserver.observe(item);
// don't observe the overflow button
if (item instanceof HTMLElement && item.dataset.testid !== OVERFLOW_BUTTON_ID) {
intersectionObserver.observe(item);
}
});
}
return () => intersectionObserver.disconnect();
@@ -70,12 +75,11 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
</div>
))}
{childVisibility.includes(false) && (
<>
<div data-testid={OVERFLOW_BUTTON_ID} className={styles.overflowButton}>
<ToolbarButton
variant={showOverflowItems ? 'active' : 'default'}
tooltip="Show more items"
onClick={() => setShowOverflowItems(!showOverflowItems)}
className={styles.overflowButton}
icon="ellipsis-v"
iconOnly
narrow
@@ -87,7 +91,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
</div>
</FocusScope>
)}
</>
</div>
)}
</div>
);