From 424925c3fb2fc1bd5b10e8ef2f8b92471cf86af4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 25 Apr 2021 20:17:35 +0200 Subject: [PATCH] Icons: Fixes iconCache not having same iconRoot as what Icon component used making the pre-cached items not match (#33356) --- .../grafana-ui/src/components/Icon/Icon.tsx | 18 +- .../src/components/Icon/iconBundle.ts | 309 +++++++++--------- public/app/app.ts | 1 - .../TopSectionItem.test.tsx.snap | 2 +- public/app/index.ts | 4 + 5 files changed, 169 insertions(+), 165 deletions(-) diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index add0a106476..38f740801a4 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -5,11 +5,8 @@ import { stylesFactory } from '../../themes/stylesFactory'; import { useTheme } from '../../themes/ThemeContext'; import { IconName, IconType, IconSize } from '../../types/icon'; import SVG from '@leeoniya/react-inlinesvg'; +import { cacheInitialized, initIconCache, iconRoot } from './iconBundle'; -declare let __webpack_public_path__: string; - -// Lazy load the root url -let iconRoot: string | undefined = undefined; const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'reusable-panel']; export interface IconProps extends React.HTMLAttributes { @@ -59,17 +56,8 @@ export const Icon = React.forwardRef( size = 'xl'; } - // Lazy load -- this will give time the the CDN path to be injected on app init - if (!iconRoot) { - if (__webpack_public_path__) { - const publicpath = // __webpack_public_path__ includes the 'build/' suffix - __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || - __webpack_public_path__; - - iconRoot = publicpath + 'img/icons/'; - } else { - iconRoot = '/public/img/icons/'; // will only happen for non-grafana builds - } + if (!cacheInitialized) { + initIconCache(); } const styles = getIconStyles(theme); diff --git a/packages/grafana-ui/src/components/Icon/iconBundle.ts b/packages/grafana-ui/src/components/Icon/iconBundle.ts index 18e9280a24b..2d929ae50ed 100644 --- a/packages/grafana-ui/src/components/Icon/iconBundle.ts +++ b/packages/grafana-ui/src/components/Icon/iconBundle.ts @@ -159,161 +159,174 @@ fa fa-spinner fa fa-windows */ -const iconRoot = '/public/img/icons/'; const unicons = 'unicons/'; const custom = 'custom/'; const mono = 'mono/'; +export let cacheInitialized = false; +export let iconRoot = 'public/img/icons'; + function cacheItem(content: string, subdir: string, name: string) { cacheStore[iconRoot + subdir + name + '.svg'] = { content, status: 'loaded', queue: [] }; } -cacheItem(u001, unicons, 'angle-double-down'); -cacheItem(u002, unicons, 'angle-double-right'); -cacheItem(u003, unicons, 'angle-down'); -cacheItem(u004, unicons, 'angle-left'); -cacheItem(u005, unicons, 'angle-right'); -cacheItem(u006, unicons, 'angle-up'); -cacheItem(u007, unicons, 'apps'); -cacheItem(u008, unicons, 'arrow'); -cacheItem(u009, unicons, 'arrow-down'); -cacheItem(u010, unicons, 'arrow-from-right'); -cacheItem(u011, unicons, 'arrow-left'); -cacheItem(u012, unicons, 'arrow-random'); -cacheItem(u013, unicons, 'arrow-right'); -cacheItem(u014, unicons, 'arrow-up'); -cacheItem(u015, unicons, 'arrows-h'); -//cacheItem(u016, unicons, 'asc'); -cacheItem(u017, unicons, 'backward'); -cacheItem(u018, unicons, 'bars'); -cacheItem(u019, unicons, 'bell'); -cacheItem(u020, unicons, 'bell-slash'); -cacheItem(u021, unicons, 'bolt'); -cacheItem(u022, unicons, 'book'); -cacheItem(u023, unicons, 'book-open'); -cacheItem(u024, unicons, 'brackets-curly'); -cacheItem(u025, unicons, 'bug'); -cacheItem(u026, unicons, 'building'); -cacheItem(u027, unicons, 'calculator-alt'); -cacheItem(u028, unicons, 'calendar-alt'); -cacheItem(u029, unicons, 'camera'); -cacheItem(u030, unicons, 'channel-add'); -cacheItem(u031, unicons, 'chart-line'); -cacheItem(u032, unicons, 'check'); -cacheItem(u033, unicons, 'check-circle'); -cacheItem(u034, unicons, 'circle'); -cacheItem(u035, unicons, 'clipboard-alt'); -cacheItem(u036, unicons, 'clock-nine'); -//cacheItem(u037, unicons, 'clock-o'); -//cacheItem(u038, unicons, 'close'); -cacheItem(u039, unicons, 'cloud'); -cacheItem(u040, unicons, 'cloud-download'); -cacheItem(u041, unicons, 'code-branch'); -cacheItem(u042, unicons, 'cog'); -cacheItem(u043, unicons, 'columns'); -cacheItem(u044, unicons, 'comment-alt'); -cacheItem(u045, unicons, 'comment-alt-share'); -cacheItem(u046, unicons, 'comments-alt'); -cacheItem(u047, unicons, 'compass'); -cacheItem(u048, unicons, 'copy'); -cacheItem(u049, unicons, 'cube'); -cacheItem(u050, unicons, 'dashboard'); -cacheItem(u051, unicons, 'database'); -cacheItem(u052, unicons, 'document-info'); -//cacheItem(u053, unicons, 'down'); -cacheItem(u054, unicons, 'download-alt'); -cacheItem(u055, unicons, 'draggabledots'); -cacheItem(u056, unicons, 'edit'); -cacheItem(u057, unicons, 'ellipsis-v'); -cacheItem(u058, unicons, 'envelope'); -cacheItem(u059, unicons, 'exchange-alt'); -cacheItem(u060, unicons, 'exclamation-triangle'); -cacheItem(u061, unicons, 'external-link-alt'); -cacheItem(u062, unicons, 'eye'); -cacheItem(u063, unicons, 'eye-slash'); -cacheItem(u064, unicons, 'file-alt'); -cacheItem(u065, unicons, 'file-blank'); -cacheItem(u066, unicons, 'filter'); -cacheItem(u067, unicons, 'folder'); -cacheItem(u068, unicons, 'folder-open'); -cacheItem(u069, unicons, 'folder-plus'); -cacheItem(u070, unicons, 'folder-upload'); -cacheItem(u071, unicons, 'forward'); -//cacheItem(u072, unicons, 'grafana_com'); -cacheItem(u073, unicons, 'graph-bar'); -cacheItem(u074, unicons, 'history'); -cacheItem(u075, unicons, 'home-alt'); -//cacheItem(u076, unicons, 'icon'); -//cacheItem(u077, unicons, 'icon-test'); -cacheItem(u078, unicons, 'import'); -cacheItem(u079, unicons, 'info'); -cacheItem(u080, unicons, 'info-circle'); -//cacheItem(u081, unicons, 'key'); -cacheItem(u082, unicons, 'key-skeleton-alt'); -cacheItem(u083, unicons, 'keyboard'); -cacheItem(u084, unicons, 'link'); -cacheItem(u085, unicons, 'list-ul'); -cacheItem(u086, unicons, 'lock'); -cacheItem(u087, unicons, 'minus'); -cacheItem(u088, unicons, 'minus-circle'); -cacheItem(u089, unicons, 'mobile-android'); -cacheItem(u090, unicons, 'monitor'); -cacheItem(u091, unicons, 'pause'); -cacheItem(u092, unicons, 'pen'); -cacheItem(u093, unicons, 'play'); -cacheItem(u094, unicons, 'plug'); -cacheItem(u095, unicons, 'plus'); -cacheItem(u096, unicons, 'plus-circle'); -cacheItem(u097, unicons, 'power'); -cacheItem(u098, unicons, 'presentation-play'); -cacheItem(u099, unicons, 'process'); -cacheItem(u100, unicons, 'question-circle'); -cacheItem(u101, unicons, 'repeat'); -cacheItem(u102, unicons, 'rocket'); -cacheItem(u103, unicons, 'save'); -cacheItem(u104, unicons, 'search'); -cacheItem(u105, unicons, 'search-minus'); -cacheItem(u106, unicons, 'search-plus'); -cacheItem(u107, unicons, 'share-alt'); -cacheItem(u108, unicons, 'shield'); -//cacheItem(u109, unicons, 'sign-in'); -cacheItem(u110, unicons, 'signal'); -cacheItem(u111, unicons, 'signin'); -cacheItem(u112, unicons, 'signout'); -cacheItem(u113, unicons, 'sitemap'); -cacheItem(u114, unicons, 'slack'); -cacheItem(u115, unicons, 'sliders-v-alt'); -cacheItem(u116, unicons, 'sort-amount-down'); -cacheItem(u117, unicons, 'sort-amount-up'); -cacheItem(u118, unicons, 'square-shape'); -cacheItem(u119, unicons, 'star'); -cacheItem(u120, unicons, 'step-backward'); -//cacheItem(u121, unicons, 'success'); -cacheItem(u122, unicons, 'sync'); -cacheItem(u123, unicons, 'table'); -cacheItem(u124, unicons, 'tag-alt'); -cacheItem(u125, unicons, 'times'); -cacheItem(u126, unicons, 'trash-alt'); -cacheItem(u127, unicons, 'unlock'); -//cacheItem(u128, unicons, 'up'); -cacheItem(u129, unicons, 'upload'); -cacheItem(u130, unicons, 'user'); -cacheItem(u131, unicons, 'users-alt'); -//cacheItem(u132, unicons, 'warning'); -cacheItem(u133, unicons, 'wrap-text'); +export function initIconCache() { + cacheInitialized = true; -cacheItem(c001, custom, 'gf-bar-alignment-after'); -cacheItem(c002, custom, 'gf-bar-alignment-before'); -cacheItem(c003, custom, 'gf-bar-alignment-center'); -cacheItem(c004, custom, 'gf-interpolation-linear'); -cacheItem(c005, custom, 'gf-interpolation-smooth'); -cacheItem(c006, custom, 'gf-interpolation-step-after'); -cacheItem(c007, custom, 'gf-interpolation-step-before'); -cacheItem(c008, custom, 'gf-logs'); + // This function needs to be called after index.js loads to give the + // application time to modify __webpack_public_path__ with a CDN path + const grafanaPublicPath = (window as any).__grafana_public_path__; + if (grafanaPublicPath) { + iconRoot = grafanaPublicPath + 'img/icons/'; + } -cacheItem(m001, mono, 'favorite'); -cacheItem(m002, mono, 'grafana'); -cacheItem(m003, mono, 'heart'); -cacheItem(m004, mono, 'heart-break'); -cacheItem(m005, mono, 'panel-add'); -cacheItem(m006, mono, 'reusable-panel'); + cacheItem(u001, unicons, 'angle-double-down'); + cacheItem(u002, unicons, 'angle-double-right'); + cacheItem(u003, unicons, 'angle-down'); + cacheItem(u004, unicons, 'angle-left'); + cacheItem(u005, unicons, 'angle-right'); + cacheItem(u006, unicons, 'angle-up'); + cacheItem(u007, unicons, 'apps'); + cacheItem(u008, unicons, 'arrow'); + cacheItem(u009, unicons, 'arrow-down'); + cacheItem(u010, unicons, 'arrow-from-right'); + cacheItem(u011, unicons, 'arrow-left'); + cacheItem(u012, unicons, 'arrow-random'); + cacheItem(u013, unicons, 'arrow-right'); + cacheItem(u014, unicons, 'arrow-up'); + cacheItem(u015, unicons, 'arrows-h'); + //cacheItem(u016, unicons, 'asc'); + cacheItem(u017, unicons, 'backward'); + cacheItem(u018, unicons, 'bars'); + cacheItem(u019, unicons, 'bell'); + cacheItem(u020, unicons, 'bell-slash'); + cacheItem(u021, unicons, 'bolt'); + cacheItem(u022, unicons, 'book'); + cacheItem(u023, unicons, 'book-open'); + cacheItem(u024, unicons, 'brackets-curly'); + cacheItem(u025, unicons, 'bug'); + cacheItem(u026, unicons, 'building'); + cacheItem(u027, unicons, 'calculator-alt'); + cacheItem(u028, unicons, 'calendar-alt'); + cacheItem(u029, unicons, 'camera'); + cacheItem(u030, unicons, 'channel-add'); + cacheItem(u031, unicons, 'chart-line'); + cacheItem(u032, unicons, 'check'); + cacheItem(u033, unicons, 'check-circle'); + cacheItem(u034, unicons, 'circle'); + cacheItem(u035, unicons, 'clipboard-alt'); + cacheItem(u036, unicons, 'clock-nine'); + //cacheItem(u037, unicons, 'clock-o'); + //cacheItem(u038, unicons, 'close'); + cacheItem(u039, unicons, 'cloud'); + cacheItem(u040, unicons, 'cloud-download'); + cacheItem(u041, unicons, 'code-branch'); + cacheItem(u042, unicons, 'cog'); + cacheItem(u043, unicons, 'columns'); + cacheItem(u044, unicons, 'comment-alt'); + cacheItem(u045, unicons, 'comment-alt-share'); + cacheItem(u046, unicons, 'comments-alt'); + cacheItem(u047, unicons, 'compass'); + cacheItem(u048, unicons, 'copy'); + cacheItem(u049, unicons, 'cube'); + cacheItem(u050, unicons, 'dashboard'); + cacheItem(u051, unicons, 'database'); + cacheItem(u052, unicons, 'document-info'); + //cacheItem(u053, unicons, 'down'); + cacheItem(u054, unicons, 'download-alt'); + cacheItem(u055, unicons, 'draggabledots'); + cacheItem(u056, unicons, 'edit'); + cacheItem(u057, unicons, 'ellipsis-v'); + cacheItem(u058, unicons, 'envelope'); + cacheItem(u059, unicons, 'exchange-alt'); + cacheItem(u060, unicons, 'exclamation-triangle'); + cacheItem(u061, unicons, 'external-link-alt'); + cacheItem(u062, unicons, 'eye'); + cacheItem(u063, unicons, 'eye-slash'); + cacheItem(u064, unicons, 'file-alt'); + cacheItem(u065, unicons, 'file-blank'); + cacheItem(u066, unicons, 'filter'); + cacheItem(u067, unicons, 'folder'); + cacheItem(u068, unicons, 'folder-open'); + cacheItem(u069, unicons, 'folder-plus'); + cacheItem(u070, unicons, 'folder-upload'); + cacheItem(u071, unicons, 'forward'); + //cacheItem(u072, unicons, 'grafana_com'); + cacheItem(u073, unicons, 'graph-bar'); + cacheItem(u074, unicons, 'history'); + cacheItem(u075, unicons, 'home-alt'); + //cacheItem(u076, unicons, 'icon'); + //cacheItem(u077, unicons, 'icon-test'); + cacheItem(u078, unicons, 'import'); + cacheItem(u079, unicons, 'info'); + cacheItem(u080, unicons, 'info-circle'); + //cacheItem(u081, unicons, 'key'); + cacheItem(u082, unicons, 'key-skeleton-alt'); + cacheItem(u083, unicons, 'keyboard'); + cacheItem(u084, unicons, 'link'); + cacheItem(u085, unicons, 'list-ul'); + cacheItem(u086, unicons, 'lock'); + cacheItem(u087, unicons, 'minus'); + cacheItem(u088, unicons, 'minus-circle'); + cacheItem(u089, unicons, 'mobile-android'); + cacheItem(u090, unicons, 'monitor'); + cacheItem(u091, unicons, 'pause'); + cacheItem(u092, unicons, 'pen'); + cacheItem(u093, unicons, 'play'); + cacheItem(u094, unicons, 'plug'); + cacheItem(u095, unicons, 'plus'); + cacheItem(u096, unicons, 'plus-circle'); + cacheItem(u097, unicons, 'power'); + cacheItem(u098, unicons, 'presentation-play'); + cacheItem(u099, unicons, 'process'); + cacheItem(u100, unicons, 'question-circle'); + cacheItem(u101, unicons, 'repeat'); + cacheItem(u102, unicons, 'rocket'); + cacheItem(u103, unicons, 'save'); + cacheItem(u104, unicons, 'search'); + cacheItem(u105, unicons, 'search-minus'); + cacheItem(u106, unicons, 'search-plus'); + cacheItem(u107, unicons, 'share-alt'); + cacheItem(u108, unicons, 'shield'); + //cacheItem(u109, unicons, 'sign-in'); + cacheItem(u110, unicons, 'signal'); + cacheItem(u111, unicons, 'signin'); + cacheItem(u112, unicons, 'signout'); + cacheItem(u113, unicons, 'sitemap'); + cacheItem(u114, unicons, 'slack'); + cacheItem(u115, unicons, 'sliders-v-alt'); + cacheItem(u116, unicons, 'sort-amount-down'); + cacheItem(u117, unicons, 'sort-amount-up'); + cacheItem(u118, unicons, 'square-shape'); + cacheItem(u119, unicons, 'star'); + cacheItem(u120, unicons, 'step-backward'); + //cacheItem(u121, unicons, 'success'); + cacheItem(u122, unicons, 'sync'); + cacheItem(u123, unicons, 'table'); + cacheItem(u124, unicons, 'tag-alt'); + cacheItem(u125, unicons, 'times'); + cacheItem(u126, unicons, 'trash-alt'); + cacheItem(u127, unicons, 'unlock'); + //cacheItem(u128, unicons, 'up'); + cacheItem(u129, unicons, 'upload'); + cacheItem(u130, unicons, 'user'); + cacheItem(u131, unicons, 'users-alt'); + //cacheItem(u132, unicons, 'warning'); + cacheItem(u133, unicons, 'wrap-text'); + + cacheItem(c001, custom, 'gf-bar-alignment-after'); + cacheItem(c002, custom, 'gf-bar-alignment-before'); + cacheItem(c003, custom, 'gf-bar-alignment-center'); + cacheItem(c004, custom, 'gf-interpolation-linear'); + cacheItem(c005, custom, 'gf-interpolation-smooth'); + cacheItem(c006, custom, 'gf-interpolation-step-after'); + cacheItem(c007, custom, 'gf-interpolation-step-before'); + cacheItem(c008, custom, 'gf-logs'); + + cacheItem(m001, mono, 'favorite'); + cacheItem(m002, mono, 'grafana'); + cacheItem(m003, mono, 'heart'); + cacheItem(m004, mono, 'heart-break'); + cacheItem(m005, mono, 'panel-add'); + cacheItem(m006, mono, 'reusable-panel'); +} diff --git a/public/app/app.ts b/public/app/app.ts index e9c178d77b5..a7d51c29ab9 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -6,7 +6,6 @@ import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering import 'file-saver'; import 'jquery'; -import '@grafana/ui/src/components/Icon/iconBundle'; // eslint-disable-next-line lodash/import-scope import _ from 'lodash'; diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap index 8e42ad57225..e41b5ba9292 100644 --- a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap +++ b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap @@ -87,7 +87,7 @@ exports[`Render should render component 1`] = ` cacheRequests={true} className="css-sr6nr" height={24} - src="/public/img/icons/unicons/cloud.svg" + src="public/img/iconsunicons/cloud.svg" uniquifyIDs={false} width={24} /> diff --git a/public/app/index.ts b/public/app/index.ts index 472eb8564bf..61ab5688776 100644 --- a/public/app/index.ts +++ b/public/app/index.ts @@ -7,5 +7,9 @@ if ((window as any).public_cdn_path) { __webpack_public_path__ = (window as any).public_cdn_path; } +// This is a path to the public folder without '/build' +(window as any).__grafana_public_path__ = + __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || __webpack_public_path__; + import app from './app'; app.init();