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

Replace UI Select with custom select (#4626)

parent d3d21fec
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 64 additions and 86 deletions
app/javascript/components/admin/room_configuration/RoomConfig.jsx
+ 8
− 9
View file @ 9f54f31a
......@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
import { Navigate } from 'react-router-dom';
import AdminNavSideBar from '../AdminNavSideBar';
import RoomConfigRow from './RoomConfigRow';
import useUpdateRoomConfig from '../../../hooks/mutations/admin/room_configuration/useUpdateRoomConfig';
import useRoomConfigs from '../../../hooks/queries/rooms/useRoomConfigs';
import { useAuth } from '../../../contexts/auth/AuthProvider';
import RoomConfigPlaceHolder from './RoomConfigPlaceHolder';
......@@ -50,49 +49,49 @@ export default function RoomConfig() {
<RoomConfigRow
title={t('admin.room_configuration.configurations.allow_room_to_be_recorded')}
subtitle={t('admin.room_configuration.configurations.allow_room_to_be_recorded_description')}
mutation={() => useUpdateRoomConfig('record')}
settingName="record"
value={roomConfigs?.record}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.require_user_signed_in')}
subtitle={t('admin.room_configuration.configurations.require_user_signed_in_description')}
mutation={() => useUpdateRoomConfig('glRequireAuthentication')}
settingName="glRequireAuthentication"
value={roomConfigs?.glRequireAuthentication}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.require_mod_approval')}
subtitle={t('admin.room_configuration.configurations.require_mod_approval_description')}
mutation={() => useUpdateRoomConfig('guestPolicy')}
settingName="guestPolicy"
value={roomConfigs?.guestPolicy}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting')}
subtitle={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting_description')}
mutation={() => useUpdateRoomConfig('glAnyoneCanStart')}
settingName="glAnyoneCanStart"
value={roomConfigs?.glAnyoneCanStart}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.allow_users_to_join_as_mods')}
subtitle={t('admin.room_configuration.configurations.allow_users_to_join_as_mods_description')}
mutation={() => useUpdateRoomConfig('glAnyoneJoinAsModerator')}
settingName="glAnyoneJoinAsModerator"
value={roomConfigs?.glAnyoneJoinAsModerator}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.mute_users_on_join')}
subtitle={t('admin.room_configuration.configurations.mute_users_on_join_description')}
mutation={() => useUpdateRoomConfig('muteOnStart')}
settingName="muteOnStart"
value={roomConfigs?.muteOnStart}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.viewer_access_code')}
subtitle={t('admin.room_configuration.configurations.viewer_access_code_description')}
mutation={() => useUpdateRoomConfig('glViewerAccessCode')}
settingName="glViewerAccessCode"
value={roomConfigs?.glViewerAccessCode}
/>
<RoomConfigRow
title={t('admin.room_configuration.configurations.mod_access_code')}
subtitle={t('admin.room_configuration.configurations.mod_access_code_description')}
mutation={() => useUpdateRoomConfig('glModeratorAccessCode')}
settingName="glModeratorAccessCode"
value={roomConfigs?.glModeratorAccessCode}
/>
</div>
......
app/javascript/components/admin/room_configuration/RoomConfigRow.jsx
+ 21
− 32
View file @ 9f54f31a
import React from 'react';
import PropTypes from 'prop-types';
import {
Row, Stack, Form as BootStrapForm, Col,
} from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { Dropdown } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import FormControlGeneric from '../../shared_components/forms/FormControlGeneric';
import Form from '../../shared_components/forms/Form';
import { RoomConfigFormConfig, RoomConfigFormFields } from '../../../helpers/forms/RoomConfigFormHelpers';
import SettingSelect from '../site_settings/settings/SettingSelect';
import useUpdateRoomConfig from '../../../hooks/mutations/admin/room_configuration/useUpdateRoomConfig';
export default function RoomConfigRow({
value, title, subtitle, mutation: useUpdateRoomConfig,
value, title, subtitle, settingName,
}) {
const { t } = useTranslation();
const fields = RoomConfigFormFields;
const { defaultValues } = RoomConfigFormConfig;
defaultValues.value = value;
const updateRoomConfig = useUpdateRoomConfig();
const methods = useForm(RoomConfigFormConfig);
const useUpdateRoom = useUpdateRoomConfig(settingName);
return (
<Row className="mb-4">
<Col md="9">
<Stack>
<strong> {title} </strong>
<span className="text-muted"> {subtitle} </span>
</Stack>
</Col>
<Col md="3">
<Form className="mb-0 float-end" methods={methods} onChange={methods.handleSubmit(updateRoomConfig.mutate)}>
<FormControlGeneric control={BootStrapForm.Select} field={fields.value} disabled={updateRoomConfig.isLoading}>
<option value="optional">{ t('admin.room_configuration.optional') }</option>
<option value="false">{ t('admin.room_configuration.disabled') }</option>
<option value="true">{ t('admin.room_configuration.enabled') }</option>
</FormControlGeneric>
</Form>
</Col>
</Row>
<SettingSelect
defaultValue={value}
title={title}
description={subtitle}
>
<Dropdown.Item value="optional" onClick={() => useUpdateRoom.mutate({ value: 'optional' })}>
{t('admin.room_configuration.optional')}
</Dropdown.Item>
<Dropdown.Item value="false" onClick={() => useUpdateRoom.mutate({ value: 'false' })}>
{t('admin.room_configuration.disabled')}
</Dropdown.Item>
<Dropdown.Item value="true" onClick={() => useUpdateRoom.mutate({ value: 'true' })}>
{t('admin.room_configuration.enabled')}
</Dropdown.Item>
</SettingSelect>
);
}
RoomConfigRow.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
mutation: PropTypes.func.isRequired,
settingName: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
};
app/javascript/components/admin/site_settings/registration/Registration.jsx
+ 19
− 7
View file @ 9f54f31a
import React from 'react';
import { Row } from 'react-bootstrap';
import { Dropdown, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
import RegistrationForm from './forms/RegistrationForm';
......@@ -14,18 +14,25 @@ export default function Registration() {
const { data: env } = useEnv();
const { data: siteSettings } = useSiteSettings(['RoleMapping', 'DefaultRole', 'ResyncOnLogin', 'RegistrationMethod']);
const { data: roles } = useRoles();
const updateRegistrationMethod = useUpdateSiteSetting('RegistrationMethod');
const updateDefaultRole = useUpdateSiteSetting('DefaultRole');
return (
<>
<SettingSelect
settingName="RegistrationMethod"
defaultValue={siteSettings?.RegistrationMethod}
title={t('admin.site_settings.registration.registration_method')}
description={t('admin.site_settings.registration.registration_method_description')}
>
<option value="open"> {t('admin.site_settings.registration.registration_methods.open')} </option>
<option value="invite"> {t('admin.site_settings.registration.registration_methods.invite')} </option>
<option value="approval"> {t('admin.site_settings.registration.registration_methods.approval')} </option>
<Dropdown.Item value="open" onClick={() => updateRegistrationMethod.mutate({ value: 'open' })}>
{t('admin.site_settings.registration.registration_methods.open')}
</Dropdown.Item>
<Dropdown.Item value="invite" onClick={() => updateRegistrationMethod.mutate({ value: 'invite' })}>
{t('admin.site_settings.registration.registration_methods.invite')}
</Dropdown.Item>
<Dropdown.Item value="approval" onClick={() => updateRegistrationMethod.mutate({ value: 'approval' })}>
{t('admin.site_settings.registration.registration_methods.approval')}
</Dropdown.Item>
</SettingSelect>
{ env?.OPENID_CONNECT && (
......@@ -44,12 +51,17 @@ export default function Registration() {
)}
<SettingSelect
settingName="DefaultRole"
defaultValue={siteSettings?.DefaultRole}
title={t('admin.site_settings.registration.default_role')}
description={t('admin.site_settings.registration.default_role_description')}
>
{ roles?.map((role) => (<option key={role.id} value={role.name}> {role.name} </option>)) }
{
roles?.map((role) => (
<Dropdown.Item value={role.name} onClick={() => updateDefaultRole.mutate({ value: role.name })}>
{role.name}
</Dropdown.Item>
))
}
</SettingSelect>
<Row className="mb-3">
......
app/javascript/components/admin/site_settings/settings/SettingSelect.jsx
+ 16
− 15
View file @ 9f54f31a
import { Form, Stack } from 'react-bootstrap';
import { Dropdown, Stack } from 'react-bootstrap';
import React from 'react';
import PropTypes from 'prop-types';
import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
export default function SettingSelect({
settingName, defaultValue, title, description, children,
defaultValue, title, description, children,
}) {
const updateSiteSetting = useUpdateSiteSetting(settingName);
// Get the currently selected option and set the dropdown toggle to that value
const defaultString = children?.filter((item) => item.props.value === defaultValue)[0];
return (
<Stack direction="horizontal" className="mb-3">
......@@ -14,24 +15,24 @@ export default function SettingSelect({
<strong> { title } </strong>
<div className="text-muted">{ description }</div>
</Stack>
<div>
<Form.Select
value={defaultValue}
onChange={(event) => {
updateSiteSetting.mutate({ value: event.target.value });
}}
>
<div className="ms-5">
<Dropdown className="setting-select">
<Dropdown.Toggle>
{ defaultString?.props?.children }
<ChevronDownIcon className="hi-s float-end" />
</Dropdown.Toggle>
<Dropdown.Menu>
{children}
</Form.Select>
</Dropdown.Menu>
</Dropdown>
</div>
</Stack>
);
}
SettingSelect.propTypes = {
settingName: PropTypes.string.isRequired,
defaultValue: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
children: PropTypes.element.isRequired,
children: PropTypes.arrayOf(PropTypes.element).isRequired,
};
app/javascript/helpers/forms/RoomConfigFormHelpers.jsx deleted 100644 → 0
+ 0
− 23
View file @ d3d21fec
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
value: yup.mixed().oneOf(['optional', 'true', 'false']),
});
export const RoomConfigFormConfig = {
defaultValues: {
value: 'optional',
},
resolver: yupResolver(validationSchema),
};
export const RoomConfigFormFields = {
value: {
controlId: 'RoomConfigFormValue',
hookForm: {
id: 'value',
},
},
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum Datenschutzerklärung