Progress

public/app/core/components/AppChrome/AddonBar/AddonBar.tsx

@@ -13,9 +13,9 @@ import { useSelector } from 'app/types/store';
 import { HistoryContainer } from '../History/HistoryContainer';
 import { enrichHelpItem } from '../MegaMenu/utils';
 import { NewsContainer } from '../News/NewsContainer';
-import { QuickAdd } from '../QuickAdd/QuickAdd';
 import { TopNavBarMenu } from '../TopBar/TopNavBarMenu';
 
+import { CreatePane } from './CreatePane';
 import { HelpPane } from './HelpPane';
 
 export const ADDON_BAR_WIDTH = 48;
@@ -50,13 +50,26 @@ export function AddonBar() {
 
     chrome.update({
       addonBarPane: {
-        title: 'Get help',
         id: 'help',
         content: <HelpPane />,
       },
     });
   };
 
+  const onShowCreate = () => {
+    if (state.addonBarPane?.id === 'create') {
+      chrome.update({ addonBarPane: undefined });
+      return;
+    }
+
+    chrome.update({
+      addonBarPane: {
+        id: 'create',
+        content: <CreatePane />,
+      },
+    });
+  };
+
   return (
     <div className={styles.addonBar}>
       {profileNode && (
@@ -83,14 +96,20 @@ export function AddonBar() {
       ))}
       <FlexItem grow={1} />
       <LineSeparator />
-      <AddonBarItem>
-        <QuickAdd />
+      <AddonBarItem active={state.addonBarPane?.id === 'create'}>
+        <ToolbarButton tooltip="Add / create" iconOnly icon={'plus'} aria-label="New" onClick={onShowCreate} />
       </AddonBarItem>
       {unifiedHistoryEnabled && <HistoryContainer />}
       {enrichedHelpNode && (
         // <Dropdown overlay={() => <TopNavBarMenu node={enrichedHelpNode} />} placement="bottom-end">
         <AddonBarItem active={state.addonBarPane?.id === 'help'}>
-          <ToolbarButton iconOnly icon="question-circle" aria-label="Help" onClick={onShowHelpPane} />
+          <ToolbarButton
+            tooltip="Help pane"
+            iconOnly
+            icon="question-circle"
+            aria-label="Help"
+            onClick={onShowHelpPane}
+          />
         </AddonBarItem>
         // </Dropdown>
       )}

public/app/core/components/AppChrome/AddonBar/AddonBarPane.tsx

@@ -44,7 +44,7 @@ function getStyles(theme: GrafanaTheme2) {
       borderLeft: `1px solid ${theme.colors.border.weak}`,
     }),
     header: css({
-      padding: theme.spacing(1, 1.5),
+      padding: theme.spacing(1.5, 1.5, 1, 1.5),
       fontWeight: theme.typography.fontWeightMedium,
       fontSize: theme.typography.h5.fontSize,
       display: 'flex',

public/app/core/components/AppChrome/AddonBar/CreatePane.tsx

@@ -0,0 +1,71 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Box, Card, Stack, useStyles2, Text } from '@grafana/ui';
+
+import { AddonBarPane } from './AddonBarPane';
+
+export function CreatePane() {
+  const styles = useStyles2(getStyles);
+  //   const navIndex = useSelector((s) => s.navIndex);
+  //   const helpNode = cloneDeep(navIndex['help']);
+  //   const enrichedHelpNode = helpNode ? enrichHelpItem(helpNode) : undefined;
+
+  return (
+    <AddonBarPane title="Create / add">
+      <Box paddingX={2} grow={1}>
+        <Stack direction={'column'} grow={1} gap={1} height={'100%'}>
+          <Text variant="bodySmall" italic>
+            Based on context
+          </Text>
+          <Stack direction={'column'} gap={0.5}>
+            <Card href="link" isCompact>
+              <Card.Heading>+ Panel</Card.Heading>
+            </Card>
+            <Card href="link" isCompact>
+              <Card.Heading>+ Row</Card.Heading>
+            </Card>
+            <Card href="link" isCompact>
+              <Card.Heading>+ Variable</Card.Heading>
+            </Card>
+          </Stack>
+          <div className={styles.divider} />
+          <Text variant="bodySmall" italic>
+            New entites
+          </Text>
+          <Stack direction={'column'} gap={0.5}>
+            <Card href="link" isCompact>
+              <Card.Heading>New dashboard</Card.Heading>
+            </Card>
+            <Card href="link" isCompact>
+              <Card.Heading>Import dashboard</Card.Heading>
+            </Card>
+            <Card href="link" isCompact>
+              <Card.Heading>New alert rule</Card.Heading>
+            </Card>
+            <Card href="link" isCompact>
+              <Card.Heading>New incident</Card.Heading>
+            </Card>
+          </Stack>
+        </Stack>
+      </Box>
+    </AddonBarPane>
+  );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    divider: css({
+      height: '1px',
+      width: '100%',
+    }),
+    input: css({
+      boxShadow: 'none',
+      width: '100%',
+      border: `1px solid ${theme.components.input.borderColor}`,
+      background: theme.components.input.background,
+      padding: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius(3),
+    }),
+  };
+}

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -43,7 +43,6 @@ export interface AddonAppDefinition<T = {}> {
 }
 
 export interface AddonBarPane {
-  title: string;
   id: string;
   content: React.ReactNode;
 }
