IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-29 15:59:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Updates Alert design and licence warning hook (#32930)

Browse Source 
* Theme: Updates Alert design and licence warning hook

* Updated snapshot

* Updated design

* Updated
This commit is contained in:
Torkel Ödegaard
2021-04-13 18:00:55 +02:00
committed by GitHub
parent 12ceff407b
commit b0c6cad637
18 changed files with 194 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/AppWrapper.tsx
+11 -1
View File
@@ -1,4 +1,4 @@
import React from 'react';
import React, { ComponentType } from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { config, locationService, navigationLogger } from '@grafana/runtime';
import { Provider } from 'react-redux';
@@ -22,6 +22,13 @@ interface AppWrapperState {
ngInjector: any;
}
/** Used by enterprise */
let bodyRenderHooks: ComponentType[] = [];
export function addBodyRenderHook(fn: ComponentType) {
bodyRenderHooks.push(fn);
}
export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> {
container = React.createRef<HTMLDivElement>();
@@ -98,6 +105,9 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
<AppNotificationList />
<SearchWrapper />
{this.state.ngInjector && this.container && this.renderRoutes()}
{bodyRenderHooks.map((Hook, index) => (
<Hook key={index.toString()} />
))}
</div>
</Router>
</div>
public/app/core/components/AppNotifications/AppNotificationItem.tsx
+1
View File
@@ -27,6 +27,7 @@ export default class AppNotificationItem extends Component<Props> {
severity={appNotification.severity}
title={appNotification.title}
onRemove={() => onClearNotification(appNotification.id)}
elevated
>
{appNotification.component || appNotification.text}
</Alert>
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+2 -2
View File
@@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
onCancel={[Function]}
styles={
Object {
"actionsRow": "css-7gkft9",
"actionsRow": "css-sxfls",
"actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p",
"headerRow": "css-3sdqvi",
@@ -25,7 +25,7 @@ exports[`Render should render component 1`] = `
className="css-gxxmom"
>
<div
className="css-7gkft9"
className="css-sxfls"
>
<div
aria-label="Add new panel"
public/app/features/datasources/settings/ButtonRow.tsx
+11 -10
View File
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import config from 'app/core/config';
import { Button, LinkButton } from '@grafana/ui';
export interface Props {
isReadOnly: boolean;
@@ -14,33 +15,33 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
return (
<div className="gf-form-button-row">
{!isReadOnly && (
<button
<Button
type="submit"
className="btn btn-primary"
variant="primary"
disabled={isReadOnly}
onClick={(event) => onSubmit(event)}
aria-label={selectors.pages.DataSource.saveAndTest}
>
Save &amp; test
</button>
</Button>
)}
{isReadOnly && (
<button type="submit" className="btn btn-success" onClick={onTest}>
<Button type="submit" variant="primary" onClick={onTest}>
Test
</button>
</Button>
)}
<button
<Button
type="button"
className="btn btn-danger"
variant="destructive"
disabled={isReadOnly}
onClick={onDelete}
aria-label={selectors.pages.DataSource.delete}
>
Delete
</button>
<a className="btn btn-inverse" href={`${config.appSubUrl}/datasources`}>
</Button>
<LinkButton variant="link" href={`${config.appSubUrl}/datasources`}>
Back
</a>
</LinkButton>
</div>
);
};
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+1 -1
View File
@@ -233,7 +233,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
/>
)}
<div className="gf-form-group">
<div className="gf-form-group p-t-2">
{testingStatus?.message && (
<Alert
severity={testingStatus.status === 'error' ? 'error' : 'success'}
public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
+18 -18
View File
@@ -4,28 +4,28 @@ exports[`Render should render component 1`] = `
<div
className="gf-form-button-row"
>
<button
className="btn btn-success"
<Button
onClick={[MockFunction]}
type="submit"
variant="primary"
>
Test
</button>
<button
</Button>
<Button
aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={true}
onClick={[MockFunction]}
type="button"
variant="destructive"
>
Delete
</button>
<a
className="btn btn-inverse"
</Button>
<LinkButton
href="/datasources"
variant="link"
>
Back
</a>
</LinkButton>
</div>
`;
@@ -33,29 +33,29 @@ exports[`Render should render with buttons enabled 1`] = `
<div
className="gf-form-button-row"
>
<button
<Button
aria-label="Data source settings page Save and Test button"
className="btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
variant="primary"
>
Save & test
</button>
<button
</Button>
<Button
aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={false}
onClick={[MockFunction]}
type="button"
variant="destructive"
>
Delete
</button>
<a
className="btn btn-inverse"
</Button>
<LinkButton
href="/datasources"
variant="link"
>
Back
</a>
</LinkButton>
</div>
`;
public/app/features/plugins/PluginStateInfo.tsx
+1 -10
View File
@@ -1,7 +1,6 @@
import React, { FC } from 'react';
import { AlphaNotice } from '@grafana/ui';
import { PluginState } from '@grafana/data';
import { css } from '@emotion/css';
interface Props {
state?: PluginState;
@@ -24,15 +23,7 @@ const PluginStateinfo: FC<Props> = (props) => {
return null;
}
return (
<AlphaNotice
state={props.state}
text={text}
className={css`
margin-left: 16px;
`}
/>
);
return <AlphaNotice state={props.state} text={text} />;
};
export default PluginStateinfo;
public/sass/_variables.dark.generated.scss
+7 -7
View File
@@ -99,8 +99,8 @@ $page-bg: #181b1f;
$dashboard-bg: #0d0f16;
$text-color-strong: #fff;
$text-color: rgba(255, 255, 255, 0.75);
$text-color-semi-weak: rgba(255, 255, 255, 0.50);
$text-color: rgba(255, 255, 255, 0.77);
$text-color-semi-weak: rgba(255, 255, 255, 0.55);
$text-color-weak: rgba(255, 255, 255, 0.35);
$text-color-faint: rgba(255, 255, 255, 0.35);
$text-color-emphasis: #fff;
@@ -122,7 +122,7 @@ $external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: rgba(255, 255, 255, 0.75);
$headings-color: rgba(255, 255, 255, 0.77);
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@@ -258,7 +258,7 @@ $side-menu-border: none;
$side-menu-item-hover-bg: #22252b;
$side-menu-shadow: 0 0 20px black;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: rgba(255, 255, 255, 0.75);
$side-menu-header-color: rgba(255, 255, 255, 0.77);
// Menu dropdowns
// -------------------------
@@ -288,13 +288,13 @@ $tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: #22252b;
$tooltipColor: rgba(255, 255, 255, 0.75);
$tooltipColor: rgba(255, 255, 255, 0.77);
$tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3);
$popover-bg: #22252b;
$popover-color: rgba(255, 255, 255, 0.75);
$popover-color: rgba(255, 255, 255, 0.77);
$popover-border-color: rgba(218,224,254,0.15);
$popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3);
@@ -339,7 +339,7 @@ $diff-group-bg: #22252b;
$diff-arrow-color: $white;
$diff-json-bg: #22252b;
$diff-json-fg: rgba(255, 255, 255, 0.75);
$diff-json-fg: rgba(255, 255, 255, 0.77);
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
public/sass/_variables.light.generated.scss
+4 -4
View File
@@ -127,7 +127,7 @@ $hr-border-color: $gray-4 !default;
$panel-bg: #fff;
$panel-border: #fff;
$panel-header-hover-bg: rgba(0, 0, 0, 0.04);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg;
// Page header
@@ -260,7 +260,7 @@ $side-menu-header-color: #e9edf2;
// -------------------------
$menu-dropdown-bg: #F7F7F8;
$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs
// -------------------------
@@ -282,13 +282,13 @@ $tooltipBackground: #F7F7F8;
$tooltipColor: rgba(0, 0, 0, 0.75);
$tooltipArrowColor: #F7F7F8;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #F7F7F8;
$popover-color: rgba(0, 0, 0, 0.75);
$popover-border-color: rgba(0, 2, 78, 0.20);
$popover-header-bg: #F7F7F8;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
$graph-tooltip-bg: $gray-5;
public/sass/components/_infobox.scss
+1 -1
View File
@@ -2,7 +2,7 @@
position: relative;
padding: $space-lg;
background-color: $empty-list-cta-bg;
border-top: 3px solid $info-box-border-color;
border-left: 3px solid $info-box-border-color;
margin-bottom: $space-md;
margin-right: $space-xs;
box-shadow: $card-shadow;