From cf6fd9aca80d6ec5c2c0ead1f4a74b0f8da2e024 Mon Sep 17 00:00:00 2001 From: Hadi Cheaito <38328371+hadicheaito1@users.noreply.github.com> Date: Thu, 5 Jan 2023 16:23:30 -0500 Subject: [PATCH] Room Config Placeholders (#4415) --- .../admin/room_configuration/RoomConfig.jsx | 113 ++++++++++-------- .../RoomConfigPlaceHolder.jsx | 21 ++++ 2 files changed, 82 insertions(+), 52 deletions(-) create mode 100644 app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx diff --git a/app/javascript/components/admin/room_configuration/RoomConfig.jsx b/app/javascript/components/admin/room_configuration/RoomConfig.jsx index aa6b66e3..a8912511 100644 --- a/app/javascript/components/admin/room_configuration/RoomConfig.jsx +++ b/app/javascript/components/admin/room_configuration/RoomConfig.jsx @@ -10,6 +10,7 @@ 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'; export default function RoomConfig() { const { t } = useTranslation(); @@ -20,8 +21,6 @@ export default function RoomConfig() { return <Navigate to="/404" />; } - if (isLoading) return null; - return ( <div id="admin-panel" className="pb-3"> <h3 className="py-5"> { t('admin.admin_panel') } </h3> @@ -39,56 +38,66 @@ export default function RoomConfig() { <div className="p-4 border-bottom"> <h3> { t('admin.room_configuration.room_configuration') } </h3> </div> - <div className="p-4"> - <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')} - 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')} - 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')} - 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')} - 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')} - 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')} - 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')} - 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')} - value={roomConfigs?.glModeratorAccessCode} - /> - </div> + + { + isLoading + ? ( + // eslint-disable-next-line react/no-array-index-key + [...Array(8)].map((val, idx) => <RoomConfigPlaceHolder key={idx} />) + ) + : ( + <div className="p-4"> + <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')} + 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')} + 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')} + 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')} + 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')} + 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')} + 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')} + 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')} + value={roomConfigs?.glModeratorAccessCode} + /> + </div> + ) + } </Container> </Tab.Content> </Col> diff --git a/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx b/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx new file mode 100644 index 00000000..18d6f4aa --- /dev/null +++ b/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { + Col, Row, Stack, +} from 'react-bootstrap'; +import Placeholder from '../../shared_components/utilities/Placeholder'; + +export default function RoomConfigPlaceHolder() { + return ( + <Row className="mb-4"> + <Col md="9"> + <Stack> + <Placeholder width={8} size="md" className="me-2" /> + <Placeholder width={8} size="lg" className="me-2" /> + </Stack> + </Col> + <Col md="3"> + <Placeholder width={5} size="md" className="me-2" /> + </Col> + </Row> + ); +} -- GitLab