From d282b7a6f8ef9f6dde3ac10334b2226d2476848b Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Fri, 13 Oct 2023 14:11:41 +0200 Subject: [PATCH] Grafana UI: Make it possible to bundle package with plugins (#76191) * moved themecontext to data * chore(grafana-ui): re-export ThemeContext from grafana/data for backwards compatibility * Moved icon bundling to core. * feat(plugins): share react-inlinesvg with plugins for grafana/ui bundling * chore(codeowners): add generate-icon-bundle.js to file * chore(storybook): update path to iconBundle file for theme * feat(plugins): share i18n dependency via systemjs * Make sure that icon bundle is initialized for tests. * Removed comment. * added tests for icon root. * Removing the need of having an init variable. * feat(grafana-ui): add icon svgs to bundle for projects that don't rely on grafana --------- Co-authored-by: Marcus Andersson --- .github/CODEOWNERS | 1 + contribute/style-guides/themes.md | 2 +- package.json | 3 +- packages/grafana-data/src/themes/context.tsx | 8 + packages/grafana-data/src/themes/index.ts | 1 + .../grafana-ui/.storybook/storybookTheme.ts | 2 +- packages/grafana-ui/package.json | 2 +- packages/grafana-ui/rollup.config.ts | 18 +- .../components/Forms/Legacy/Select/Select.tsx | 3 +- .../grafana-ui/src/components/Icon/Icon.tsx | 8 +- .../src/components/Icon/iconBundle.ts | 378 ----------------- .../src/components/Icon/utils.test.ts | 31 ++ .../grafana-ui/src/components/Icon/utils.ts | 17 + .../components/Monaco/ReactMonacoEditor.tsx | 57 +-- .../src/components/Typeahead/Typeahead.tsx | 3 +- .../grafana-ui/src/themes/ThemeContext.tsx | 8 +- packages/grafana-ui/src/themes/index.ts | 14 +- .../src/utils/storybook/withTheme.tsx | 3 +- public/app/app.ts | 2 + .../app/core/icons}/cached.json | 0 public/app/core/icons/iconBundle.ts | 389 ++++++++++++++++++ .../app/core/icons}/iconBundle.ts.template | 25 +- public/app/core/utils/ConfigProvider.tsx | 3 +- .../ThresholdsEditor/ThresholdsEditor.tsx | 13 +- .../plugins/loader/sharedDependencies.ts | 6 + public/test/jest-setup.ts | 5 + .../generate-icon-bundle.js | 10 +- yarn.lock | 118 ++++-- 28 files changed, 626 insertions(+), 504 deletions(-) create mode 100644 packages/grafana-data/src/themes/context.tsx delete mode 100644 packages/grafana-ui/src/components/Icon/iconBundle.ts rename {packages/grafana-ui/src/components/Icon => public/app/core/icons}/cached.json (100%) create mode 100644 public/app/core/icons/iconBundle.ts rename {packages/grafana-ui/src/components/Icon => public/app/core/icons}/iconBundle.ts.template (72%) rename {packages/grafana-ui/scripts => scripts}/generate-icon-bundle.js (77%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 5aa99db1f04..5e3e73f2891 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -506,6 +506,7 @@ cypress.config.js @grafana/grafana-frontend-platform /scripts/trigger_windows_build.sh @grafana/grafana-delivery /scripts/cleanup-husky.sh @grafana/frontend-ops /scripts/verify-repo-update/ @grafana/grafana-delivery +scripts/generate-icon-bundle.js @grafana/plugins-platform-frontend @grafana/grafana-frontend-platform /scripts/webpack/ @grafana/frontend-ops /scripts/generate-a11y-report.sh @grafana/grafana-frontend-platform diff --git a/contribute/style-guides/themes.md b/contribute/style-guides/themes.md index f6118bd1d23..5d4a2e0f877 100644 --- a/contribute/style-guides/themes.md +++ b/contribute/style-guides/themes.md @@ -126,7 +126,7 @@ For font family, font sizes and line heights use the variables under `theme.typo #### Using `ThemeContext` directly ```tsx -import { ThemeContext } from '@grafana/ui'; +import { ThemeContext } from '@grafana/data'; {(theme) => }; ``` diff --git a/package.json b/package.json index 6cb3d51ca65..d7367c51f72 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "betterer": "betterer", "betterer:merge": "betterer merge", "betterer:stats": "ts-node --transpile-only --project ./scripts/cli/tsconfig.json ./scripts/cli/reportBettererStats.ts", - "betterer:issues": "ts-node --transpile-only --project ./scripts/cli/tsconfig.json ./scripts/cli/generateBettererIssues.ts" + "betterer:issues": "ts-node --transpile-only --project ./scripts/cli/tsconfig.json ./scripts/cli/generateBettererIssues.ts", + "generate-icons-bundle-cache-file": "node ./scripts/generate-icon-bundle.js" }, "grafana": { "whatsNewUrl": "https://grafana.com/docs/grafana/next/whatsnew/whats-new-in-v10-1/", diff --git a/packages/grafana-data/src/themes/context.tsx b/packages/grafana-data/src/themes/context.tsx new file mode 100644 index 00000000000..dc87729e9fb --- /dev/null +++ b/packages/grafana-data/src/themes/context.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +import { createTheme } from './createTheme'; + +/** @public */ +export const ThemeContext = React.createContext(createTheme()); + +ThemeContext.displayName = 'ThemeContext'; diff --git a/packages/grafana-data/src/themes/index.ts b/packages/grafana-data/src/themes/index.ts index 80fbed882cd..519dc9083d8 100644 --- a/packages/grafana-data/src/themes/index.ts +++ b/packages/grafana-data/src/themes/index.ts @@ -15,3 +15,4 @@ export type { ThemeVisualizationColors, ThemeVizColor, ThemeVizHue } from './cre /** Exporting the module like this to be able to generate docs properly. */ import * as colorManipulator from './colorManipulator'; export { colorManipulator }; +export { ThemeContext } from './context'; diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts index 3a2123c2a00..debe4713bf7 100644 --- a/packages/grafana-ui/.storybook/storybookTheme.ts +++ b/packages/grafana-ui/.storybook/storybookTheme.ts @@ -1,7 +1,7 @@ import { GrafanaTheme2, createTheme } from '@grafana/data'; //@ts-ignore import { create } from '@storybook/theming'; -import '../src/components/Icon/iconBundle'; +import '../../../public/app/core/icons/iconBundle'; const createStorybookTheme = (theme: GrafanaTheme2) => { return create({ diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 49f17edc377..f1c23547a80 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -177,10 +177,10 @@ "react-test-renderer": "18.2.0", "rimraf": "5.0.1", "rollup": "2.79.1", + "rollup-plugin-copy": "3.5.0", "rollup-plugin-dts": "^5.0.0", "rollup-plugin-esbuild": "5.0.0", "rollup-plugin-node-externals": "^5.0.0", - "rollup-plugin-svg-import": "^1.6.0", "sass-loader": "13.3.2", "storybook": "7.4.5", "storybook-addon-turbo-build": "2.0.1", diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts index 0e80f437449..3659a42c58b 100644 --- a/packages/grafana-ui/rollup.config.ts +++ b/packages/grafana-ui/rollup.config.ts @@ -1,16 +1,30 @@ import resolve from '@rollup/plugin-node-resolve'; import path from 'path'; +import copy from 'rollup-plugin-copy'; import dts from 'rollup-plugin-dts'; import esbuild from 'rollup-plugin-esbuild'; import { externals } from 'rollup-plugin-node-externals'; -import svg from 'rollup-plugin-svg-import'; + +const icons = require('../../public/app/core/icons/cached.json'); const pkg = require('./package.json'); +const iconSrcPaths = icons.map((iconSubPath) => { + return `../../public/img/icons/${iconSubPath}.svg`; +}); + export default [ { input: 'src/index.ts', - plugins: [externals({ deps: true, packagePath: './package.json' }), resolve(), svg({ stringify: true }), esbuild()], + plugins: [ + externals({ deps: true, packagePath: './package.json' }), + resolve(), + copy({ + targets: [{ src: iconSrcPaths, dest: './dist/public/' }], + flatten: false, + }), + esbuild(), + ], output: [ { format: 'cjs', diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx index b8ee928a1ae..76f65a3b726 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx @@ -6,9 +6,8 @@ import { default as ReactAsyncSelect } from 'react-select/async'; import Creatable from 'react-select/creatable'; // Components -import { SelectableValue } from '@grafana/data'; +import { SelectableValue, ThemeContext } from '@grafana/data'; -import { ThemeContext } from '../../../../themes'; import { CustomScrollbar } from '../../../CustomScrollbar/CustomScrollbar'; import { SelectOptionGroup } from '../../../Select/SelectOptionGroup'; import { SingleValue } from '../../../Select/SingleValue'; diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index 48f75cbb11a..ab1feb1c055 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -7,8 +7,7 @@ import { GrafanaTheme2, isIconName } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; import { IconName, IconType, IconSize } from '../../types/icon'; -import { cacheInitialized, initIconCache, iconRoot } from './iconBundle'; -import { getIconSubDir, getSvgSize } from './utils'; +import { getIconRoot, getIconSubDir, getSvgSize } from './utils'; export interface IconProps extends React.HTMLAttributes { name: IconName; @@ -45,10 +44,6 @@ export const Icon = React.forwardRef( return ; } - if (!cacheInitialized) { - initIconCache(); - } - if (!isIconName(name)) { console.warn('Icon component passed an invalid icon name', name); } @@ -57,6 +52,7 @@ export const Icon = React.forwardRef( return
invalid icon name
; } + const iconRoot = getIconRoot(); const svgSize = getSvgSize(size); const svgHgt = svgSize; const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize; diff --git a/packages/grafana-ui/src/components/Icon/iconBundle.ts b/packages/grafana-ui/src/components/Icon/iconBundle.ts deleted file mode 100644 index 18c6499f9c9..00000000000 --- a/packages/grafana-ui/src/components/Icon/iconBundle.ts +++ /dev/null @@ -1,378 +0,0 @@ -/* eslint-disable import/order */ -// DO NOT EDIT THIS FILE -// This file is automatically generated (do not edit it here) -// see @grafana/ui/scripts/generate-icon-bundle.js - -import { cacheStore } from 'react-inlinesvg'; - -// do not edit this list directly -// the list of icons live here: @grafana/ui/components/Icon/cached.json -import u1000 from '../../../../../public/img/icons/unicons/at.svg'; -import u1001 from '../../../../../public/img/icons/unicons/adjust-circle.svg'; -import u1002 from '../../../../../public/img/icons/unicons/align-left.svg'; -import u1003 from '../../../../../public/img/icons/unicons/align-right.svg'; -import u1004 from '../../../../../public/img/icons/unicons/angle-double-down.svg'; -import u1005 from '../../../../../public/img/icons/unicons/angle-double-right.svg'; -import u1006 from '../../../../../public/img/icons/unicons/angle-down.svg'; -import u1007 from '../../../../../public/img/icons/unicons/angle-left.svg'; -import u1008 from '../../../../../public/img/icons/unicons/angle-right.svg'; -import u1009 from '../../../../../public/img/icons/unicons/angle-up.svg'; -import u1010 from '../../../../../public/img/icons/unicons/apps.svg'; -import u1011 from '../../../../../public/img/icons/unicons/arrow.svg'; -import u1012 from '../../../../../public/img/icons/unicons/arrow-down.svg'; -import u1013 from '../../../../../public/img/icons/unicons/arrow-from-right.svg'; -import u1014 from '../../../../../public/img/icons/unicons/arrow-left.svg'; -import u1015 from '../../../../../public/img/icons/unicons/arrow-random.svg'; -import u1016 from '../../../../../public/img/icons/unicons/arrow-right.svg'; -import u1017 from '../../../../../public/img/icons/unicons/arrow-to-right.svg'; -import u1018 from '../../../../../public/img/icons/unicons/arrow-up.svg'; -import u1019 from '../../../../../public/img/icons/unicons/arrows-h.svg'; -import u1020 from '../../../../../public/img/icons/unicons/backward.svg'; -import u1021 from '../../../../../public/img/icons/unicons/bars.svg'; -import u1022 from '../../../../../public/img/icons/unicons/bell.svg'; -import u1023 from '../../../../../public/img/icons/unicons/bell-slash.svg'; -import u1024 from '../../../../../public/img/icons/unicons/bolt.svg'; -import u1025 from '../../../../../public/img/icons/unicons/book.svg'; -import u1026 from '../../../../../public/img/icons/unicons/book-open.svg'; -import u1027 from '../../../../../public/img/icons/unicons/brackets-curly.svg'; -import u1028 from '../../../../../public/img/icons/unicons/bug.svg'; -import u1029 from '../../../../../public/img/icons/unicons/building.svg'; -import u1030 from '../../../../../public/img/icons/unicons/calculator-alt.svg'; -import u1031 from '../../../../../public/img/icons/unicons/calendar-alt.svg'; -import u1032 from '../../../../../public/img/icons/unicons/calendar-slash.svg'; -import u1033 from '../../../../../public/img/icons/unicons/camera.svg'; -import u1034 from '../../../../../public/img/icons/unicons/channel-add.svg'; -import u1035 from '../../../../../public/img/icons/unicons/chart-line.svg'; -import u1036 from '../../../../../public/img/icons/unicons/check.svg'; -import u1037 from '../../../../../public/img/icons/unicons/check-circle.svg'; -import u1038 from '../../../../../public/img/icons/unicons/circle.svg'; -import u1039 from '../../../../../public/img/icons/unicons/clipboard-alt.svg'; -import u1040 from '../../../../../public/img/icons/unicons/clock-nine.svg'; -import u1041 from '../../../../../public/img/icons/unicons/cloud.svg'; -import u1042 from '../../../../../public/img/icons/unicons/cloud-download.svg'; -import u1043 from '../../../../../public/img/icons/unicons/code-branch.svg'; -import u1044 from '../../../../../public/img/icons/unicons/cog.svg'; -import u1045 from '../../../../../public/img/icons/unicons/columns.svg'; -import u1046 from '../../../../../public/img/icons/unicons/comment-alt.svg'; -import u1047 from '../../../../../public/img/icons/unicons/comment-alt-share.svg'; -import u1048 from '../../../../../public/img/icons/unicons/comments-alt.svg'; -import u1049 from '../../../../../public/img/icons/unicons/compass.svg'; -import u1050 from '../../../../../public/img/icons/unicons/copy.svg'; -import u1051 from '../../../../../public/img/icons/unicons/corner-down-right-alt.svg'; -import u1052 from '../../../../../public/img/icons/unicons/cube.svg'; -import u1053 from '../../../../../public/img/icons/unicons/dashboard.svg'; -import u1054 from '../../../../../public/img/icons/unicons/database.svg'; -import u1055 from '../../../../../public/img/icons/unicons/document-info.svg'; -import u1056 from '../../../../../public/img/icons/unicons/download-alt.svg'; -import u1057 from '../../../../../public/img/icons/unicons/draggabledots.svg'; -import u1058 from '../../../../../public/img/icons/unicons/edit.svg'; -import u1059 from '../../../../../public/img/icons/unicons/ellipsis-v.svg'; -import u1060 from '../../../../../public/img/icons/unicons/ellipsis-h.svg'; -import u1061 from '../../../../../public/img/icons/unicons/envelope.svg'; -import u1062 from '../../../../../public/img/icons/unicons/exchange-alt.svg'; -import u1063 from '../../../../../public/img/icons/unicons/exclamation-circle.svg'; -import u1064 from '../../../../../public/img/icons/unicons/exclamation-triangle.svg'; -import u1065 from '../../../../../public/img/icons/unicons/external-link-alt.svg'; -import u1066 from '../../../../../public/img/icons/unicons/eye.svg'; -import u1067 from '../../../../../public/img/icons/unicons/eye-slash.svg'; -import u1068 from '../../../../../public/img/icons/unicons/file-alt.svg'; -import u1069 from '../../../../../public/img/icons/unicons/file-blank.svg'; -import u1070 from '../../../../../public/img/icons/unicons/filter.svg'; -import u1071 from '../../../../../public/img/icons/unicons/folder.svg'; -import u1072 from '../../../../../public/img/icons/unicons/folder-open.svg'; -import u1073 from '../../../../../public/img/icons/unicons/folder-plus.svg'; -import u1074 from '../../../../../public/img/icons/unicons/folder-upload.svg'; -import u1075 from '../../../../../public/img/icons/unicons/forward.svg'; -import u1076 from '../../../../../public/img/icons/unicons/graph-bar.svg'; -import u1077 from '../../../../../public/img/icons/unicons/history.svg'; -import u1078 from '../../../../../public/img/icons/unicons/history-alt.svg'; -import u1079 from '../../../../../public/img/icons/unicons/home-alt.svg'; -import u1080 from '../../../../../public/img/icons/unicons/import.svg'; -import u1081 from '../../../../../public/img/icons/unicons/info.svg'; -import u1082 from '../../../../../public/img/icons/unicons/info-circle.svg'; -import u1083 from '../../../../../public/img/icons/unicons/k6.svg'; -import u1084 from '../../../../../public/img/icons/unicons/key-skeleton-alt.svg'; -import u1085 from '../../../../../public/img/icons/unicons/keyboard.svg'; -import u1086 from '../../../../../public/img/icons/unicons/link.svg'; -import u1087 from '../../../../../public/img/icons/unicons/list-ul.svg'; -import u1088 from '../../../../../public/img/icons/unicons/lock.svg'; -import u1089 from '../../../../../public/img/icons/unicons/minus.svg'; -import u1090 from '../../../../../public/img/icons/unicons/minus-circle.svg'; -import u1091 from '../../../../../public/img/icons/unicons/mobile-android.svg'; -import u1092 from '../../../../../public/img/icons/unicons/monitor.svg'; -import u1093 from '../../../../../public/img/icons/unicons/pause.svg'; -import u1094 from '../../../../../public/img/icons/unicons/pen.svg'; -import u1095 from '../../../../../public/img/icons/unicons/play.svg'; -import u1096 from '../../../../../public/img/icons/unicons/plug.svg'; -import u1097 from '../../../../../public/img/icons/unicons/plus.svg'; -import u1098 from '../../../../../public/img/icons/unicons/plus-circle.svg'; -import u1099 from '../../../../../public/img/icons/unicons/power.svg'; -import u1100 from '../../../../../public/img/icons/unicons/presentation-play.svg'; -import u1101 from '../../../../../public/img/icons/unicons/process.svg'; -import u1102 from '../../../../../public/img/icons/unicons/question-circle.svg'; -import u1103 from '../../../../../public/img/icons/unicons/repeat.svg'; -import u1104 from '../../../../../public/img/icons/unicons/rocket.svg'; -import u1105 from '../../../../../public/img/icons/unicons/rss.svg'; -import u1106 from '../../../../../public/img/icons/unicons/save.svg'; -import u1107 from '../../../../../public/img/icons/unicons/search.svg'; -import u1108 from '../../../../../public/img/icons/unicons/search-minus.svg'; -import u1109 from '../../../../../public/img/icons/unicons/search-plus.svg'; -import u1110 from '../../../../../public/img/icons/unicons/share-alt.svg'; -import u1111 from '../../../../../public/img/icons/unicons/shield.svg'; -import u1112 from '../../../../../public/img/icons/unicons/signal.svg'; -import u1113 from '../../../../../public/img/icons/unicons/signin.svg'; -import u1114 from '../../../../../public/img/icons/unicons/signout.svg'; -import u1115 from '../../../../../public/img/icons/unicons/sitemap.svg'; -import u1116 from '../../../../../public/img/icons/unicons/slack.svg'; -import u1117 from '../../../../../public/img/icons/unicons/sliders-v-alt.svg'; -import u1118 from '../../../../../public/img/icons/unicons/sort-amount-down.svg'; -import u1119 from '../../../../../public/img/icons/unicons/sort-amount-up.svg'; -import u1120 from '../../../../../public/img/icons/unicons/square-shape.svg'; -import u1121 from '../../../../../public/img/icons/unicons/star.svg'; -import u1122 from '../../../../../public/img/icons/unicons/step-backward.svg'; -import u1123 from '../../../../../public/img/icons/unicons/sync.svg'; -import u1124 from '../../../../../public/img/icons/unicons/stopwatch.svg'; -import u1125 from '../../../../../public/img/icons/unicons/table.svg'; -import u1126 from '../../../../../public/img/icons/unicons/tag-alt.svg'; -import u1127 from '../../../../../public/img/icons/unicons/times.svg'; -import u1128 from '../../../../../public/img/icons/unicons/trash-alt.svg'; -import u1129 from '../../../../../public/img/icons/unicons/unlock.svg'; -import u1130 from '../../../../../public/img/icons/unicons/upload.svg'; -import u1131 from '../../../../../public/img/icons/unicons/user.svg'; -import u1132 from '../../../../../public/img/icons/unicons/users-alt.svg'; -import u1133 from '../../../../../public/img/icons/unicons/wrap-text.svg'; -import u1134 from '../../../../../public/img/icons/unicons/cloud-upload.svg'; -import u1135 from '../../../../../public/img/icons/unicons/credit-card.svg'; -import u1136 from '../../../../../public/img/icons/unicons/file-copy-alt.svg'; -import u1137 from '../../../../../public/img/icons/unicons/fire.svg'; -import u1138 from '../../../../../public/img/icons/unicons/hourglass.svg'; -import u1139 from '../../../../../public/img/icons/unicons/layer-group.svg'; -import u1140 from '../../../../../public/img/icons/unicons/layers-alt.svg'; -import u1141 from '../../../../../public/img/icons/unicons/line-alt.svg'; -import u1142 from '../../../../../public/img/icons/unicons/list-ui-alt.svg'; -import u1143 from '../../../../../public/img/icons/unicons/message.svg'; -import u1144 from '../../../../../public/img/icons/unicons/palette.svg'; -import u1145 from '../../../../../public/img/icons/unicons/percentage.svg'; -import u1146 from '../../../../../public/img/icons/unicons/shield-exclamation.svg'; -import u1147 from '../../../../../public/img/icons/unicons/plus-square.svg'; -import u1148 from '../../../../../public/img/icons/unicons/x.svg'; -import u1149 from '../../../../../public/img/icons/unicons/capture.svg'; -import u1150 from '../../../../../public/img/icons/custom/gf-grid.svg'; -import u1151 from '../../../../../public/img/icons/custom/gf-landscape.svg'; -import u1152 from '../../../../../public/img/icons/custom/gf-layout-simple.svg'; -import u1153 from '../../../../../public/img/icons/custom/gf-portrait.svg'; -import u1154 from '../../../../../public/img/icons/custom/gf-show-context.svg'; -import u1155 from '../../../../../public/img/icons/custom/gf-bar-alignment-after.svg'; -import u1156 from '../../../../../public/img/icons/custom/gf-bar-alignment-before.svg'; -import u1157 from '../../../../../public/img/icons/custom/gf-bar-alignment-center.svg'; -import u1158 from '../../../../../public/img/icons/custom/gf-interpolation-linear.svg'; -import u1159 from '../../../../../public/img/icons/custom/gf-interpolation-smooth.svg'; -import u1160 from '../../../../../public/img/icons/custom/gf-interpolation-step-after.svg'; -import u1161 from '../../../../../public/img/icons/custom/gf-interpolation-step-before.svg'; -import u1162 from '../../../../../public/img/icons/custom/gf-logs.svg'; -import u1163 from '../../../../../public/img/icons/custom/gf-movepane-left.svg'; -import u1164 from '../../../../../public/img/icons/custom/gf-movepane-right.svg'; -import u1165 from '../../../../../public/img/icons/mono/favorite.svg'; -import u1166 from '../../../../../public/img/icons/mono/grafana.svg'; -import u1167 from '../../../../../public/img/icons/mono/heart.svg'; -import u1168 from '../../../../../public/img/icons/mono/heart-break.svg'; -import u1169 from '../../../../../public/img/icons/mono/panel-add.svg'; -import u1170 from '../../../../../public/img/icons/mono/library-panel.svg'; -import u1171 from '../../../../../public/img/icons/unicons/record-audio.svg'; -// do not edit this list directly -// the list of icons live here: @grafana/ui/components/Icon/cached.json - -export let cacheInitialized = false; -export let iconRoot = 'public/img/icons/'; - -export function cacheItem(content: string, path: string) { - cacheStore[iconRoot + path] = { content, status: 'loaded' }; -} - -export function initIconCache() { - cacheInitialized = true; - - // 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 = typeof window !== 'undefined' && window.__grafana_public_path__; - if (grafanaPublicPath) { - iconRoot = grafanaPublicPath + 'img/icons/'; - } - - // do not edit this list directly - // the list of icons live here: @grafana/ui/components/Icon/cached.json - cacheItem(u1000, 'unicons/at.svg'); - cacheItem(u1001, 'unicons/adjust-circle.svg'); - cacheItem(u1002, 'unicons/align-left.svg'); - cacheItem(u1003, 'unicons/align-right.svg'); - cacheItem(u1004, 'unicons/angle-double-down.svg'); - cacheItem(u1005, 'unicons/angle-double-right.svg'); - cacheItem(u1006, 'unicons/angle-down.svg'); - cacheItem(u1007, 'unicons/angle-left.svg'); - cacheItem(u1008, 'unicons/angle-right.svg'); - cacheItem(u1009, 'unicons/angle-up.svg'); - cacheItem(u1010, 'unicons/apps.svg'); - cacheItem(u1011, 'unicons/arrow.svg'); - cacheItem(u1012, 'unicons/arrow-down.svg'); - cacheItem(u1013, 'unicons/arrow-from-right.svg'); - cacheItem(u1014, 'unicons/arrow-left.svg'); - cacheItem(u1015, 'unicons/arrow-random.svg'); - cacheItem(u1016, 'unicons/arrow-right.svg'); - cacheItem(u1017, 'unicons/arrow-to-right.svg'); - cacheItem(u1018, 'unicons/arrow-up.svg'); - cacheItem(u1019, 'unicons/arrows-h.svg'); - cacheItem(u1020, 'unicons/backward.svg'); - cacheItem(u1021, 'unicons/bars.svg'); - cacheItem(u1022, 'unicons/bell.svg'); - cacheItem(u1023, 'unicons/bell-slash.svg'); - cacheItem(u1024, 'unicons/bolt.svg'); - cacheItem(u1025, 'unicons/book.svg'); - cacheItem(u1026, 'unicons/book-open.svg'); - cacheItem(u1027, 'unicons/brackets-curly.svg'); - cacheItem(u1028, 'unicons/bug.svg'); - cacheItem(u1029, 'unicons/building.svg'); - cacheItem(u1030, 'unicons/calculator-alt.svg'); - cacheItem(u1031, 'unicons/calendar-alt.svg'); - cacheItem(u1032, 'unicons/calendar-slash.svg'); - cacheItem(u1033, 'unicons/camera.svg'); - cacheItem(u1034, 'unicons/channel-add.svg'); - cacheItem(u1035, 'unicons/chart-line.svg'); - cacheItem(u1036, 'unicons/check.svg'); - cacheItem(u1037, 'unicons/check-circle.svg'); - cacheItem(u1038, 'unicons/circle.svg'); - cacheItem(u1039, 'unicons/clipboard-alt.svg'); - cacheItem(u1040, 'unicons/clock-nine.svg'); - cacheItem(u1041, 'unicons/cloud.svg'); - cacheItem(u1042, 'unicons/cloud-download.svg'); - cacheItem(u1043, 'unicons/code-branch.svg'); - cacheItem(u1044, 'unicons/cog.svg'); - cacheItem(u1045, 'unicons/columns.svg'); - cacheItem(u1046, 'unicons/comment-alt.svg'); - cacheItem(u1047, 'unicons/comment-alt-share.svg'); - cacheItem(u1048, 'unicons/comments-alt.svg'); - cacheItem(u1049, 'unicons/compass.svg'); - cacheItem(u1050, 'unicons/copy.svg'); - cacheItem(u1051, 'unicons/corner-down-right-alt.svg'); - cacheItem(u1052, 'unicons/cube.svg'); - cacheItem(u1053, 'unicons/dashboard.svg'); - cacheItem(u1054, 'unicons/database.svg'); - cacheItem(u1055, 'unicons/document-info.svg'); - cacheItem(u1056, 'unicons/download-alt.svg'); - cacheItem(u1057, 'unicons/draggabledots.svg'); - cacheItem(u1058, 'unicons/edit.svg'); - cacheItem(u1059, 'unicons/ellipsis-v.svg'); - cacheItem(u1060, 'unicons/ellipsis-h.svg'); - cacheItem(u1061, 'unicons/envelope.svg'); - cacheItem(u1062, 'unicons/exchange-alt.svg'); - cacheItem(u1063, 'unicons/exclamation-circle.svg'); - cacheItem(u1064, 'unicons/exclamation-triangle.svg'); - cacheItem(u1065, 'unicons/external-link-alt.svg'); - cacheItem(u1066, 'unicons/eye.svg'); - cacheItem(u1067, 'unicons/eye-slash.svg'); - cacheItem(u1068, 'unicons/file-alt.svg'); - cacheItem(u1069, 'unicons/file-blank.svg'); - cacheItem(u1070, 'unicons/filter.svg'); - cacheItem(u1071, 'unicons/folder.svg'); - cacheItem(u1072, 'unicons/folder-open.svg'); - cacheItem(u1073, 'unicons/folder-plus.svg'); - cacheItem(u1074, 'unicons/folder-upload.svg'); - cacheItem(u1075, 'unicons/forward.svg'); - cacheItem(u1076, 'unicons/graph-bar.svg'); - cacheItem(u1077, 'unicons/history.svg'); - cacheItem(u1078, 'unicons/history-alt.svg'); - cacheItem(u1079, 'unicons/home-alt.svg'); - cacheItem(u1080, 'unicons/import.svg'); - cacheItem(u1081, 'unicons/info.svg'); - cacheItem(u1082, 'unicons/info-circle.svg'); - cacheItem(u1083, 'unicons/k6.svg'); - cacheItem(u1084, 'unicons/key-skeleton-alt.svg'); - cacheItem(u1085, 'unicons/keyboard.svg'); - cacheItem(u1086, 'unicons/link.svg'); - cacheItem(u1087, 'unicons/list-ul.svg'); - cacheItem(u1088, 'unicons/lock.svg'); - cacheItem(u1089, 'unicons/minus.svg'); - cacheItem(u1090, 'unicons/minus-circle.svg'); - cacheItem(u1091, 'unicons/mobile-android.svg'); - cacheItem(u1092, 'unicons/monitor.svg'); - cacheItem(u1093, 'unicons/pause.svg'); - cacheItem(u1094, 'unicons/pen.svg'); - cacheItem(u1095, 'unicons/play.svg'); - cacheItem(u1096, 'unicons/plug.svg'); - cacheItem(u1097, 'unicons/plus.svg'); - cacheItem(u1098, 'unicons/plus-circle.svg'); - cacheItem(u1099, 'unicons/power.svg'); - cacheItem(u1100, 'unicons/presentation-play.svg'); - cacheItem(u1101, 'unicons/process.svg'); - cacheItem(u1102, 'unicons/question-circle.svg'); - cacheItem(u1103, 'unicons/repeat.svg'); - cacheItem(u1104, 'unicons/rocket.svg'); - cacheItem(u1105, 'unicons/rss.svg'); - cacheItem(u1106, 'unicons/save.svg'); - cacheItem(u1107, 'unicons/search.svg'); - cacheItem(u1108, 'unicons/search-minus.svg'); - cacheItem(u1109, 'unicons/search-plus.svg'); - cacheItem(u1110, 'unicons/share-alt.svg'); - cacheItem(u1111, 'unicons/shield.svg'); - cacheItem(u1112, 'unicons/signal.svg'); - cacheItem(u1113, 'unicons/signin.svg'); - cacheItem(u1114, 'unicons/signout.svg'); - cacheItem(u1115, 'unicons/sitemap.svg'); - cacheItem(u1116, 'unicons/slack.svg'); - cacheItem(u1117, 'unicons/sliders-v-alt.svg'); - cacheItem(u1118, 'unicons/sort-amount-down.svg'); - cacheItem(u1119, 'unicons/sort-amount-up.svg'); - cacheItem(u1120, 'unicons/square-shape.svg'); - cacheItem(u1121, 'unicons/star.svg'); - cacheItem(u1122, 'unicons/step-backward.svg'); - cacheItem(u1123, 'unicons/sync.svg'); - cacheItem(u1124, 'unicons/stopwatch.svg'); - cacheItem(u1125, 'unicons/table.svg'); - cacheItem(u1126, 'unicons/tag-alt.svg'); - cacheItem(u1127, 'unicons/times.svg'); - cacheItem(u1128, 'unicons/trash-alt.svg'); - cacheItem(u1129, 'unicons/unlock.svg'); - cacheItem(u1130, 'unicons/upload.svg'); - cacheItem(u1131, 'unicons/user.svg'); - cacheItem(u1132, 'unicons/users-alt.svg'); - cacheItem(u1133, 'unicons/wrap-text.svg'); - cacheItem(u1134, 'unicons/cloud-upload.svg'); - cacheItem(u1135, 'unicons/credit-card.svg'); - cacheItem(u1136, 'unicons/file-copy-alt.svg'); - cacheItem(u1137, 'unicons/fire.svg'); - cacheItem(u1138, 'unicons/hourglass.svg'); - cacheItem(u1139, 'unicons/layer-group.svg'); - cacheItem(u1140, 'unicons/layers-alt.svg'); - cacheItem(u1141, 'unicons/line-alt.svg'); - cacheItem(u1142, 'unicons/list-ui-alt.svg'); - cacheItem(u1143, 'unicons/message.svg'); - cacheItem(u1144, 'unicons/palette.svg'); - cacheItem(u1145, 'unicons/percentage.svg'); - cacheItem(u1146, 'unicons/shield-exclamation.svg'); - cacheItem(u1147, 'unicons/plus-square.svg'); - cacheItem(u1148, 'unicons/x.svg'); - cacheItem(u1149, 'unicons/capture.svg'); - cacheItem(u1150, 'custom/gf-grid.svg'); - cacheItem(u1151, 'custom/gf-landscape.svg'); - cacheItem(u1152, 'custom/gf-layout-simple.svg'); - cacheItem(u1153, 'custom/gf-portrait.svg'); - cacheItem(u1154, 'custom/gf-show-context.svg'); - cacheItem(u1155, 'custom/gf-bar-alignment-after.svg'); - cacheItem(u1156, 'custom/gf-bar-alignment-before.svg'); - cacheItem(u1157, 'custom/gf-bar-alignment-center.svg'); - cacheItem(u1158, 'custom/gf-interpolation-linear.svg'); - cacheItem(u1159, 'custom/gf-interpolation-smooth.svg'); - cacheItem(u1160, 'custom/gf-interpolation-step-after.svg'); - cacheItem(u1161, 'custom/gf-interpolation-step-before.svg'); - cacheItem(u1162, 'custom/gf-logs.svg'); - cacheItem(u1163, 'custom/gf-movepane-left.svg'); - cacheItem(u1164, 'custom/gf-movepane-right.svg'); - cacheItem(u1165, 'mono/favorite.svg'); - cacheItem(u1166, 'mono/grafana.svg'); - cacheItem(u1167, 'mono/heart.svg'); - cacheItem(u1168, 'mono/heart-break.svg'); - cacheItem(u1169, 'mono/panel-add.svg'); - cacheItem(u1170, 'mono/library-panel.svg'); - cacheItem(u1171, 'unicons/record-audio.svg'); - // do not edit this list directly - // the list of icons live here: @grafana/ui/components/Icon/cached.json -} diff --git a/packages/grafana-ui/src/components/Icon/utils.test.ts b/packages/grafana-ui/src/components/Icon/utils.test.ts index 493cf1505bd..2898856086e 100644 --- a/packages/grafana-ui/src/components/Icon/utils.test.ts +++ b/packages/grafana-ui/src/components/Icon/utils.test.ts @@ -15,4 +15,35 @@ describe('Icon utils', () => { expect(iconSubDir).toEqual(expected); }); }); + + describe('getIconRoot', () => { + beforeEach(() => { + // will reset the iconRoot cached value + jest.resetModules(); + }); + + describe('when public path is configured', () => { + beforeAll(() => { + //@ts-ignore + window.__grafana_public_path__ = 'somepath/public/'; + }); + + it('should return icon root based on __grafana_public_path__', () => { + const { getIconRoot } = require('./utils'); + expect(getIconRoot()).toEqual('somepath/public/img/icons/'); + }); + }); + + describe('when public path is not configured', () => { + beforeAll(() => { + //@ts-ignore + window.__grafana_public_path__ = undefined; + }); + + it('should return default icon root', () => { + const { getIconRoot } = require('./utils'); + expect(getIconRoot()).toEqual('public/img/icons/'); + }); + }); + }); }); diff --git a/packages/grafana-ui/src/components/Icon/utils.ts b/packages/grafana-ui/src/components/Icon/utils.ts index d31311a54d5..0d379f36c7a 100644 --- a/packages/grafana-ui/src/components/Icon/utils.ts +++ b/packages/grafana-ui/src/components/Icon/utils.ts @@ -43,3 +43,20 @@ export function getSvgSize(size: IconSize) { return 48; } } + +let iconRoot: string | undefined; + +export function getIconRoot(): string { + if (iconRoot) { + return iconRoot; + } + + const grafanaPublicPath = typeof window !== 'undefined' && window.__grafana_public_path__; + if (grafanaPublicPath) { + iconRoot = grafanaPublicPath + 'img/icons/'; + } else { + iconRoot = 'public/img/icons/'; + } + + return iconRoot; +} diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx index 5e38bd3c26e..a6db1ce5fc3 100644 --- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx @@ -1,47 +1,34 @@ -import MonacoEditor, { loader as monacoEditorLoader, useMonaco } from '@monaco-editor/react'; -import React, { useEffect } from 'react'; +import MonacoEditor, { loader as monacoEditorLoader, Monaco } from '@monaco-editor/react'; +import React, { useCallback } from 'react'; import { useTheme2 } from '../../themes'; import defineThemes from './theme'; import type { ReactMonacoEditorProps } from './types'; -let initalized = false; -function initMonaco() { - if (initalized) { - return; - } - - monacoEditorLoader.config({ - paths: { - vs: (window.__grafana_public_path__ ?? 'public/') + 'lib/monaco/min/vs', - }, - }); - initalized = true; - monacoEditorLoader.init().then((monaco) => { - // this call makes sure the themes exist. - // they will not have the correct colors, - // but we need them to exist since the beginning, - // because if we start a monaco instance with - // a theme that does not exist, it will not work well. - defineThemes(monaco); - }); -} +monacoEditorLoader.config({ + paths: { + vs: (window.__grafana_public_path__ ?? 'public/') + 'lib/monaco/min/vs', + }, +}); export const ReactMonacoEditor = (props: ReactMonacoEditorProps) => { + const { beforeMount } = props; + const theme = useTheme2(); - const monaco = useMonaco(); - - useEffect(() => { - // monaco can be null or undefined at the beginning, because it is loaded in asynchronously - if (monaco != null) { + const onMonacoBeforeMount = useCallback( + (monaco: Monaco) => { defineThemes(monaco, theme); - } - }, [monaco, theme]); + beforeMount?.(monaco); + }, + [beforeMount, theme] + ); - initMonaco(); - - const monacoTheme = theme.isDark ? 'grafana-dark' : 'grafana-light'; - - return ; + return ( + + ); }; diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx index 44e24336e12..63f4ed4a10e 100644 --- a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx +++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx @@ -3,7 +3,8 @@ import React, { createRef, PureComponent } from 'react'; import ReactDOM from 'react-dom'; import { FixedSizeList } from 'react-window'; -import { ThemeContext } from '../../themes/ThemeContext'; +import { ThemeContext } from '@grafana/data'; + import { CompletionItem, CompletionItemGroup, CompletionItemKind } from '../../types/completion'; import { flattenGroupItems, calculateLongestLabel, calculateListSizes } from '../../utils/typeahead'; diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx index 7c1f532b9f3..5a953458698 100644 --- a/packages/grafana-ui/src/themes/ThemeContext.tsx +++ b/packages/grafana-ui/src/themes/ThemeContext.tsx @@ -2,7 +2,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import memoize from 'micro-memoize'; import React, { useContext } from 'react'; -import { createTheme, GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; +import { GrafanaTheme, GrafanaTheme2, ThemeContext } from '@grafana/data'; import { Themeable, Themeable2 } from '../types/theme'; @@ -19,12 +19,6 @@ let ThemeContextMock: React.Context | null = null; // Used by useStyles() export const memoizedStyleCreators = new WeakMap(); -// Use Grafana Dark theme by default -/** @public */ -export const ThemeContext = React.createContext(createTheme()); - -ThemeContext.displayName = 'ThemeContext'; - /** @deprecated use withTheme2 */ /** @public */ export const withTheme =

