Add floating toolbar

public/app/features/explore-map/ExploreMapPage.tsx

@@ -10,6 +10,7 @@ import { useNavModel } from 'app/core/hooks/useNavModel';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 import { ExploreMapCanvas } from './components/ExploreMapCanvas';
+import { ExploreMapFloatingToolbar } from './components/ExploreMapFloatingToolbar';
 import { ExploreMapToolbar } from './components/ExploreMapToolbar';
 import { TransformProvider } from './context/TransformContext';
 import { useCanvasPersistence } from './hooks/useCanvasPersistence';
@@ -38,6 +39,7 @@ export default function ExploreMapPage(props: GrafanaRouteComponentProps) {
           </h1>
           <ExploreMapToolbar />
           <ExploreMapCanvas />
+          <ExploreMapFloatingToolbar />
         </div>
       </TransformProvider>
     </ErrorBoundaryAlert>

public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx

@@ -0,0 +1,53 @@
+import { css } from '@emotion/css';
+import { useCallback } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
+import { Button, useStyles2 } from '@grafana/ui';
+import { useDispatch } from 'app/types/store';
+
+import { addPanel } from '../state/exploreMapSlice';
+
+export function ExploreMapFloatingToolbar() {
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+
+  const handleAddPanel = useCallback(() => {
+    dispatch(
+      addPanel({
+        viewportSize: {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        },
+      })
+    );
+  }, [dispatch]);
+
+  return (
+    <div className={styles.floatingToolbar}>
+      <Button icon="plus" onClick={handleAddPanel} variant="primary">
+        <Trans i18nKey="explore-map.toolbar.add-panel">Add Panel</Trans>
+      </Button>
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    floatingToolbar: css({
+      position: 'fixed',
+      bottom: theme.spacing(3),
+      left: '50%',
+      transform: 'translateX(-50%)',
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(1),
+      padding: theme.spacing(1, 2),
+      backgroundColor: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.radius.default,
+      boxShadow: theme.shadows.z3,
+      zIndex: 1000,
+    }),
+  };
+};

public/app/features/explore-map/components/ExploreMapToolbar.tsx

@@ -3,12 +3,12 @@ import { useCallback, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
-import { Button, ButtonGroup, ConfirmModal, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { ButtonGroup, ConfirmModal, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { useDispatch, useSelector } from 'app/types/store';
 
 import { useTransformContext } from '../context/TransformContext';
 import { useCanvasPersistence } from '../hooks/useCanvasPersistence';
-import { addPanel, resetCanvas } from '../state/exploreMapSlice';
+import { resetCanvas } from '../state/exploreMapSlice';
 
 export function ExploreMapToolbar() {
   const styles = useStyles2(getStyles);
@@ -20,15 +20,6 @@ export function ExploreMapToolbar() {
   const panelCount = useSelector((state) => Object.keys(state.exploreMap.panels).length);
   const viewport = useSelector((state) => state.exploreMap.viewport);
 
-  const handleAddPanel = useCallback(() => {
-    dispatch(addPanel({
-      viewportSize: {
-        width: window.innerWidth,
-        height: window.innerHeight
-      }
-    }));
-  }, [dispatch]);
-
   const handleResetCanvas = useCallback(() => {
     setShowResetConfirm(true);
   }, []);
@@ -75,9 +66,6 @@ export function ExploreMapToolbar() {
     <>
       <div className={styles.toolbar}>
         <div className={styles.toolbarSection}>
-          <Button icon="plus" onClick={handleAddPanel} variant="primary">
-            <Trans i18nKey="explore-map.toolbar.add-panel">Add Panel</Trans>
-          </Button>
           <span className={styles.panelCount}>
             <Trans i18nKey="explore-map.toolbar.panel-count" values={{ count: panelCount }}>
               {{ count: panelCount }} panels