From 9fbfaf08a616aee04cad9b9f8cb3e5ad9964215d Mon Sep 17 00:00:00 2001 From: linoman <2051016+linoman@users.noreply.github.com> Date: Thu, 22 Aug 2024 17:16:18 +0200 Subject: [PATCH] SSO LDAP: Add LDAP settings drawer (#92199) * Add LdapDrawer component * Add success message for discarding LDAP settings * Add Use SSL tooltip * Add min tls version field * Change alert error to alert success * Add tls ciphers field * Update i18n * rename ssl for tls * rename ldap to LDAP --- public/app/features/admin/ldap/LdapDrawer.tsx | 251 ++++++++++++++++++ .../features/admin/ldap/LdapSettingsPage.tsx | 27 +- public/app/types/ldap.ts | 2 +- public/locales/en-US/grafana.json | 88 ++++++ public/locales/pseudo-LOCALE/grafana.json | 88 ++++++ 5 files changed, 454 insertions(+), 2 deletions(-) create mode 100644 public/app/features/admin/ldap/LdapDrawer.tsx diff --git a/public/app/features/admin/ldap/LdapDrawer.tsx b/public/app/features/admin/ldap/LdapDrawer.tsx new file mode 100644 index 00000000000..f5cd65db6ff --- /dev/null +++ b/public/app/features/admin/ldap/LdapDrawer.tsx @@ -0,0 +1,251 @@ +import { css } from '@emotion/css'; +import { useFormContext } from 'react-hook-form'; + +import { GrafanaTheme2, SelectableValue } from '@grafana/data'; +import { + useStyles2, + CollapsableSection, + Divider, + Drawer, + Field, + Icon, + Input, + Label, + Select, + Stack, + Switch, + Text, + TextLink, + Tooltip, +} from '@grafana/ui'; +import { t, Trans } from 'app/core/internationalization'; +import { LdapPayload } from 'app/types'; + +interface Props { + onClose: () => void; +} + +const tlsOptions: Array> = ['TLS1.2', 'TLS1.3'].map((v) => ({ label: v, value: v })); + +export const LdapDrawerComponent = ({ onClose }: Props) => { + const styles = useStyles2(getStyles); + const { register, setValue, watch } = useFormContext(); + + const groupMappingsLabel = ( + + ); + + const useTlsDescription = ( + + For a complete list of supported ciphers and TLS versions, refer to:{' '} + { + + https://go.dev/src/crypto/tls/cipher_suites.go + + } + + ); + + return ( + + + + + + + + + + + + + + + + Specify the LDAP attributes that map to the user‘s given name, surname, and email address, ensuring + the application correctly retrieves and displays user information. + + + + + + + + + + + + + + + + + + + + + + + + + + + + setValue('settings.config.servers.0.group_search_base_dns', [value]) + } + /> + + + + + + + + + + + + + + + + {watch('settings.config.servers.0.use_ssl') && ( + <> + + + + + + setValue( + 'settings.config.servers.0.tls_ciphers', + value?.split(/,|\s/).map((v: string) => v.trim()) + ) + } + /> + + + )} + + + ); +}; + +function getStyles(theme: GrafanaTheme2) { + return { + sectionLabel: css({ + fontSize: theme.typography.size.lg, + }), + }; +} diff --git a/public/app/features/admin/ldap/LdapSettingsPage.tsx b/public/app/features/admin/ldap/LdapSettingsPage.tsx index e0217d3c950..1dbfe1e8c21 100644 --- a/public/app/features/admin/ldap/LdapSettingsPage.tsx +++ b/public/app/features/admin/ldap/LdapSettingsPage.tsx @@ -5,13 +5,15 @@ import { connect } from 'react-redux'; import { AppEvents, GrafanaTheme2, NavModelItem } from '@grafana/data'; import { getBackendSrv, getAppEvents } from '@grafana/runtime'; -import { useStyles2, Alert, Box, Button, Field, Input, Stack, TextLink } from '@grafana/ui'; +import { useStyles2, Alert, Box, Button, Field, Input, Stack, Text, TextLink } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import config from 'app/core/config'; import { t, Trans } from 'app/core/internationalization'; import { Loader } from 'app/features/plugins/admin/components/Loader'; import { LdapPayload, StoreState } from 'app/types'; +import { LdapDrawerComponent } from './LdapDrawer'; + const appEvents = getAppEvents(); const mapStateToProps = (state: StoreState) => ({ @@ -71,6 +73,7 @@ const emptySettings: LdapPayload = { export const LdapSettingsPage = () => { const [isLoading, setIsLoading] = useState(true); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); const methods = useForm({ defaultValues: emptySettings }); const { getValues, handleSubmit, register, reset } = methods; @@ -161,6 +164,10 @@ export const LdapSettingsPage = () => { }); return; } + appEvents.publish({ + type: AppEvents.alertSuccess.name, + payload: [t('ldap-settings-page.alert.discard-success', 'LDAP settings discarded')], + }); reset(payload); } catch (error) { appEvents.publish({ @@ -261,6 +268,23 @@ export const LdapSettingsPage = () => { {...register('settings.config.servers.0.search_base_dns', { required: true })} /> + + + + + Advanced Settings + + + + Mappings, extra security measures, and more. + + + + + +