[WEB-5594] feat: enhance authentication method handling in member columns and introduce new login labels (#8260)

Author: prateekshourya29

apps/web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { renderFormattedDate } from "@plane/utils";
 import { MemberHeaderColumn } from "@/components/project/member-header-column";
@@ -29,6 +29,7 @@ export const useMemberColumns = () => {
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
   const isSuspended = (rowData: RowData) => rowData.is_active === false;
+
   // handlers
   const handleDisplayFilterUpdate = (filterUpdates: Partial<IMemberFilters>) => {
     updateFilters(filterUpdates);
@@ -49,7 +50,7 @@ export const useMemberColumns = () => {
       tdRender: (rowData: RowData) => (
         <NameColumn
           rowData={rowData}
-          workspaceSlug={workspaceSlug as string}
+          workspaceSlug={workspaceSlug}
           isAdmin={isAdmin}
           currentUser={currentUser}
           setRemoveMemberModal={setRemoveMemberModal}
@@ -101,16 +102,18 @@ export const useMemberColumns = () => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug as string} />,
+      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug} />,
     },
 
     {
       key: "Authentication",
       content: t("workspace_settings.settings.members.details.authentication"),
-      tdRender: (rowData: RowData) =>
-        isSuspended(rowData) ? null : (
-          <div className="capitalize">{rowData.member.last_login_medium?.replace("-", " ")}</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>;
+      },
     },
 
     {

packages/constants/src/auth/core.ts

@@ -0,0 +1,10 @@
+import type { TCoreLoginMediums } from "@plane/types";
+
+export const CORE_LOGIN_MEDIUM_LABELS: Record<TCoreLoginMediums, string> = {
+  email: "Email",
+  "magic-code": "Magic code",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  gitea: "Gitea",
+};

packages/constants/src/auth/extended.ts

@@ -0,0 +1,3 @@
+import type { TExtendedLoginMediums } from "@plane/types";
+
+export const EXTENDED_LOGIN_MEDIUM_LABELS: Record<TExtendedLoginMediums, string> = {};

packages/constants/src/auth.ts packages/constants/src/auth/index.tspackages/constants/src/auth.ts renamed to packages/constants/src/auth/index.ts

@@ -1,3 +1,7 @@
+import type { TLoginMediums } from "@plane/types";
+import { CORE_LOGIN_MEDIUM_LABELS } from "./core";
+import { EXTENDED_LOGIN_MEDIUM_LABELS } from "./extended";
+
 export enum E_PASSWORD_STRENGTH {
   EMPTY = "empty",
   LENGTH_NOT_VALID = "length_not_valid",
@@ -156,3 +160,8 @@ export enum EAuthErrorCodes {
   // Rate limit
   RATE_LIMIT_EXCEEDED = "5900",
 }
+
+export const LOGIN_MEDIUM_LABELS: Record<TLoginMediums, string> = {
+  ...CORE_LOGIN_MEDIUM_LABELS,
+  ...EXTENDED_LOGIN_MEDIUM_LABELS,
+} as const;

packages/types/src/instance/auth-ee.ts

@@ -0,0 +1 @@
+export type TExtendedLoginMediums = never;

packages/types/src/instance/auth.ts

@@ -43,3 +43,5 @@ export type TGetBaseAuthenticationModeProps = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
   resolvedTheme: string | undefined;
 };
+
+export type TCoreLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google" | "gitea";

packages/types/src/instance/base.ts

@@ -5,7 +5,9 @@ import type {
   TInstanceImageConfigurationKeys,
   TInstanceAuthenticationKeys,
   TInstanceWorkspaceConfigurationKeys,
+  TCoreLoginMediums,
 } from "./";
+import type { TExtendedLoginMediums } from "./auth-ee";
 
 export interface IInstanceInfo {
   instance: IInstance;
@@ -98,3 +100,5 @@ export interface IInstanceConfiguration {
 export type IFormattedInstanceConfiguration = {
   [key in TInstanceConfigurationKeys]: string;
 };
+
+export type TLoginMediums = TCoreLoginMediums | TExtendedLoginMediums;

packages/types/src/instance/index.ts

@@ -1,5 +1,6 @@
 export * from "./ai";
 export * from "./auth";
+export * from "./auth-ee";
 export * from "./base";
 export * from "./email";
 export * from "./image";

packages/types/src/users.ts

@@ -1,5 +1,6 @@
 import type { TUserPermissions } from "./enums";
 import type { IIssueActivity, TIssuePriorities, TStateGroups } from ".";
+import type { TLoginMediums } from "./instance";
 
 /**
  * @description The start of the week for the user
@@ -15,8 +16,6 @@ export enum EStartOfTheWeek {
   SATURDAY = 6,
 }
 
-export type TLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google";
-
 export interface IUserLite {
   avatar_url: string;
   display_name: string;

packages/types/src/workspace.ts

@@ -3,6 +3,7 @@ import type { ICycle } from "./cycle";
 import type { TUserPermissions } from "./enums";
 import type { TProjectMembership } from "./project";
 import type { IUser, IUserLite } from "./users";
+import type { TLoginMediums } from "./instance";
 import type { IWorkspaceViewProps } from "./view-props";
 
 export enum EUserWorkspaceRoles {
@@ -82,7 +83,7 @@ export interface IWorkspaceMember {
   last_name?: string;
   joining_date?: string;
   display_name?: string;
-  last_login_medium?: string;
+  last_login_medium?: TLoginMediums;
   is_active?: boolean;
 }