diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index cfaf48c..4ab6212 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -6,17 +6,21 @@ labels: bug assignees: '' --- -**Describe the bug** +## Describe the bug + A clear and concise description of what the bug is. -**Version Details:** - - Grafana version : - - Plugin version : - - Did this work in any other version of Grafana : - - What datasource you use : +## Version Details + +* Grafana version : +* Plugin version : +* Did this work in any other version of Grafana : +* What datasource you use : + +## Panel JSON -**Panel JSON** If applicable, provide panel json. Make sure to mask any sensitive information -**Screenshots** +## Screenshots + If applicable, add screenshots to help explain your problem. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 6aa332a..18ac719 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -6,14 +6,18 @@ labels: feature-request assignees: '' --- -**Is your feature request related to a problem? Please describe.** +## Is your feature request related to a problem? Please describe + A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -**Describe the solution you'd like** +## Describe the solution you'd like + A clear and concise description of what you want to happen. -**Describe alternatives you've considered** +## Describe alternatives you've considered + A clear and concise description of any alternative solutions or features you've considered. -**Additional context** +## Additional context + Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/help-required.md b/.github/ISSUE_TEMPLATE/help-required.md index fff5fe0..c509e16 100644 --- a/.github/ISSUE_TEMPLATE/help-required.md +++ b/.github/ISSUE_TEMPLATE/help-required.md @@ -6,14 +6,14 @@ labels: help wanted assignees: '' --- -**What you are struggling with** +## What you are struggling with Describe what assistance you need -**What you tried** +## What you tried Describe what you tried -**Related Issues and Links** +## Related Issues and Links Related links diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 3e0a75c..cd37b3b 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -3,11 +3,10 @@ name: Build & Publish on: push: branches: - - master + - main jobs: build: - runs-on: ubuntu-latest strategy: @@ -15,43 +14,35 @@ jobs: node-version: [12.x] steps: - - name: Checkout - uses: actions/checkout@v2 - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: echo "::set-output name=dir::$(yarn cache dir)" - - name: Cache yarn cache - uses: actions/cache@v2 - id: cache-yarn-cache - with: - path: ${{ steps.yarn-cache-dir-path.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-yarn- - - name: Cache node_modules - id: cache-node-modules - uses: actions/cache@v2 - with: - path: node_modules - key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- - - name: Install dependencies - run: yarn install --frozen-lockfile; - if: | - steps.cache-yarn-cache.outputs.cache-hit != 'true' || - steps.cache-node-modules.outputs.cache-hit != 'true' - - name: Test - run: | - yarn test; - - name: Build - run: | - yarn build; - - name: Deploy - run: | - git config --global user.email "actions@github.com"; - git config --global user.name "Github Actions"; - git add --force dist/ - git commit -m "Build by Github Actions" - git push - git status \ No newline at end of file + - name: Checkout + uses: actions/checkout@v2 + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + - name: Cache yarn cache + uses: actions/cache@v2 + id: cache-yarn-cache + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Cache node_modules + id: cache-node-modules + uses: actions/cache@v2 + with: + path: node_modules + key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- + - name: Install dependencies + run: yarn install --frozen-lockfile; + if: | + steps.cache-yarn-cache.outputs.cache-hit != 'true' || + steps.cache-node-modules.outputs.cache-hit != 'true' + - name: Test + run: | + yarn test; + - name: Build + run: | + yarn build; diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 7b6fb1b..caefac6 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -7,95 +7,94 @@ on: jobs: build: - runs-on: ubuntu-latest strategy: matrix: - node-version: [12.x] + node-version: [16.x] steps: - - name: Checkout - uses: actions/checkout@v2 - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: echo "::set-output name=dir::$(yarn cache dir)" - - name: Cache yarn cache - uses: actions/cache@v2 - id: cache-yarn-cache - with: - path: ${{ steps.yarn-cache-dir-path.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-yarn- - - name: Cache node_modules - id: cache-node-modules - uses: actions/cache@v2 - with: - path: node_modules - key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- - - name: Install dependencies - run: yarn install --frozen-lockfile; - if: | - steps.cache-yarn-cache.outputs.cache-hit != 'true' || - steps.cache-node-modules.outputs.cache-hit != 'true' - - name: Test - run: | - yarn test; - - name: Build - run: | - yarn build; - - name: Sign plugin - run: yarn sign - env: - GRAFANA_API_KEY: ${{ secrets.GRAFANA_API_KEY }} - - name: Get plugin information - run: | - sudo apt-get install jq - export GRAFANA_PLUGIN_ID=$(cat dist/plugin.json | jq -r .id) - export GRAFANA_PLUGIN_VERSION=$(cat dist/plugin.json | jq -r .info.version) - export GRAFANA_PLUGIN_TYPE=$(cat dist/plugin.json | jq -r .type) - export GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip - export GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT}.md5 - echo "GRAFANA_PLUGIN_ID=${GRAFANA_PLUGIN_ID}" >> $GITHUB_ENV - echo "GRAFANA_PLUGIN_VERSION=${GRAFANA_PLUGIN_VERSION}" >> $GITHUB_ENV - echo "GRAFANA_PLUGIN_TYPE=${GRAFANA_PLUGIN_TYPE}" >> $GITHUB_ENV - echo "GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ARTIFACT}" >> $GITHUB_ENV - echo "GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}" >> $GITHUB_ENV - - name: Package plugin - run: | - mv dist $GRAFANA_PLUGIN_ID - zip $GRAFANA_PLUGIN_ARTIFACT $GRAFANA_PLUGIN_ID -r - md5sum $GRAFANA_PLUGIN_ARTIFACT > $GRAFANA_PLUGIN_ARTIFACT_CHECKSUM - - name: Create release - id: create_release - uses: actions/create-release@v1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - tag_name: ${{ github.ref }} - release_name: Release ${{ github.ref }} - draft: false - prerelease: false - - name: Add plugin to release - id: upload-plugin-asset - uses: actions/upload-release-asset@v1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - upload_url: ${{ steps.create_release.outputs.upload_url }} - asset_path: ./${{ env.GRAFANA_PLUGIN_ARTIFACT }} - asset_name: ${{ env.GRAFANA_PLUGIN_ARTIFACT }} - asset_content_type: application/zip - - name: Add checksum to release - id: upload-checksum-asset - uses: actions/upload-release-asset@v1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - upload_url: ${{ steps.create_release.outputs.upload_url }} - asset_path: ./${{ env.GRAFANA_PLUGIN_ARTIFACT_CHECKSUM }} - asset_name: ${{ env.GRAFANA_PLUGIN_ARTIFACT_CHECKSUM }} - asset_content_type: text/plain \ No newline at end of file + - name: Checkout + uses: actions/checkout@v2 + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + - name: Cache yarn cache + uses: actions/cache@v2 + id: cache-yarn-cache + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Cache node_modules + id: cache-node-modules + uses: actions/cache@v2 + with: + path: node_modules + key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- + - name: Install dependencies + run: yarn install --frozen-lockfile; + if: | + steps.cache-yarn-cache.outputs.cache-hit != 'true' || + steps.cache-node-modules.outputs.cache-hit != 'true' + - name: Test + run: | + yarn test; + - name: Build + run: | + yarn build; + - name: Sign plugin + run: yarn sign + env: + GRAFANA_API_KEY: ${{ secrets.GRAFANA_API_KEY }} + - name: Get plugin information + run: | + sudo apt-get install jq + export GRAFANA_PLUGIN_ID=$(cat dist/plugin.json | jq -r .id) + export GRAFANA_PLUGIN_VERSION=$(cat dist/plugin.json | jq -r .info.version) + export GRAFANA_PLUGIN_TYPE=$(cat dist/plugin.json | jq -r .type) + export GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip + export GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT}.md5 + echo "GRAFANA_PLUGIN_ID=${GRAFANA_PLUGIN_ID}" >> $GITHUB_ENV + echo "GRAFANA_PLUGIN_VERSION=${GRAFANA_PLUGIN_VERSION}" >> $GITHUB_ENV + echo "GRAFANA_PLUGIN_TYPE=${GRAFANA_PLUGIN_TYPE}" >> $GITHUB_ENV + echo "GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ARTIFACT}" >> $GITHUB_ENV + echo "GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}" >> $GITHUB_ENV + - name: Package plugin + run: | + mv dist $GRAFANA_PLUGIN_ID + zip $GRAFANA_PLUGIN_ARTIFACT $GRAFANA_PLUGIN_ID -r + md5sum $GRAFANA_PLUGIN_ARTIFACT > $GRAFANA_PLUGIN_ARTIFACT_CHECKSUM + - name: Create release + id: create_release + uses: actions/create-release@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + tag_name: ${{ github.ref }} + release_name: Release ${{ github.ref }} + draft: false + prerelease: false + - name: Add plugin to release + id: upload-plugin-asset + uses: actions/upload-release-asset@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + upload_url: ${{ steps.create_release.outputs.upload_url }} + asset_path: ./${{ env.GRAFANA_PLUGIN_ARTIFACT }} + asset_name: ${{ env.GRAFANA_PLUGIN_ARTIFACT }} + asset_content_type: application/zip + - name: Add checksum to release + id: upload-checksum-asset + uses: actions/upload-release-asset@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + upload_url: ${{ steps.create_release.outputs.upload_url }} + asset_path: ./${{ env.GRAFANA_PLUGIN_ARTIFACT_CHECKSUM }} + asset_name: ${{ env.GRAFANA_PLUGIN_ARTIFACT_CHECKSUM }} + asset_content_type: text/plain diff --git a/.vscode/settings.json b/.vscode/settings.json index 9cbf73a..18895c9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "cSpell.words": ["boomtheme"] + "cSpell.words": ["boomtheme", "koszti", "nodemodules", "sidemenu"] } diff --git a/CHANGELOG.md b/CHANGELOG.md index 849f2b0..a003fdc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ | Version | Changes | | ------- | -------------------------------------------------- | +| 0.2.1 | Bug fixes (Thanks @koszti) | +| | Replace theme by variable (Thanks @koszti) | | 0.2.0 | **Plugin Signed** | | | Tagged releases | | | Bug fixes | diff --git a/README.md b/README.md index b36e136..3e94013 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ grafana-cli plugins install yesoreyeram-boomtheme-panel or for specific versions ```sh -grafana-cli --pluginUrl https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/releases/download/v0.2.0-alpha.5/yesoreyeram-boomtheme-panel-0.2.0-alpha.5.zip plugins install yesoreyeram-boomtheme-panel +grafana-cli --pluginUrl https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/releases/download/v0.2.1/yesoreyeram-boomtheme-panel-0.2.1.zip plugins install yesoreyeram-boomtheme-panel ``` ### Using helm chart @@ -91,5 +91,5 @@ or for any specific versions ```yml plugins: - - https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/releases/download/v0.2.0-alpha.5/yesoreyeram-boomtheme-panel-0.2.0-alpha.5.zip;yesoreyeram-boomtheme-panel + - https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/releases/download/v0.2.1/yesoreyeram-boomtheme-panel-0.2.1.zip;yesoreyeram-boomtheme-panel ``` diff --git a/package.json b/package.json index 129d583..bb0ecf1 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,10 @@ { "name": "yesoreyeram-boomtheme-panel", - "version": "0.2.0-alpha.6", + "version": "0.2.1", "description": "Themes for Grafana", "main": "dist/module.js", - "scripts": { - "build": "grafana-toolkit plugin:build", - "test": "grafana-toolkit plugin:test", - "sign": "grafana-toolkit plugin:sign", - "dev": "grafana-toolkit plugin:dev", - "watch": "grafana-toolkit plugin:dev --watch" - }, + "author": "Sriramajeyam Sugumaran", + "license": "Apache-2.0", "repository": { "type": "git", "url": "git+https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel.git" @@ -20,14 +15,16 @@ "panel", "theme" ], - "author": "Sriramajeyam Sugumaran", - "license": "ISC", "bugs": { "url": "https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/issues" }, "homepage": "https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel#readme", - "devDependencies": { - "@grafana/toolkit": "7.5.1" + "scripts": { + "build": "grafana-toolkit plugin:build", + "test": "grafana-toolkit plugin:test", + "sign": "grafana-toolkit plugin:sign", + "dev": "grafana-toolkit plugin:dev", + "watch": "grafana-toolkit plugin:dev --watch" }, "dependencies": { "@grafana/data": "7.5.1", @@ -35,5 +32,8 @@ "@grafana/ui": "7.5.1", "lodash": "^4.17.21", "react-style-tag": "^2.0.4" + }, + "devDependencies": { + "@grafana/toolkit": "7.5.1" } } diff --git a/src/BoomTheme.ts b/src/BoomTheme.ts index 0b4bb53..2e9dbfa 100644 --- a/src/BoomTheme.ts +++ b/src/BoomTheme.ts @@ -1,4 +1,3 @@ -import _ from 'lodash'; import { BoomThemeStyle, BoomThemeStyleProps } from './BoomThemeStyle'; import { getThemeCSSFile } from './utils'; import { CONFIG } from './config'; @@ -29,9 +28,9 @@ export class BoomTheme { deleteStyle(index: number): void { this.styles.splice(index, 1); } - private constructTheme(styles: any[]): string { + private constructTheme(styles: any[] = []): string { let output = ``; - _.each(styles, (style) => { + styles.forEach((style) => { if (style.type === CONFIG.THEME_STYLES.URL) { if (style.props && style.props.url !== '') { output += `@import url('${style.props.url}'); @@ -55,7 +54,7 @@ export class BoomTheme { } else if (style.type === CONFIG.THEME_STYLES.BG_IMAGE) { if (style.props && style.props.url !== '') { output += ` -.main-view, .sidemenu, .sidemenu-open .sidemenu, .navbar, .dashboard-container,.dashboard-container > div { +.main-view, .sidemenu, .sidemenu-open .sidemenu, .navbar, .dashboard-container,.dashboard-container > div, .page-toolbar { background: url("${style.props.url}") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; @@ -67,7 +66,7 @@ export class BoomTheme { } else if (style.type === CONFIG.THEME_STYLES.PANEL_CONTAINER_BG_COLOR) { if (style.props && style.props.color !== '') { output += ` -.panel-container { +.panel-container, .page-toolbar { background-color: ${style.props.color} } `; diff --git a/src/BoomThemeStyle.ts b/src/BoomThemeStyle.ts index 36ef782..f212e5d 100644 --- a/src/BoomThemeStyle.ts +++ b/src/BoomThemeStyle.ts @@ -1,6 +1,6 @@ import { CONFIG } from './config'; export enum BoomThemeStyleProps { - BaseTheme = 'theme', + BaseTheme = 'basetheme', BackgroundImage = 'bgimage', CustomStyle = 'style', ExternalURL = 'url', diff --git a/src/Panel.tsx b/src/Panel.tsx index ad0a91e..2aff8ad 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -19,7 +19,7 @@ interface Props extends PanelProps { onOptionsChange: (options: PanelOptions) => void; } -export const Panel = ({ options }: Props) => { +export const Panel = ({ options, replaceVariables }: Props) => { const [runTimeThemeState, setRunTimeThemeState] = useState(false); const [runTimeTheme, setRunTimeTheme] = useState(''); @@ -30,7 +30,7 @@ export const Panel = ({ options }: Props) => { let output = ''; - options.themes.forEach((themeOptions: BoomTheme, index) => { + options.themes?.forEach((themeOptions: BoomTheme, index) => { const theme = new BoomTheme(themeOptions); if (runTimeThemeState) { if (runTimeTheme === theme.name) { @@ -43,13 +43,13 @@ export const Panel = ({ options }: Props) => { `; } } else { - if (options.activeTheme === 'Grafana Dark') { + if (replaceVariables(options.activeTheme) === 'Grafana Dark') { output = `@import url('${getThemeCSSFile('dark')}'); `; - } else if (options.activeTheme === 'Grafana Light') { + } else if (replaceVariables(options.activeTheme) === 'Grafana Light') { output = `@import url('${getThemeCSSFile('light')}'); `; - } else if (options.activeTheme === theme.name) { + } else if (replaceVariables(options.activeTheme) === theme.name) { output += theme.getThemeContent(); } } diff --git a/src/editors/ThemeEditor.tsx b/src/editors/ThemeEditor.tsx index 2a8a01c..f384a05 100644 --- a/src/editors/ThemeEditor.tsx +++ b/src/editors/ThemeEditor.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { SelectableValue } from '@grafana/data'; import { Modal, Label, Input, TextArea, RadioButtonGroup, ColorPicker } from '@grafana/ui'; import { BoomTheme } from '../BoomTheme'; -import { BoomThemeStyle, BoomThemeStyleProps } from 'BoomThemeStyle'; +import { BoomThemeStyle, BoomThemeStyleProps } from './../BoomThemeStyle'; interface EditorProps { value: BoomTheme; @@ -34,7 +34,7 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { const defaultThemes: SelectableValue[] = [ { value: 'default', label: 'Default' }, { value: 'dark', label: 'Dark' }, - { value: 'light', label: 'light' }, + { value: 'light', label: 'Light' }, ]; return ( <> @@ -61,9 +61,7 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { { - onStylePropertyChange(index, 'theme', e); - }} + onChange={(e) => onStylePropertyChange(index, 'theme', e)} >
@@ -75,9 +73,7 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { { - onStylePropertyChange(index, 'url', e.currentTarget.value); - }} + onChange={(e) => onStylePropertyChange(index, 'url', e.currentTarget.value)} >
@@ -89,9 +85,7 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { { - onStylePropertyChange(index, 'url', e.currentTarget.value); - }} + onChange={(e) => onStylePropertyChange(index, 'url', e.currentTarget.value)} >
@@ -101,12 +95,9 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { <>
@@ -116,18 +107,13 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { <> { - onStylePropertyChange(index, 'color', e.currentTarget.value); - }} + onChange={(e) => onStylePropertyChange(index, 'color', e.currentTarget.value)} prefix={
{ - onStylePropertyChange(index, 'color', e); - }} + onChange={(e) => onStylePropertyChange(index, 'color', e)} />
} @@ -142,9 +128,7 @@ export const ThemeEditor = ({ value, onChange }: EditorProps) => { { - onStylePropertyChange(index, 'url', e.currentTarget.value); - }} + onChange={(e) => onStylePropertyChange(index, 'url', e.currentTarget.value)} >
diff --git a/src/editors/ThemePicker.tsx b/src/editors/ThemePicker.tsx index 6ff5847..5938d08 100644 --- a/src/editors/ThemePicker.tsx +++ b/src/editors/ThemePicker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { BoomTheme } from 'BoomTheme'; +import { BoomTheme } from './../BoomTheme'; interface ThemePickerProps { themes: BoomTheme[]; @@ -10,13 +10,13 @@ export const ThemePicker = (props: ThemePickerProps) => { const onViewChange = (themeName: string) => { props.onChange(themeName); }; - const style: React.CSSProperties = { textAlign: 'center' }; + const defaultThemes = ['Grafana Dark', 'Grafana Light']; return ( -
+

- {props.themes + {(props.themes || []) .map((theme) => theme.name) - .concat(['Grafana Dark', 'Grafana Light']) + .concat(defaultThemes) .map((themeName, index: number) => { return ( { }; return ( <> - {value.map((theme, index) => ( + {value?.map((theme, index) => (