UI - TASKER: stabilize member controls

plane-src/apps/web/ce/components/projects/settings/useProjectColumns.tsx

@@ -11,7 +11,7 @@ import type { IWorkspaceMember, TProjectMembership } from "@plane/types";
 import { renderFormattedDate } from "@plane/utils";
 // components
 import { MemberHeaderColumn } from "@/components/project/member-header-column";
-import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
+import { AccountTypeColumn, NameColumn, ProjectMemberActionsColumn } from "@/components/project/settings/member-columns";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
@@ -21,6 +21,9 @@ export interface RowData extends Pick<TProjectMembership, "original_role"> {
   member: IWorkspaceMember;
 }
 
+const stickyNameHeaderClassName = "nodedc-settings-table-sticky left-0 z-20 min-w-max";
+const stickyNameCellClassName = "nodedc-settings-table-sticky left-0 z-10 min-w-max";
+
 type TUseProjectColumnsProps = {
   projectId: string;
   workspaceSlug: string;
@@ -60,13 +63,16 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
     {
       key: "Full Name",
       content: "Full name",
-      thClassName: "text-left",
+      thClassName: stickyNameHeaderClassName,
+      tdClassName: stickyNameCellClassName,
       thRender: () => (
+        <div className="w-max min-w-[8.5rem] pr-3">
           <MemberHeaderColumn
             property="full_name"
             displayFilters={displayFilters}
             handleDisplayFilterUpdate={handleDisplayFilterUpdate}
           />
+        </div>
       ),
       tdRender: (rowData: RowData) => (
         <NameColumn
@@ -88,7 +94,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
+      tdRender: (rowData: RowData) => <div className="min-w-[7.5rem] pr-3">{rowData.member.display_name}</div>,
     },
     {
       key: "Email",
@@ -100,7 +106,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div className="w-48 text-secondary">{rowData.member.email}</div>,
+      tdRender: (rowData: RowData) => <div className="min-w-[10.5rem] pr-3 text-secondary">{rowData.member.email}</div>,
     },
     {
       key: "Account Type",
@@ -131,7 +137,22 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+      tdRender: (rowData: RowData) => (
+        <div className="min-w-[7rem] pr-3">{renderFormattedDate(rowData?.member?.joining_date)}</div>
+      ),
+    },
+    {
+      key: "Actions",
+      content: <span className="sr-only">Действия</span>,
+      tdRender: (rowData: RowData) => (
+        <ProjectMemberActionsColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
     },
   ];
   return {

plane-src/apps/web/core/components/project/member-list-item.tsx

@@ -77,16 +77,19 @@ export const ProjectMemberListItem = observer(function ProjectMemberListItem(pro
           onSubmit={() => handleRemove(removeMemberModal.member.id)}
         />
       )}
+      <div className="horizontal-scrollbar scrollbar-sm w-full overflow-x-auto overflow-y-hidden rounded-[1.2rem]">
         <Table
           columns={columns}
           data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
           keyExtractor={(rowData) => rowData?.member.id ?? ""}
-        tHeadClassName="border-b border-subtle"
+          tableClassName="nodedc-settings-table-surface w-max table-auto border-separate border-spacing-0 overflow-visible"
+          tHeadClassName="border-b border-white/6"
           thClassName="text-left font-medium divide-x-0 text-placeholder"
           tBodyClassName="divide-y-0"
-        tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
+          tBodyTrClassName="divide-x-0 h-11 px-4 text-secondary"
           tHeadTrClassName="divide-x-0"
         />
+      </div>
     </>
   );
 });

plane-src/apps/web/core/components/project/member-list.tsx

