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 ref
) => { ) => {
const theme = useTheme2(); 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(); const titleId = useId();
return ( return (
@ -101,6 +102,7 @@ Alert.displayName = 'Alert';
const getStyles = ( const getStyles = (
theme: GrafanaTheme2, theme: GrafanaTheme2,
severity: AlertVariant, severity: AlertVariant,
hasTitle: boolean,
elevated?: boolean, elevated?: boolean,
bottomSpacing?: number, bottomSpacing?: number,
topSpacing?: number topSpacing?: number
@ -157,7 +159,7 @@ const getStyles = (
`, `,
content: css` content: css`
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
padding-top: ${theme.spacing(1)}; padding-top: ${hasTitle ? theme.spacing(1) : 0};
max-height: 50vh; max-height: 50vh;
overflow-y: auto; 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; flex-direction: row;
padding: 0; padding: 0;
justify-content: space-between; justify-content: space-between;
align-items: center;
`, `,
alertParagraph: css` alertParagraph: css`
margin: 0 ${theme.spacing(1)} 0 0; 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}; color: ${theme.colors.text.primary};
`, `,
}); });
@ -34,14 +35,14 @@ export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<Alert severity="warning" title="Data sources have a new home!"> <Alert severity="warning" title="">
<div className={styles.alertContent}> <div className={styles.alertContent}>
<p className={styles.alertParagraph}> <p className={styles.alertParagraph}>
You can discover new data sources or manage existing ones in the new Connections section, accessible from the Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections
left-hand navigation, or click the button here. page, accessible from the lefthand nav.
</p> </p>
<LinkButton aria-label="Link to Connections" icon="link" href={destinationLinks[destinationPage]}> <LinkButton aria-label="Link to Connections" icon="adjust-circle" href={destinationLinks[destinationPage]}>
Connections See data sources in Connections
</LinkButton> </LinkButton>
</div> </div>
</Alert> </Alert>