From 3d89f04562cd15d33eeaee6934ce51a295034d27 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Thu, 23 Apr 2020 02:52:11 -0700 Subject: [PATCH] Plugins: show signing status on datasources and plugins (#23542) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * show signing status * show signing status * Progress on signed badge style * Progress on signing status look and updated card background * Updates * Transforms card tweak Co-authored-by: Torkel Ödegaard --- packages/grafana-data/src/types/plugin.ts | 9 ++ .../src/themes/_variables.dark.scss.tmpl.ts | 7 +- .../src/themes/_variables.light.scss.tmpl.ts | 7 +- packages/grafana-ui/src/themes/dark.ts | 2 +- packages/grafana-ui/src/themes/light.ts | 2 +- .../components/OrgActionBar/OrgActionBar.tsx | 6 +- .../__snapshots__/OrgActionBar.test.tsx.snap | 3 - .../TransformationsEditor.tsx | 66 +++++------ .../datasources/DataSourcesListPage.tsx | 3 - .../datasources/NewDataSourcePage.tsx | 30 ++++- .../DataSourcesListPage.test.tsx.snap | 2 - public/app/features/plugins/PluginList.tsx | 13 +-- .../app/features/plugins/PluginListItem.tsx | 2 + .../features/plugins/PluginListPage.test.tsx | 5 +- .../app/features/plugins/PluginListPage.tsx | 23 +--- .../features/plugins/PluginSignatureBadge.tsx | 106 ++++++++++++++++++ .../__snapshots__/PluginList.test.tsx.snap | 2 +- .../PluginListItem.test.tsx.snap | 2 + .../PluginListPage.test.tsx.snap | 5 - .../features/plugins/state/reducers.test.ts | 14 --- public/app/features/plugins/state/reducers.ts | 6 - .../app/features/plugins/state/selectors.ts | 1 - public/app/types/plugins.ts | 1 - public/sass/_variables.dark.generated.scss | 6 +- public/sass/_variables.light.generated.scss | 6 +- public/sass/components/_add_data_source.scss | 1 - 26 files changed, 207 insertions(+), 123 deletions(-) create mode 100644 public/app/features/plugins/PluginSignatureBadge.tsx diff --git a/packages/grafana-data/src/types/plugin.ts b/packages/grafana-data/src/types/plugin.ts index 12702b1b1d3..a339b4cc51c 100644 --- a/packages/grafana-data/src/types/plugin.ts +++ b/packages/grafana-data/src/types/plugin.ts @@ -14,6 +14,14 @@ export enum PluginType { renderer = 'renderer', } +export enum PluginSignatureStatus { + internal = 'internal', // core plugin, no signature + valid = 'valid', // signed and accurate MANIFEST + invalid = 'invalid', // invalid signature + modified = 'modified', // valid signature, but content mismatch + unsigned = 'unsigned', // no MANIFEST file +} + export interface PluginMeta { id: string; name: string; @@ -38,6 +46,7 @@ export interface PluginMeta { enterprise?: boolean; latestVersion?: string; pinned?: boolean; + signature?: PluginSignatureStatus; } interface PluginDependencyInfo { diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index d6db311f008..d707659b6b0 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -2,6 +2,7 @@ import { GrafanaTheme } from '@grafana/data'; import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; +import { styleMixins } from '.'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')} @@ -140,9 +141,9 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-4, $dark-3); -$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); +$card-background: ${theme.colors.bg2}; +$card-background-hover: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; +$card-shadow: none; // Lists $list-item-bg: $card-background; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 07d9296a3c3..bf10167be0c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -2,6 +2,7 @@ import { GrafanaTheme } from '@grafana/data'; import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; +import { styleMixins } from '.'; export const lightThemeVarsTemplate = (theme: GrafanaTheme) => `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')} @@ -133,9 +134,9 @@ $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: linear-gradient(135deg, $gray-6, $gray-7); -$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); +$card-background: ${theme.colors.bg2}; +$card-background-hover: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; +$card-shadow: none; // Lists $list-item-bg: $gray-7; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index b0467d3ce59..678d83be44c 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -129,7 +129,7 @@ const darkTheme: GrafanaTheme = { linkExternal: basicColors.blue85, }, shadows: { - listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)', + listItem: 'none', }, }; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index c8c72808291..f3d23b85638 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -130,7 +130,7 @@ const lightTheme: GrafanaTheme = { textHeading: basicColors.gray25, }, shadows: { - listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)', + listItem: 'none', }, }; diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.tsx index bc810f40d84..06d6b532ddc 100644 --- a/public/app/core/components/OrgActionBar/OrgActionBar.tsx +++ b/public/app/core/components/OrgActionBar/OrgActionBar.tsx @@ -1,12 +1,9 @@ import React, { PureComponent } from 'react'; -import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector'; import { FilterInput } from '../FilterInput/FilterInput'; import { LinkButton } from '@grafana/ui'; export interface Props { searchQuery: string; - layoutMode?: LayoutMode; - onSetLayoutMode?: (mode: LayoutMode) => {}; setSearchQuery: (value: string) => {}; linkButton: { href: string; title: string }; target?: string; @@ -14,7 +11,7 @@ export interface Props { export default class OrgActionBar extends PureComponent { render() { - const { searchQuery, layoutMode, onSetLayoutMode, linkButton, setSearchQuery, target } = this.props; + const { searchQuery, linkButton, setSearchQuery, target } = this.props; const linkProps = { href: linkButton.href }; if (target) { @@ -31,7 +28,6 @@ export default class OrgActionBar extends PureComponent { onChange={setSearchQuery} placeholder={'Search by name or type'} /> - onSetLayoutMode(mode)} />
{linkButton.title} diff --git a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap b/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap index df6a8ddb545..c1220d90a25 100644 --- a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap +++ b/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap @@ -14,9 +14,6 @@ exports[`Render should render component 1`] = ` placeholder="Search by name or type" value="" /> -
{ ); }; + renderNoAddedTransformsState() { + return ( + <> +

+ Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being + visualized.
+ Choose one of the transformations below to start with: +

+ + + {standardTransformersRegistry.list().map(t => { + return ( + Select} + onClick={() => { + this.onTransformationAdd({ value: t.id }); + }} + /> + ); + })} + + + ); + } + render() { const hasTransformationsConfigured = this.props.transformations.length > 0; return ( - {!hasTransformationsConfigured && ( - -

- Transformations allow you to combine, re-order, hide and rename specific parts the the data set before - being visualized. Choose one of the transformations below to start with: -

- - {standardTransformersRegistry.list().map(t => { - return ( - Select} - onClick={() => { - this.onTransformationAdd({ value: t.id }); - }} - /> - ); - })} - - - )} + {!hasTransformationsConfigured && this.renderNoAddedTransformsState()} {hasTransformationsConfigured && this.renderTransformationEditors()} {hasTransformationsConfigured && this.renderTransformationSelector()} @@ -166,8 +163,13 @@ const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => { card: css` background: ${theme.colors.bg2}; width: 100%; + border: none; + padding: ${theme.spacing.sm}; + &:hover { background: ${theme.colors.bg3}; + box-shadow: none; + border: none; } `, }; diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx index a1438b079de..23f8891b9f3 100644 --- a/public/app/features/datasources/DataSourcesListPage.tsx +++ b/public/app/features/datasources/DataSourcesListPage.tsx @@ -64,7 +64,6 @@ export class DataSourcesListPage extends PureComponent { layoutMode, searchQuery, setDataSourcesSearchQuery, - setDataSourcesLayoutMode, hasFetched, } = this.props; @@ -81,9 +80,7 @@ export class DataSourcesListPage extends PureComponent { {hasFetched && dataSourcesCount > 0 && [ setDataSourcesLayoutMode(mode)} setSearchQuery={query => setDataSourcesSearchQuery(query)} linkButton={linkButton} key="action-bar" diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx index 8fb0d426020..09b7e00dc3c 100644 --- a/public/app/features/datasources/NewDataSourcePage.tsx +++ b/public/app/features/datasources/NewDataSourcePage.tsx @@ -11,6 +11,7 @@ import { addDataSource, loadDataSourcePlugins } from './state/actions'; import { getDataSourcePlugins } from './state/selectors'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { setDataSourceTypeSearchQuery } from './state/reducers'; +import { PluginSignatureBadge } from '../plugins/PluginSignatureBadge'; import { Card } from 'app/core/components/Card/Card'; export interface Props { @@ -146,7 +147,34 @@ const DataSourceTypeCard: FC = props => { } className={isPhantom && 'add-data-source-item--phantom'} onClick={onClick} - /> + aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)} + > + +
+ {plugin.name} + {plugin.info.description && {plugin.info.description}} + {!isPhantom && ( +
+ +
+ )} +
+
+ {learnMoreLink && ( + + {learnMoreLink.name} + + )} + {!isPhantom && } +
+ ); }; diff --git a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap index 63998d43870..9a8b1eaabd2 100644 --- a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap +++ b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap @@ -18,14 +18,12 @@ exports[`Render should render action bar and datasources 1`] = ` > diff --git a/public/app/features/plugins/PluginList.tsx b/public/app/features/plugins/PluginList.tsx index 44150d13722..01b8b0fbcd5 100644 --- a/public/app/features/plugins/PluginList.tsx +++ b/public/app/features/plugins/PluginList.tsx @@ -1,25 +1,16 @@ import React, { FC } from 'react'; -import classNames from 'classnames'; import PluginListItem from './PluginListItem'; import { PluginMeta } from '@grafana/data'; -import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; interface Props { plugins: PluginMeta[]; - layoutMode: LayoutMode; } const PluginList: FC = props => { - const { plugins, layoutMode } = props; - - const listStyle = classNames({ - 'card-section': true, - 'card-list-layout-grid': layoutMode === LayoutModes.Grid, - 'card-list-layout-list': layoutMode === LayoutModes.List, - }); + const { plugins } = props; return ( -
+
    {plugins.map((plugin, index) => { return ; diff --git a/public/app/features/plugins/PluginListItem.tsx b/public/app/features/plugins/PluginListItem.tsx index 684baa83e4c..636efefccdc 100644 --- a/public/app/features/plugins/PluginListItem.tsx +++ b/public/app/features/plugins/PluginListItem.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; import { PluginMeta } from '@grafana/data'; +import { PluginSignatureBadge } from './PluginSignatureBadge'; interface Props { plugin: PluginMeta; @@ -13,6 +14,7 @@ const PluginListItem: FC = props => {
    {plugin.type}
    + {plugin.hasUpdate && (
    Update available! diff --git a/public/app/features/plugins/PluginListPage.test.tsx b/public/app/features/plugins/PluginListPage.test.tsx index 3d07956304d..15ec19af65f 100644 --- a/public/app/features/plugins/PluginListPage.test.tsx +++ b/public/app/features/plugins/PluginListPage.test.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { shallow } from 'enzyme'; import { PluginListPage, Props } from './PluginListPage'; -import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; import { NavModel, PluginMeta } from '@grafana/data'; import { mockToolkitActionCreator } from 'test/core/redux/mocks'; -import { setPluginsLayoutMode, setPluginsSearchQuery } from './state/reducers'; +import { setPluginsSearchQuery } from './state/reducers'; const setup = (propOverrides?: object) => { const props: Props = { @@ -19,8 +18,6 @@ const setup = (propOverrides?: object) => { plugins: [] as PluginMeta[], searchQuery: '', setPluginsSearchQuery: mockToolkitActionCreator(setPluginsSearchQuery), - setPluginsLayoutMode: mockToolkitActionCreator(setPluginsLayoutMode), - layoutMode: LayoutModes.Grid, loadPlugins: jest.fn(), hasFetched: false, }; diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx index 4d75d038d67..06d25f4ca2b 100644 --- a/public/app/features/plugins/PluginListPage.tsx +++ b/public/app/features/plugins/PluginListPage.tsx @@ -6,20 +6,17 @@ import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar'; import PluginList from './PluginList'; import { loadPlugins } from './state/actions'; import { getNavModel } from 'app/core/selectors/navModel'; -import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/selectors'; -import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector'; +import { getPlugins, getPluginsSearchQuery } from './state/selectors'; import { NavModel, PluginMeta } from '@grafana/data'; import { StoreState } from 'app/types'; -import { setPluginsLayoutMode, setPluginsSearchQuery } from './state/reducers'; +import { setPluginsSearchQuery } from './state/reducers'; export interface Props { navModel: NavModel; plugins: PluginMeta[]; - layoutMode: LayoutMode; searchQuery: string; hasFetched: boolean; loadPlugins: typeof loadPlugins; - setPluginsLayoutMode: typeof setPluginsLayoutMode; setPluginsSearchQuery: typeof setPluginsSearchQuery; } @@ -33,15 +30,7 @@ export class PluginListPage extends PureComponent { } render() { - const { - hasFetched, - navModel, - plugins, - layoutMode, - setPluginsLayoutMode, - setPluginsSearchQuery, - searchQuery, - } = this.props; + const { hasFetched, navModel, plugins, setPluginsSearchQuery, searchQuery } = this.props; const linkButton = { href: 'https://grafana.com/plugins?utm_source=grafana_plugin_list', @@ -54,12 +43,10 @@ export class PluginListPage extends PureComponent { <> setPluginsLayoutMode(mode)} setSearchQuery={query => setPluginsSearchQuery(query)} linkButton={linkButton} /> - {hasFetched && plugins && plugins && } + {hasFetched && plugins && plugins && } @@ -71,7 +58,6 @@ function mapStateToProps(state: StoreState) { return { navModel: getNavModel(state.navIndex, 'plugins'), plugins: getPlugins(state.plugins), - layoutMode: getLayoutMode(state.plugins), searchQuery: getPluginsSearchQuery(state.plugins), hasFetched: state.plugins.hasFetched, }; @@ -79,7 +65,6 @@ function mapStateToProps(state: StoreState) { const mapDispatchToProps = { loadPlugins, - setPluginsLayoutMode, setPluginsSearchQuery, }; diff --git a/public/app/features/plugins/PluginSignatureBadge.tsx b/public/app/features/plugins/PluginSignatureBadge.tsx new file mode 100644 index 00000000000..4c686b806c1 --- /dev/null +++ b/public/app/features/plugins/PluginSignatureBadge.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { Icon, stylesFactory, useTheme, IconName, Tooltip } from '@grafana/ui'; +import { GrafanaTheme, PluginSignatureStatus, getColorFromHexRgbOrName } from '@grafana/data'; +import { css } from 'emotion'; +import tinycolor from 'tinycolor2'; + +interface Props { + status: PluginSignatureStatus; +} + +export const PluginSignatureBadge: React.FC = ({ status }) => { + const theme = useTheme(); + const display = getSignatureDisplayModel(status); + const styles = getStyles(theme, display); + + return ( + +
    + + {display.text} +
    +     + ); +}; + +interface DisplayModel { + text: string; + icon: IconName; + color: string; + tooltip: string; +} + +function getSignatureDisplayModel(signature: PluginSignatureStatus): DisplayModel { + switch (signature) { + case PluginSignatureStatus.internal: + return { text: 'Core', icon: 'cube', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' }; + case PluginSignatureStatus.valid: + return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' }; + case PluginSignatureStatus.invalid: + return { + text: 'Invalid', + icon: 'exclamation-triangle', + color: 'red', + tooltip: 'Invalid plugin signature', + }; + case PluginSignatureStatus.modified: + return { + text: 'Modified', + icon: 'exclamation-triangle', + color: 'red', + tooltip: 'Valid signature but content has been modified', + }; + } + + return { text: 'Unsigned', icon: 'exclamation-triangle', color: 'red', tooltip: 'Unsigned external plugin' }; +} + +const getStyles = stylesFactory((theme: GrafanaTheme, model: DisplayModel) => { + let sourceColor = getColorFromHexRgbOrName(model.color); + let borderColor = ''; + let bgColor = ''; + let textColor = ''; + + if (theme.isDark) { + bgColor = tinycolor(sourceColor) + .darken(38) + .toString(); + borderColor = tinycolor(sourceColor) + .darken(25) + .toString(); + textColor = tinycolor(sourceColor) + .lighten(45) + .toString(); + } else { + bgColor = tinycolor(sourceColor) + .lighten(30) + .toString(); + borderColor = tinycolor(sourceColor) + .lighten(15) + .toString(); + textColor = tinycolor(sourceColor) + .darken(40) + .toString(); + } + + return { + wrapper: css` + font-size: ${theme.typography.size.sm}; + display: inline-flex; + padding: 1px 4px; + border-radius: 3px; + margin-top: 6px; + background: ${bgColor}; + border: 1px solid ${borderColor}; + color: ${textColor}; + + > span { + position: relative; + top: 1px; + margin-left: 2px; + } + `, + }; +}); + +PluginSignatureBadge.displayName = 'PluginSignatureBadge'; diff --git a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap index 160c02c6e8e..bb7610e5019 100644 --- a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap +++ b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Render should render component 1`] = `
      panel
    +
    panel
    +
    diff --git a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap index eab70367152..52cd762f00f 100644 --- a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap +++ b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap @@ -17,14 +17,12 @@ exports[`Render should render component 1`] = ` isLoading={true} > @@ -49,19 +47,16 @@ exports[`Render should render list 1`] = ` isLoading={false} > diff --git a/public/app/features/plugins/state/reducers.test.ts b/public/app/features/plugins/state/reducers.test.ts index 430f92581d3..8039b2ef5c4 100644 --- a/public/app/features/plugins/state/reducers.test.ts +++ b/public/app/features/plugins/state/reducers.test.ts @@ -6,11 +6,9 @@ import { pluginDashboardsLoaded, pluginsLoaded, pluginsReducer, - setPluginsLayoutMode, setPluginsSearchQuery, } from './reducers'; import { PluginMetaInfo, PluginType } from '@grafana/data'; -import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; describe('pluginsReducer', () => { describe('when pluginsLoaded is dispatched', () => { @@ -58,18 +56,6 @@ describe('pluginsReducer', () => { }); }); - describe('when setPluginsLayoutMode is dispatched', () => { - it('then state should be correct', () => { - reducerTester() - .givenReducer(pluginsReducer, { ...initialState }) - .whenActionIsDispatched(setPluginsLayoutMode(LayoutModes.List)) - .thenStateShouldEqual({ - ...initialState, - layoutMode: LayoutModes.List, - }); - }); - }); - describe('when pluginDashboardsLoad is dispatched', () => { it('then state should be correct', () => { reducerTester() diff --git a/public/app/features/plugins/state/reducers.ts b/public/app/features/plugins/state/reducers.ts index 20dd027d8a8..3278b901af2 100644 --- a/public/app/features/plugins/state/reducers.ts +++ b/public/app/features/plugins/state/reducers.ts @@ -1,13 +1,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { PluginMeta, PanelPlugin } from '@grafana/data'; import { PluginsState } from 'app/types'; -import { LayoutMode, LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; import { PluginDashboard } from '../../../types/plugins'; export const initialState: PluginsState = { plugins: [], searchQuery: '', - layoutMode: LayoutModes.Grid, hasFetched: false, dashboards: [], isLoadingPluginDashboards: false, @@ -25,9 +23,6 @@ const pluginsSlice = createSlice({ setPluginsSearchQuery: (state, action: PayloadAction) => { state.searchQuery = action.payload; }, - setPluginsLayoutMode: (state, action: PayloadAction) => { - state.layoutMode = action.payload; - }, pluginDashboardsLoad: (state, action: PayloadAction) => { state.isLoadingPluginDashboards = true; state.dashboards = []; @@ -46,7 +41,6 @@ export const { pluginsLoaded, pluginDashboardsLoad, pluginDashboardsLoaded, - setPluginsLayoutMode, setPluginsSearchQuery, panelPluginLoaded, } = pluginsSlice.actions; diff --git a/public/app/features/plugins/state/selectors.ts b/public/app/features/plugins/state/selectors.ts index f980ea301b5..e8ce6d2dba3 100644 --- a/public/app/features/plugins/state/selectors.ts +++ b/public/app/features/plugins/state/selectors.ts @@ -9,4 +9,3 @@ export const getPlugins = (state: PluginsState) => { }; export const getPluginsSearchQuery = (state: PluginsState) => state.searchQuery; -export const getLayoutMode = (state: PluginsState) => state.layoutMode; diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 469f6347fcc..00820209cf1 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -24,7 +24,6 @@ export interface PanelPluginsIndex { export interface PluginsState { plugins: PluginMeta[]; searchQuery: string; - layoutMode: string; hasFetched: boolean; dashboards: PluginDashboard[]; isLoadingPluginDashboards: boolean; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 98626164113..92154fc400a 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -143,9 +143,9 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-4, $dark-3); -$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); +$card-background: #202226; +$card-background-hover: #25272b; +$card-shadow: none; // Lists $list-item-bg: $card-background; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 7d3dbc6ce93..cd5bd855419 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -136,9 +136,9 @@ $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: linear-gradient(135deg, $gray-6, $gray-7); -$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); +$card-background: #f1f5f9; +$card-background-hover: #eaf0f6; +$card-shadow: none; // Lists $list-item-bg: $gray-7; diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss index 9e1bcb6ed77..a9f4d8a30bc 100644 --- a/public/sass/components/_add_data_source.scss +++ b/public/sass/components/_add_data_source.scss @@ -24,7 +24,6 @@ display: flex; align-items: center; cursor: pointer; - box-shadow: $card-shadow; background: $panel-editor-viz-item-bg; border: 1px solid transparent; border-radius: 3px;