@@ -116,7 +116,7 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
       {!projectMemberIds ? (
         <MembersSettingsLoader />
       ) : (
-        <div className="nodedc-settings-card overflow-scroll px-1 py-1">
+        <div className="nodedc-settings-card overflow-hidden px-1 py-1">
           {searchedProjectMembers.length !== 0 && (
             <ProjectMemberListItem
               memberDetails={memberDetails ?? []}

plane-src/apps/web/core/components/project/send-project-invitation-modal.tsx

@@ -54,8 +54,8 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
   // store hooks
   const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
   const {
-    project: { getProjectMemberDetails, bulkAddMembersToProject },
+    project: { getProjectMemberDetails, bulkAddMembersToProject, fetchProjectMembers },
-    workspace: { workspaceMemberIds, getWorkspaceMemberDetails },
+    workspace: { workspaceMemberIds, getWorkspaceMemberDetails, fetchWorkspaceMembers },
   } = useMember();
   // form info
   const {
@@ -78,6 +78,15 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
     return !isInvited;
   });
 
+  useEffect(() => {
+    if (!isOpen || !workspaceSlug || !projectId) return;
+
+    void Promise.all([
+      fetchWorkspaceMembers(workspaceSlug.toString()),
+      fetchProjectMembers(workspaceSlug.toString(), projectId.toString(), true),
+    ]).catch(console.error);
+  }, [fetchProjectMembers, fetchWorkspaceMembers, isOpen, projectId, workspaceSlug]);
+
   const onSubmit = async (formData: FormValues) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
 
@@ -133,19 +142,22 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
       const memberDetails = getWorkspaceMemberDetails(userId);
 
       if (!memberDetails?.member) return;
+
+      const displayName = memberDetails.member.display_name || memberDetails.member.email || "";
+      const fullName = [memberDetails.member.first_name, memberDetails.member.last_name].filter(Boolean).join(" ");
+      const secondaryLabel = fullName && fullName !== displayName ? ` (${fullName})` : "";
+
       return {
-        value: `${memberDetails?.member.id}`,
+        value: `${memberDetails.member.id}`,
-        query: `${memberDetails?.member.first_name} ${
+        query: `${displayName} ${fullName} ${memberDetails.member.email ?? ""}`.toLowerCase(),
-          memberDetails?.member.last_name
-        } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
             <div className="shrink-0 pt-0.5">
-              <Avatar name={memberDetails?.member.display_name} src={getFileURL(memberDetails?.member.avatar_url)} />
+              <Avatar name={displayName} src={getFileURL(memberDetails.member.avatar_url)} />
             </div>
             <div className="truncate">
-              {memberDetails?.member.display_name} (
+              {displayName}
-              {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+              {secondaryLabel}
             </div>
           </div>
         ),
@@ -226,8 +238,9 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                               EUserPermissions[newValue as keyof typeof EUserPermissions]
                             );
                           }}
+                          noResultsMessage="Нет доступных участников workspace"
                           options={options}
-                          optionsClassName="w-48"
+                          optionsClassName="min-w-[24rem]"
                         />
                       );
                     }}
@@ -249,25 +262,29 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                         <SelectionDropdown
                           options={Object.entries(checkCurrentOptionWorkspaceRole(watch(`members.${index}.member_id`)))
                             .filter(([key]) => parseInt(key) <= (currentProjectRole ?? EUserPermissions.GUEST))
-                            .map(([key, label]) => ({
+                            .map(([key, label]) => {
+                              const roleKey = parseInt(key) as keyof typeof ROLE;
+
+                              return {
                                 key,
                                 title: label,
                                 isChecked: String(field.value) === key,
                                 onClick: () =>
                                   setValue(
                                     `members.${index}.role`,
-                                  EUserPermissions[ROLE[parseInt(key)].toUpperCase() as keyof typeof EUserPermissions]
+                                    EUserPermissions[ROLE[roleKey].toUpperCase() as keyof typeof EUserPermissions]
                                   ),
-                            }))}
+                              };
+                            })}
                           menuButton={
-                            <div className="shadow-sm flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                            <div className="shadow-sm flex min-w-[7.5rem] items-center justify-between gap-1 rounded-md border border-subtle px-4 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
                               <span className="capitalize">
                                 {field.value ? ROLE[field.value] : t("project_invitation_modal.select_role")}
                               </span>
                               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                             </div>
                           }
-                          menuButtonWrapperClassName="w-24"
+                          menuButtonWrapperClassName="min-w-[7.5rem]"
                         />
                       )}
                     />
@@ -302,10 +319,10 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
             {t("common.add_more")}
           </button>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
+            <Button variant="secondary" size="lg" onClick={handleClose} className="min-w-[7.5rem] px-6">
               {t("cancel")}
             </Button>
-            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            <Button variant="primary" size="lg" type="submit" loading={isSubmitting} className="min-w-[12rem] px-6">
               {isSubmitting
                 ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
                 : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}

plane-src/apps/web/core/components/project/settings/member-columns.tsx

@@ -7,14 +7,12 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
-import { CircleMinus } from "lucide-react";
-import { Disclosure } from "@headlessui/react";
 // plane imports
 import { ROLE, EUserPermissions, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { ChevronDownIcon, TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { EUserProjectRoles, IUser, IWorkspaceMember, TProjectMembership } from "@plane/types";
-import { ActionDropdown } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
-import { getFileURL } from "@plane/utils";
 import { SelectionDropdown } from "@/components/common/selection-dropdown";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
@@ -39,17 +37,25 @@ type AccountTypeProps = {
   projectId: string;
 };
 
+const PROJECT_ROLE_LABELS: Record<EUserPermissions, string> = {
+  [EUserPermissions.GUEST]: "Гость",
+  [EUserPermissions.MEMBER]: "Участник",
+  [EUserPermissions.ADMIN]: "Админ",
+};
+
+const getProjectRoleLabel = (role: EUserPermissions | EUserProjectRoles | undefined) => {
+  const normalizedRole = Number(role) as EUserPermissions;
+  return role ? (PROJECT_ROLE_LABELS[normalizedRole] ?? "Не назначено") : "Не назначено";
+};
+
 export function NameColumn(props: NameProps) {
-  const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
+  const { rowData, workspaceSlug } = props;
   // derived values
   const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
+  const fullName = [first_name, last_name].filter(Boolean).join(" ") || display_name || email;
 
   return (
-    <Disclosure>
+    <div className="flex w-max min-w-[8.5rem] items-center gap-x-2 gap-y-2 pr-3">
-      {({}) => (
-        <div className="group relative">
-          <div className="flex w-72 items-center gap-2">
-            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
       {avatar_url && avatar_url.trim() !== "" ? (
         <Link href={`/${workspaceSlug}/profile/${id}`}>
           <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
@@ -62,38 +68,38 @@ export function NameColumn(props: NameProps) {
         </Link>
       ) : (
         <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-on-color capitalize">
+          <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-tertiary capitalize">
             {(email ?? display_name ?? "?")[0]}
           </span>
         </Link>
       )}
-              {first_name} {last_name}
+      <span className="truncate">{fullName}</span>
     </div>
-            {(isAdmin || id === currentUser?.id) && (
+  );
-              <ActionDropdown
+}
-                placement="bottom-end"
+
-                buttonClassName="p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+export function ProjectMemberActionsColumn(props: NameProps) {
-                items={[
+  const { rowData, isAdmin, currentUser, setRemoveMemberModal } = props;
-                  {
+  const { display_name, email, id } = rowData.member;
-                    key: "remove-member",
+  const canRemoveMember = isAdmin || id === currentUser?.id;
-                    action: () => setRemoveMemberModal(rowData),
+  const isCurrentUser = id === currentUser?.id;
-                    customContent: (
+  const label = isCurrentUser ? "Покинуть проект" : `Удалить ${display_name || email}`;
-                      <div
+
-                        className="flex cursor-pointer items-center gap-x-1 font-medium text-danger-primary"
+  return (
+    <div className="flex w-12 justify-end">
+      {canRemoveMember && (
+        <button
+          aria-label={label}
+          className="nodedc-external-icon-button"
           data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
+          title={label}
+          type="button"
+          onClick={() => setRemoveMemberModal(rowData)}
         >
-                        <CircleMinus className="size-3.5 flex-shrink-0" />
+          <TrashIcon className="h-3.5 w-3.5" />
-                        {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
+        </button>
-                      </div>
-                    ),
-                  },
-                ]}
-              />
       )}
     </div>
-        </div>
-      )}
-    </Disclosure>
   );
 }
 
@@ -112,7 +118,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
     formState: { errors },
   } = useForm();
   // derived values
-  const roleLabel = ROLE[rowData.original_role ?? EUserPermissions.GUEST];
+  const roleLabel = getProjectRoleLabel(rowData.original_role ?? EUserPermissions.GUEST);
   const isCurrentUser = currentUser?.id === rowData.member.id;
   const isRowDataWorkspaceAdmin = [EUserPermissions.ADMIN].includes(
     Number(getWorkspaceMemberDetails(rowData.member.id)?.role) ?? EUserPermissions.GUEST
@@ -154,39 +160,55 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
           rules={{ required: "Role is required." }}
           render={() => (
             <SelectionDropdown
-              options={Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key, label]) => ({
+              dropdownClassName="!p-2"
+              dropdownContentClassName="!w-44"
+              options={Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key]) => {
+                const role = Number(key) as EUserPermissions;
+
+                return {
                   key,
-                title: label,
+                  title: getProjectRoleLabel(role),
                   isChecked: String(rowData.original_role) === key,
                   onClick: async () => {
                     if (!workspaceSlug) return;
-                  await updateMemberRole(workspaceSlug.toString(), projectId.toString(), rowData.member.id, key).catch(
+                    await updateMemberRole(
-                    (err) => {
+                      workspaceSlug.toString(),
+                      projectId.toString(),
+                      rowData.member.id,
+                      Number(key) as EUserProjectRoles
+                    ).catch((err) => {
                       console.log(err, "err");
                       const error = err.error;
                       const errorString = Array.isArray(error) ? error[0] : error;
 
                       setToast({
                         type: TOAST_TYPE.ERROR,
-                        title: "You can’t change this role yet.",
+                        title: "Ошибка",
-                        message: errorString ?? "An error occurred while updating member role. Please try again.",
+                        message: errorString ?? "Не удалось обновить роль участника. Попробуйте ещё раз.",
+                      });
                     });
-                    }
-                  );
                   },
-              }))}
+                };
-              menuButton={
+              })}
-                <div className="flex">
+              menuButton={({ open }) => (
-                  <span>{roleLabel}</span>
+                <div
+                  className={cn(
+                    "nodedc-settings-chip flex min-h-10 min-w-[9rem] items-center justify-between gap-2 px-4 py-2 text-caption-sm-medium",
+                    errors.role ? "border-danger-strong" : ""
+                  )}
+                >
+                  <span className="truncate">{roleLabel}</span>
+                  <ChevronDownIcon className={cn("h-3 w-3 transition-transform", open ? "rotate-180" : "")} />
                 </div>
-              }
+              )}
-              menuButtonWrapperClassName={`w-32 rounded-md p-0 !justify-start !px-0 hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
+              menuButtonWrapperClassName="flex rounded-[1.25rem] border-0 outline-none"
+              placement="bottom-end"
             />
           )}
         />
       ) : (
-        <div className="flex w-32">
+        <div className="nodedc-settings-chip flex min-h-10 min-w-[9rem] items-center px-4 py-2 text-caption-sm-medium">
-          <span>{roleLabel}</span>
+          <span className="truncate">{roleLabel}</span>
         </div>
       )}
     </>

plane-src/packages/ui/src/dropdowns/custom-search-select.tsx

@@ -146,7 +146,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                 <Combobox.Options data-prevent-outside-click static>
                   <div
                     className={cn(
-                      "nodedc-dropdown-surface z-30 my-1 min-w-48 overflow-y-scroll whitespace-nowrap focus:outline-none",
+                      "nodedc-dropdown-surface z-[760] my-1 min-w-48 overflow-y-scroll whitespace-nowrap focus:outline-none",
                       optionsClassName
                     )}
                     ref={setPopperElement}