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