added role selectors to members view for user and coded functionality for them

packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js

@@ -1,11 +1,71 @@
 import React from "react";
-import PropTypes from "prop-types";
+
 import { StyledUser } from "../../styles/members";
 import Avatar from "@docspace/components/avatar";
-import LinkWithDropdown from "@docspace/components/link-with-dropdown";
+import { ComboBox } from "@docspace/components";
 
-const User = ({ t, user, selfId, isExpect }) => {
-  if (!user.displayName) return null;
+const User = ({
+  t,
+  user,
+  isOwner,
+  isAdmin,
+  selfId,
+  isExpect,
+  changeUserType,
+}) => {
+  if (!user.displayName && !user.email) return null;
+
+  const roles = {
+    admin: {
+      key: "admin",
+      title: t("People:Administrator"),
+      label: t("People:Administrator"),
+      action: "admin",
+    },
+    manager: {
+      key: "manager",
+      title: t("People:Manager"),
+      label: t("People:Manager"),
+      action: "manager",
+    },
+    user: {
+      key: "user",
+      title: t("Common:User"),
+      label: t("Common:User"),
+      action: "user",
+    },
+  };
+
+  const getUserRole = () => {
+    if (user.isOwner) return roles.admin;
+    if (user.isAdmin) return roles.manager;
+    return roles.user;
+  };
+
+  const getUserOptions = () => {
+    let options = [];
+    if (isOwner) options.push(roles.admin);
+    if (isAdmin) options.push(roles.manager);
+    options.push(roles.user);
+    return options;
+  };
+
+  const getNotAuthorizedToEdit = () => {
+    if (selfId === user.id) return true;
+    if (isOwner) return false;
+    if (!isAdmin) return true;
+  };
+
+  const userRole = getUserRole();
+  const userOptions = getUserOptions();
+  const userNotAuthorizedToEdit = getNotAuthorizedToEdit();
+
+  const onTypeChange = React.useCallback(
+    ({ action }) => {
+      changeUserType(action, [user], t, false);
+    },
+    [user, changeUserType, t]
+  );
 
   return (
     <StyledUser
@@ -30,51 +90,24 @@ const User = ({ t, user, selfId, isExpect }) => {
       )}
 
       <div className="role-wrapper">
-        <LinkWithDropdown
-          className="role"
-          containerMinWidth="fit-content"
-          directionX="right"
-          directionY="bottom"
-          fontSize="13px"
-          fontWeight={600}
-          hasScroll={true}
-          withBackdrop={false}
-          dropdownType="appearDashedAfterHover"
-          isDisabled={user.role === "Owner"}
-          data={[
-            {
-              key: "key1",
-              label: "Room manager",
-              onClick: () => {},
-            },
-            {
-              key: "key2",
-              label: "Co-worker",
-              onClick: function noRefCheck() {},
-            },
-            {
-              key: "key3",
-              label: "Viewer",
-              onClick: function noRefCheck() {},
-            },
-            {
-              isSeparator: true,
-              key: "key4",
-            },
-            {
-              key: "key5",
-              label: "Remove",
-              onClick: function noRefCheck() {},
-            },
-          ]}
-        >
-          {user.role}
-        </LinkWithDropdown>
+        {userNotAuthorizedToEdit ? (
+          <div className="disabled-role-combobox">{userRole.label}</div>
+        ) : (
+          <ComboBox
+            className="role-combobox"
+            selectedOption={userRole}
+            options={userOptions}
+            onSelect={onTypeChange}
+            scaled={false}
+            withBackdrop={false}
+            size="content"
+            displaySelectedOption
+            modernView
+          />
+        )}
       </div>
     </StyledUser>
   );
 };
 
-User.propTypes = { user: PropTypes.object };
-
 export default User;