Feat: remove menu list and change button to expand #49

42Cluster-Seoul · Jul 4, 2024 · 5d02dc1 · 5d02dc1
1 parent 2fcbd33
commit 5d02dc1
Showing 1 changed file with 37 additions and 21 deletions.
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
@@ -1,16 +1,19 @@
 import { cx } from '@emotion/css';
-import React, { ReactElement, useCallback } from 'react';
+import React, { ReactElement, useState } from 'react';
 
+import { PanelModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { Dropdown } from '../Dropdown/Dropdown';
+// import { Dropdown } from '../Dropdown/Dropdown';
+import { UrlModule } from '../../../../../public/app/features/dashboard/utils/urlModule';
 import { ToolbarButton } from '../ToolbarButton';
 import { TooltipPlacement } from '../Tooltip';
 
 interface PanelMenuProps {
   menu: ReactElement | (() => ReactElement);
   menuButtonClass?: string;
   dragClassCancel?: string;
+  panel?: PanelModel;
   title?: string;
   placement?: TooltipPlacement;
   offset?: [number, number];
@@ -20,34 +23,47 @@ interface PanelMenuProps {
 export function PanelMenu({
   menu,
   title,
+  panel,
   placement = 'bottom',
   offset,
   dragClassCancel,
   menuButtonClass,
   onOpenMenu,
 }: PanelMenuProps) {
   const testId = title ? selectors.components.Panels.Panel.menu(title) : `panel-menu-button`;
+  const [isExpaned, setIsExpanded] = useState(window.location.search.includes('viewPanel'));
 
-  const handleVisibility = useCallback(
-    (show: boolean) => {
-      if (show && onOpenMenu) {
-        onOpenMenu();
-      }
-    },
-    [onOpenMenu]
-  );
+  // const handleVisibility = useCallback(
+  //   (show: boolean) => {
+  //     if (show && onOpenMenu) {
+  //       onOpenMenu();
+  //     }
+  //   },
+  //   [onOpenMenu]
+  // );
+
+  const expandPanel = () => {
+    new UrlModule().addParam('viewPanel', panel?.id).navigate();
+    setIsExpanded(true);
+  };
+
+  const shrinkPanel = () => {
+    new UrlModule().deleteParam('viewPanel').navigate();
+    setIsExpanded(false);
+  };
 
   return (
-    <Dropdown overlay={menu} placement={placement} offset={offset} onVisibleChange={handleVisibility}>
-      <ToolbarButton
-        aria-label={`Menu for panel with ${title ? `title ${title}` : 'no title'}`}
-        title="Menu"
-        icon="ellipsis-v"
-        iconSize="md"
-        narrow
-        data-testid={testId}
-        className={cx(menuButtonClass, dragClassCancel)}
-      />
-    </Dropdown>
+    // <Dropdown overlay={menu} placement={placement} offset={offset} onVisibleChange={handleVisibility}>
+    <ToolbarButton
+      aria-label={`Menu for panel with ${title ? `title ${title}` : 'no title'}`}
+      title={isExpaned ? 'shrink' : 'expand'}
+      icon={isExpaned ? 'minus' : 'plus'}
+      iconSize="md"
+      narrow
+      data-testid={testId}
+      onClick={isExpaned ? shrinkPanel : expandPanel}
+      className={cx(menuButtonClass, dragClassCancel)}
+    />
+    // </Dropdown>
   );
 }