From 6db7eafd7e12fbe91ab6e7126baba1b2913ab496 Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Wed, 6 Mar 2024 13:00:56 +0000
Subject: [PATCH] Explore: Remove plus icon from Add button (#83587)

---
 .../app/features/explore/ExploreToolbar.tsx   |  7 +--
 .../extensions/ToolbarExtensionPoint.test.tsx | 43 +++++--------------
 .../extensions/ToolbarExtensionPoint.tsx      | 13 ++----
 3 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index 360024a0e4c..f88010d9d6b 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -273,12 +273,7 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
               </ToolbarButton>
             </ButtonGroup>
           ),
-          <ToolbarExtensionPoint
-            splitted={splitted}
-            key="toolbar-extension-point"
-            exploreId={exploreId}
-            timeZone={timeZone}
-          />,
+          <ToolbarExtensionPoint key="toolbar-extension-point" exploreId={exploreId} timeZone={timeZone} />,
           !isLive && (
             <ExploreTimeControls
               key="timeControls"
diff --git a/public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx b/public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx
index 4d410612675..7d4e6c95c93 100644
--- a/public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx
+++ b/public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx
@@ -78,23 +78,13 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should render "Add" extension point menu button', () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       expect(screen.getByRole('button', { name: 'Add' })).toBeVisible();
     });
 
-    it('should render menu with extensions when "Add" is clicked in split mode', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId={'left'} timeZone="browser" splitted={true} />);
-
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-
-      expect(screen.getByRole('group', { name: 'Dashboards' })).toBeVisible();
-      expect(screen.getByRole('menuitem', { name: 'Add to dashboard' })).toBeVisible();
-      expect(screen.getByRole('menuitem', { name: 'ML: Forecast' })).toBeVisible();
-    });
-
     it('should render menu with extensions when "Add" is clicked', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
@@ -104,7 +94,7 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should call onClick from extension when menu item is clicked', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       await userEvent.click(screen.getByRole('button', { name: 'Add' }));
       await userEvent.click(screen.getByRole('menuitem', { name: 'Add to dashboard' }));
@@ -116,7 +106,7 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should render confirm navigation modal when extension with path is clicked', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       await userEvent.click(screen.getByRole('button', { name: 'Add' }));
       await userEvent.click(screen.getByRole('menuitem', { name: 'ML: Forecast' }));
@@ -130,7 +120,7 @@ describe('ToolbarExtensionPoint', () => {
       const targets = [{ refId: 'A' }];
       const data = createEmptyQueryResponse();
 
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />, {
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />, {
         targets,
         data,
       });
@@ -155,7 +145,7 @@ describe('ToolbarExtensionPoint', () => {
       const targets = [{ refId: 'A' }];
       const data = createEmptyQueryResponse();
 
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="" splitted={false} />, {
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="" />, {
         targets,
         data,
       });
@@ -167,7 +157,7 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should correct extension point id when fetching extensions', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       const [options] = getPluginLinkExtensionsMock.mock.calls[0];
       const { extensionPointId } = options;
@@ -201,24 +191,13 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should render "Add" extension point menu button', () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       expect(screen.getByRole('button', { name: 'Add' })).toBeVisible();
     });
 
-    it('should render "Add" extension point menu button in split mode', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId={'left'} timeZone="browser" splitted={true} />);
-
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-
-      // Make sure we don't have anything related to categories rendered
-      expect(screen.queryAllByRole('group').length).toBe(0);
-      expect(screen.getByRole('menuitem', { name: 'Dashboard' })).toBeVisible();
-      expect(screen.getByRole('menuitem', { name: 'ML: Forecast' })).toBeVisible();
-    });
-
     it('should render menu with extensions when "Add" is clicked', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
@@ -236,7 +215,7 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should render "add to dashboard" action button if one pane is visible', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       await waitFor(() => {
         const button = screen.getByRole('button', { name: /add to dashboard/i });
@@ -254,7 +233,7 @@ describe('ToolbarExtensionPoint', () => {
     });
 
     it('should not render "add to dashboard" action button', async () => {
-      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
+      renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
 
       expect(screen.queryByRole('button', { name: /add to dashboard/i })).not.toBeInTheDocument();
     });
diff --git a/public/app/features/explore/extensions/ToolbarExtensionPoint.tsx b/public/app/features/explore/extensions/ToolbarExtensionPoint.tsx
index 5e45b4977b5..1a46d538547 100644
--- a/public/app/features/explore/extensions/ToolbarExtensionPoint.tsx
+++ b/public/app/features/explore/extensions/ToolbarExtensionPoint.tsx
@@ -19,11 +19,10 @@ const AddToDashboard = lazy(() =>
 type Props = {
   exploreId: string;
   timeZone: TimeZone;
-  splitted: boolean;
 };
 
 export function ToolbarExtensionPoint(props: Props): ReactElement | null {
-  const { exploreId, splitted } = props;
+  const { exploreId } = props;
   const [selectedExtension, setSelectedExtension] = useState<PluginExtensionLink | undefined>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const context = useExtensionPointContext(props);
@@ -54,14 +53,8 @@ export function ToolbarExtensionPoint(props: Props): ReactElement | null {
   return (
     <>
       <Dropdown onVisibleChange={setIsOpen} placement="bottom-start" overlay={menu}>
-        <ToolbarButton
-          aria-label="Add"
-          icon="plus"
-          disabled={!Boolean(noQueriesInPane)}
-          variant="canvas"
-          isOpen={isOpen}
-        >
-          {splitted ? ' ' : 'Add'}
+        <ToolbarButton aria-label="Add" disabled={!Boolean(noQueriesInPane)} variant="canvas" isOpen={isOpen}>
+          Add
         </ToolbarButton>
       </Dropdown>
       {!!selectedExtension && !!selectedExtension.path && (