@@ -221,7 +220,6 @@ export class AppChromeService {
 
     this.update({
       addonBarPane: {
-        title: addonApp.title,
         id: addonApp.id,
         content: <addonApp.component {...addonApp.props} />,
       },

public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui';
+import { Menu, Dropdown, useTheme2, ToolbarButton } from '@grafana/ui';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { useSelector } from 'app/types';
 
@@ -12,12 +12,10 @@ import { findCreateActions } from './utils';
 export interface Props {}
 
 export const QuickAdd = ({}: Props) => {
-  const styles = useStyles2(getStyles);
   const theme = useTheme2();
   const navBarTree = useSelector((state) => state.navBarTree);
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isOpen, setIsOpen] = useState(false);
   const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
   const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
   const showQuickAdd = createActions.length > 0 && !isSmallScreen;
@@ -58,20 +56,3 @@ export const QuickAdd = ({}: Props) => {
     </>
   ) : null;
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  buttonContent: css({
-    alignItems: 'center',
-    display: 'flex',
-  }),
-  buttonText: css({
-    [theme.breakpoints.down('md')]: {
-      display: 'none',
-    },
-  }),
-  separator: css({
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
-  }),
-});

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -445,25 +445,25 @@ export function ToolbarActions({ dashboard }: Props) {
     render: () => <ShareButton key="new-share-dashboard-button" dashboard={dashboard} />,
   });
 
-  toolbarActions.push({
-    group: 'settings',
-    condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard,
-    render: () => (
-      <Button
-        onClick={() => {
-          dashboard.onOpenSettings();
-        }}
-        tooltip="Dashboard settings"
-        fill="text"
-        size="sm"
-        key="settings"
-        variant="secondary"
-        data-testid={selectors.components.NavToolbar.editDashboard.settingsButton}
-      >
-        Settings
-      </Button>
-    ),
-  });
+  // toolbarActions.push({
+  //   group: 'settings',
+  //   condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard,
+  //   render: () => (
+  //     <Button
+  //       onClick={() => {
+  //         dashboard.onOpenSettings();
+  //       }}
+  //       tooltip="Dashboard settings"
+  //       fill="text"
+  //       size="sm"
+  //       key="settings"
+  //       variant="secondary"
+  //       data-testid={selectors.components.NavToolbar.editDashboard.settingsButton}
+  //     >
+  //       Settings
+  //     </Button>
+  //   ),
+  // });
 
   toolbarActions.push({
     group: 'main-buttons',