UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: стандартизация таблицы участников workspace

plane-src/apps/web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -6,16 +6,36 @@
 
 import { useState } from "react";
 import { useParams } from "next/navigation";
-import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { renderFormattedDate } from "@plane/utils";
 import { MemberHeaderColumn } from "@/components/project/member-header-column";
 import type { RowData } from "@/components/workspace/settings/member-columns";
-import { AccountTypeColumn, NameColumn } from "@/components/workspace/settings/member-columns";
+import {
+  AccountTypeColumn,
+  NameColumn,
+  WorkspaceMemberActionsColumn,
+} from "@/components/workspace/settings/member-columns";
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 import type { IMemberFilters } from "@/store/member/utils";
 
+const NODEDC_LOGIN_MEDIUM_LABELS: Record<string, string> = {
+  email: "Почта",
+  "magic-code": "Код",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  gitea: "Gitea",
+};
+
+const getLoginMediumLabel = (loginMedium: string) => NODEDC_LOGIN_MEDIUM_LABELS[loginMedium] ?? loginMedium;
+
+const isSuspended = (rowData: RowData) => rowData.is_active === false;
+
+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";
+
 export const useMemberColumns = () => {
   // states
   const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
@@ -34,8 +54,6 @@ export const useMemberColumns = () => {
   // derived values
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
-  const isSuspended = (rowData: RowData) => rowData.is_active === false;
-
   // handlers
   const handleDisplayFilterUpdate = (filterUpdates: Partial<IMemberFilters>) => {
     updateFilters(filterUpdates);
@@ -45,13 +63,16 @@ export const useMemberColumns = () => {
     {
       key: "Full name",
       content: t("workspace_settings.settings.members.details.full_name"),
-      thClassName: "text-left",
+      thClassName: stickyNameHeaderClassName,
+      tdClassName: stickyNameCellClassName,
       thRender: () => (
-        <MemberHeaderColumn
-          property="full_name"
-          displayFilters={filters}
-          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-        />
+        <div className="w-max min-w-[8.5rem] pr-3">
+          <MemberHeaderColumn
+            property="full_name"
+            displayFilters={filters}
+            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          />
+        </div>
       ),
       tdRender: (rowData: RowData) => (
         <NameColumn
@@ -68,7 +89,9 @@ export const useMemberColumns = () => {
       key: "Display name",
       content: t("workspace_settings.settings.members.details.display_name"),
       tdRender: (rowData: RowData) => (
-        <div className={`w-32 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.display_name}</div>
+        <div className={`min-w-[7.5rem] pr-3 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>
+          {rowData.member.display_name}
+        </div>
       ),
       thRender: () => (
         <MemberHeaderColumn
@@ -83,7 +106,9 @@ export const useMemberColumns = () => {
       key: "Email address",
       content: t("workspace_settings.settings.members.details.email_address"),
       tdRender: (rowData: RowData) => (
-        <div className={`w-48 truncate ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.email}</div>
+        <div className={`min-w-[10.5rem] pr-3 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>
+          {rowData.member.email}
+        </div>
       ),
       thRender: () => (
         <MemberHeaderColumn
@@ -109,12 +134,12 @@ export const useMemberColumns = () => {
 
     {
       key: "Authentication",
-      content: t("workspace_settings.settings.members.details.authentication"),
+      content: <div className="min-w-[5.5rem] pr-3">Вход</div>,
       tdRender: (rowData: RowData) => {
         if (isSuspended(rowData)) return null;
         const loginMedium = rowData.member.last_login_medium;
         if (!loginMedium) return null;
-        return <div>{LOGIN_MEDIUM_LABELS[loginMedium]}</div>;
+        return <div className="min-w-[5.5rem] pr-3">{getLoginMediumLabel(loginMedium)}</div>;
       },
     },
 
@@ -122,7 +147,9 @@ export const useMemberColumns = () => {
       key: "Joining date",
       content: t("workspace_settings.settings.members.details.joining_date"),
       tdRender: (rowData: RowData) =>
-        isSuspended(rowData) ? null : <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+        isSuspended(rowData) ? null : (
+          <div className="min-w-[7rem] pr-3">{renderFormattedDate(rowData?.member?.joining_date)}</div>
+        ),
       thRender: () => (
         <MemberHeaderColumn
           property="joining_date"
@@ -131,6 +158,19 @@ export const useMemberColumns = () => {
         />
       ),
     },
+    {
+      key: "Actions",
+      content: <span className="sr-only">Действия</span>,
+      tdRender: (rowData: RowData) => (
+        <WorkspaceMemberActionsColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
   ];
   return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
 };