feat: added pagination to platform managed users table (#18523)
* feat: added pagination to platform managed users table * removed console * implemented feedback, removed unused components * added label * Update managed-users-view.tsx * Update managed-users-view.tsx
This commit is contained in:
Somay Chauhan
@@ -0,0 +1,14 @@
|
||||
import { _generateMetadata } from "app/_utils";
|
||||
import { WithLayout } from "app/layoutHOC";
|
||||
|
||||
import ManagedUsersView from "~/settings/platform/managed-users/managed-users-view";
|
||||
|
||||
export const generateMetadata = async () =>
|
||||
await _generateMetadata(
|
||||
(t) => t("platform_members"),
|
||||
(t) => t("platform_members_description")
|
||||
);
|
||||
|
||||
export default WithLayout({
|
||||
Page: ManagedUsersView,
|
||||
});
|
||||
@@ -1,33 +0,0 @@
|
||||
import type { PlatformOAuthClient } from "@calcom/prisma/client";
|
||||
|
||||
import { OAuthClientsDropdown } from "@components/settings/platform/dashboard/oauth-client-dropdown";
|
||||
|
||||
type ManagedUserHeaderProps = {
|
||||
oauthClients: PlatformOAuthClient[];
|
||||
initialClientName: string;
|
||||
handleChange: (clientId: string, clientName: string) => void;
|
||||
};
|
||||
|
||||
export const ManagedUserHeader = ({
|
||||
oauthClients,
|
||||
initialClientName,
|
||||
handleChange,
|
||||
}: ManagedUserHeaderProps) => {
|
||||
return (
|
||||
<div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
|
||||
<div className="flex w-full flex-col">
|
||||
<h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
|
||||
Managed Users
|
||||
</h1>
|
||||
<p className="text-default text-sm ltr:mr-4 rtl:ml-4">
|
||||
See all the managed users created by your OAuth client.
|
||||
</p>
|
||||
</div>
|
||||
<OAuthClientsDropdown
|
||||
oauthClients={oauthClients}
|
||||
initialClientName={initialClientName}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import type { PlatformOAuthClient } from "@calcom/prisma/client";
|
||||
|
||||
import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
|
||||
|
||||
import { ManagedUserHeader } from "@components/settings/platform/dashboard/managed-user-header";
|
||||
import { ManagedUserTable } from "@components/settings/platform/dashboard/managed-user-table";
|
||||
|
||||
type ManagedUserListProps = {
|
||||
oauthClients: PlatformOAuthClient[];
|
||||
managedUsers?: ManagedUser[];
|
||||
initialClientName: string;
|
||||
initialClientId: string;
|
||||
isManagedUserLoading: boolean;
|
||||
handleChange: (clientId: string, clientName: string) => void;
|
||||
};
|
||||
|
||||
export const ManagedUserList = ({
|
||||
initialClientName,
|
||||
initialClientId,
|
||||
oauthClients,
|
||||
managedUsers,
|
||||
isManagedUserLoading,
|
||||
handleChange,
|
||||
}: ManagedUserListProps) => {
|
||||
return (
|
||||
<div>
|
||||
<ManagedUserHeader
|
||||
oauthClients={oauthClients}
|
||||
initialClientName={initialClientName}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<ManagedUserTable
|
||||
managedUsers={managedUsers}
|
||||
isManagedUserLoading={isManagedUserLoading}
|
||||
initialClientId={initialClientId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
import { EmptyScreen } from "@calcom/ui";
|
||||
|
||||
import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
|
||||
|
||||
type ManagedUserTableProps = {
|
||||
managedUsers?: ManagedUser[];
|
||||
isManagedUserLoading: boolean;
|
||||
initialClientId: string;
|
||||
};
|
||||
|
||||
export const ManagedUserTable = ({
|
||||
managedUsers,
|
||||
isManagedUserLoading,
|
||||
initialClientId,
|
||||
}: ManagedUserTableProps) => {
|
||||
const showUsers = !isManagedUserLoading && managedUsers?.length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showUsers ? (
|
||||
<>
|
||||
<table className="w-[100%] rounded-lg">
|
||||
<colgroup className="border-subtle overflow-hidden rounded-b-lg border border-b-0" span={3} />
|
||||
<tr>
|
||||
<td className="border-subtle border px-4 py-3 md:text-center">Id</td>
|
||||
<td className="border-subtle border px-4 py-3 md:text-center">Username</td>
|
||||
<td className="border-subtle border px-4 py-3 md:text-center">Email</td>
|
||||
</tr>
|
||||
{managedUsers.map((user) => {
|
||||
return (
|
||||
<tr key={user.id} className="">
|
||||
<td className="border-subtle overflow-hidden border px-4 py-3 md:text-center">{user.id}</td>
|
||||
<td className="border-subtle border px-4 py-3 md:text-center">{user.username}</td>
|
||||
<td className="border-subtle overflow-hidden border px-4 py-3 md:overflow-auto md:text-center">
|
||||
{user.email}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</table>
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreen
|
||||
limitWidth={false}
|
||||
headline={
|
||||
initialClientId == undefined
|
||||
? "OAuth client is missing. You need to create an OAuth client first in order to create a managed user."
|
||||
: `OAuth client ${initialClientId} does not have a managed user present.`
|
||||
}
|
||||
description={
|
||||
initialClientId == undefined
|
||||
? "Refer to the Platform Docs from the sidebar in order to create an OAuth client."
|
||||
: "Refer to the Platform Docs from the sidebar in order to create a managed user."
|
||||
}
|
||||
className="items-center border"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { PlatformOAuthClient } from "@calcom/prisma/client";
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownItem,
|
||||
} from "@calcom/ui";
|
||||
|
||||
type OAuthClientsDropdownProps = {
|
||||
oauthClients: PlatformOAuthClient[];
|
||||
initialClientName: string;
|
||||
handleChange: (clientId: string, clientName: string) => void;
|
||||
};
|
||||
|
||||
export const OAuthClientsDropdown = ({
|
||||
oauthClients,
|
||||
initialClientName,
|
||||
handleChange,
|
||||
}: OAuthClientsDropdownProps) => {
|
||||
return (
|
||||
<div>
|
||||
{Array.isArray(oauthClients) && oauthClients.length > 0 ? (
|
||||
<Dropdown modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button color="secondary" EndIcon="chevron-down">
|
||||
{initialClientName}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{oauthClients.map((client) => {
|
||||
return (
|
||||
<div key={client.id}>
|
||||
{initialClientName !== client.name ? (
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<DropdownItem type="button" onClick={() => handleChange(client.id, client.name)}>
|
||||
{client.name}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import Shell from "@calcom/features/shell/Shell";
|
||||
import { PlatformManagedUsersTable } from "@calcom/features/users/components/UserTable/PlatformManagedUsersTable";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Select, Skeleton, SkeletonContainer, SkeletonText, Label } from "@calcom/ui";
|
||||
|
||||
import { useOAuthClients } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
|
||||
|
||||
type OAuthClientOption = { label: string; value: string };
|
||||
|
||||
const ManagedUsersView = () => {
|
||||
const { t } = useLocale();
|
||||
const { data: OAuthClientsQueryData, error, isLoading: isOAuthClientLoading } = useOAuthClients();
|
||||
|
||||
const oAuthClientOptions: OAuthClientOption[] = useMemo(
|
||||
() =>
|
||||
OAuthClientsQueryData.map((client) => ({
|
||||
label: client.name,
|
||||
value: client.id,
|
||||
})),
|
||||
[OAuthClientsQueryData]
|
||||
);
|
||||
|
||||
const [oAuthClient, setOAuthClient] = useState<OAuthClientOption | null>(oAuthClientOptions[0] || null);
|
||||
|
||||
const ManagedUsersSkeletonLoader = () => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="w-1/4 p-4" />
|
||||
<div className="flex-1 p-6">
|
||||
<SkeletonContainer>
|
||||
<div className="mb-4 flex justify-between">
|
||||
<SkeletonText className="mb-2 h-6 w-1/3" />
|
||||
<SkeletonText className="h-6 w-1/5" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<SkeletonText className="h-8 w-1/2 rounded-md" />
|
||||
</div>
|
||||
<div className="border-subtle flex items-center border-b py-3">
|
||||
<SkeletonText className="h-6 w-1/4" />
|
||||
<SkeletonText className="ml-4 h-6 w-1/5" />
|
||||
<SkeletonText className="ml-4 h-6 w-1/5" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<SkeletonText className="mx-auto h-4 w-1/3" />
|
||||
</div>
|
||||
</SkeletonContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (isOAuthClientLoading) {
|
||||
return <ManagedUsersSkeletonLoader />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="m-5 text-red-500">{t("Failed to load OAuth clients.")}</div>;
|
||||
}
|
||||
|
||||
if (!OAuthClientsQueryData.length) {
|
||||
return (
|
||||
<div className="m-5">{t("No OAuth clients available. Please create one to view managed users.")}</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Shell
|
||||
heading={t("managed_users")}
|
||||
subtitle={t("managed_users_description")}
|
||||
title={t("managed_users")}
|
||||
description={t("managed_users_description")}
|
||||
hideHeadingOnMobile
|
||||
withoutMain={false}
|
||||
isPlatformUser={true}>
|
||||
<Skeleton as={Label} loadingClassName="w-16" title={t("select_oAuth_client")}>
|
||||
{t("select_oAuth_client")}
|
||||
</Skeleton>
|
||||
<Select
|
||||
className="z-20 mb-4 w-40"
|
||||
options={oAuthClientOptions}
|
||||
value={oAuthClient}
|
||||
isSearchable={false}
|
||||
onChange={(client) => client && setOAuthClient(client)}
|
||||
/>
|
||||
{oAuthClient && <PlatformManagedUsersTable oAuthClientId={oAuthClient.value} />}
|
||||
</Shell>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManagedUsersView;
|
||||
@@ -7,15 +7,11 @@ import Shell from "@calcom/features/shell/Shell";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { showToast } from "@calcom/ui";
|
||||
|
||||
import {
|
||||
useOAuthClients,
|
||||
useGetOAuthClientManagedUsers,
|
||||
} from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
|
||||
import { useOAuthClients } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
|
||||
import { useDeleteOAuthClient } from "@lib/hooks/settings/platform/oauth-clients/usePersistOAuthClient";
|
||||
|
||||
import { HelpCards } from "@components/settings/platform/dashboard/HelpCards";
|
||||
import NoPlatformPlan from "@components/settings/platform/dashboard/NoPlatformPlan";
|
||||
import { ManagedUserList } from "@components/settings/platform/dashboard/managed-user-list";
|
||||
import { OAuthClientsList } from "@components/settings/platform/dashboard/oauth-clients-list";
|
||||
import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
|
||||
import { PlatformPricing } from "@components/settings/platform/pricing/platform-pricing";
|
||||
@@ -28,11 +24,6 @@ export default function Platform() {
|
||||
const [initialClientName, setInitialClientName] = useState("");
|
||||
|
||||
const { data, isLoading: isOAuthClientLoading, refetch: refetchClients } = useOAuthClients();
|
||||
const {
|
||||
isLoading: isManagedUserLoading,
|
||||
data: managedUserData,
|
||||
refetch: refetchManagedUsers,
|
||||
} = useGetOAuthClientManagedUsers(initialClientId);
|
||||
|
||||
const { isUserLoading, isUserBillingDataLoading, isPlatformUser, isPaidUser, userBillingData, userOrgId } =
|
||||
useGetUserAttributes();
|
||||
@@ -41,7 +32,6 @@ export default function Platform() {
|
||||
onSuccess: () => {
|
||||
showToast(t("oauth_client_deletion_message"), "success");
|
||||
refetchClients();
|
||||
refetchManagedUsers();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -87,18 +77,6 @@ export default function Platform() {
|
||||
isPlatformUser={true}>
|
||||
<HelpCards />
|
||||
<OAuthClientsList oauthClients={data} isDeleting={isDeleting} handleDelete={handleDelete} />
|
||||
<ManagedUserList
|
||||
oauthClients={data}
|
||||
managedUsers={managedUserData}
|
||||
isManagedUserLoading={isManagedUserLoading}
|
||||
initialClientName={initialClientName}
|
||||
initialClientId={initialClientId}
|
||||
handleChange={(id: string, name: string) => {
|
||||
setInitialClientId(id);
|
||||
setInitialClientName(name);
|
||||
refetchManagedUsers();
|
||||
}}
|
||||
/>
|
||||
</Shell>
|
||||
</div>
|
||||
</QueryClientProvider>
|
||||
|
||||
@@ -2920,5 +2920,8 @@
|
||||
"choose_an_option": "Choose an option",
|
||||
"enter_option_value": "Enter option value",
|
||||
"remove_option": "Remove option",
|
||||
"managed_users": "Managed Users",
|
||||
"managed_users_description": "See all the managed users created by your OAuth client",
|
||||
"select_oAuth_client": "Select Oauth Client",
|
||||
"ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
|
||||
}
|
||||
@@ -167,6 +167,12 @@ const platformNavigationItems: NavigationItemType[] = [
|
||||
icon: "users",
|
||||
moreOnMobile: true,
|
||||
},
|
||||
{
|
||||
name: "Managed Users",
|
||||
href: "/settings/platform/managed-users",
|
||||
icon: "users",
|
||||
moreOnMobile: true,
|
||||
},
|
||||
];
|
||||
|
||||
const useNavigationItems = (isPlatformNavigation = false) => {
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@ca
|
||||
import type { UserTableUser } from "../types";
|
||||
|
||||
interface Props {
|
||||
users: UserTableUser[];
|
||||
users: Array<{ id: UserTableUser["id"] }>;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,359 @@
|
||||
"use client";
|
||||
|
||||
import { keepPreviousData } from "@tanstack/react-query";
|
||||
import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
|
||||
import { useMemo, useReducer, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
DataTableProvider,
|
||||
DataTable,
|
||||
DataTableToolbar,
|
||||
DataTableFilters,
|
||||
DataTableSelectionBar,
|
||||
DataTablePagination,
|
||||
useColumnFilters,
|
||||
useFetchMoreOnBottomReached,
|
||||
} from "@calcom/features/data-table";
|
||||
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc";
|
||||
import { Avatar, Badge, Checkbox, SkeletonText } from "@calcom/ui";
|
||||
|
||||
import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
|
||||
import { DeleteMemberModal } from "./DeleteMemberModal";
|
||||
import type { UserTableState, UserTableAction, PlatformManagedUserTableUser } from "./types";
|
||||
|
||||
const initialState: UserTableState = {
|
||||
changeMemberRole: {
|
||||
showModal: false,
|
||||
},
|
||||
deleteMember: {
|
||||
showModal: false,
|
||||
},
|
||||
impersonateMember: {
|
||||
showModal: false,
|
||||
},
|
||||
inviteMember: {
|
||||
showModal: false,
|
||||
},
|
||||
editSheet: {
|
||||
showModal: false,
|
||||
},
|
||||
};
|
||||
|
||||
const initalColumnVisibility = {
|
||||
select: true,
|
||||
member: true,
|
||||
role: true,
|
||||
teams: true,
|
||||
actions: true,
|
||||
};
|
||||
|
||||
type PlatformManagedUsersTableProps = {
|
||||
oAuthClientId: string;
|
||||
};
|
||||
|
||||
export function PlatformManagedUsersTable(props: PlatformManagedUsersTableProps) {
|
||||
return (
|
||||
<DataTableProvider>
|
||||
<UserListTableContent {...props} />
|
||||
</DataTableProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps) {
|
||||
const { t } = useLocale();
|
||||
|
||||
const tableContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
||||
const [rowSelection, setRowSelection] = useState({});
|
||||
|
||||
const columnFilters = useColumnFilters();
|
||||
|
||||
const { data, isPending, hasNextPage, fetchNextPage, isFetching } =
|
||||
trpc.viewer.organizations.listMembers.useInfiniteQuery(
|
||||
{
|
||||
limit: 30,
|
||||
searchTerm: debouncedSearchTerm,
|
||||
filters: columnFilters,
|
||||
oAuthClientId,
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
placeholderData: keepPreviousData,
|
||||
enabled: !!oAuthClientId,
|
||||
}
|
||||
);
|
||||
|
||||
const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
|
||||
|
||||
//we must flatten the array of arrays from the useInfiniteQuery hook
|
||||
const flatData = useMemo(
|
||||
() => data?.pages?.flatMap((page) => page.rows) ?? [],
|
||||
[data]
|
||||
) as PlatformManagedUserTableUser[];
|
||||
|
||||
const columns = useMemo(() => {
|
||||
const cols: ColumnDef<PlatformManagedUserTableUser>[] = [
|
||||
// Disabling select for this PR: Will work on actions etc in a follow up
|
||||
{
|
||||
id: "select",
|
||||
enableHiding: false,
|
||||
enableSorting: false,
|
||||
enableResizing: false,
|
||||
size: 30,
|
||||
meta: {
|
||||
sticky: {
|
||||
position: "left",
|
||||
},
|
||||
},
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
checked={table.getIsAllPageRowsSelected()}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label="Select all"
|
||||
className="translate-y-[2px]"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
className="translate-y-[2px]"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "member",
|
||||
accessorFn: (data) => data.email,
|
||||
enableHiding: false,
|
||||
size: 200,
|
||||
header: () => {
|
||||
return `Managed Users`;
|
||||
},
|
||||
meta: {
|
||||
sticky: { position: "left", gap: 24 },
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
if (isPending) {
|
||||
return <SkeletonText className="h-6 w-1/4" />;
|
||||
}
|
||||
const { username, email, avatarUrl } = row.original;
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar
|
||||
size="sm"
|
||||
alt={username || email}
|
||||
imageSrc={getUserAvatarUrl({
|
||||
avatarUrl,
|
||||
})}
|
||||
/>
|
||||
<div className="">
|
||||
<div
|
||||
data-testid={`member-${username}-username`}
|
||||
className="text-emphasis text-sm font-medium leading-none">
|
||||
{username || "No username"}
|
||||
</div>
|
||||
<div
|
||||
data-testid={`member-${username}-email`}
|
||||
className="text-subtle mt-1 text-sm leading-none">
|
||||
{email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
filterFn: (rows, id, filterValue) => {
|
||||
const userEmail = rows.original.email;
|
||||
return filterValue.includes(userEmail);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "role",
|
||||
accessorFn: (data) => data.role,
|
||||
header: "Role",
|
||||
size: 100,
|
||||
cell: ({ row, table }) => {
|
||||
if (isPending) {
|
||||
return <SkeletonText className="h-6 w-1/4" />;
|
||||
}
|
||||
const { role, username } = row.original;
|
||||
return (
|
||||
<Badge
|
||||
data-testid={`member-${username}-role`}
|
||||
variant={role === "MEMBER" ? "gray" : "blue"}
|
||||
onClick={() => {
|
||||
table.getColumn("role")?.setFilterValue([role]);
|
||||
}}>
|
||||
{role}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
filterFn: (rows, id, filterValue) => {
|
||||
if (filterValue.includes("PENDING")) {
|
||||
if (filterValue.length === 1) return !rows.original.accepted;
|
||||
else return !rows.original.accepted || filterValue.includes(rows.getValue(id));
|
||||
}
|
||||
|
||||
// Show only the selected roles
|
||||
return filterValue.includes(rows.getValue(id));
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "teams",
|
||||
accessorFn: (data) => data.teams.map((team) => team.name),
|
||||
header: "Teams",
|
||||
size: 140,
|
||||
cell: ({ row, table }) => {
|
||||
if (isPending) {
|
||||
return <SkeletonText className="h-6 w-1/4" />;
|
||||
}
|
||||
const { teams, accepted, email, username } = row.original;
|
||||
// TODO: Implement click to filter
|
||||
return (
|
||||
<div className="flex h-full flex-wrap items-center gap-2">
|
||||
{accepted ? null : (
|
||||
<Badge
|
||||
data-testid2={`member-${username}-pending`}
|
||||
variant="red"
|
||||
className="text-xs"
|
||||
data-testid={`email-${email.replace("@", "")}-pending`}
|
||||
onClick={() => {
|
||||
table.getColumn("role")?.setFilterValue(["PENDING"]);
|
||||
}}>
|
||||
Pending
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{teams.map((team) => (
|
||||
<Badge
|
||||
key={team.id}
|
||||
variant="gray"
|
||||
onClick={() => {
|
||||
table.getColumn("teams")?.setFilterValue([team.name]);
|
||||
}}>
|
||||
{team.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
filterFn: (rows, _, filterValue: string[]) => {
|
||||
const teamNames = rows.original.teams.map((team) => team.name);
|
||||
return filterValue.some((value: string) => teamNames.includes(value));
|
||||
},
|
||||
},
|
||||
];
|
||||
return cols;
|
||||
}, [isPending]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: flatData,
|
||||
columns,
|
||||
enableRowSelection: true,
|
||||
columnResizeMode: "onChange",
|
||||
debugTable: true,
|
||||
manualPagination: true,
|
||||
initialState: {
|
||||
columnVisibility: initalColumnVisibility,
|
||||
},
|
||||
defaultColumn: {
|
||||
size: 150,
|
||||
},
|
||||
state: {
|
||||
columnFilters,
|
||||
rowSelection,
|
||||
},
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onRowSelectionChange: setRowSelection,
|
||||
getRowId: (row) => `${row.id}`,
|
||||
});
|
||||
|
||||
function reducer(state: UserTableState, action: UserTableAction): UserTableState {
|
||||
switch (action.type) {
|
||||
case "SET_CHANGE_MEMBER_ROLE_ID":
|
||||
return { ...state, changeMemberRole: action.payload };
|
||||
case "SET_DELETE_ID":
|
||||
return { ...state, deleteMember: action.payload };
|
||||
case "SET_IMPERSONATE_ID":
|
||||
return { ...state, impersonateMember: action.payload };
|
||||
case "INVITE_MEMBER":
|
||||
return { ...state, inviteMember: action.payload };
|
||||
case "EDIT_USER_SHEET":
|
||||
return { ...state, editSheet: action.payload };
|
||||
case "CLOSE_MODAL":
|
||||
return {
|
||||
...state,
|
||||
changeMemberRole: { showModal: false },
|
||||
deleteMember: { showModal: false },
|
||||
impersonateMember: { showModal: false },
|
||||
inviteMember: { showModal: false },
|
||||
editSheet: { showModal: false },
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({
|
||||
tableContainerRef,
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isFetching,
|
||||
});
|
||||
|
||||
const numberOfSelectedRows = useMemo(() => table.getSelectedRowModel().rows.length, [table]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
data-testid="managed-user-list-data-table"
|
||||
table={table}
|
||||
tableContainerRef={tableContainerRef}
|
||||
isPending={isPending}
|
||||
enableColumnResizing={true}
|
||||
onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}>
|
||||
<DataTableToolbar.Root>
|
||||
<div className="flex w-full flex-col gap-2 sm:flex-row">
|
||||
<div className="w-full sm:w-auto sm:min-w-[200px] sm:flex-1">
|
||||
<DataTableToolbar.SearchBar
|
||||
table={table}
|
||||
onSearch={(value) => setDebouncedSearchTerm(value)}
|
||||
className="sm:max-w-64 max-w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
{/* We have to omit member because we don't want the filter to show but we can't disable filtering as we need that for the search bar */}
|
||||
<DataTableFilters.AddFilterButton table={table} />
|
||||
<DataTableFilters.ColumnVisibilityButton table={table} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-self-start">
|
||||
<DataTableFilters.ActiveFilters table={table} />
|
||||
</div>
|
||||
</DataTableToolbar.Root>
|
||||
|
||||
<div style={{ gridArea: "footer", marginTop: "1rem" }}>
|
||||
<DataTablePagination table={table} totalDbDataCount={totalDBRowCount} />
|
||||
</div>
|
||||
|
||||
{numberOfSelectedRows > 0 && (
|
||||
<DataTableSelectionBar.Root className="justify-center">
|
||||
<p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
|
||||
{t("number_selected", { count: numberOfSelectedRows })}
|
||||
</p>
|
||||
<DeleteBulkUsers
|
||||
users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
|
||||
onRemove={() => table.toggleAllPageRowsSelected(false)}
|
||||
/>
|
||||
</DataTableSelectionBar.Root>
|
||||
)}
|
||||
</DataTable>
|
||||
{state.deleteMember.showModal && <DeleteMemberModal state={state} dispatch={dispatch} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -26,11 +26,21 @@ export interface UserTableUser {
|
||||
}[];
|
||||
}
|
||||
|
||||
export type PlatformManagedUserTableUser = Omit<
|
||||
UserTableUser,
|
||||
"lastActiveAt" | "attributes" | "completedOnboarding" | "disableImpersonation"
|
||||
>;
|
||||
|
||||
export type UserTablePayload = {
|
||||
showModal: boolean;
|
||||
user?: UserTableUser;
|
||||
};
|
||||
|
||||
export type PlatformUserTablePayload = {
|
||||
showModal: boolean;
|
||||
user?: PlatformManagedUserTableUser;
|
||||
};
|
||||
|
||||
export type UserTableState = {
|
||||
changeMemberRole: UserTablePayload;
|
||||
deleteMember: UserTablePayload;
|
||||
@@ -39,6 +49,10 @@ export type UserTableState = {
|
||||
editSheet: UserTablePayload & { user?: UserTableUser };
|
||||
};
|
||||
|
||||
export type PlatforManagedUserTableState = {
|
||||
deleteMember: UserTablePayload;
|
||||
};
|
||||
|
||||
export type UserTableAction =
|
||||
| {
|
||||
type:
|
||||
@@ -53,3 +67,12 @@ export type UserTableAction =
|
||||
| {
|
||||
type: "CLOSE_MODAL";
|
||||
};
|
||||
|
||||
export type PlatformManagedUserTableAction =
|
||||
| {
|
||||
type: "SET_DELETE_ID";
|
||||
payload: PlatformUserTablePayload;
|
||||
}
|
||||
| {
|
||||
type: "CLOSE_MODAL";
|
||||
};
|
||||
|
||||
@@ -18,10 +18,22 @@ type GetOptions = {
|
||||
const isAllString = (array: (string | number)[]): array is string[] => {
|
||||
return array.every((value) => typeof value === "string");
|
||||
};
|
||||
function getUserConditions(oAuthClientId?: string) {
|
||||
if (!!oAuthClientId) {
|
||||
return {
|
||||
platformOAuthClients: {
|
||||
some: { id: oAuthClientId },
|
||||
},
|
||||
isPlatformManaged: true,
|
||||
};
|
||||
}
|
||||
return { isPlatformManaged: false };
|
||||
}
|
||||
|
||||
export const listMembersHandler = async ({ ctx, input }: GetOptions) => {
|
||||
const organizationId = ctx.user.organizationId ?? ctx.user.profiles[0].organizationId;
|
||||
const searchTerm = input.searchTerm;
|
||||
const oAuthClientId = input.oAuthClientId;
|
||||
const expand = input.expand;
|
||||
const filters = input.filters || [];
|
||||
|
||||
@@ -66,13 +78,16 @@ export const listMembersHandler = async ({ ctx, input }: GetOptions) => {
|
||||
|
||||
const getTotalMembers = await prisma.membership.count({
|
||||
where: {
|
||||
user: {
|
||||
...getUserConditions(oAuthClientId),
|
||||
},
|
||||
teamId: organizationId,
|
||||
},
|
||||
});
|
||||
|
||||
let whereClause: Prisma.MembershipWhereInput = {
|
||||
user: {
|
||||
isPlatformManaged: false,
|
||||
...getUserConditions(oAuthClientId),
|
||||
},
|
||||
teamId: organizationId,
|
||||
...(searchTerm && {
|
||||
|
||||
@@ -15,6 +15,7 @@ export const ZListMembersSchema = z.object({
|
||||
searchTerm: z.string().optional(),
|
||||
expand: z.array(expandableColumns).optional(),
|
||||
filters: z.array(ZListMembersFilter).optional(),
|
||||
oAuthClientId: z.string().optional(),
|
||||
});
|
||||
|
||||
export type TListMembersSchema = z.infer<typeof ZListMembersSchema>;
|
||||
|
||||
Reference in New Issue
Block a user