(Component: React.ComponentType

) => { diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts index 4be9327ffb6..31d4208cf8a 100644 --- a/packages/grafana-ui/src/themes/index.ts +++ b/packages/grafana-ui/src/themes/index.ts @@ -1,13 +1,7 @@ -export { - ThemeContext, - withTheme, - withTheme2, - useTheme, - useTheme2, - useStyles, - useStyles2, - mockThemeContext, -} from './ThemeContext'; +// @deprecated use ThemeContext from @grafana/data instead +export { ThemeContext } from '@grafana/data'; + +export { withTheme, withTheme2, useTheme, useTheme2, useStyles, useStyles2, mockThemeContext } from './ThemeContext'; export { getTheme, mockTheme } from './getTheme'; export { stylesFactory } from './stylesFactory'; export { GlobalStyles } from './GlobalStyles/GlobalStyles'; diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx index 9c1d14c00d1..d16bc699298 100644 --- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx +++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx @@ -2,10 +2,9 @@ import { DecoratorFn } from '@storybook/react'; import React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; -import { createTheme, GrafanaTheme2 } from '@grafana/data'; +import { createTheme, GrafanaTheme2, ThemeContext } from '@grafana/data'; import { GlobalStyles } from '../../themes/GlobalStyles/GlobalStyles'; -import { ThemeContext } from '../../themes/ThemeContext'; type SassThemeChangeHandler = (theme: GrafanaTheme2) => void; const ThemeableStory = ({ diff --git a/public/app/app.ts b/public/app/app.ts index 97bff0eb9cc..b910cf67af5 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -52,6 +52,7 @@ import { AppChromeService } from './core/components/AppChrome/AppChromeService'; import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/OptionsUI/registry'; import { PluginPage } from './core/components/Page/PluginPage'; import { GrafanaContextType } from './core/context/GrafanaContext'; +import { initIconCache } from './core/icons/iconBundle'; import { initializeI18n } from './core/internationalization'; import { interceptLinkClicks } from './core/navigation/patch/interceptLinkClicks'; import { ModalManager } from './core/services/ModalManager'; @@ -122,6 +123,7 @@ export class GrafanaApp { setBackendSrv(backendSrv); initEchoSrv(); + initIconCache(); // This needs to be done after the `initEchoSrv` since it is being used under the hood. startMeasure('frontend_app_init'); addClassIfNoOverlayScrollbar(); diff --git a/packages/grafana-ui/src/components/Icon/cached.json b/public/app/core/icons/cached.json similarity index 100% rename from packages/grafana-ui/src/components/Icon/cached.json rename to public/app/core/icons/cached.json diff --git a/public/app/core/icons/iconBundle.ts b/public/app/core/icons/iconBundle.ts new file mode 100644 index 00000000000..f493d0a71c2 --- /dev/null +++ b/public/app/core/icons/iconBundle.ts @@ -0,0 +1,389 @@ +/* eslint-disable import/order */ +// DO NOT EDIT THIS FILE +// This file is automatically generated (do not edit it here) +// see @grafana/ui/scripts/generate-icon-bundle.js + +import { cacheStore } from 'react-inlinesvg'; + +// do not edit this list directly +// the list of icons live here: @grafana/ui/components/Icon/cached.json +import u1000 from '../../../img/icons/unicons/at.svg'; +import u1001 from '../../../img/icons/unicons/adjust-circle.svg'; +import u1002 from '../../../img/icons/unicons/align-left.svg'; +import u1003 from '../../../img/icons/unicons/align-right.svg'; +import u1004 from '../../../img/icons/unicons/angle-double-down.svg'; +import u1005 from '../../../img/icons/unicons/angle-double-right.svg'; +import u1006 from '../../../img/icons/unicons/angle-down.svg'; +import u1007 from '../../../img/icons/unicons/angle-left.svg'; +import u1008 from '../../../img/icons/unicons/angle-right.svg'; +import u1009 from '../../../img/icons/unicons/angle-up.svg'; +import u1010 from '../../../img/icons/unicons/apps.svg'; +import u1011 from '../../../img/icons/unicons/arrow.svg'; +import u1012 from '../../../img/icons/unicons/arrow-down.svg'; +import u1013 from '../../../img/icons/unicons/arrow-from-right.svg'; +import u1014 from '../../../img/icons/unicons/arrow-left.svg'; +import u1015 from '../../../img/icons/unicons/arrow-random.svg'; +import u1016 from '../../../img/icons/unicons/arrow-right.svg'; +import u1017 from '../../../img/icons/unicons/arrow-to-right.svg'; +import u1018 from '../../../img/icons/unicons/arrow-up.svg'; +import u1019 from '../../../img/icons/unicons/arrows-h.svg'; +import u1020 from '../../../img/icons/unicons/backward.svg'; +import u1021 from '../../../img/icons/unicons/bars.svg'; +import u1022 from '../../../img/icons/unicons/bell.svg'; +import u1023 from '../../../img/icons/unicons/bell-slash.svg'; +import u1024 from '../../../img/icons/unicons/bolt.svg'; +import u1025 from '../../../img/icons/unicons/book.svg'; +import u1026 from '../../../img/icons/unicons/book-open.svg'; +import u1027 from '../../../img/icons/unicons/brackets-curly.svg'; +import u1028 from '../../../img/icons/unicons/bug.svg'; +import u1029 from '../../../img/icons/unicons/building.svg'; +import u1030 from '../../../img/icons/unicons/calculator-alt.svg'; +import u1031 from '../../../img/icons/unicons/calendar-alt.svg'; +import u1032 from '../../../img/icons/unicons/calendar-slash.svg'; +import u1033 from '../../../img/icons/unicons/camera.svg'; +import u1034 from '../../../img/icons/unicons/channel-add.svg'; +import u1035 from '../../../img/icons/unicons/chart-line.svg'; +import u1036 from '../../../img/icons/unicons/check.svg'; +import u1037 from '../../../img/icons/unicons/check-circle.svg'; +import u1038 from '../../../img/icons/unicons/circle.svg'; +import u1039 from '../../../img/icons/unicons/clipboard-alt.svg'; +import u1040 from '../../../img/icons/unicons/clock-nine.svg'; +import u1041 from '../../../img/icons/unicons/cloud.svg'; +import u1042 from '../../../img/icons/unicons/cloud-download.svg'; +import u1043 from '../../../img/icons/unicons/code-branch.svg'; +import u1044 from '../../../img/icons/unicons/cog.svg'; +import u1045 from '../../../img/icons/unicons/columns.svg'; +import u1046 from '../../../img/icons/unicons/comment-alt.svg'; +import u1047 from '../../../img/icons/unicons/comment-alt-share.svg'; +import u1048 from '../../../img/icons/unicons/comments-alt.svg'; +import u1049 from '../../../img/icons/unicons/compass.svg'; +import u1050 from '../../../img/icons/unicons/copy.svg'; +import u1051 from '../../../img/icons/unicons/corner-down-right-alt.svg'; +import u1052 from '../../../img/icons/unicons/cube.svg'; +import u1053 from '../../../img/icons/unicons/dashboard.svg'; +import u1054 from '../../../img/icons/unicons/database.svg'; +import u1055 from '../../../img/icons/unicons/document-info.svg'; +import u1056 from '../../../img/icons/unicons/download-alt.svg'; +import u1057 from '../../../img/icons/unicons/draggabledots.svg'; +import u1058 from '../../../img/icons/unicons/edit.svg'; +import u1059 from '../../../img/icons/unicons/ellipsis-v.svg'; +import u1060 from '../../../img/icons/unicons/ellipsis-h.svg'; +import u1061 from '../../../img/icons/unicons/envelope.svg'; +import u1062 from '../../../img/icons/unicons/exchange-alt.svg'; +import u1063 from '../../../img/icons/unicons/exclamation-circle.svg'; +import u1064 from '../../../img/icons/unicons/exclamation-triangle.svg'; +import u1065 from '../../../img/icons/unicons/external-link-alt.svg'; +import u1066 from '../../../img/icons/unicons/eye.svg'; +import u1067 from '../../../img/icons/unicons/eye-slash.svg'; +import u1068 from '../../../img/icons/unicons/file-alt.svg'; +import u1069 from '../../../img/icons/unicons/file-blank.svg'; +import u1070 from '../../../img/icons/unicons/filter.svg'; +import u1071 from '../../../img/icons/unicons/folder.svg'; +import u1072 from '../../../img/icons/unicons/folder-open.svg'; +import u1073 from '../../../img/icons/unicons/folder-plus.svg'; +import u1074 from '../../../img/icons/unicons/folder-upload.svg'; +import u1075 from '../../../img/icons/unicons/forward.svg'; +import u1076 from '../../../img/icons/unicons/graph-bar.svg'; +import u1077 from '../../../img/icons/unicons/history.svg'; +import u1078 from '../../../img/icons/unicons/history-alt.svg'; +import u1079 from '../../../img/icons/unicons/home-alt.svg'; +import u1080 from '../../../img/icons/unicons/import.svg'; +import u1081 from '../../../img/icons/unicons/info.svg'; +import u1082 from '../../../img/icons/unicons/info-circle.svg'; +import u1083 from '../../../img/icons/unicons/k6.svg'; +import u1084 from '../../../img/icons/unicons/key-skeleton-alt.svg'; +import u1085 from '../../../img/icons/unicons/keyboard.svg'; +import u1086 from '../../../img/icons/unicons/link.svg'; +import u1087 from '../../../img/icons/unicons/list-ul.svg'; +import u1088 from '../../../img/icons/unicons/lock.svg'; +import u1089 from '../../../img/icons/unicons/minus.svg'; +import u1090 from '../../../img/icons/unicons/minus-circle.svg'; +import u1091 from '../../../img/icons/unicons/mobile-android.svg'; +import u1092 from '../../../img/icons/unicons/monitor.svg'; +import u1093 from '../../../img/icons/unicons/pause.svg'; +import u1094 from '../../../img/icons/unicons/pen.svg'; +import u1095 from '../../../img/icons/unicons/play.svg'; +import u1096 from '../../../img/icons/unicons/plug.svg'; +import u1097 from '../../../img/icons/unicons/plus.svg'; +import u1098 from '../../../img/icons/unicons/plus-circle.svg'; +import u1099 from '../../../img/icons/unicons/power.svg'; +import u1100 from '../../../img/icons/unicons/presentation-play.svg'; +import u1101 from '../../../img/icons/unicons/process.svg'; +import u1102 from '../../../img/icons/unicons/question-circle.svg'; +import u1103 from '../../../img/icons/unicons/repeat.svg'; +import u1104 from '../../../img/icons/unicons/rocket.svg'; +import u1105 from '../../../img/icons/unicons/rss.svg'; +import u1106 from '../../../img/icons/unicons/save.svg'; +import u1107 from '../../../img/icons/unicons/search.svg'; +import u1108 from '../../../img/icons/unicons/search-minus.svg'; +import u1109 from '../../../img/icons/unicons/search-plus.svg'; +import u1110 from '../../../img/icons/unicons/share-alt.svg'; +import u1111 from '../../../img/icons/unicons/shield.svg'; +import u1112 from '../../../img/icons/unicons/signal.svg'; +import u1113 from '../../../img/icons/unicons/signin.svg'; +import u1114 from '../../../img/icons/unicons/signout.svg'; +import u1115 from '../../../img/icons/unicons/sitemap.svg'; +import u1116 from '../../../img/icons/unicons/slack.svg'; +import u1117 from '../../../img/icons/unicons/sliders-v-alt.svg'; +import u1118 from '../../../img/icons/unicons/sort-amount-down.svg'; +import u1119 from '../../../img/icons/unicons/sort-amount-up.svg'; +import u1120 from '../../../img/icons/unicons/square-shape.svg'; +import u1121 from '../../../img/icons/unicons/star.svg'; +import u1122 from '../../../img/icons/unicons/step-backward.svg'; +import u1123 from '../../../img/icons/unicons/sync.svg'; +import u1124 from '../../../img/icons/unicons/stopwatch.svg'; +import u1125 from '../../../img/icons/unicons/table.svg'; +import u1126 from '../../../img/icons/unicons/tag-alt.svg'; +import u1127 from '../../../img/icons/unicons/times.svg'; +import u1128 from '../../../img/icons/unicons/trash-alt.svg'; +import u1129 from '../../../img/icons/unicons/unlock.svg'; +import u1130 from '../../../img/icons/unicons/upload.svg'; +import u1131 from '../../../img/icons/unicons/user.svg'; +import u1132 from '../../../img/icons/unicons/users-alt.svg'; +import u1133 from '../../../img/icons/unicons/wrap-text.svg'; +import u1134 from '../../../img/icons/unicons/cloud-upload.svg'; +import u1135 from '../../../img/icons/unicons/credit-card.svg'; +import u1136 from '../../../img/icons/unicons/file-copy-alt.svg'; +import u1137 from '../../../img/icons/unicons/fire.svg'; +import u1138 from '../../../img/icons/unicons/hourglass.svg'; +import u1139 from '../../../img/icons/unicons/layer-group.svg'; +import u1140 from '../../../img/icons/unicons/layers-alt.svg'; +import u1141 from '../../../img/icons/unicons/line-alt.svg'; +import u1142 from '../../../img/icons/unicons/list-ui-alt.svg'; +import u1143 from '../../../img/icons/unicons/message.svg'; +import u1144 from '../../../img/icons/unicons/palette.svg'; +import u1145 from '../../../img/icons/unicons/percentage.svg'; +import u1146 from '../../../img/icons/unicons/shield-exclamation.svg'; +import u1147 from '../../../img/icons/unicons/plus-square.svg'; +import u1148 from '../../../img/icons/unicons/x.svg'; +import u1149 from '../../../img/icons/unicons/capture.svg'; +import u1150 from '../../../img/icons/custom/gf-grid.svg'; +import u1151 from '../../../img/icons/custom/gf-landscape.svg'; +import u1152 from '../../../img/icons/custom/gf-layout-simple.svg'; +import u1153 from '../../../img/icons/custom/gf-portrait.svg'; +import u1154 from '../../../img/icons/custom/gf-show-context.svg'; +import u1155 from '../../../img/icons/custom/gf-bar-alignment-after.svg'; +import u1156 from '../../../img/icons/custom/gf-bar-alignment-before.svg'; +import u1157 from '../../../img/icons/custom/gf-bar-alignment-center.svg'; +import u1158 from '../../../img/icons/custom/gf-interpolation-linear.svg'; +import u1159 from '../../../img/icons/custom/gf-interpolation-smooth.svg'; +import u1160 from '../../../img/icons/custom/gf-interpolation-step-after.svg'; +import u1161 from '../../../img/icons/custom/gf-interpolation-step-before.svg'; +import u1162 from '../../../img/icons/custom/gf-logs.svg'; +import u1163 from '../../../img/icons/custom/gf-movepane-left.svg'; +import u1164 from '../../../img/icons/custom/gf-movepane-right.svg'; +import u1165 from '../../../img/icons/mono/favorite.svg'; +import u1166 from '../../../img/icons/mono/grafana.svg'; +import u1167 from '../../../img/icons/mono/heart.svg'; +import u1168 from '../../../img/icons/mono/heart-break.svg'; +import u1169 from '../../../img/icons/mono/panel-add.svg'; +import u1170 from '../../../img/icons/mono/library-panel.svg'; +import u1171 from '../../../img/icons/unicons/record-audio.svg'; +// do not edit this list directly +// the list of icons live here: @grafana/ui/components/Icon/cached.json + +let cacheInitialized = false; + +function cacheItem(content: string, path: string) { + cacheStore[path] = { content, status: 'loaded' }; +} + +function createPathResolver() { + let root = 'public/img/icons/'; + + // 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 = typeof window !== 'undefined' && window.__grafana_public_path__; + if (grafanaPublicPath) { + root = grafanaPublicPath + 'img/icons/'; + } + + return (path: string) => { + return root + path; + }; +} + +export function initIconCache() { + if (cacheInitialized) { + return; + } + cacheInitialized = true; + const resolvePath = createPathResolver(); + + // do not edit this list directly + // the list of icons live here: @grafana/ui/components/Icon/cached.json + cacheItem(u1000, resolvePath('unicons/at.svg')); + cacheItem(u1001, resolvePath('unicons/adjust-circle.svg')); + cacheItem(u1002, resolvePath('unicons/align-left.svg')); + cacheItem(u1003, resolvePath('unicons/align-right.svg')); + cacheItem(u1004, resolvePath('unicons/angle-double-down.svg')); + cacheItem(u1005, resolvePath('unicons/angle-double-right.svg')); + cacheItem(u1006, resolvePath('unicons/angle-down.svg')); + cacheItem(u1007, resolvePath('unicons/angle-left.svg')); + cacheItem(u1008, resolvePath('unicons/angle-right.svg')); + cacheItem(u1009, resolvePath('unicons/angle-up.svg')); + cacheItem(u1010, resolvePath('unicons/apps.svg')); + cacheItem(u1011, resolvePath('unicons/arrow.svg')); + cacheItem(u1012, resolvePath('unicons/arrow-down.svg')); + cacheItem(u1013, resolvePath('unicons/arrow-from-right.svg')); + cacheItem(u1014, resolvePath('unicons/arrow-left.svg')); + cacheItem(u1015, resolvePath('unicons/arrow-random.svg')); + cacheItem(u1016, resolvePath('unicons/arrow-right.svg')); + cacheItem(u1017, resolvePath('unicons/arrow-to-right.svg')); + cacheItem(u1018, resolvePath('unicons/arrow-up.svg')); + cacheItem(u1019, resolvePath('unicons/arrows-h.svg')); + cacheItem(u1020, resolvePath('unicons/backward.svg')); + cacheItem(u1021, resolvePath('unicons/bars.svg')); + cacheItem(u1022, resolvePath('unicons/bell.svg')); + cacheItem(u1023, resolvePath('unicons/bell-slash.svg')); + cacheItem(u1024, resolvePath('unicons/bolt.svg')); + cacheItem(u1025, resolvePath('unicons/book.svg')); + cacheItem(u1026, resolvePath('unicons/book-open.svg')); + cacheItem(u1027, resolvePath('unicons/brackets-curly.svg')); + cacheItem(u1028, resolvePath('unicons/bug.svg')); + cacheItem(u1029, resolvePath('unicons/building.svg')); + cacheItem(u1030, resolvePath('unicons/calculator-alt.svg')); + cacheItem(u1031, resolvePath('unicons/calendar-alt.svg')); + cacheItem(u1032, resolvePath('unicons/calendar-slash.svg')); + cacheItem(u1033, resolvePath('unicons/camera.svg')); + cacheItem(u1034, resolvePath('unicons/channel-add.svg')); + cacheItem(u1035, resolvePath('unicons/chart-line.svg')); + cacheItem(u1036, resolvePath('unicons/check.svg')); + cacheItem(u1037, resolvePath('unicons/check-circle.svg')); + cacheItem(u1038, resolvePath('unicons/circle.svg')); + cacheItem(u1039, resolvePath('unicons/clipboard-alt.svg')); + cacheItem(u1040, resolvePath('unicons/clock-nine.svg')); + cacheItem(u1041, resolvePath('unicons/cloud.svg')); + cacheItem(u1042, resolvePath('unicons/cloud-download.svg')); + cacheItem(u1043, resolvePath('unicons/code-branch.svg')); + cacheItem(u1044, resolvePath('unicons/cog.svg')); + cacheItem(u1045, resolvePath('unicons/columns.svg')); + cacheItem(u1046, resolvePath('unicons/comment-alt.svg')); + cacheItem(u1047, resolvePath('unicons/comment-alt-share.svg')); + cacheItem(u1048, resolvePath('unicons/comments-alt.svg')); + cacheItem(u1049, resolvePath('unicons/compass.svg')); + cacheItem(u1050, resolvePath('unicons/copy.svg')); + cacheItem(u1051, resolvePath('unicons/corner-down-right-alt.svg')); + cacheItem(u1052, resolvePath('unicons/cube.svg')); + cacheItem(u1053, resolvePath('unicons/dashboard.svg')); + cacheItem(u1054, resolvePath('unicons/database.svg')); + cacheItem(u1055, resolvePath('unicons/document-info.svg')); + cacheItem(u1056, resolvePath('unicons/download-alt.svg')); + cacheItem(u1057, resolvePath('unicons/draggabledots.svg')); + cacheItem(u1058, resolvePath('unicons/edit.svg')); + cacheItem(u1059, resolvePath('unicons/ellipsis-v.svg')); + cacheItem(u1060, resolvePath('unicons/ellipsis-h.svg')); + cacheItem(u1061, resolvePath('unicons/envelope.svg')); + cacheItem(u1062, resolvePath('unicons/exchange-alt.svg')); + cacheItem(u1063, resolvePath('unicons/exclamation-circle.svg')); + cacheItem(u1064, resolvePath('unicons/exclamation-triangle.svg')); + cacheItem(u1065, resolvePath('unicons/external-link-alt.svg')); + cacheItem(u1066, resolvePath('unicons/eye.svg')); + cacheItem(u1067, resolvePath('unicons/eye-slash.svg')); + cacheItem(u1068, resolvePath('unicons/file-alt.svg')); + cacheItem(u1069, resolvePath('unicons/file-blank.svg')); + cacheItem(u1070, resolvePath('unicons/filter.svg')); + cacheItem(u1071, resolvePath('unicons/folder.svg')); + cacheItem(u1072, resolvePath('unicons/folder-open.svg')); + cacheItem(u1073, resolvePath('unicons/folder-plus.svg')); + cacheItem(u1074, resolvePath('unicons/folder-upload.svg')); + cacheItem(u1075, resolvePath('unicons/forward.svg')); + cacheItem(u1076, resolvePath('unicons/graph-bar.svg')); + cacheItem(u1077, resolvePath('unicons/history.svg')); + cacheItem(u1078, resolvePath('unicons/history-alt.svg')); + cacheItem(u1079, resolvePath('unicons/home-alt.svg')); + cacheItem(u1080, resolvePath('unicons/import.svg')); + cacheItem(u1081, resolvePath('unicons/info.svg')); + cacheItem(u1082, resolvePath('unicons/info-circle.svg')); + cacheItem(u1083, resolvePath('unicons/k6.svg')); + cacheItem(u1084, resolvePath('unicons/key-skeleton-alt.svg')); + cacheItem(u1085, resolvePath('unicons/keyboard.svg')); + cacheItem(u1086, resolvePath('unicons/link.svg')); + cacheItem(u1087, resolvePath('unicons/list-ul.svg')); + cacheItem(u1088, resolvePath('unicons/lock.svg')); + cacheItem(u1089, resolvePath('unicons/minus.svg')); + cacheItem(u1090, resolvePath('unicons/minus-circle.svg')); + cacheItem(u1091, resolvePath('unicons/mobile-android.svg')); + cacheItem(u1092, resolvePath('unicons/monitor.svg')); + cacheItem(u1093, resolvePath('unicons/pause.svg')); + cacheItem(u1094, resolvePath('unicons/pen.svg')); + cacheItem(u1095, resolvePath('unicons/play.svg')); + cacheItem(u1096, resolvePath('unicons/plug.svg')); + cacheItem(u1097, resolvePath('unicons/plus.svg')); + cacheItem(u1098, resolvePath('unicons/plus-circle.svg')); + cacheItem(u1099, resolvePath('unicons/power.svg')); + cacheItem(u1100, resolvePath('unicons/presentation-play.svg')); + cacheItem(u1101, resolvePath('unicons/process.svg')); + cacheItem(u1102, resolvePath('unicons/question-circle.svg')); + cacheItem(u1103, resolvePath('unicons/repeat.svg')); + cacheItem(u1104, resolvePath('unicons/rocket.svg')); + cacheItem(u1105, resolvePath('unicons/rss.svg')); + cacheItem(u1106, resolvePath('unicons/save.svg')); + cacheItem(u1107, resolvePath('unicons/search.svg')); + cacheItem(u1108, resolvePath('unicons/search-minus.svg')); + cacheItem(u1109, resolvePath('unicons/search-plus.svg')); + cacheItem(u1110, resolvePath('unicons/share-alt.svg')); + cacheItem(u1111, resolvePath('unicons/shield.svg')); + cacheItem(u1112, resolvePath('unicons/signal.svg')); + cacheItem(u1113, resolvePath('unicons/signin.svg')); + cacheItem(u1114, resolvePath('unicons/signout.svg')); + cacheItem(u1115, resolvePath('unicons/sitemap.svg')); + cacheItem(u1116, resolvePath('unicons/slack.svg')); + cacheItem(u1117, resolvePath('unicons/sliders-v-alt.svg')); + cacheItem(u1118, resolvePath('unicons/sort-amount-down.svg')); + cacheItem(u1119, resolvePath('unicons/sort-amount-up.svg')); + cacheItem(u1120, resolvePath('unicons/square-shape.svg')); + cacheItem(u1121, resolvePath('unicons/star.svg')); + cacheItem(u1122, resolvePath('unicons/step-backward.svg')); + cacheItem(u1123, resolvePath('unicons/sync.svg')); + cacheItem(u1124, resolvePath('unicons/stopwatch.svg')); + cacheItem(u1125, resolvePath('unicons/table.svg')); + cacheItem(u1126, resolvePath('unicons/tag-alt.svg')); + cacheItem(u1127, resolvePath('unicons/times.svg')); + cacheItem(u1128, resolvePath('unicons/trash-alt.svg')); + cacheItem(u1129, resolvePath('unicons/unlock.svg')); + cacheItem(u1130, resolvePath('unicons/upload.svg')); + cacheItem(u1131, resolvePath('unicons/user.svg')); + cacheItem(u1132, resolvePath('unicons/users-alt.svg')); + cacheItem(u1133, resolvePath('unicons/wrap-text.svg')); + cacheItem(u1134, resolvePath('unicons/cloud-upload.svg')); + cacheItem(u1135, resolvePath('unicons/credit-card.svg')); + cacheItem(u1136, resolvePath('unicons/file-copy-alt.svg')); + cacheItem(u1137, resolvePath('unicons/fire.svg')); + cacheItem(u1138, resolvePath('unicons/hourglass.svg')); + cacheItem(u1139, resolvePath('unicons/layer-group.svg')); + cacheItem(u1140, resolvePath('unicons/layers-alt.svg')); + cacheItem(u1141, resolvePath('unicons/line-alt.svg')); + cacheItem(u1142, resolvePath('unicons/list-ui-alt.svg')); + cacheItem(u1143, resolvePath('unicons/message.svg')); + cacheItem(u1144, resolvePath('unicons/palette.svg')); + cacheItem(u1145, resolvePath('unicons/percentage.svg')); + cacheItem(u1146, resolvePath('unicons/shield-exclamation.svg')); + cacheItem(u1147, resolvePath('unicons/plus-square.svg')); + cacheItem(u1148, resolvePath('unicons/x.svg')); + cacheItem(u1149, resolvePath('unicons/capture.svg')); + cacheItem(u1150, resolvePath('custom/gf-grid.svg')); + cacheItem(u1151, resolvePath('custom/gf-landscape.svg')); + cacheItem(u1152, resolvePath('custom/gf-layout-simple.svg')); + cacheItem(u1153, resolvePath('custom/gf-portrait.svg')); + cacheItem(u1154, resolvePath('custom/gf-show-context.svg')); + cacheItem(u1155, resolvePath('custom/gf-bar-alignment-after.svg')); + cacheItem(u1156, resolvePath('custom/gf-bar-alignment-before.svg')); + cacheItem(u1157, resolvePath('custom/gf-bar-alignment-center.svg')); + cacheItem(u1158, resolvePath('custom/gf-interpolation-linear.svg')); + cacheItem(u1159, resolvePath('custom/gf-interpolation-smooth.svg')); + cacheItem(u1160, resolvePath('custom/gf-interpolation-step-after.svg')); + cacheItem(u1161, resolvePath('custom/gf-interpolation-step-before.svg')); + cacheItem(u1162, resolvePath('custom/gf-logs.svg')); + cacheItem(u1163, resolvePath('custom/gf-movepane-left.svg')); + cacheItem(u1164, resolvePath('custom/gf-movepane-right.svg')); + cacheItem(u1165, resolvePath('mono/favorite.svg')); + cacheItem(u1166, resolvePath('mono/grafana.svg')); + cacheItem(u1167, resolvePath('mono/heart.svg')); + cacheItem(u1168, resolvePath('mono/heart-break.svg')); + cacheItem(u1169, resolvePath('mono/panel-add.svg')); + cacheItem(u1170, resolvePath('mono/library-panel.svg')); + cacheItem(u1171, resolvePath('unicons/record-audio.svg')); + // do not edit this list directly + // the list of icons live here: @grafana/ui/components/Icon/cached.json +} diff --git a/packages/grafana-ui/src/components/Icon/iconBundle.ts.template b/public/app/core/icons/iconBundle.ts.template similarity index 72% rename from packages/grafana-ui/src/components/Icon/iconBundle.ts.template rename to public/app/core/icons/iconBundle.ts.template index db75ce7d011..ffb748cfbad 100644 --- a/packages/grafana-ui/src/components/Icon/iconBundle.ts.template +++ b/public/app/core/icons/iconBundle.ts.template @@ -12,23 +12,34 @@ import { cacheStore } from 'react-inlinesvg'; // do not edit this list directly // the list of icons live here: @grafana/ui/components/Icon/cached.json -export let cacheInitialized = false; -export let iconRoot = 'public/img/icons/'; +let cacheInitialized = false; -export function cacheItem(content: string, path: string) { - cacheStore[iconRoot + path] = { content, status: 'loaded' }; +function cacheItem(content: string, path: string) { + cacheStore[path] = { content, status: 'loaded' }; } -export function initIconCache() { - cacheInitialized = true; +function createPathResolver() { + let root = 'public/img/icons/'; // 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 = typeof window !== 'undefined' && window.__grafana_public_path__; if (grafanaPublicPath) { - iconRoot = grafanaPublicPath + 'img/icons/'; + root = grafanaPublicPath + 'img/icons/'; } + return (path: string) => { + return root + path; + }; +} + +export function initIconCache() { + if (cacheInitialized) { + return; + } + cacheInitialized = true; + const resolvePath = createPathResolver(); + // do not edit this list directly // the list of icons live here: @grafana/ui/components/Icon/cached.json //{{cacheItems}} diff --git a/public/app/core/utils/ConfigProvider.tsx b/public/app/core/utils/ConfigProvider.tsx index 43851d729a7..3a8e5c4f99e 100644 --- a/public/app/core/utils/ConfigProvider.tsx +++ b/public/app/core/utils/ConfigProvider.tsx @@ -1,9 +1,8 @@ import React, { useEffect, useState } from 'react'; import { SkeletonTheme } from 'react-loading-skeleton'; -import { GrafanaTheme2 } from '@grafana/data'; +import { GrafanaTheme2, ThemeContext } from '@grafana/data'; import { ThemeChangedEvent, config } from '@grafana/runtime'; -import { ThemeContext } from '@grafana/ui'; import { appEvents } from '../core'; diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx index 0d5578265fb..b980f611d4f 100644 --- a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx +++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx @@ -9,18 +9,9 @@ import { Threshold, ThresholdsConfig, ThresholdsMode, -} from '@grafana/data'; -import { - Button, - ColorPicker, - colors, - IconButton, - Input, - Label, - RadioButtonGroup, - stylesFactory, ThemeContext, -} from '@grafana/ui'; +} from '@grafana/data'; +import { Button, ColorPicker, colors, IconButton, Input, Label, RadioButtonGroup, stylesFactory } from '@grafana/ui'; const modes: Array> = [ { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' }, diff --git a/public/app/features/plugins/loader/sharedDependencies.ts b/public/app/features/plugins/loader/sharedDependencies.ts index f1b4d2663b5..d1c29ba9b3f 100644 --- a/public/app/features/plugins/loader/sharedDependencies.ts +++ b/public/app/features/plugins/loader/sharedDependencies.ts @@ -1,12 +1,14 @@ import * as emotion from '@emotion/css'; import * as emotionReact from '@emotion/react'; import * as d3 from 'd3'; +import * as i18next from 'i18next'; import jquery from 'jquery'; import _ from 'lodash'; // eslint-disable-line lodash/import-scope import moment from 'moment'; // eslint-disable-line no-restricted-imports import prismjs from 'prismjs'; import react from 'react'; import reactDom from 'react-dom'; +import * as reactInlineSvg from 'react-inlinesvg'; import * as reactRedux from 'react-redux'; // eslint-disable-line no-restricted-imports import * as reactRouterDom from 'react-router-dom'; import * as reactRouterCompat from 'react-router-dom-v5-compat'; @@ -100,6 +102,8 @@ export const sharedDependenciesMap: Record = { }, d3: d3, emotion: emotion, + // bundling grafana-ui in plugins requires sharing i18next state + i18next: i18next, jquery: { default: jquery, __useDefault: true, @@ -116,6 +120,8 @@ export const sharedDependenciesMap: Record = { prismjs: prismjs, react: react, 'react-dom': reactDom, + // bundling grafana-ui in plugins requires sharing react-inlinesvg for the icon cache + 'react-inlinesvg': reactInlineSvg, 'react-redux': reactRedux, // Migration - React Router v5 -> v6 // ================================= diff --git a/public/test/jest-setup.ts b/public/test/jest-setup.ts index b9d85c2bbcf..4e77c25a542 100644 --- a/public/test/jest-setup.ts +++ b/public/test/jest-setup.ts @@ -7,6 +7,7 @@ import { TextEncoder, TextDecoder } from 'util'; import { EventBusSrv } from '@grafana/data'; import { GrafanaBootConfig } from '@grafana/runtime'; +import { initIconCache } from 'app/core/icons/iconBundle'; import 'blob-polyfill'; import 'mutationobserver-shim'; @@ -15,6 +16,10 @@ import './mocks/workers'; import '../vendor/flot/jquery.flot'; import '../vendor/flot/jquery.flot.time'; +// icon cache needs to be initialized for test to prevent +// libraries such as msw from throwing "unhandled resource"-errors +initIconCache(); + const testAppEvents = new EventBusSrv(); const global = window as any; global.$ = global.jQuery = $; diff --git a/packages/grafana-ui/scripts/generate-icon-bundle.js b/scripts/generate-icon-bundle.js similarity index 77% rename from packages/grafana-ui/scripts/generate-icon-bundle.js rename to scripts/generate-icon-bundle.js index d8dc0ef1ac5..ffa13c2f4c9 100644 --- a/packages/grafana-ui/scripts/generate-icon-bundle.js +++ b/scripts/generate-icon-bundle.js @@ -2,18 +2,18 @@ const fs = require('fs'); const os = require('os'); const path = require('path'); -const cachedListPath = path.join(__dirname, '../src/components/Icon/cached.json'); +const cachedListPath = path.join(__dirname, '../public/app/core/icons/cached.json'); const iconsList = require(cachedListPath); -const iconsBundleJsTemplatePath = path.join(__dirname, '../src/components/Icon/iconBundle.ts.template'); -const iconsBundleJsPath = path.join(__dirname, '../src/components/Icon/iconBundle.ts'); +const iconsBundleJsTemplatePath = path.join(__dirname, '../public/app/core/icons/iconBundle.ts.template'); +const iconsBundleJsPath = path.join(__dirname, '../public/app/core/icons/iconBundle.ts'); const iconsBundleJsTemplate = fs.readFileSync(iconsBundleJsTemplatePath).toString(); const importsStatements = []; const cacheStatements = []; -const grafanaIconsPublicPath = '../../../../../public/img/icons/'; +const grafanaIconsPublicPath = '../../../img/icons/'; function generateIconBundle({ outputPath, verbose = false }) { const modulePrefix = 'u'; @@ -28,7 +28,7 @@ function generateIconBundle({ outputPath, verbose = false }) { importsStatements.push( `import ${modulePrefix}${moduleNameCount} from '${grafanaIconsPublicPath}${iconEntry}.svg';` ); - cacheStatements.push(` cacheItem(${modulePrefix}${moduleNameCount}, '${iconEntry}.svg');`); + cacheStatements.push(` cacheItem(${modulePrefix}${moduleNameCount}, resolvePath('${iconEntry}.svg'));`); moduleNameCount++; } const output = iconsBundleJsTemplate diff --git a/yarn.lock b/yarn.lock index 1f2cf16e54c..5a650bb635a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3402,10 +3402,10 @@ __metadata: react-window: 1.8.9 rimraf: 5.0.1 rollup: 2.79.1 + rollup-plugin-copy: 3.5.0 rollup-plugin-dts: ^5.0.0 rollup-plugin-esbuild: 5.0.0 rollup-plugin-node-externals: ^5.0.0 - rollup-plugin-svg-import: ^1.6.0 rxjs: 7.8.1 sass-loader: 13.3.2 slate: 0.47.9 @@ -6808,16 +6808,6 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.1.1": - version: 4.2.0 - resolution: "@rollup/pluginutils@npm:4.2.0" - dependencies: - estree-walker: ^2.0.1 - picomatch: ^2.2.2 - checksum: 2e86d9bfb95919727bcba0bbbdbedc98e25a1e51fe3047f18ec6d85e0743d1c73e1c0de3f9fdbd2ff6b90c32f30d4b2706c9e794f3c2e7a80156980081558e2e - languageName: node - linkType: hard - "@rollup/pluginutils@npm:^5.0.1": version: 5.0.2 resolution: "@rollup/pluginutils@npm:5.0.2" @@ -8999,6 +8989,15 @@ __metadata: languageName: node linkType: hard +"@types/fs-extra@npm:^8.0.1": + version: 8.1.3 + resolution: "@types/fs-extra@npm:8.1.3" + dependencies: + "@types/node": "*" + checksum: e2800ba91fd7978baaa9d75050836b9a7b8aabc0be27ba57c939ba6568e6ac7a5faae614a2f36370cce4d1cd1b86d4c3a8c95e3f1a5bc4db36292f8181b92ac6 + languageName: node + linkType: hard + "@types/geojson@npm:*": version: 7946.0.8 resolution: "@types/geojson@npm:7946.0.8" @@ -9006,6 +9005,16 @@ __metadata: languageName: node linkType: hard +"@types/glob@npm:^7.1.1": + version: 7.2.0 + resolution: "@types/glob@npm:7.2.0" + dependencies: + "@types/minimatch": "*" + "@types/node": "*" + checksum: 6ae717fedfdfdad25f3d5a568323926c64f52ef35897bcac8aca8e19bc50c0bd84630bbd063e5d52078b2137d8e7d3c26eabebd1a2f03ff350fff8a91e79fc19 + languageName: node + linkType: hard + "@types/glob@npm:^8.0.0": version: 8.1.0 resolution: "@types/glob@npm:8.1.0" @@ -9255,6 +9264,13 @@ __metadata: languageName: node linkType: hard +"@types/minimatch@npm:*, @types/minimatch@npm:^5.1.2": + version: 5.1.2 + resolution: "@types/minimatch@npm:5.1.2" + checksum: 0391a282860c7cb6fe262c12b99564732401bdaa5e395bee9ca323c312c1a0f45efbf34dce974682036e857db59a5c9b1da522f3d6055aeead7097264c8705a8 + languageName: node + linkType: hard + "@types/minimatch@npm:^3.0.3": version: 3.0.5 resolution: "@types/minimatch@npm:3.0.5" @@ -9262,13 +9278,6 @@ __metadata: languageName: node linkType: hard -"@types/minimatch@npm:^5.1.2": - version: 5.1.2 - resolution: "@types/minimatch@npm:5.1.2" - checksum: 0391a282860c7cb6fe262c12b99564732401bdaa5e395bee9ca323c312c1a0f45efbf34dce974682036e857db59a5c9b1da522f3d6055aeead7097264c8705a8 - languageName: node - linkType: hard - "@types/minimist@npm:^1.2.0, @types/minimist@npm:^1.2.2": version: 1.2.2 resolution: "@types/minimist@npm:1.2.2" @@ -12819,6 +12828,13 @@ __metadata: languageName: node linkType: hard +"colorette@npm:^1.1.0": + version: 1.4.0 + resolution: "colorette@npm:1.4.0" + checksum: 01c3c16058b182a4ab4c126a65a75faa4d38a20fa7c845090b25453acec6c371bb2c5dceb0a2338511f17902b9d1a9af0cadd8509c9403894b79311032c256c3 + languageName: node + linkType: hard + "colorette@npm:^2.0.10, colorette@npm:^2.0.14, colorette@npm:^2.0.16, colorette@npm:^2.0.19": version: 2.0.20 resolution: "colorette@npm:2.0.20" @@ -16033,7 +16049,7 @@ __metadata: languageName: node linkType: hard -"estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2": +"estree-walker@npm:^2.0.2": version: 2.0.2 resolution: "estree-walker@npm:2.0.2" checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc @@ -16303,6 +16319,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:^3.0.3": + version: 3.3.1 + resolution: "fast-glob@npm:3.3.1" + dependencies: + "@nodelib/fs.stat": ^2.0.2 + "@nodelib/fs.walk": ^1.2.3 + glob-parent: ^5.1.2 + merge2: ^1.3.0 + micromatch: ^4.0.4 + checksum: b6f3add6403e02cf3a798bfbb1183d0f6da2afd368f27456010c0bc1f9640aea308243d4cb2c0ab142f618276e65ecb8be1661d7c62a7b4e5ba774b9ce5432e5 + languageName: node + linkType: hard + "fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0": version: 3.3.0 resolution: "fast-glob@npm:3.3.0" @@ -17429,6 +17458,22 @@ __metadata: languageName: node linkType: hard +"globby@npm:10.0.1": + version: 10.0.1 + resolution: "globby@npm:10.0.1" + dependencies: + "@types/glob": ^7.1.1 + array-union: ^2.1.0 + dir-glob: ^3.0.1 + fast-glob: ^3.0.3 + glob: ^7.1.3 + ignore: ^5.1.1 + merge2: ^1.2.3 + slash: ^3.0.0 + checksum: a16754b93eff58c1070ca9b0a92c69d9d97a184870fbc7dcb1b99a3ff202311ae66dd5662cbec874deaa888d0172024332e14d04d038c23949d5f8e29341dad2 + languageName: node + linkType: hard + "globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0": version: 11.1.0 resolution: "globby@npm:11.1.0" @@ -18605,7 +18650,7 @@ __metadata: languageName: node linkType: hard -"ignore@npm:^5.0.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4": +"ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4": version: 5.2.4 resolution: "ignore@npm:5.2.4" checksum: 3d4c309c6006e2621659311783eaea7ebcd41fe4ca1d78c91c473157ad6666a57a2df790fe0d07a12300d9aac2888204d7be8d59f9aaf665b1c7fcdb432517ef @@ -19281,6 +19326,13 @@ __metadata: languageName: node linkType: hard +"is-plain-object@npm:^3.0.0": + version: 3.0.1 + resolution: "is-plain-object@npm:3.0.1" + checksum: d13fe75db350d4ac669595cdfe0242ae87fcecddf2bca858d2dd443a6ed6eb1f69951fac8c2fa85b16106c6b0d7738fea86c2aca2ecee7fd61de15c1574f2cc5 + languageName: node + linkType: hard + "is-potential-custom-element-name@npm:^1.0.1": version: 1.0.1 resolution: "is-potential-custom-element-name@npm:1.0.1" @@ -21498,7 +21550,7 @@ __metadata: languageName: node linkType: hard -"merge2@npm:^1.3.0, merge2@npm:^1.4.1": +"merge2@npm:^1.2.3, merge2@npm:^1.3.0, merge2@npm:^1.4.1": version: 1.4.1 resolution: "merge2@npm:1.4.1" checksum: 7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2 @@ -26314,6 +26366,19 @@ __metadata: languageName: node linkType: hard +"rollup-plugin-copy@npm:3.5.0": + version: 3.5.0 + resolution: "rollup-plugin-copy@npm:3.5.0" + dependencies: + "@types/fs-extra": ^8.0.1 + colorette: ^1.1.0 + fs-extra: ^8.1.0 + globby: 10.0.1 + is-plain-object: ^3.0.0 + checksum: 706ba6bd2052b95d1037f12963ff4b50749730f18aefad10544f9574aff7c035c88c5dd9ae1f0c0408cf09862e595a0ea4d68e13c2717addaea2bda3ade0d0e0 + languageName: node + linkType: hard + "rollup-plugin-dts@npm:^5.0.0": version: 5.3.0 resolution: "rollup-plugin-dts@npm:5.3.0" @@ -26371,17 +26436,6 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-svg-import@npm:^1.6.0": - version: 1.6.0 - resolution: "rollup-plugin-svg-import@npm:1.6.0" - dependencies: - "@rollup/pluginutils": ^4.1.1 - peerDependencies: - rollup: ">=1.29.0 <3.0.0" - checksum: 453862c39d2301563d9d07f6647c295377ff66cf3174d2a0612389fda4bfd9fa72718d90279feb782d3525f1d6f9710e1dc78641cd9d4044360a0179f88054b0 - languageName: node - linkType: hard - "rollup-plugin-terser@npm:7.0.2": version: 7.0.2 resolution: "rollup-plugin-terser@npm:7.0.2"