Merge branch 'machine-roles' into dev

src/app/[orgId]/settings/clients/machine/[niceId]/general/page.tsx

@@ -34,6 +34,10 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import ActionBanner from "@app/components/ActionBanner";
 import { Shield, ShieldOff } from "lucide-react";
+import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
@@ -42,14 +46,40 @@ const GeneralFormSchema = z.object({
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
+const RolesFormSchema = z.object({
+    roles: z.array(
+        z.object({
+            id: z.string(),
+            text: z.string(),
+            isAdmin: z.boolean().optional()
+        })
+    )
+});
+
+type RolesFormValues = z.infer<typeof RolesFormSchema>;
+
 export default function GeneralPage() {
     const t = useTranslations();
     const { client, updateClient } = useClientContext();
-    const api = createApiClient(useEnvContext());
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
     const [loading, setLoading] = useState(false);
     const [isRefreshing, setIsRefreshing] = useState(false);
     const router = useRouter();
     const [, startTransition] = useTransition();
+    const [savingRoles, setSavingRoles] = useState(false);
+    const { isPaidUser } = usePaidStatus();
+    const canAssignRoles = isPaidUser(tierMatrix.fullRbac);
+
+    const rolesForm = useForm({
+        resolver: zodResolver(RolesFormSchema),
+        defaultValues: {
+            roles: (client?.roles ?? []).map((r) => ({
+                id: r.roleId.toString(),
+                text: r.name
+            }))
+        }
+    });
 
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
@@ -113,6 +143,41 @@ export default function GeneralPage() {
         }
     }
 
+    async function onSubmitRoles(data: RolesFormValues) {
+        if (!client?.clientId) return;
+        setSavingRoles(true);
+
+        try {
+            const roleIds = data.roles.map((r) => parseInt(r.id, 10));
+            await api.post(`/client/${client.clientId}/roles`, { roleIds });
+
+            updateClient({
+                roles: data.roles.map((r) => ({
+                    roleId: parseInt(r.id, 10),
+                    name: r.text
+                }))
+            });
+
+            toast({
+                title: t("machineClientRolesUpdated"),
+                description: t("machineClientRolesUpdatedDescription")
+            });
+
+            router.refresh();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("machineClientRolesUpdateFailed"),
+                description: formatAxiosError(
+                    e,
+                    t("machineClientRolesUpdateError")
+                )
+            });
+        } finally {
+            setSavingRoles(false);
+        }
+    }
+
     const handleUnblock = async () => {
         if (!client?.clientId) return;
         setIsRefreshing(true);
@@ -230,6 +295,56 @@ export default function GeneralPage() {
                     </Button>
                 </SettingsSectionFooter>
             </SettingsSection>
+
+            {!env.flags.disableEnterpriseFeatures && (
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("roles")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("machineClientRolesDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        <PaidFeaturesAlert tiers={tierMatrix.fullRbac} />
+
+                        <SettingsSectionForm>
+                            <Form {...rolesForm}>
+                                <form
+                                    onSubmit={rolesForm.handleSubmit(
+                                        onSubmitRoles
+                                    )}
+                                    className="space-y-4"
+                                    id="roles-settings-form"
+                                >
+                                    <OrgRolesTagField
+                                        form={rolesForm}
+                                        name="roles"
+                                        orgId={client.orgId}
+                                        supportsMultipleRolesPerUser={true}
+                                        showMultiRolePaywallMessage={false}
+                                        paywallMessage=""
+                                        disabled={!canAssignRoles}
+                                    />
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+
+                    <SettingsSectionFooter>
+                        <Button
+                            type="submit"
+                            form="roles-settings-form"
+                            loading={savingRoles}
+                            disabled={savingRoles || !canAssignRoles}
+                        >
+                            {t("saveSettings")}
+                        </Button>
+                    </SettingsSectionFooter>
+                </SettingsSection>
+            )}
         </SettingsContainer>
     );
 }

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -5,6 +5,7 @@ import MachineClientsBanner from "@app/components/MachineClientsBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListClientsResponse } from "@server/routers/client";
+import type { ListRolesResponse } from "@server/routers/role/listRoles";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import type { Pagination } from "@server/types/Pagination";
@@ -34,17 +35,37 @@ export default async function ClientsPage(props: ClientsPageProps) {
         pageSize: 20
     };
 
-    try {
-        const machineRes = await internal.get<
-            AxiosResponse<ListClientsResponse>
-        >(
-            `/org/${params.orgId}/clients?${searchParams.toString()}`,
-            await authCookieHeader()
-        );
+    const cookieHeader = await authCookieHeader();
+
+    const [machineRes, rolesRes] = await Promise.all([
+        internal
+            .get<AxiosResponse<ListClientsResponse>>(
+                `/org/${params.orgId}/clients?${searchParams.toString()}`,
+                cookieHeader
+            )
+            .catch(() => {}),
+        internal
+            .get<AxiosResponse<ListRolesResponse>>(
+                `/org/${params.orgId}/roles?pageSize=500&page=1`,
+                cookieHeader
+            )
+            .catch(() => {})
+    ]);
+
+    if (machineRes && machineRes.status === 200) {
         const responseData = machineRes.data.data;
         machineClients = responseData.clients;
         pagination = responseData.pagination;
-    } catch (e) {}
+    }
+
+    const orgRoles =
+        rolesRes && rolesRes.status === 200
+            ? (rolesRes.data.data.roles ?? [])
+            : [];
+    const roleFilterOptions = orgRoles.map((r) => ({
+        value: String(r.roleId),
+        label: r.name
+    }));
 
     function formatSize(mb: number): string {
         if (mb >= 1024 * 1024) {
@@ -77,7 +98,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             archived: client.archived || false,
             blocked: client.blocked || false,
             approvalState: client.approvalState ?? "approved",
-            labels: client.labels ?? []
+            labels: client.labels ?? [],
+            roleLabels: (client.roles ?? []).map((r) => r.name)
         };
     };
 
@@ -96,6 +118,7 @@ export default async function ClientsPage(props: ClientsPageProps) {
                 machineClients={machineClientRows}
                 orgId={params.orgId}
                 rowCount={pagination.total}
+                roleFilterOptions={roleFilterOptions}
                 pagination={{
                     pageIndex: pagination.page - 1,
                     pageSize: pagination.pageSize

src/components/MachineClientsTable.tsx

@@ -32,6 +32,7 @@ import { useRouter } from "next/navigation";
 import { startTransition, useMemo, useState, useTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { ColumnFilterButton } from "./ColumnFilterButton";
+import { ColumnMultiFilterButton } from "./ColumnMultiFilterButton";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { Badge } from "./ui/badge";
@@ -43,6 +44,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import semver from "semver";
 import { InfoPopup } from "./ui/info-popup";
+import UserRoleBadges from "./UserRoleBadges";
 
 export type ClientRow = {
     id: number;
@@ -68,20 +70,25 @@ export type ClientRow = {
         name: string;
         color: string;
     }>;
+    roleLabels: string[];
 };
 
+type FilterOption = { value: string; label: string };
+
 type ClientTableProps = {
     machineClients: ClientRow[];
     orgId: string;
     pagination: PaginationState;
     rowCount: number;
+    roleFilterOptions: FilterOption[];
 };
 
 export default function MachineClientsTable({
     machineClients,
     orgId,
     pagination,
-    rowCount
+    rowCount,
+    roleFilterOptions
 }: ClientTableProps) {
     const router = useRouter();
 
@@ -437,6 +444,27 @@ export default function MachineClientsTable({
                 friendlyName: t("address"),
                 header: () => <span className="px-3">{t("address")}</span>
             },
+            {
+                id: "role",
+                accessorFn: (row) => row.roleLabels.join(", "),
+                friendlyName: t("roles"),
+                header: () => (
+                    <ColumnMultiFilterButton
+                        options={roleFilterOptions}
+                        selectedValues={searchParams.getAll("role_id")}
+                        onSelectedValuesChange={(values) =>
+                            handleFilterChange("role_id", values)
+                        }
+                        searchPlaceholder={t("searchPlaceholder")}
+                        emptyMessage={t("emptySearchOptions")}
+                        label={t("roles")}
+                        className="p-3"
+                    />
+                ),
+                cell: ({ row }) => (
+                    <UserRoleBadges roleLabels={row.original.roleLabels} />
+                )
+            },
             {
                 id: "labels",
                 accessorKey: "labels",
@@ -540,7 +568,7 @@ export default function MachineClientsTable({
         }
 
         return baseColumns;
-    }, [hasRowsWithoutUserId, orgId, t, searchParams]);
+    }, [hasRowsWithoutUserId, orgId, t, searchParams, roleFilterOptions]);
 
     function handleFilterChange(
         column: string,

src/components/PermissionsSelectBox.tsx

@@ -101,7 +101,10 @@ function getActionsCategories(root: boolean) {
             [t("actionUpdateRole")]: "updateRole",
             [t("actionListAllowedRoleResources")]: "listRoleResources",
             [t("actionAddUserRole")]: "addUserRole",
-            [t("actionRemoveUserRole")]: "removeUserRole"
+            [t("actionRemoveUserRole")]: "removeUserRole",
+            [t("actionAddClientRole")]: "addClientRole",
+            [t("actionRemoveClientRole")]: "removeClientRole",
+            [t("actionSetClientRoles")]: "setClientRoles"
         },
         "Access Token": {
             [t("actionGenerateAccessToken")]: "generateAccessToken",