Skip to content
Snippets Groups Projects
Unverified Commit c31cc192 authored by Ahmad Farhat's avatar Ahmad Farhat Committed by GitHub
Browse files

Fixed registration settings to properly reflect their value (#4648)

parent 0c7e2465
Branches
Tags
No related merge requests found
...@@ -18,7 +18,7 @@ export default function SettingsRow({ ...@@ -18,7 +18,7 @@ export default function SettingsRow({
<input <input
className="form-check-input fs-5" className="form-check-input fs-5"
type="checkbox" type="checkbox"
defaultChecked={value === 'true'} checked={value === 'true'}
onClick={(event) => { onClick={(event) => {
updateSiteSetting.mutate({ value: event.target.checked }); updateSiteSetting.mutate({ value: event.target.checked });
}} }}
...@@ -28,9 +28,13 @@ export default function SettingsRow({ ...@@ -28,9 +28,13 @@ export default function SettingsRow({
); );
} }
SettingsRow.defaultProps = {
value: '',
};
SettingsRow.propTypes = { SettingsRow.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired, value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
description: PropTypes.node.isRequired, description: PropTypes.node.isRequired,
}; };
import React from 'react'; import React from 'react';
import { Dropdown, Row } from 'react-bootstrap'; import { Dropdown, Row, Stack } from 'react-bootstrap';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Button from 'react-bootstrap/Button';
import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting'; import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
import RegistrationForm from './forms/RegistrationForm';
import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSiteSettings'; import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSiteSettings';
import SettingsRow from '../SettingsRow'; import SettingsRow from '../SettingsRow';
import useEnv from '../../../../hooks/queries/env/useEnv'; import useEnv from '../../../../hooks/queries/env/useEnv';
...@@ -16,6 +16,7 @@ export default function Registration() { ...@@ -16,6 +16,7 @@ export default function Registration() {
const { data: roles } = useRoles(); const { data: roles } = useRoles();
const updateRegistrationMethod = useUpdateSiteSetting('RegistrationMethod'); const updateRegistrationMethod = useUpdateSiteSetting('RegistrationMethod');
const updateDefaultRole = useUpdateSiteSetting('DefaultRole'); const updateDefaultRole = useUpdateSiteSetting('DefaultRole');
const updateRoleMapping = useUpdateSiteSetting('RoleMapping');
return ( return (
<> <>
...@@ -24,13 +25,13 @@ export default function Registration() { ...@@ -24,13 +25,13 @@ export default function Registration() {
title={t('admin.site_settings.registration.registration_method')} title={t('admin.site_settings.registration.registration_method')}
description={t('admin.site_settings.registration.registration_method_description')} description={t('admin.site_settings.registration.registration_method_description')}
> >
<Dropdown.Item value="open" onClick={() => updateRegistrationMethod.mutate({ value: 'open' })}> <Dropdown.Item key="open" value="open" onClick={() => updateRegistrationMethod.mutate({ value: 'open' })}>
{t('admin.site_settings.registration.registration_methods.open')} {t('admin.site_settings.registration.registration_methods.open')}
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item value="invite" onClick={() => updateRegistrationMethod.mutate({ value: 'invite' })}> <Dropdown.Item key="invite" value="invite" onClick={() => updateRegistrationMethod.mutate({ value: 'invite' })}>
{t('admin.site_settings.registration.registration_methods.invite')} {t('admin.site_settings.registration.registration_methods.invite')}
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item value="approval" onClick={() => updateRegistrationMethod.mutate({ value: 'approval' })}> <Dropdown.Item key="approval" value="approval" onClick={() => updateRegistrationMethod.mutate({ value: 'approval' })}>
{t('admin.site_settings.registration.registration_methods.approval')} {t('admin.site_settings.registration.registration_methods.approval')}
</Dropdown.Item> </Dropdown.Item>
</SettingSelect> </SettingSelect>
...@@ -41,7 +42,7 @@ export default function Registration() { ...@@ -41,7 +42,7 @@ export default function Registration() {
name="ResyncOnLogin" name="ResyncOnLogin"
title={t('admin.site_settings.registration.resync_on_login')} title={t('admin.site_settings.registration.resync_on_login')}
description={( description={(
<p className="text-muted"> <p className="text-muted mb-0">
{ t('admin.site_settings.registration.resync_on_login_description') } { t('admin.site_settings.registration.resync_on_login_description') }
</p> </p>
)} )}
...@@ -57,7 +58,7 @@ export default function Registration() { ...@@ -57,7 +58,7 @@ export default function Registration() {
> >
{ {
roles?.map((role) => ( roles?.map((role) => (
<Dropdown.Item value={role.name} onClick={() => updateDefaultRole.mutate({ value: role.name })}> <Dropdown.Item key={role.name} value={role.name} onClick={() => updateDefaultRole.mutate({ value: role.name })}>
{role.name} {role.name}
</Dropdown.Item> </Dropdown.Item>
)) ))
...@@ -65,12 +66,22 @@ export default function Registration() { ...@@ -65,12 +66,22 @@ export default function Registration() {
</SettingSelect> </SettingSelect>
<Row className="mb-3"> <Row className="mb-3">
<h6> { t('admin.site_settings.registration.role_mapping_by_email') } </h6> <strong> { t('admin.site_settings.registration.role_mapping_by_email') } </strong>
<p className="text-muted"> { t('admin.site_settings.registration.role_mapping_by_email_description') } </p> <p className="text-muted"> { t('admin.site_settings.registration.role_mapping_by_email_description') } </p>
<RegistrationForm <Stack direction="horizontal">
mutation={() => useUpdateSiteSetting('RoleMapping')} <input
value={siteSettings?.RoleMapping} className="form-control"
placeholder={t('admin.site_settings.registration.enter_role_mapping_rule')}
defaultValue={siteSettings?.RoleMapping}
/> />
<Button
variant="brand"
className="ms-2"
onClick={(e) => updateRoleMapping.mutate({ value: e.target.previousSibling.value })}
>
{t('update')}
</Button>
</Stack>
</Row> </Row>
</> </>
); );
......
import React from 'react';
import PropTypes from 'prop-types';
import {
Button, InputGroup,
} from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import Form from '../../../../shared_components/forms/Form';
import { RegistrationFormFields, RegistrationFormConfig } from '../../../../../helpers/forms/RegistrationFormHelpers';
import Spinner from '../../../../shared_components/utilities/Spinner';
import FormControlGeneric from '../../../../shared_components/forms/FormControlGeneric';
export default function RegistrationForm({ value, mutation: useUpdateSiteSettingsAPI }) {
const { t } = useTranslation();
const updateSiteSettingsAPI = useUpdateSiteSettingsAPI();
const { defaultValues } = RegistrationFormConfig;
defaultValues.value = value;
const fields = RegistrationFormFields;
const methods = useForm(RegistrationFormConfig);
return (
<Form methods={methods} onSubmit={updateSiteSettingsAPI.mutate}>
<InputGroup>
<FormControlGeneric
field={fields.value}
aria-describedby="RegistrationForm-submit-btn"
type="text"
/>
<Button id="RegistrationForm-submit-btn" variant="brand" type="submit" disabled={updateSiteSettingsAPI.isLoading}>
{updateSiteSettingsAPI.isLoading && <Spinner className="me-2" />}
{ t('update') }
</Button>
</InputGroup>
</Form>
);
}
RegistrationForm.defaultProps = {
value: '',
};
RegistrationForm.propTypes = {
value: PropTypes.string,
mutation: PropTypes.func.isRequired,
};
...@@ -30,8 +30,12 @@ export default function SettingSelect({ ...@@ -30,8 +30,12 @@ export default function SettingSelect({
); );
} }
SettingSelect.defaultProps = {
defaultValue: '',
};
SettingSelect.propTypes = { SettingSelect.propTypes = {
defaultValue: PropTypes.string.isRequired, defaultValue: PropTypes.string,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired, description: PropTypes.string.isRequired,
children: PropTypes.arrayOf(PropTypes.element).isRequired, children: PropTypes.arrayOf(PropTypes.element).isRequired,
......
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
value: yup.string(),
});
export const RegistrationFormConfig = {
mode: 'onChange',
defaultValues: {
value: '',
},
resolver: yupResolver(validationSchema),
};
export const RegistrationFormFields = {
value: {
placeHolder: 'Enter a role mapping rule...',
controlId: 'RegistrationFormvalue',
hookForm: {
id: 'value',
},
},
};
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
name: yup.string().required('Please enter the new name for the recording.'),
});
export const UpdateRecordingsFormConfig = {
mode: 'onChange',
defaultValues: {
name: '',
},
resolver: yupResolver(validationSchema),
};
export const UpdateRecordingsFormFields = {
name: {
label: 'Name',
placeHolder: 'Enter the recording name',
controlId: 'UpdateRecordingsFormName',
hookForm: {
id: 'name',
},
},
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment