From ed76251daf76251984191b5ab575536b1c4f9bb8 Mon Sep 17 00:00:00 2001 From: DmitrySychugov Date: Fri, 9 Feb 2024 13:15:18 +0500 Subject: [PATCH 1/4] Web: Shared: Utils: moved getUserTypeLabel to utilities --- packages/shared/utils/common.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/shared/utils/common.ts b/packages/shared/utils/common.ts index dedff7f80a..9469e0617f 100644 --- a/packages/shared/utils/common.ts +++ b/packages/shared/utils/common.ts @@ -37,6 +37,7 @@ import { Encoder } from "./encoder"; import { combineUrl } from "./combineUrl"; import { getCookie } from "./cookie"; import { checkIsSSR } from "./device"; +import { AvatarRole } from "../components/avatar/Avatar.enums"; export const desktopConstants = Object.freeze({ domain: !checkIsSSR() && window.location.origin, @@ -85,6 +86,26 @@ export const isPublicRoom = () => { return window.location.pathname === "/rooms/share"; }; +export const getUserTypeLabel = ( + role: AvatarRole | undefined, + t: (key: string) => string, +) => { + switch (role) { + case "owner": + return t("Common:Owner"); + case "admin": + return t("Common:DocSpaceAdmin"); + case "manager": + return t("Common:RoomAdmin"); + case "collaborator": + return t("Common:PowerUser"); + case "user": + return t("Common:User"); + default: + return t("Common:User"); + } +}; + export const getShowText = () => { const showArticle = localStorage.getItem("showArticle"); From 2de9f21957a9b60c452b8e67da31763c26787812 Mon Sep 17 00:00:00 2001 From: DmitrySychugov Date: Fri, 9 Feb 2024 13:16:48 +0500 Subject: [PATCH 2/4] Web: corrected the user type in members, invite panel and selector --- .../panels/InvitePanel/sub-components/Item.js | 8 +++--- .../InfoPanel/Body/views/Accounts/index.js | 28 +++++-------------- .../Home/InfoPanel/Body/views/Members/User.js | 25 ++++++++--------- .../AccountsBody/TableView/TableRow.js | 22 +++------------ .../selector/sub-components/Item.tsx | 8 ++++-- 5 files changed, 33 insertions(+), 58 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js index fbd9017244..1bdf9e1bbe 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js @@ -3,11 +3,10 @@ import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url"; import React, { useState, useEffect } from "react"; import { Avatar } from "@docspace/shared/components/avatar"; import { Text } from "@docspace/shared/components/text"; -import { capitalize } from "lodash"; import { parseAddresses } from "@docspace/shared/utils"; import { getAccessOptions } from "../utils"; -import { getUserRole } from "@docspace/shared/utils/common"; +import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common"; import { StyledEditInput, @@ -39,6 +38,7 @@ const Item = ({ const name = !!avatar ? (displayName !== "" ? displayName : email) : email; const source = !!avatar ? avatar : AtReactSvgUrl; const role = getUserRole(item); + const typeLabel = getUserTypeLabel(role, t); const [edit, setEdit] = useState(false); const [inputValue, setInputValue] = useState(name); @@ -49,7 +49,7 @@ const Item = ({ const filteredAccesses = filterUserRoleOptions(accesses, item, true); const defaultAccess = filteredAccesses.find( - (option) => option.access === +access + (option) => option.access === +access, ); const errorsInList = () => { @@ -133,7 +133,7 @@ const Item = ({ color="#A3A9AE" truncate > - {`${capitalize(role)} | ${email}`} + {`${typeLabel} | ${email}`} diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js index 8fd99e1ea0..dde1304439 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js @@ -10,6 +10,7 @@ import { ComboBox } from "@docspace/shared/components/combobox"; import { getUserStatus } from "SRC_DIR/helpers/people-helpers"; import { StyledAccountContent } from "../../styles/accounts"; +import { getUserTypeLabel } from "@docspace/shared/utils/common"; const Accounts = (props) => { const { @@ -46,21 +47,6 @@ const Accounts = (props) => { } }, [infoPanelSelection]); - const getUserTypeLabel = React.useCallback((role) => { - switch (role) { - case "owner": - return t("Common:Owner"); - case "admin": - return t("Common:DocSpaceAdmin"); - case "manager": - return t("Common:RoomAdmin"); - case "collaborator": - return t("Common:PowerUser"); - case "user": - return t("Common:User"); - } - }, []); - const getTypesOptions = React.useCallback(() => { const options = []; @@ -128,10 +114,10 @@ const Accounts = (props) => { setIsLoading(false); } }, - [infoPanelSelection, changeUserType, t] + [infoPanelSelection, changeUserType, t], ); - const typeLabel = getUserTypeLabel(role); + const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])(); const renderTypeData = () => { const typesOptions = getTypesOptions(); @@ -248,7 +234,7 @@ export default inject( getPeopleListItem: usersStore.getPeopleListItem, setInfoPanelSelection, }; - } + }, )( withTranslation([ "People", @@ -263,7 +249,7 @@ export default inject( "Translations", ])( withLoader(observer(Accounts))( - - ) - ) + , + ), + ), ); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js index feb5c56efd..fd2dc9f02d 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js @@ -9,9 +9,8 @@ import { toastr } from "@docspace/shared/components/toast"; import { isMobileOnly, isMobile } from "react-device-detect"; import { decode } from "he"; import { filterUserRoleOptions } from "SRC_DIR/helpers"; -import { capitalize } from "lodash"; -import { getUserRole } from "@docspace/shared/utils/common"; +import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common"; import { Text } from "@docspace/shared/components/text"; import EmailPlusReactSvgUrl from "PUBLIC_DIR/images/e-mail+.react.svg?url"; import { StyledUserTypeHeader } from "../../styles/members"; @@ -48,7 +47,7 @@ const User = ({ const fullRoomRoleOptions = membersHelper.getOptionsByRoomType( infoPanelSelection.roomType, - canChangeUserRole + canChangeUserRole, ); const userRole = membersHelper.getOptionByUserAccess(user.access, user); @@ -57,7 +56,7 @@ const User = ({ const onRepeatInvitation = async () => { resendEmailInvitations(infoPanelSelection.id, true) .then(() => - toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios")) + toastr.success(t("PeopleTranslations:SuccessSentMultipleInvitatios")), ) .catch((err) => toastr.error(err)); }; @@ -77,10 +76,10 @@ const User = ({ const newMembers = { users: infoPanelMembers.users?.filter((m) => m.id !== user.id), administrators: infoPanelMembers.administrators?.filter( - (m) => m.id !== user.id + (m) => m.id !== user.id, ), expected: infoPanelMembers.expected?.filter( - (m) => m.id !== user.id + (m) => m.id !== user.id, ), }; @@ -129,13 +128,13 @@ const User = ({ setInfoPanelMembers({ roomId: infoPanelSelection.id, users: infoPanelMembers.users?.map((m) => - m.id === user.id ? { ...m, access: option.access } : m + m.id === user.id ? { ...m, access: option.access } : m, ), administrators: infoPanelMembers.administrators?.map((m) => - m.id === user.id ? { ...m, access: option.access } : m + m.id === user.id ? { ...m, access: option.access } : m, ), expected: infoPanelMembers.expected?.map((m) => - m.id === user.id ? { ...m, access: option.access } : m + m.id === user.id ? { ...m, access: option.access } : m, ), }); } @@ -182,6 +181,8 @@ const User = ({ const onToggle = (e, isOpen) => { // setIsScrollLocked(isOpen); }; + const role = getUserRole(user); + const typeLabel = getUserTypeLabel(role, t); const getTooltipContent = () => (
@@ -197,15 +198,13 @@ const User = ({ color="#A3A9AE !important" dir="auto" > - {`${capitalize(role)} | ${user.email}`} + {`${typeLabel} | ${user.email}`}
); const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoUrl; - const role = getUserRole(user); - const withTooltip = user.isOwner || user.isAdmin; const uniqueTooltipId = `userTooltip_${Math.random()}`; @@ -269,7 +268,7 @@ const User = ({ color="#A3A9AE" dir="auto" > - {`${capitalize(role)} | ${user.email}`} + {`${typeLabel} | ${user.email}`} diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js index 92573e80bf..a1e80d1cf3 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js @@ -14,6 +14,7 @@ import withContent from "SRC_DIR/HOCs/withPeopleContent"; import Badges from "../Badges"; import { Base } from "@docspace/shared/themes"; +import { getUserTypeLabel } from "@docspace/shared/utils/common"; const StyledWrapper = styled.div` display: contents; @@ -308,7 +309,7 @@ const PeopleTableRow = (props) => { setIsLoading(false); } }, - [item, changeUserType] + [item, changeUserType], ); // const getRoomsOptions = React.useCallback(() => { @@ -328,22 +329,7 @@ const PeopleTableRow = (props) => { // return <>{options.map((option) => option)}; // }, []); - const getUserTypeLabel = React.useCallback((role) => { - switch (role) { - case "owner": - return t("Common:Owner"); - case "admin": - return t("Common:DocSpaceAdmin"); - case "manager": - return t("Common:RoomAdmin"); - case "collaborator": - return t("Common:PowerUser"); - case "user": - return t("Common:User"); - } - }, []); - - const typeLabel = getUserTypeLabel(role); + const typeLabel = React.useCallback(() => getUserTypeLabel(role, t), [])(); const isChecked = checkedProps.checked; @@ -532,5 +518,5 @@ const PeopleTableRow = (props) => { }; export default withTranslation(["People", "Common", "Settings"])( - withContent(PeopleTableRow) + withContent(PeopleTableRow), ); diff --git a/packages/shared/components/selector/sub-components/Item.tsx b/packages/shared/components/selector/sub-components/Item.tsx index 3168a40ea9..1bf8ecd862 100644 --- a/packages/shared/components/selector/sub-components/Item.tsx +++ b/packages/shared/components/selector/sub-components/Item.tsx @@ -1,5 +1,6 @@ import React from "react"; - +import { useTranslation } from "react-i18next"; +import { getUserTypeLabel } from "../../../utils/common"; import { Avatar, AvatarRole, AvatarSize } from "../../avatar"; import { Text } from "../../text"; import { Checkbox } from "../../checkbox"; @@ -36,6 +37,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => { rowLoader, renderCustomItem, }: Data = data; + const { t } = useTranslation(["Common"]); const isLoaded = isItemLoaded(index); @@ -50,6 +52,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => { const currentRole = role || AvatarRole.user; + const typeLabel = getUserTypeLabel(role, t); + const defaultIcon = !!color; const isLogo = !!icon || defaultIcon; @@ -94,7 +98,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => { /> )} {renderCustomItem ? ( - renderCustomItem(label, role, email) + renderCustomItem(label, typeLabel, email) ) : ( Date: Fri, 9 Feb 2024 14:10:17 +0500 Subject: [PATCH 3/4] Web: Client: AddUsersPanel: expanded user information when adding --- .../src/components/panels/AddUsersPanel/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/client/src/components/panels/AddUsersPanel/index.js b/packages/client/src/components/panels/AddUsersPanel/index.js index cbdbac7d71..32497f3a76 100644 --- a/packages/client/src/components/panels/AddUsersPanel/index.js +++ b/packages/client/src/components/panels/AddUsersPanel/index.js @@ -53,7 +53,7 @@ const AddUsersPanel = ({ const onBackClick = () => onClose(); const getFilterWithOutDisabledUser = useCallback( () => Filter.getFilterWithOutDisabledUser(), - [] + [], ); const onKeyPress = (e) => { @@ -88,6 +88,8 @@ const AddUsersPanel = ({ avatar: item.avatar, isOwner: item.isOwner, isAdmin: item.isAdmin, + isVisitor: item.isVisitor, + isCollaborator: item.isCollaborator, }; items.push(newItem); } @@ -100,7 +102,7 @@ const AddUsersPanel = ({ }; const selectedAccess = accessOptions.filter( - (access) => access.access === accessRight + (access) => access.access === accessRight, )[0]; const [itemsList, setItemsList] = useState(null); @@ -110,11 +112,11 @@ const AddUsersPanel = ({ const [total, setTotal] = useState(0); const [isLoading, setIsLoading] = useLoadingWithTimeout( LOADER_TIMEOUT, - false + false, ); const [isLoadingSearch, setIsLoadingSearch] = useLoadingWithTimeout( LOADER_TIMEOUT, - false + false, ); useEffect(() => { @@ -321,7 +323,7 @@ export default inject(({ settingsStore }) => { })( observer( withTranslation(["SharingPanel", "PeopleTranslations", "Common"])( - withLoader(AddUsersPanel)() - ) - ) + withLoader(AddUsersPanel)(), + ), + ), ); From 1477b393656c0c877f5e899705bf607ecf28476f Mon Sep 17 00:00:00 2001 From: DmitrySychugov Date: Fri, 9 Feb 2024 18:27:26 +0500 Subject: [PATCH 4/4] Web: Client: InvitePanel: fixed user type definition --- .../panels/InvitePanel/sub-components/InviteInput.js | 4 +++- .../panels/InvitePanel/sub-components/Item.js | 7 +++++-- .../src/components/panels/InvitePanel/utils/index.js | 11 ++++++++++- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js index 68fb9eacf7..7aa43a2b3d 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js @@ -95,6 +95,7 @@ const InviteInput = ({ access: selectedAccess, displayName: address.email, errors: address.parseErrors, + isEmailInvite: true, }; }); } @@ -105,6 +106,7 @@ const InviteInput = ({ access: selectedAccess, displayName: addresses[0].email, errors: addresses[0].parseErrors, + isEmailInvite: true, }; }; @@ -130,7 +132,7 @@ const InviteInput = ({ const debouncedSearch = useCallback( debounce((value) => searchByQuery(value), 300), - [] + [], ); const onChange = (e) => { diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js index 1bdf9e1bbe..73e4764a7c 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js @@ -37,8 +37,6 @@ const Item = ({ const name = !!avatar ? (displayName !== "" ? displayName : email) : email; const source = !!avatar ? avatar : AtReactSvgUrl; - const role = getUserRole(item); - const typeLabel = getUserTypeLabel(role, t); const [edit, setEdit] = useState(false); const [inputValue, setInputValue] = useState(name); @@ -52,6 +50,11 @@ const Item = ({ (option) => option.access === +access, ); + const role = getUserRole(item); + const typeLabel = item?.isEmailInvite + ? getUserTypeLabel(defaultAccess.type, t) + : getUserTypeLabel(role, t); + const errorsInList = () => { const hasErrors = inviteItems.some((item) => !!item.errors?.length); setHasErrors(hasErrors); diff --git a/packages/client/src/components/panels/InvitePanel/utils/index.js b/packages/client/src/components/panels/InvitePanel/utils/index.js index 3787702800..e4c7b38fa0 100644 --- a/packages/client/src/components/panels/InvitePanel/utils/index.js +++ b/packages/client/src/components/panels/InvitePanel/utils/index.js @@ -10,7 +10,7 @@ export const getAccessOptions = ( withRemove = false, withSeparator = false, isOwner = false, - standalone = false + standalone = false, ) => { let options = []; const accesses = { @@ -22,6 +22,7 @@ export const getAccessOptions = ( color: "#EDC409", access: roomType === -1 ? EmployeeType.Admin : ShareAccessRights.FullAccess, + type: "admin", }, roomAdmin: { key: "roomAdmin", @@ -31,6 +32,7 @@ export const getAccessOptions = ( color: "#EDC409", access: roomType === -1 ? EmployeeType.User : ShareAccessRights.RoomManager, + type: "manager", }, collaborator: { key: "collaborator", @@ -42,42 +44,49 @@ export const getAccessOptions = ( roomType === -1 ? EmployeeType.Collaborator : ShareAccessRights.Collaborator, + type: "collaborator", }, user: { key: "user", label: t("Common:User"), description: t("Translations:RoleUserDescription"), access: EmployeeType.Guest, + type: "user", }, editor: { key: "editor", label: t("Translations:RoleEditor"), description: t("Translations:RoleEditorDescription"), access: ShareAccessRights.Editing, + type: "user", }, formFiller: { key: "formFiller", label: t("Translations:RoleFormFiller"), description: t("Translations:RoleFormFillerDescription"), access: ShareAccessRights.FormFilling, + type: "user", }, reviewer: { key: "reviewer", label: t("Translations:RoleReviewer"), description: t("Translations:RoleReviewerDescription"), access: ShareAccessRights.Review, + type: "user", }, commentator: { key: "commentator", label: t("Translations:RoleCommentator"), description: t("Translations:RoleCommentatorDescription"), access: ShareAccessRights.Comment, + type: "user", }, viewer: { key: "viewer", label: t("Translations:RoleViewer"), description: t("Translations:RoleViewerDescription"), access: ShareAccessRights.ReadOnly, + type: "user", }, };