SharePanel: Add icons to panel options Share and More (#92622)

* add icon

* update icons

* add svg

* update legend

* remove new svg

* try again

* remove again

* add legend icons

* make review changes

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

@@ -166,9 +166,12 @@ export const availableIconsIndex = {
   kubernetes: true,
   'layer-group': true,
   'layers-alt': true,
+  'legend-hide': true,
+  'legend-show': true,
   'library-panel': true,
   'line-alt': true,
   link: true,
+  'link-broken': true,
   'list-ui-alt': true,
   'list-ul': true,
   'list-ol': true,

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

@@ -145,6 +145,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
     if (dashboard.state.isEditing && !isRepeat && !isEditingPanel) {
       moreSubMenu.push({
         text: t('panel.header-menu.duplicate', `Duplicate`),
+        iconClassName: 'file-copy-alt',
         onClick: () => {
           dashboard.duplicatePanel(panel);
         },
@@ -155,6 +156,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
     if (!isEditingPanel) {
       moreSubMenu.push({
         text: t('panel.header-menu.copy', `Copy`),
+        iconClassName: 'copy',
         onClick: () => {
           dashboard.copyPanel(panel);
         },
@@ -165,6 +167,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
       if (isLibraryPanel(panel)) {
         moreSubMenu.push({
           text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`),
+          iconClassName: 'link-broken',
           onClick: () => {
             dashboard.showModal(
               new UnlinkLibraryPanelModal({
@@ -176,6 +179,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
 
         moreSubMenu.push({
           text: t('panel.header-menu.replace-library-panel', `Replace library panel`),
+          iconClassName: 'library-panel',
           onClick: () => {
             dashboard.onShowAddLibraryPanelDrawer(panel.getRef());
           },
@@ -184,6 +188,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         if (config.featureToggles.newDashboardSharingComponent) {
           moreSubMenu.push({
             text: t('share-panel.menu.new-library-panel-title', 'New library panel'),
+            iconClassName: 'plus-square',
             onClick: () => {
               const drawer = new ShareDrawer({
                 shareView: shareDashboardType.libraryPanel,
@@ -211,6 +216,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
 
     moreSubMenu.push({
       text: t('panel.header-menu.new-alert-rule', `New alert rule`),
+      iconClassName: 'bell',
       onClick: (e) => onCreateAlert(panel),
     });
 
@@ -219,6 +225,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         text: panel.state.options.legend.showLegend
           ? t('panel.header-menu.hide-legend', 'Hide legend')
           : t('panel.header-menu.show-legend', 'Show legend'),
+        iconClassName: panel.state.options.legend.showLegend ? 'legend-hide' : 'legend-show',
         onClick: (e) => {
           e.preventDefault();
           toggleVizPanelLegend(panel);
@@ -230,6 +237,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
     if (dashboard.canEditDashboard() && plugin && !plugin.meta.skipDataQuery && !isRepeat) {
       moreSubMenu.push({
         text: t('panel.header-menu.get-help', 'Get help'),
+        iconClassName: 'question-circle',
         onClick: (e: React.MouseEvent) => {
           e.preventDefault();
           onInspectPanel(panel, InspectTab.Help);

public/img/icons/unicons/legend-hide.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8 4.8H7.2C5.87452 4.8 4.8 5.87452 4.8 7.2V40.8C4.8 42.1255 5.87452 43.2 7.2 43.2H40.8C42.1255 43.2 43.2 42.1255 43.2 40.8V7.2C43.2 5.87452 42.1255 4.8 40.8 4.8ZM7.2 0C3.22355 0 0 3.22355 0 7.2V40.8C0 44.7765 3.22355 48 7.2 48H40.8C44.7765 48 48 44.7765 48 40.8V7.2C48 3.22355 44.7765 0 40.8 0H7.2Z"/>
+</svg>

public/img/icons/unicons/legend-show.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5334 24.3539C10.8787 24.1232 11.2848 24 11.7001 24C12.2571 24 12.7912 24.2212 13.185 24.6151C13.5788 25.0089 13.8001 25.543 13.8001 26.1C13.8001 26.5153 13.6769 26.9214 13.4462 27.2667C13.2154 27.612 12.8875 27.8812 12.5037 28.0401C12.12 28.1991 11.6978 28.2407 11.2904 28.1596C10.883 28.0786 10.5089 27.8786 10.2152 27.5849C9.92148 27.2912 9.72148 26.917 9.64045 26.5097C9.55942 26.1023 9.60101 25.6801 9.75995 25.2964C9.9189 24.9126 10.1881 24.5847 10.5334 24.3539Z"/>
+<path d="M36.3001 28.2L20.1001 28.2C19.5431 28.2 19.009 27.9787 18.6152 27.5849C18.2213 27.1911 18.0001 26.657 18.0001 26.1C18.0001 25.543 18.2213 25.0089 18.6152 24.6151C19.009 24.2212 19.5431 24 20.1001 24L36.3001 24C36.857 24 37.3912 24.2212 37.785 24.6151C38.1788 25.0089 38.4001 25.543 38.4001 26.1C38.4001 26.657 38.1788 27.1911 37.785 27.5849C37.3912 27.9787 36.857 28.2 36.3001 28.2Z"/>
+<path d="M10.5334 33.954C10.8787 33.7233 11.2848 33.6001 11.7001 33.6001C12.2571 33.6001 12.7912 33.8213 13.185 34.2152C13.5788 34.609 13.8001 35.1431 13.8001 35.7001C13.8001 36.1154 13.6769 36.5215 13.4462 36.8668C13.2154 37.2121 12.8875 37.4813 12.5037 37.6402C12.12 37.7992 11.6978 37.8408 11.2904 37.7597C10.883 37.6787 10.5089 37.4787 10.2152 37.185C9.92148 36.8913 9.72148 36.5171 9.64045 36.1098C9.55942 35.7024 9.60101 35.2802 9.75995 34.8965C9.9189 34.5127 10.1881 34.1848 10.5334 33.954Z"/>
+<path d="M36.3001 37.8001L20.1001 37.8001C19.5431 37.8001 19.009 37.5788 18.6152 37.185C18.2213 36.7912 18.0001 36.2571 18.0001 35.7001C18.0001 35.1431 18.2213 34.609 18.6152 34.2152C19.009 33.8213 19.5431 33.6001 20.1001 33.6001L36.3001 33.6001C36.857 33.6001 37.3912 33.8213 37.785 34.2152C38.1788 34.609 38.4001 35.1431 38.4001 35.7001C38.4001 36.2571 38.1788 36.7912 37.785 37.185C37.3912 37.5788 36.857 37.8001 36.3001 37.8001Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8 4.8H7.2C5.87452 4.8 4.8 5.87452 4.8 7.2V40.8C4.8 42.1255 5.87452 43.2 7.2 43.2H40.8C42.1255 43.2 43.2 42.1255 43.2 40.8V7.2C43.2 5.87452 42.1255 4.8 40.8 4.8ZM7.2 0C3.22355 0 0 3.22355 0 7.2V40.8C0 44.7765 3.22355 48 7.2 48H40.8C44.7765 48 48 44.7765 48 40.8V7.2C48 3.22355 44.7765 0 40.8 0H7.2Z"/>
+</svg>