diff --git a/client/admin/customEmoji/AddCustomEmoji.js b/client/admin/customEmoji/AddCustomEmoji.js index 876fad4a238ba..b4eb008123955 100644 --- a/client/admin/customEmoji/AddCustomEmoji.js +++ b/client/admin/customEmoji/AddCustomEmoji.js @@ -4,6 +4,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon } from '@rock import { useTranslation } from '../../contexts/TranslationContext'; import { useFileInput } from '../../hooks/useFileInput'; import { useEndpointAction } from '../../hooks/useEndpointAction'; +import VerticalBar from '../../components/basic/VerticalBar'; export function AddCustomEmoji({ close, onChange, ...props }) { const t = useTranslation(); @@ -35,44 +36,42 @@ export function AddCustomEmoji({ close, onChange, ...props }) { const clickUpload = useFileInput(setEmojiPreview, 'emoji'); - return - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Aliases')} - - setAliases(e.currentTarget.value)} placeholder={t('Aliases')} /> - - - - {t('Custom_Emoji')} - - - - { newEmojiPreview && } - - - - - - - - - - - - - - - - - - - - ; + return + + {t('Name')} + + setName(e.currentTarget.value)} placeholder={t('Name')} /> + + + + {t('Aliases')} + + setAliases(e.currentTarget.value)} placeholder={t('Aliases')} /> + + + + {t('Custom_Emoji')} + + + + { newEmojiPreview && } + + + + + + + + + + + + + + + + + + + ; } diff --git a/client/admin/customEmoji/EditCustomEmoji.js b/client/admin/customEmoji/EditCustomEmoji.js index ce681a23698b8..f8b6db3863d81 100644 --- a/client/admin/customEmoji/EditCustomEmoji.js +++ b/client/admin/customEmoji/EditCustomEmoji.js @@ -6,6 +6,7 @@ import { Modal } from '../../components/basic/Modal'; import { useFileInput } from '../../hooks/useFileInput'; import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental'; import { useEndpointAction } from '../../hooks/useEndpointAction'; +import VerticalBar from '../../components/basic/VerticalBar'; const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => { const t = useTranslation(); @@ -131,46 +132,44 @@ export function EditCustomEmoji({ close, onChange, data, ...props }) { const clickUpload = useFileInput(setEmojiPreview, 'emoji'); return <> - - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Aliases')} - - - - - - {t('Custom_Emoji')} - - - - - - - - - - - - - - - - - - - - - - - - + + + {t('Name')} + + setName(e.currentTarget.value)} placeholder={t('Name')} /> + + + + {t('Aliases')} + + + + + + {t('Custom_Emoji')} + + + + + + + + + + + + + + + + + + + + + + + { modal } ; } diff --git a/client/admin/customSounds/NewSound.js b/client/admin/customSounds/AddCustomSound.js similarity index 69% rename from client/admin/customSounds/NewSound.js rename to client/admin/customSounds/AddCustomSound.js index b77671f1b07a7..15be04aceb6e8 100644 --- a/client/admin/customSounds/NewSound.js +++ b/client/admin/customSounds/AddCustomSound.js @@ -6,8 +6,9 @@ import { useTranslation } from '../../contexts/TranslationContext'; import { useMethod } from '../../contexts/ServerContext'; import { useFileInput } from '../../hooks/useFileInput'; import { validate, createSoundData } from './lib'; +import VerticalBar from '../../components/basic/VerticalBar'; -export function NewSound({ goToNew, close, onChange, ...props }) { +export function AddCustomSound({ goToNew, close, onChange, ...props }) { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -71,31 +72,29 @@ export function NewSound({ goToNew, close, onChange, ...props }) { } }, [name, sound]); - return - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Sound_File_mp3')} - - - - {(sound && sound.name) || 'none'} - - - - - - - - - - - - - ; + return + + {t('Name')} + + setName(e.currentTarget.value)} placeholder={t('Name')} /> + + + + {t('Sound_File_mp3')} + + + + {(sound && sound.name) || 'none'} + + + + + + + + + + + + ; } diff --git a/client/admin/customSounds/AdminSoundsRoute.js b/client/admin/customSounds/AdminSoundsRoute.js index 80ad2675f9898..9a5ad6e8516a8 100644 --- a/client/admin/customSounds/AdminSoundsRoute.js +++ b/client/admin/customSounds/AdminSoundsRoute.js @@ -8,8 +8,8 @@ import { usePermission } from '../../contexts/AuthorizationContext'; import { useTranslation } from '../../contexts/TranslationContext'; import Page from '../../components/basic/Page'; import { AdminSounds } from './AdminSounds'; -import { NewSound } from './NewSound'; -import { EditSound } from './EditSound'; +import { AddCustomSound } from './AddCustomSound'; +import { EditCustomSound } from './EditCustomSound'; import { useRoute, useRouteParameter } from '../../contexts/RouterContext'; import { useEndpointData } from '../../hooks/useEndpointData'; import VerticalBar from '../../components/basic/VerticalBar'; @@ -101,8 +101,8 @@ export default function CustomSoundsRoute({ props }) { { context === 'new' && t('Custom_Sound_Add') } - {context === 'edit' && } - {context === 'new' && } + {context === 'edit' && } + {context === 'new' && } } ; diff --git a/client/admin/customSounds/EditSound.js b/client/admin/customSounds/EditCustomSound.js similarity index 81% rename from client/admin/customSounds/EditSound.js rename to client/admin/customSounds/EditCustomSound.js index 0496a617fb0e2..43170fb5ddefd 100644 --- a/client/admin/customSounds/EditSound.js +++ b/client/admin/customSounds/EditCustomSound.js @@ -8,6 +8,7 @@ import { Modal } from '../../components/basic/Modal'; import { useFileInput } from '../../hooks/useFileInput'; import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental'; import { validate, createSoundData } from './lib'; +import VerticalBar from '../../components/basic/VerticalBar'; const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => { const t = useTranslation(); @@ -161,42 +162,40 @@ export function EditCustomSound({ close, onChange, data, ...props }) { return <> - - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - - {t('Sound_File_mp3')} - - - - {(sound && sound.name) || 'none'} - - - - - - - - - - - - - - - - - - - - - + + + {t('Name')} + + setName(e.currentTarget.value)} placeholder={t('Name')} /> + + + + + {t('Sound_File_mp3')} + + + + {(sound && sound.name) || 'none'} + + + + + + + + + + + + + + + + + + + + { modal } ; } diff --git a/client/admin/customUserStatus/AddCustomUserStatus.js b/client/admin/customUserStatus/AddCustomUserStatus.js index ef494b576c576..e4563cf1cd6fd 100644 --- a/client/admin/customUserStatus/AddCustomUserStatus.js +++ b/client/admin/customUserStatus/AddCustomUserStatus.js @@ -4,6 +4,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, Select } from '@ro import { useTranslation } from '../../contexts/TranslationContext'; import { useMethod } from '../../contexts/ServerContext'; import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; +import VerticalBar from '../../components/basic/VerticalBar'; export function AddCustomUserStatus({ goToNew, close, onChange, ...props }) { const t = useTranslation(); @@ -34,28 +35,26 @@ export function AddCustomUserStatus({ goToNew, close, onChange, ...props }) { ['offline', t('Offline')], ]; - return - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Presence')} - - setStatusType(value)} placeholder={t('Presence')} options={presenceOptions}/> + + + + + + + + + + + ; } diff --git a/client/admin/customUserStatus/EditCustomUserStatus.js b/client/admin/customUserStatus/EditCustomUserStatus.js index e3f2169e53ba8..9ebbaa2533ec0 100644 --- a/client/admin/customUserStatus/EditCustomUserStatus.js +++ b/client/admin/customUserStatus/EditCustomUserStatus.js @@ -6,6 +6,7 @@ import { useMethod } from '../../contexts/ServerContext'; import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; import { Modal } from '../../components/basic/Modal'; import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental'; +import VerticalBar from '../../components/basic/VerticalBar'; const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => { const t = useTranslation(); @@ -132,37 +133,35 @@ export function EditCustomUserStatus({ close, onChange, data, ...props }) { ]; return <> - - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Presence')} - - setStatusType(value)} placeholder={t('Presence')} options={presenceOptions}/> + + + + + + + + + + + + + + + + + + { modal } ; } diff --git a/client/admin/invites/InvitesPage.js b/client/admin/invites/InvitesPage.js index 7412e18f1d9a4..ca12b21c2c741 100644 --- a/client/admin/invites/InvitesPage.js +++ b/client/admin/invites/InvitesPage.js @@ -134,7 +134,7 @@ function InvitesPage() { return - + } /> - + ; } diff --git a/client/admin/rooms/EditRoom.js b/client/admin/rooms/EditRoom.js new file mode 100644 index 0000000000000..d60ca438a58d2 --- /dev/null +++ b/client/admin/rooms/EditRoom.js @@ -0,0 +1,191 @@ +import React, { useCallback, useState, useMemo } from 'react'; +import { Box, Headline, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout } from '@rocket.chat/fuselage'; + +import { useTranslation } from '../../contexts/TranslationContext'; +import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental'; +import { roomTypes } from '../../../app/utils/client'; +import { useMethod } from '../../contexts/ServerContext'; +import { usePermission } from '../../contexts/AuthorizationContext'; +import NotAuthorizedPage from '../NotAuthorizedPage'; +import { useEndpointAction } from '../../hooks/useEndpointAction'; +import VerticalBar from '../../components/basic/VerticalBar'; + +export function EditRoomContextBar({ rid }) { + const canViewRoomAdministration = usePermission('view-room-administration'); + return canViewRoomAdministration ? : ; +} + +function EditRoomWithData({ rid }) { + const [cache, setState] = useState(); + + const { data = {}, state, error } = useEndpointDataExperimental('rooms.adminRooms.getRoom', useMemo(() => ({ rid }), [rid, cache])); + + if (state === ENDPOINT_STATES.LOADING) { + return + + + + + + + ; + } + + if (state === ENDPOINT_STATES.ERROR) { + return error.message; + } + + return setState(new Date())}/>; +} + +function EditRoom({ room, onChange }) { + const t = useTranslation(); + + const [deleted, setDeleted] = useState(false); + const [newData, setNewData] = useState({}); + const [changeArchivation, setChangeArchivation] = useState(false); + + const canDelete = usePermission(`delete-${ room.t }`); + + const hasUnsavedChanges = useMemo(() => Object.values(newData).filter((current) => current === null).length < Object.keys(newData).length, [JSON.stringify(newData)]); + const saveQuery = useMemo(() => ({ rid: room._id, ...Object.fromEntries(Object.entries(newData).filter(([, value]) => value !== null)) }), [room._id, JSON.stringify(newData)]); + + const archiveSelector = room.archived ? 'unarchive' : 'archive'; + const archiveMessage = archiveSelector === 'archive' ? 'Room_has_been_archived' : 'Room_has_been_archived'; + const archiveQuery = useMemo(() => ({ rid: room._id, action: room.archived ? 'unarchive' : 'archive' }), [room.rid, changeArchivation]); + + const saveAction = useEndpointAction('POST', 'rooms.saveRoomSettings', saveQuery, t('Room_updated_successfully')); + const archiveAction = useEndpointAction('POST', 'rooms.changeArchivationState', archiveQuery, t(archiveMessage)); + + const updateType = (type) => () => (type === 'p' ? 'c' : 'p'); + const areEqual = (a, b) => a === b || !(a || b); + + const handleChange = (field, currentValue, getValue = (e) => e.currentTarget.value) => (e) => setNewData({ ...newData, [field]: areEqual(getValue(e), currentValue) ? null : getValue(e) }); + const handleSave = async () => { + await Promise.all([hasUnsavedChanges && saveAction(), changeArchivation && archiveAction()].filter(Boolean)); + onChange('update'); + }; + + const deleteRoom = useMethod('eraseRoom'); + + const handleDelete = useCallback(async () => { + await deleteRoom(room._id); + setDeleted(true); + }, [room]); + + const roomName = room.t === 'd' ? room.usernames.join(' x ') : roomTypes.getRoomName(room.t, { type: room.t, ...room }); + const roomType = newData.roomType ?? room.t; + const readOnly = newData.readOnly ?? !!room.ro; + const isArchived = changeArchivation ? !room.archived : !!room.archived; + const isDefault = newData.default ?? !!room.default; + const isFavorite = newData.favorite ?? !!room.favorite; + const isFeatured = newData.featured ?? !!room.featured; + + return + {deleted && } + + + {t('Name')} + + + + + { room.t !== 'd' && <> + + {t('Owner')} + + {room.u?.username} + + + + {t('Topic')} + + + + + + + + + {t('Public')} + {t('All_users_in_the_channel_can_write_new_messages')} + + + + + + {t('Private')} + {t('Just_invited_people_can_access_this_channel')} + + + + + + + + + + {t('Collaborative')} + {t('All_users_in_the_channel_can_write_new_messages')} + + + !readOnly)}/> + + + {t('Read_only')} + {t('Only_authorized_users_can_write_new_messages')} + + + + + + + + + {t('Archived')} + setChangeArchivation(!changeArchivation)}/> + + + + + + + {t('Default')} + !isDefault)}/> + + + + + + + {t('Favorite')} + !isFavorite)}/> + + + + + + + {t('Featured')} + !isFeatured)}/> + + + + + + + + + + + + + + } + + + + + + ; +} diff --git a/client/admin/rooms/RoomsPage.js b/client/admin/rooms/RoomsPage.js index 758a654521673..515bdea310128 100644 --- a/client/admin/rooms/RoomsPage.js +++ b/client/admin/rooms/RoomsPage.js @@ -4,7 +4,7 @@ import Page from '../../components/basic/Page'; import VerticalBar from '../../components/basic/VerticalBar'; import { useTranslation } from '../../contexts/TranslationContext'; import { useRouteParameter, useRoute } from '../../contexts/RouterContext'; -import { EditRoomContextBar } from './edit/EditRoom'; +import { EditRoomContextBar } from './EditRoom'; import RoomsTable from './RoomsTable'; export function RoomsPage() { @@ -22,9 +22,9 @@ export function RoomsPage() { return - + - + {context && diff --git a/client/admin/rooms/RoomsTable.js b/client/admin/rooms/RoomsTable.js index ca16eb4233990..97914c61fc09a 100644 --- a/client/admin/rooms/RoomsTable.js +++ b/client/admin/rooms/RoomsTable.js @@ -146,7 +146,7 @@ function RoomsTable() { - {roomName} + {roomName} diff --git a/client/admin/rooms/edit/EditRoom.js b/client/admin/rooms/edit/EditRoom.js deleted file mode 100644 index 7638bebcc00ce..0000000000000 --- a/client/admin/rooms/edit/EditRoom.js +++ /dev/null @@ -1,194 +0,0 @@ -import React, { useCallback, useState, useMemo } from 'react'; -import { Box, Headline, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout } from '@rocket.chat/fuselage'; - -import { useTranslation } from '../../../contexts/TranslationContext'; -import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../hooks/useEndpointDataExperimental'; -import { roomTypes } from '../../../../app/utils/client'; -import { useMethod } from '../../../contexts/ServerContext'; -import { usePermission } from '../../../contexts/AuthorizationContext'; -import NotAuthorizedPage from '../../NotAuthorizedPage'; -import { useEndpointAction } from '../../../hooks/useEndpointAction'; -import Page from '../../../components/basic/Page'; - -export function EditRoomContextBar({ rid }) { - const canViewRoomAdministration = usePermission('view-room-administration'); - return canViewRoomAdministration ? : ; -} - -function EditRoomWithData({ rid }) { - const [cache, setState] = useState(); - - const { data = {}, state, error } = useEndpointDataExperimental('rooms.adminRooms.getRoom', useMemo(() => ({ rid }), [rid, cache])); - - if (state === ENDPOINT_STATES.LOADING) { - return - - - - - - - ; - } - - if (state === ENDPOINT_STATES.ERROR) { - return error.message; - } - - return setState(new Date())}/>; -} - -function EditRoom({ room, onChange }) { - const t = useTranslation(); - - const [deleted, setDeleted] = useState(false); - const [newData, setNewData] = useState({}); - const [changeArchivation, setChangeArchivation] = useState(false); - - const canDelete = usePermission(`delete-${ room.t }`); - - const hasUnsavedChanges = useMemo(() => Object.values(newData).filter((current) => current === null).length < Object.keys(newData).length, [JSON.stringify(newData)]); - const saveQuery = useMemo(() => ({ rid: room._id, ...Object.fromEntries(Object.entries(newData).filter(([, value]) => value !== null)) }), [room._id, JSON.stringify(newData)]); - - const archiveSelector = room.archived ? 'unarchive' : 'archive'; - const archiveMessage = archiveSelector === 'archive' ? 'Room_has_been_archived' : 'Room_has_been_archived'; - const archiveQuery = useMemo(() => ({ rid: room._id, action: room.archived ? 'unarchive' : 'archive' }), [room.rid, changeArchivation]); - - const saveAction = useEndpointAction('POST', 'rooms.saveRoomSettings', saveQuery, t('Room_updated_successfully')); - const archiveAction = useEndpointAction('POST', 'rooms.changeArchivationState', archiveQuery, t(archiveMessage)); - - const updateType = (type) => () => (type === 'p' ? 'c' : 'p'); - const areEqual = (a, b) => a === b || !(a || b); - - const handleChange = (field, currentValue, getValue = (e) => e.currentTarget.value) => (e) => setNewData({ ...newData, [field]: areEqual(getValue(e), currentValue) ? null : getValue(e) }); - const handleSave = async () => { - await Promise.all([hasUnsavedChanges && saveAction(), changeArchivation && archiveAction()].filter(Boolean)); - onChange('update'); - }; - - const deleteRoom = useMethod('eraseRoom'); - - const handleDelete = useCallback(async () => { - await deleteRoom(room._id); - setDeleted(true); - }, [room]); - - const roomName = room.t === 'd' ? room.usernames.join(' x ') : roomTypes.getRoomName(room.t, { type: room.t, ...room }); - const roomType = newData.roomType ?? room.t; - const readOnly = newData.readOnly ?? !!room.ro; - const isArchived = changeArchivation ? !room.archived : !!room.archived; - const isDefault = newData.default ?? !!room.default; - const isFavorite = newData.favorite ?? !!room.favorite; - const isFeatured = newData.featured ?? !!room.featured; - - return - - - {deleted && } - - - {t('Name')} - - - - - { room.t !== 'd' && <> - - {t('Owner')} - - {room.u?.username} - - - - {t('Topic')} - - - - - - - - - {t('Public')} - {t('All_users_in_the_channel_can_write_new_messages')} - - - - - - {t('Private')} - {t('Just_invited_people_can_access_this_channel')} - - - - - - - - - - {t('Collaborative')} - {t('All_users_in_the_channel_can_write_new_messages')} - - - !readOnly)}/> - - - {t('Read_only')} - {t('Only_authorized_users_can_write_new_messages')} - - - - - - - - - {t('Archived')} - setChangeArchivation(!changeArchivation)}/> - - - - - - - {t('Default')} - !isDefault)}/> - - - - - - - {t('Favorite')} - !isFavorite)}/> - - - - - - - {t('Featured')} - !isFeatured)}/> - - - - - - - - - - - - - - } - - - - - - - ; -} diff --git a/client/admin/users/AddUser.js b/client/admin/users/AddUser.js index 8639b98759f87..a84f36824521a 100644 --- a/client/admin/users/AddUser.js +++ b/client/admin/users/AddUser.js @@ -6,7 +6,8 @@ import { useEndpointData } from '../../hooks/useEndpointData'; import { useEndpointAction } from '../../hooks/useEndpointAction'; import { isEmail } from '../../../app/utils/lib/isEmail.js'; import { useRoute } from '../../contexts/RouterContext'; -import Page from '../../components/basic/Page'; +import VerticalBar from '../../components/basic/VerticalBar'; + export function AddUser({ roles, ...props }) { const t = useTranslation(); @@ -56,93 +57,91 @@ export function AddUser({ roles, ...props }) { const availableRoles = roleData && roleData.roles ? roleData.roles.map(({ _id, description }) => [_id, description || _id]) : []; - return - - - {t('Name')} - - - - - - {t('Username')} - - }/> - - - - {t('Email')} - - 0 ? 'error' : undefined} onChange={handleChange('email')} addon={}/> - - - - {t('Verified')} !verified)} /> - - - - - {t('StatusMessage')} - - }/> - - - - {t('Bio')} - - }/> - - - - {t('Password')} - - }/> - - - - - - {t('Require_password_change')} !requirePasswordChange)} /> - - - - - - - {t('Set_random_password_and_send_by_email')} !setRandomPassword)} /> - - - - - {t('Roles')} - - value)} placeholder={t('Select_role')} /> - - - - - - {t('Join_default_channels')} !joinDefaultChannels)} /> - - - - - - - {t('Send_welcome_email')} !sendWelcomeEmail)} /> - - - - - - - - - - - - - - - ; + return + + {t('Name')} + + + + + + {t('Username')} + + }/> + + + + {t('Email')} + + 0 ? 'error' : undefined} onChange={handleChange('email')} addon={}/> + + + + {t('Verified')} !verified)} /> + + + + + {t('StatusMessage')} + + }/> + + + + {t('Bio')} + + }/> + + + + {t('Password')} + + }/> + + + + + + {t('Require_password_change')} !requirePasswordChange)} /> + + + + + + + {t('Set_random_password_and_send_by_email')} !setRandomPassword)} /> + + + + + {t('Roles')} + + value)} placeholder={t('Select_role')} /> + + + + + + {t('Join_default_channels')} !joinDefaultChannels)} /> + + + + + + + {t('Send_welcome_email')} !sendWelcomeEmail)} /> + + + + + + + + + + + + + + ; } diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js index b84c2aa8f6631..cd1549286868d 100644 --- a/client/admin/users/EditUser.js +++ b/client/admin/users/EditUser.js @@ -7,8 +7,8 @@ import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEnd import { useEndpointAction } from '../../hooks/useEndpointAction'; import { isEmail } from '../../../app/utils/lib/isEmail.js'; import { useRoute } from '../../contexts/RouterContext'; -import Page from '../../components/basic/Page'; import UserAvatarEditor from '../../components/basic/avatar/UserAvatarEditor'; +import VerticalBar from '../../components/basic/VerticalBar'; export function EditUserWithData({ userId, ...props }) { const t = useTranslation(); @@ -107,80 +107,78 @@ export function EditUser({ data, roles, ...props }) { const setRandomPassword = newData.setRandomPassword || false; const requirePasswordChange = setRandomPassword || newData.requirePasswordChange || false; - return - - - - {t('Name')} - - - - - - {t('Username')} - - }/> - - - - {t('Email')} - - }/> - - - - {t('Verified')} !emailVerified)} /> - - - - - {t('StatusMessage')} - - }/> - - - - {t('Bio')} - - }/> - - - - {t('Password')} - - }/> - - - - - - {t('Require_password_change')} !requirePasswordChange)} /> - - - - - - - {t('Set_random_password_and_send_by_email')} !setRandomPassword)} /> - - - - - {t('Roles')} - - value, rolesAreEqual)} placeholder={t('Select_role')} /> - - - - - - - - - - - - - - ; + return + + + {t('Name')} + + + + + + {t('Username')} + + }/> + + + + {t('Email')} + + }/> + + + + {t('Verified')} !emailVerified)} /> + + + + + {t('StatusMessage')} + + }/> + + + + {t('Bio')} + + }/> + + + + {t('Password')} + + }/> + + + + + + {t('Require_password_change')} !requirePasswordChange)} /> + + + + + + + {t('Set_random_password_and_send_by_email')} !setRandomPassword)} /> + + + + + {t('Roles')} + + value, rolesAreEqual)} placeholder={t('Select_role')} /> + + + + + + + + + + + + + ; } diff --git a/client/admin/users/InviteUsers.js b/client/admin/users/InviteUsers.js index 34883bc3d2cef..5804f498c863c 100644 --- a/client/admin/users/InviteUsers.js +++ b/client/admin/users/InviteUsers.js @@ -5,6 +5,7 @@ import { useTranslation } from '../../contexts/TranslationContext'; import { useMethod } from '../../contexts/ServerContext'; import { isEmail } from '../../../app/utils/lib/isEmail.js'; import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; +import VerticalBar from '../../components/basic/VerticalBar'; export function InviteUsers({ data, ...props }) { const t = useTranslation(); @@ -22,13 +23,13 @@ export function InviteUsers({ data, ...props }) { } }); }; - return + return {t('Send_invitation_email')} {t('Send_invitation_email_info')} - setText(e.currentTarget.value)}/> + setText(e.currentTarget.value)}/> - ; + ; } diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js index 80e58fc240e03..23831613eabcb 100644 --- a/client/admin/users/UserInfo.js +++ b/client/admin/users/UserInfo.js @@ -7,8 +7,8 @@ import { useTranslation } from '../../contexts/TranslationContext'; import { roomTypes } from '../../../app/utils/client'; import { DateFormat } from '../../../app/lib'; import { UserInfoActions } from './UserInfoActions'; -import Page from '../../components/basic/Page'; import MarkdownText from '../../components/basic/MarkdownText'; +import VerticalBar from '../../components/basic/VerticalBar'; const useTimezoneClock = (utcOffset = 0, updateInterval) => { const [time, setTime] = useState(); @@ -64,54 +64,50 @@ export function UserInfo({ data, onChange, ...props }) { const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id }); - return - - - - - {data.name || data.username} - {!!data.name && @{data.username}} - {data.status} - - - - - {console.log(MarkdownText)} - - - {data.bio && data.bio.trim().length > 0 && {data.bio}} - {!!data.roles.length && <> - {t('Roles')} - - - {data.roles.map((val) => {val})} - - - } - - {data.emails && <> {t('Email')} - - {data.emails[0].address} - - {data.emails[0].verified && {t('Verified')}} - {data.emails[0].verified || {t('Not_verified')}} - - - } - - {t('Created_at')} - {createdAt} - - {t('Last_login')} - {lastLogin || t('Never')} - - {!!data.utcOffset && <> - {t('Timezone')} - - } - - - - - ; + return + + + + {data.name || data.username} + {!!data.name && @{data.username}} + {data.status} + + + + + + + {data.bio && data.bio.trim().length > 0 && {data.bio}} + {!!data.roles.length && <> + {t('Roles')} + + + {data.roles.map((val) => {val})} + + + } + + {data.emails && <> {t('Email')} + + {data.emails[0].address} + + {data.emails[0].verified && {t('Verified')}} + {data.emails[0].verified || {t('Not_verified')}} + + + } + + {t('Created_at')} + {createdAt} + + {t('Last_login')} + {lastLogin || t('Never')} + + {!!data.utcOffset && <> + {t('Timezone')} + + } + + + ; } diff --git a/client/admin/users/UsersPage.js b/client/admin/users/UsersPage.js index d606c66aada6f..f9060964b6303 100644 --- a/client/admin/users/UsersPage.js +++ b/client/admin/users/UsersPage.js @@ -43,9 +43,9 @@ function UsersPage() { - + - + {context && diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js index ae8855d799e04..0c11a99ac4054 100644 --- a/client/components/basic/Page.js +++ b/client/components/basic/Page.js @@ -54,7 +54,7 @@ function PageContent(props) { function PageScrollableContent({ onScrollContent, ...props }) { return - + ; } diff --git a/client/components/basic/VerticalBar.js b/client/components/basic/VerticalBar.js index 9899cdad70d8a..52e0dae7677b0 100644 --- a/client/components/basic/VerticalBar.js +++ b/client/components/basic/VerticalBar.js @@ -1,4 +1,4 @@ -import { Box, Tile, Button, Icon } from '@rocket.chat/fuselage'; +import { Box, Tile, Button, Icon, Margins } from '@rocket.chat/fuselage'; import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks'; import React from 'react'; @@ -52,8 +52,15 @@ function VerticalBarContent(props) { return ; } +function VerticalBarScrollableContent({ children, props }) { + return + {children} + ; +} + VerticalBar.Header = VerticalBarHeader; VerticalBar.Close = VerticalBarClose; VerticalBar.Content = VerticalBarContent; +VerticalBar.ScrollableContent = VerticalBarScrollableContent; export default VerticalBar;