1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-15 17:50:48 +02:00

feat: make frontend aware that OIDC can be configured through env (#7597)

Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
Christopher Kolstad 2024-07-16 13:53:30 +02:00 committed by GitHub
parent e43109a2cb
commit 7ed1d770a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 48 additions and 12 deletions

View File

@ -23,12 +23,14 @@ interface IAutoCreateFormProps {
value: string | boolean | number | undefined, value: string | boolean | number | undefined,
) => void; ) => void;
onUpdateRole: (role: IRole | null) => void; onUpdateRole: (role: IRole | null) => void;
disabled?: boolean;
} }
export const AutoCreateForm = ({ export const AutoCreateForm = ({
data = { enabled: false, autoCreate: false }, data = { enabled: false, autoCreate: false },
setValue, setValue,
onUpdateRole, onUpdateRole,
disabled = false,
}: IAutoCreateFormProps) => { }: IAutoCreateFormProps) => {
const { roles } = useRoles(); const { roles } = useRoles();
@ -69,7 +71,7 @@ export const AutoCreateForm = ({
onChange={updateAutoCreate} onChange={updateAutoCreate}
name='enabled' name='enabled'
checked={data.autoCreate} checked={data.autoCreate}
disabled={!data.enabled} disabled={!data.enabled || disabled}
/> />
} }
label='Auto-create users' label='Auto-create users'
@ -90,7 +92,9 @@ export const AutoCreateForm = ({
roles={roles} roles={roles}
value={resolveRole(data)} value={resolveRole(data)}
setValue={onUpdateRole} setValue={onUpdateRole}
disabled={!data.autoCreate || !data.enabled} disabled={
!data.autoCreate || !data.enabled || disabled
}
required required
hideDescription hideDescription
/> />
@ -110,7 +114,7 @@ export const AutoCreateForm = ({
onChange={updateField} onChange={updateField}
label='Email domains' label='Email domains'
name='emailDomains' name='emailDomains'
disabled={!data.autoCreate || !data.enabled} disabled={!data.autoCreate || !data.enabled || disabled}
required={Boolean(data.autoCreate)} required={Boolean(data.autoCreate)}
value={data.emailDomains || ''} value={data.emailDomains || ''}
placeholder='@company.com, @anotherCompany.com' placeholder='@company.com, @anotherCompany.com'

View File

@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields'; import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
import { SsoGroupSettings } from '../SsoGroupSettings'; import { SsoGroupSettings } from '../SsoGroupSettings';
import type { IRole } from 'interfaces/role'; import type { IRole } from 'interfaces/role';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const initialState = { const initialState = {
enabled: false, enabled: false,
@ -45,6 +46,7 @@ type State = typeof initialState & {
export const OidcAuth = () => { export const OidcAuth = () => {
const { setToastData, setToastApiError } = useToast(); const { setToastData, setToastApiError } = useToast();
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const { oidcConfiguredThroughEnv } = uiConfig;
const [data, setData] = useState<State>(initialState); const [data, setData] = useState<State>(initialState);
const { config } = useAuthSettings('oidc'); const { config } = useAuthSettings('oidc');
const { updateSettings, errors, loading } = useAuthSettingsApi('oidc'); const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
@ -107,6 +109,24 @@ export const OidcAuth = () => {
<> <>
<Grid container sx={{ mb: 3 }}> <Grid container sx={{ mb: 3 }}>
<Grid item md={12}> <Grid item md={12}>
<ConditionallyRender
condition={Boolean(oidcConfiguredThroughEnv)}
show={
<Alert sx={{ mb: 2 }} severity='warning'>
OIDC setup is currently controlled via
environment variables. Please see the{' '}
<a
href='https://www.unleash-hosted.com/docs/enterprise-authentication'
target='_blank'
rel='noreferrer'
>
documentation
</a>{' '}
to learn how to set the correct environment
variables
</Alert>
}
/>
<Alert severity='info'> <Alert severity='info'>
Please read the{' '} Please read the{' '}
<a <a
@ -140,6 +160,7 @@ export const OidcAuth = () => {
/> />
} }
label={data.enabled ? 'Enabled' : 'Disabled'} label={data.enabled ? 'Enabled' : 'Disabled'}
disabled={oidcConfiguredThroughEnv}
/> />
</Grid> </Grid>
</Grid> </Grid>
@ -154,7 +175,7 @@ export const OidcAuth = () => {
label='Discover URL' label='Discover URL'
name='discoverUrl' name='discoverUrl'
value={data.discoverUrl} value={data.discoverUrl}
disabled={!data.enabled} disabled={!data.enabled || oidcConfiguredThroughEnv}
style={{ width: '400px' }} style={{ width: '400px' }}
variant='outlined' variant='outlined'
size='small' size='small'
@ -172,7 +193,7 @@ export const OidcAuth = () => {
label='Client ID' label='Client ID'
name='clientId' name='clientId'
value={data.clientId} value={data.clientId}
disabled={!data.enabled} disabled={!data.enabled || oidcConfiguredThroughEnv}
style={{ width: '400px' }} style={{ width: '400px' }}
variant='outlined' variant='outlined'
size='small' size='small'
@ -193,7 +214,7 @@ export const OidcAuth = () => {
label='Client Secret' label='Client Secret'
name='secret' name='secret'
value={data.secret} value={data.secret}
disabled={!data.enabled} disabled={!data.enabled || oidcConfiguredThroughEnv}
style={{ width: '400px' }} style={{ width: '400px' }}
variant='outlined' variant='outlined'
size='small' size='small'
@ -216,7 +237,10 @@ export const OidcAuth = () => {
<Switch <Switch
onChange={updateSingleSignOut} onChange={updateSingleSignOut}
value={data.enableSingleSignOut} value={data.enableSingleSignOut}
disabled={!data.enabled} disabled={
!data.enabled ||
oidcConfiguredThroughEnv
}
name='enableSingleSignOut' name='enableSingleSignOut'
checked={data.enableSingleSignOut} checked={data.enableSingleSignOut}
/> />
@ -247,7 +271,7 @@ export const OidcAuth = () => {
label='ACR Values' label='ACR Values'
name='acrValues' name='acrValues'
value={data.acrValues} value={data.acrValues}
disabled={!data.enabled} disabled={!data.enabled || oidcConfiguredThroughEnv}
style={{ width: '400px' }} style={{ width: '400px' }}
variant='outlined' variant='outlined'
size='small' size='small'
@ -258,12 +282,14 @@ export const OidcAuth = () => {
ssoType='OIDC' ssoType='OIDC'
data={data} data={data}
setValue={setValue} setValue={setValue}
disabled={oidcConfiguredThroughEnv}
/> />
<AutoCreateForm <AutoCreateForm
data={data} data={data}
setValue={setValue} setValue={setValue}
onUpdateRole={onUpdateRole} onUpdateRole={onUpdateRole}
disabled={oidcConfiguredThroughEnv}
/> />
<Grid container spacing={3} mb={2}> <Grid container spacing={3} mb={2}>
<Grid item md={5}> <Grid item md={5}>
@ -292,6 +318,7 @@ export const OidcAuth = () => {
e.target.value, e.target.value,
) )
} }
disabled={oidcConfiguredThroughEnv}
> >
{/*consider these from API or constants. */} {/*consider these from API or constants. */}
<MenuItem value='RS256'>RS256</MenuItem> <MenuItem value='RS256'>RS256</MenuItem>
@ -308,7 +335,7 @@ export const OidcAuth = () => {
variant='contained' variant='contained'
color='primary' color='primary'
type='submit' type='submit'
disabled={loading} disabled={loading || oidcConfiguredThroughEnv}
> >
Save Save
</Button>{' '} </Button>{' '}

View File

@ -11,6 +11,7 @@ interface SsoGroupSettingsProps {
addGroupsScope: boolean; addGroupsScope: boolean;
}; };
setValue: (name: string, value: string | boolean) => void; setValue: (name: string, value: string | boolean) => void;
disabled?: boolean;
} }
export const SsoGroupSettings = ({ export const SsoGroupSettings = ({
@ -22,6 +23,7 @@ export const SsoGroupSettings = ({
addGroupsScope: false, addGroupsScope: false,
}, },
setValue, setValue,
disabled = false,
}: SsoGroupSettingsProps) => { }: SsoGroupSettingsProps) => {
const updateGroupSyncing = () => { const updateGroupSyncing = () => {
setValue('enableGroupSyncing', !data.enableGroupSyncing); setValue('enableGroupSyncing', !data.enableGroupSyncing);
@ -53,7 +55,7 @@ export const SsoGroupSettings = ({
value={data.enableGroupSyncing} value={data.enableGroupSyncing}
name='enableGroupSyncing' name='enableGroupSyncing'
checked={data.enableGroupSyncing} checked={data.enableGroupSyncing}
disabled={!data.enabled} disabled={!data.enabled || disabled}
/> />
} }
label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'} label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
@ -74,7 +76,7 @@ export const SsoGroupSettings = ({
label='Group JSON Path' label='Group JSON Path'
name='groupJsonPath' name='groupJsonPath'
value={data.groupJsonPath} value={data.groupJsonPath}
disabled={!data.enableGroupSyncing} disabled={!data.enableGroupSyncing || disabled}
style={{ width: '400px' }} style={{ width: '400px' }}
variant='outlined' variant='outlined'
size='small' size='small'
@ -99,7 +101,9 @@ export const SsoGroupSettings = ({
<Switch <Switch
onChange={updateAddGroupScope} onChange={updateAddGroupScope}
value={data.addGroupsScope} value={data.addGroupsScope}
disabled={!data.enableGroupSyncing} disabled={
!data.enableGroupSyncing || disabled
}
name='addGroupsScope' name='addGroupsScope'
checked={data.addGroupsScope} checked={data.addGroupsScope}
/> />

View File

@ -30,6 +30,7 @@ export interface IUiConfig {
strategySegmentsLimit?: number; strategySegmentsLimit?: number;
frontendApiOrigins?: string[]; frontendApiOrigins?: string[];
resourceLimits: ResourceLimitsSchema; resourceLimits: ResourceLimitsSchema;
oidcConfiguredThroughEnv?: boolean;
} }
export interface IProclamationToast { export interface IProclamationToast {