AppChrome: Sidebar extensions button update (#103791)

* AppChrome: Sidebar app icon button update

* Update

* remove unused files

* Update public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItem.tsx

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

* update

---------

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

packages/grafana-data/src/types/icon.ts

@@ -269,6 +269,7 @@ export const availableIconsIndex = {
   'add-user': true,
   attach: true,
   'dollar-alt': true,
+  'ai-sparkle': true,
 };
 
 export type IconName = keyof typeof availableIconsIndex;

public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItem.tsx

@@ -1,13 +1,15 @@
-import { useState } from 'react';
+import { css, cx } from '@emotion/css';
 
-import { Dropdown, Menu, ToolbarButton } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Dropdown, Menu, ToolbarButton, useTheme2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
 
 import { getComponentIdFromComponentMeta, useExtensionSidebarContext } from './ExtensionSidebarProvider';
 
 export function ExtensionToolbarItem() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const styles = getStyles(useTheme2());
   const { availableComponents, dockedComponentId, setDockedComponentId, isOpen, isEnabled } =
     useExtensionSidebarContext();
 
@@ -28,9 +30,9 @@ export function ExtensionToolbarItem() {
     return (
       <>
         <ToolbarButton
-          icon="web-section"
+          icon="ai-sparkle"
           data-testid="extension-toolbar-button"
-          variant={isOpen ? 'active' : 'default'}
+          className={cx(styles.button, isOpen && styles.buttonActive)}
           tooltip={components[0].description}
           onClick={() => {
             if (isOpen) {
@@ -68,15 +70,35 @@ export function ExtensionToolbarItem() {
   );
   return (
     <>
-      <Dropdown overlay={MenuItems} onVisibleChange={setIsMenuOpen} placement="bottom-end">
+      <Dropdown overlay={MenuItems} placement="bottom-end">
         <ToolbarButton
+          className={cx(styles.button, isOpen && styles.buttonActive)}
+          icon="ai-sparkle"
           data-testid="extension-toolbar-button"
-          icon="web-section"
-          isOpen={isMenuOpen}
-          variant={isOpen ? 'active' : 'default'}
+          variant="default"
+          tooltip={t('navigation.extension-sidebar.button-tooltip', 'Open AI assistants and sidebar apps')}
         />
       </Dropdown>
       <NavToolbarSeparator />
     </>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    button: css({
+      width: '28px',
+      height: '28px',
+      padding: 0,
+      justifyContent: 'center',
+      borderRadius: theme.shape.radius.circle,
+      margin: theme.spacing(0, 0.25),
+    }),
+    buttonActive: css({
+      borderRadius: theme.shape.radius.circle,
+      backgroundColor: theme.colors.primary.transparent,
+      border: `1px solid ${theme.colors.primary.borderTransparent}`,
+      color: theme.colors.text.primary,
+    }),
+  };
+}

public/app/core/icons/cached.json

@@ -142,6 +142,7 @@
   "unicons/hourglass",
   "unicons/layer-group",
   "unicons/layers-alt",
+  "unicons/layers-slash",
   "unicons/line-alt",
   "unicons/list-ui-alt",
   "unicons/message",
@@ -173,5 +174,9 @@
   "mono/panel-add",
   "mono/library-panel",
   "unicons/record-audio",
-  "solid/bookmark"
+  "solid/bookmark",
+  "unicons/ai-sparkle",
+  "unicons/dollar-alt",
+  "unicons/window-grid",
+  "unicons/ban"
 ]

public/img/icons/unicons/ai-sparkle.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.8039 19.7636C23.0281 18.4068 21.5947 16.9736 20.2379 10.1976C20.1858 9.93675 19.8133 9.93675 19.7612 10.1976C18.4044 16.9734 16.9712 18.4068 10.1951 19.7636C9.93431 19.8157 9.93431 20.1882 10.1951 20.2403C16.9709 21.5971 18.4044 23.0303 19.7612 29.8064C19.8133 30.0672 20.1858 30.0672 20.2379 29.8064C21.5947 23.0305 23.0279 21.5971 29.8039 20.2403C30.0647 20.1882 30.0647 19.8157 29.8039 19.7636Z" fill="currentColor" stroke="currentColor" stroke-width="2.90625"/>
+<path d="M11.9022 6.88277C8.51429 6.20438 7.79757 5.48778 7.11918 2.09975C7.09312 1.96935 6.90688 1.96935 6.88082 2.09975C6.20243 5.48767 5.48582 6.20438 2.0978 6.88277C1.9674 6.90883 1.9674 7.09507 2.0978 7.12113C5.48571 7.79952 6.20243 8.51613 6.88082 11.9042C6.90688 12.0346 7.09312 12.0346 7.11918 11.9042C7.79757 8.51624 8.51418 7.79952 11.9022 7.12113C12.0326 7.09507 12.0326 6.90883 11.9022 6.88277Z" fill="currentColor" stroke="currentColor" stroke-width="1.9375"/>
+</svg>

public/locales/en-US/grafana.json

@@ -5994,6 +5994,9 @@
     "breadcrumbs": {
       "aria-label": "Breadcrumbs"
     },
+    "extension-sidebar": {
+      "button-tooltip": "Open AI assistants and sidebar apps"
+    },
     "help": {
       "aria-label": "Help"
     },