Merge pull request #241 from ONLYOFFICE/bugfix/user-type-in-info-panel

Bugfix/user type in info panel

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)(<Loaders.DialogAsideLoader isPanel />)
-    )
-  )
+      withLoader(AddUsersPanel)(<Loaders.DialogAsideLoader isPanel />),
+    ),
+  ),
 );

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) => {

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,
@@ -38,7 +37,6 @@ const Item = ({
 
   const name = !!avatar ? (displayName !== "" ? displayName : email) : email;
   const source = !!avatar ? avatar : AtReactSvgUrl;
-  const role = getUserRole(item);
 
   const [edit, setEdit] = useState(false);
   const [inputValue, setInputValue] = useState(name);
@@ -49,9 +47,14 @@ const Item = ({
   const filteredAccesses = filterUserRoleOptions(accesses, item, true);
 
   const defaultAccess = filteredAccesses.find(
-    (option) => option.access === +access
+    (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);
@@ -133,7 +136,7 @@ const Item = ({
           color="#A3A9AE"
           truncate
         >
-          {`${capitalize(role)} | ${email}`}
+          {`${typeLabel} | ${email}`}
         </Text>
       </StyledInviteUserBody>
 

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",
     },
   };
 

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))(
-      <Loaders.InfoPanelViewLoader view="accounts" />
-    )
-  )
+      <Loaders.InfoPanelViewLoader view="accounts" />,
+    ),
+  ),
 );

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 = () => (
     <div>
@@ -197,15 +198,13 @@ const User = ({
         color="#A3A9AE !important"
         dir="auto"
       >
-        {`${capitalize(role)} | ${user.email}`}
+        {`${typeLabel} | ${user.email}`}
       </Text>
     </div>
   );
 
   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}`}
           </Text>
         </div>
       </div>

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),
 );

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)
         ) : (
           <Text
             className="label"

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");