Use bookmark icon for Saved Items, add support for solid bookmark icon (#46775)

* Use bookmark icon for Saved Items, add support for solid bookmark icon

* Add some unit tests

* Refactor utils into own file

* Update test title

* Fix import

* consistent function style

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -6,8 +6,7 @@ import { useTheme } from '../../themes/ThemeContext';
 import { IconName, IconType, IconSize } from '../../types/icon';
 import SVG from 'react-inlinesvg';
 import { cacheInitialized, initIconCache, iconRoot } from './iconBundle';
-
-const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'library-panel'];
+import { getIconSubDir, getSvgSize } from './utils';
 
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: IconName;
@@ -34,16 +33,6 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-function getIconSubDir(name: IconName, type: string): string {
-  return name?.startsWith('gf-')
-    ? 'custom'
-    : alwaysMonoIcons.includes(name)
-    ? 'mono'
-    : type === 'default'
-    ? 'unicons'
-    : 'mono';
-}
-
 export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
   ({ size = 'md', type = 'default', name, className, style, title = '', ...divElementProps }, ref) => {
     const theme = useTheme();
@@ -94,23 +83,3 @@ function getFontAwesomeIconStyles(iconName: string, className?: string): string
     className
   );
 }
-
-/* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */
-export const getSvgSize = (size: IconSize) => {
-  switch (size) {
-    case 'xs':
-      return 12;
-    case 'sm':
-      return 14;
-    case 'md':
-      return 16;
-    case 'lg':
-      return 18;
-    case 'xl':
-      return 24;
-    case 'xxl':
-      return 36;
-    case 'xxxl':
-      return 48;
-  }
-};

packages/grafana-ui/src/components/Icon/utils.test.ts

@@ -0,0 +1,18 @@
+import { getIconSubDir } from './utils';
+
+describe('Icon utils', () => {
+  describe('getIconSubDir', () => {
+    it.each`
+      name          | type         | expected
+      ${'gf-panel'} | ${undefined} | ${'custom'}
+      ${'grafana'}  | ${undefined} | ${'mono'}
+      ${'bookmark'} | ${'default'} | ${'unicons'}
+      ${'bookmark'} | ${'solid'}   | ${'solid'}
+      ${'bookmark'} | ${undefined} | ${'mono'}
+      ${'folder'}   | ${'mono'}    | ${'mono'}
+    `('it returns the correct iconSubDir for icon $name with type $type', ({ name, type, expected }) => {
+      const iconSubDir = getIconSubDir(name, type);
+      expect(iconSubDir).toEqual(expected);
+    });
+  });
+});

packages/grafana-ui/src/components/Icon/utils.ts

@@ -0,0 +1,37 @@
+import { IconName, IconSize } from '../../types/icon';
+
+const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'library-panel'];
+
+export function getIconSubDir(name: IconName, type: string): string {
+  if (name?.startsWith('gf-')) {
+    return 'custom';
+  } else if (alwaysMonoIcons.includes(name)) {
+    return 'mono';
+  } else if (type === 'default') {
+    return 'unicons';
+  } else if (type === 'solid') {
+    return 'solid';
+  } else {
+    return 'mono';
+  }
+}
+
+/* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */
+export function getSvgSize(size: IconSize) {
+  switch (size) {
+    case 'xs':
+      return 12;
+    case 'sm':
+      return 14;
+    case 'md':
+      return 16;
+    case 'lg':
+      return 18;
+    case 'xl':
+      return 24;
+    case 'xxl':
+      return 36;
+    case 'xxxl':
+      return 48;
+  }
+}

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, getSvgSize } from '../Icon/Icon';
+import { Icon } from '../Icon/Icon';
+import { getSvgSize } from '../Icon/utils';
 import { IconName, IconSize, IconType } from '../../types/icon';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { css, cx } from '@emotion/css';

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

@@ -1,6 +1,6 @@
 import { Field, FieldType } from '@grafana/data';
 import { ComponentSize } from './size';
-export type IconType = 'mono' | 'default';
+export type IconType = 'mono' | 'default' | 'solid';
 export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
 
 export const getAvailableIcons = () =>
@@ -28,6 +28,7 @@ export const getAvailableIcons = () =>
     'bell-slash',
     'bolt',
     'book',
+    'bookmark',
     'book-open',
     'brackets-curly',
     'building',

pkg/api/index.go

@@ -167,7 +167,7 @@ func (hs *HTTPServer) getNavTree(c *models.ReqContext, hasEditPerm bool) ([]*dto
 		navTree = append(navTree, &dtos.NavLink{
 			Text:       "Saved Items",
 			Id:         "saved-items",
-			Icon:       "heart",
+			Icon:       "bookmark",
 			SortWeight: dtos.WeightSavedItems,
 			Section:    dtos.NavSectionCore,
 			Children:   savedItemsLinks,

public/img/icons/.gitignore

@@ -1,4 +1,4 @@
-# unicons folder is imported via webpack
-# https://github.com/Iconscout/unicons/tarball/d0859416ab8d8e60dcfa1c0b50716874fcf11778 
-# just the line icons
-unicons
+# unicons and solid folders are imported via webpack
+# https://github.com/Iconscout/unicons/tarball/d0859416ab8d8e60dcfa1c0b50716874fcf11778
+unicons
+solid

scripts/webpack/webpack.common.js

@@ -16,6 +16,16 @@ class CopyUniconsPlugin {
         );
         fs.copySync(srcDir, destDir);
       }
+
+      let solidDestDir = path.resolve(__dirname, '../../public/img/icons/solid');
+
+      if (!fs.pathExistsSync(solidDestDir)) {
+        let srcDir = path.join(
+          path.dirname(require.resolve('iconscout-unicons-tarball/package.json')),
+          'unicons/svg/solid'
+        );
+        fs.copySync(srcDir, solidDestDir);
+      }
     });
   }
 }