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

* 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

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>
);
};

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'}

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>
`;