From 1e669cbb456d1766cddcc39c9a32623c3fc11222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 11 Apr 2025 09:25:09 +0200
Subject: [PATCH] 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       |  1 +
 .../ExtensionSidebar/ExtensionToolbarItem.tsx | 40 ++++++++++++++-----
 public/app/core/icons/cached.json             |  7 +++-
 public/img/icons/unicons/ai-sparkle.svg       |  4 ++
 public/locales/en-US/grafana.json             |  3 ++
 5 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 public/img/icons/unicons/ai-sparkle.svg

diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts
index 6c53ddcb48a..d3dea16ff5c 100644
--- a/packages/grafana-data/src/types/icon.ts
+++ b/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;
diff --git a/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItem.tsx b/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItem.tsx
index d7af125d894..be49778db62 100644
--- a/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItem.tsx
+++ b/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,
+    }),
+  };
+}
diff --git a/public/app/core/icons/cached.json b/public/app/core/icons/cached.json
index 28cfb2d352c..fa49afb6bf4 100644
--- a/public/app/core/icons/cached.json
+++ b/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"
 ]
diff --git a/public/img/icons/unicons/ai-sparkle.svg b/public/img/icons/unicons/ai-sparkle.svg
new file mode 100644
index 00000000000..8ec596330fc
--- /dev/null
+++ b/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>
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index d9037ed2ddd..4c99d311a6b 100644
--- a/public/locales/en-US/grafana.json
+++ b/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"
     },