IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Connections: Update redirect alert message (#61152)

Browse Source 
* fix(Alert): don't add padding to content when there is no title

* Feat(Connections): update the style and wording of the redirect alert

* fix(UI/Alert): more resilient check for has title
This commit is contained in:
Levente Balogh 2023-01-11 11:41:19 +01:00 committed by GitHub
parent 6b2394eff1
commit 8b290bba55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -54,7 +54,8 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
ref
) => {
const theme = useTheme2();
const styles = getStyles(theme, severity, elevated, bottomSpacing, topSpacing);
const hasTitle = Boolean(title);
const styles = getStyles(theme, severity, hasTitle, elevated, bottomSpacing, topSpacing);
const titleId = useId();
return (
@ -101,6 +102,7 @@ Alert.displayName = 'Alert';
const getStyles = (
theme: GrafanaTheme2,
severity: AlertVariant,
hasTitle: boolean,
elevated?: boolean,
bottomSpacing?: number,
topSpacing?: number
@ -157,7 +159,7 @@ const getStyles = (
`,
content: css`
color: ${theme.colors.text.secondary};
padding-top: ${theme.spacing(1)};
padding-top: ${hasTitle ? theme.spacing(1) : 0};
max-height: 50vh;
overflow-y: auto;
`,

13
public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
View File

@ -12,10 +12,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
flex-direction: row;
padding: 0;
justify-content: space-between;
align-items: center;
`,
alertParagraph: css`
margin: 0 ${theme.spacing(1)} 0 0;
line-height: ${theme.spacing(theme.components.height.md)};
line-height: ${theme.spacing(theme.components.height.sm)};
color: ${theme.colors.text.primary};
`,
});
@ -34,14 +35,14 @@ export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage
const styles = useStyles2(getStyles);
return (
<Alert severity="warning" title="Data sources have a new home!">
<Alert severity="warning" title="">
<div className={styles.alertContent}>
<p className={styles.alertParagraph}>
You can discover new data sources or manage existing ones in the new Connections section, accessible from the
left-hand navigation, or click the button here.
Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections
page, accessible from the lefthand nav.
</p>
<LinkButton aria-label="Link to Connections" icon="link" href={destinationLinks[destinationPage]}>
Connections
<LinkButton aria-label="Link to Connections" icon="adjust-circle" href={destinationLinks[destinationPage]}>
See data sources in Connections
</LinkButton>
</div>
</Alert>