mirror of https://github.com/grafana/grafana
UserAdmin: Inform about enterprise user features (#106632)
* UserAdmin: Inform about enterprise user features * Update * Update * Update * Update * Update * New design * Update * Update * Update * Update * Update link * fix import * refactor to brand badge to component * Update * Update * Update * Update * Update linkspull/107156/head
Torkel Ödegaard
3 weeks ago
committed by
GitHub
parent
5a8a04cb25
commit
ceee0b9c12
@ -0,0 +1,117 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useState } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { GrafanaEdition } from '@grafana/data/internal'; |
||||
import { t, Trans } from '@grafana/i18n'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { Text, Stack, useStyles2, Button, LinkButton } from '@grafana/ui'; |
||||
import { CloudEnterpriseBadge } from 'app/core/components/Branding/CloudEnterpriseBadge'; |
||||
import { contextSrv } from 'app/core/core'; |
||||
import { backendSrv } from 'app/core/services/backend_srv'; |
||||
|
||||
export interface Props { |
||||
page?: 'teams' | 'users'; |
||||
} |
||||
|
||||
export function EnterpriseAuthFeaturesCard({ page }: Props) { |
||||
const styles = useStyles2(getStyles); |
||||
const helpFlags = contextSrv.user.helpFlags1; |
||||
const HELP_FLAG_ENTERPRISE_AUTH = 0x0004; |
||||
const [isDismissed, setDismissed] = useState<boolean>(Boolean(helpFlags & HELP_FLAG_ENTERPRISE_AUTH)); |
||||
|
||||
const onDismiss = () => { |
||||
backendSrv |
||||
.put(`/api/user/helpflags/${HELP_FLAG_ENTERPRISE_AUTH}`, undefined, { showSuccessAlert: false }) |
||||
.then((res) => { |
||||
contextSrv.user.helpFlags1 = res.helpFlags1; |
||||
setDismissed(true); |
||||
}); |
||||
}; |
||||
|
||||
// This card is only visible in oss
|
||||
if (isDismissed || !isOpenSourceBuildOrUnlicenced()) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div className={styles.box}> |
||||
<Stack direction="row" alignItems="center" justifyContent={'space-between'}> |
||||
<CloudEnterpriseBadge /> |
||||
<Button |
||||
variant="secondary" |
||||
fill="text" |
||||
icon="times" |
||||
onClick={onDismiss} |
||||
aria-label={t('admin.enterprise-auth-features-card.dismiss', 'Dismiss')} |
||||
/> |
||||
</Stack> |
||||
<Stack direction="column" gap={0.5}> |
||||
<Text variant="h4"> |
||||
<Trans i18nKey="admin.enterprise-auth-features-card.heading">Enterprise authentication</Trans> |
||||
</Text> |
||||
<Text variant="body" color="secondary"> |
||||
<Trans i18nKey="admin.enterprise-auth-features-card.text"> |
||||
Manage users, teams, and permissions automatically with <strong>SAML</strong>, <strong>SCIM</strong>,{' '} |
||||
<strong>LDAP</strong>, and <strong>RBAC</strong> — available in Grafana Cloud and Enterprise. |
||||
</Trans> |
||||
</Text> |
||||
</Stack> |
||||
<div> |
||||
<LinkButton |
||||
href={`https://grafana.com/auth/sign-up/create-user?cloud-auth=&redirectPath=cloud-auth&utm_source=oss-grafana&cnt-admin-${page}`} |
||||
icon="external-link-alt" |
||||
variant="secondary" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
<Trans i18nKey="admin.enterprise-auth-features-card.learn-more-link">Learn more</Trans> |
||||
</LinkButton> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
cloudBadge: css({ |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
background: theme.colors.gradients.brandHorizontal, |
||||
color: theme.colors.primary.contrastText, |
||||
padding: theme.spacing(0.5, 1), |
||||
borderRadius: theme.shape.radius.pill, |
||||
fontSize: theme.typography.bodySmall.fontSize, |
||||
gap: theme.spacing(1), |
||||
}), |
||||
box: css({ |
||||
padding: theme.spacing(3), |
||||
border: `1px solid ${theme.colors.border.weak}`, |
||||
backgroundColor: theme.colors.background.secondary, |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
gap: theme.spacing(1.5), |
||||
borderRadius: theme.shape.radius.default, |
||||
marginTop: theme.spacing(3), |
||||
strong: { |
||||
color: theme.colors.text.primary, |
||||
}, |
||||
}), |
||||
icon: css({ |
||||
position: 'relative', |
||||
top: -1, |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
export function isOpenSourceBuildOrUnlicenced() { |
||||
if (config.buildInfo.edition === GrafanaEdition.OpenSource) { |
||||
return true; |
||||
} |
||||
|
||||
if (config.licenseInfo.stateInfo !== 'Licensed') { |
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
Loading…
Reference in new issue