fix(ui): use Status wording and capitalize invitation and role filters (#13175)

ui/app/(prowler)/invitations/_components/invitations-filters.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { filterInvitations } from "@/components/filters/data-filters";
+import { DataTableFilterCustom } from "@/components/shadcn/table";
+import { capitalize } from "@/lib/utils";
+
+// Client-side so labelFormatter never crosses the RSC boundary.
+export const InvitationsFilters = () => (
+  <DataTableFilterCustom
+    filters={filterInvitations.map((filter) => ({
+      ...filter,
+      labelFormatter: capitalize,
+    }))}
+    gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
+  />
+);

ui/app/(prowler)/invitations/page.tsx

@@ -4,14 +4,14 @@ import { Suspense } from "react";
 
 import { getInvitations } from "@/actions/invitations/invitation";
 import { getRoles } from "@/actions/roles";
-import { filterInvitations } from "@/components/filters/data-filters";
+import { InvitationsFilters } from "@/app/(prowler)/invitations/_components/invitations-filters";
 import {
   ColumnsInvitation,
   SkeletonTableInvitation,
 } from "@/components/invitations/table";
 import { Button } from "@/components/shadcn";
 import { ContentLayout } from "@/components/shadcn/content-layout";
-import { DataTable, DataTableFilterCustom } from "@/components/shadcn/table";
+import { DataTable } from "@/components/shadcn/table";
 import { InvitationProps, Role, SearchParamsProps } from "@/types";
 
 export default async function Invitations({
@@ -26,10 +26,7 @@ export default async function Invitations({
     <ContentLayout title="Invitations" icon={<Mail />}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-row items-end justify-between">
-          <DataTableFilterCustom
-            filters={filterInvitations || []}
-            gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
-          />
+          <InvitationsFilters />
 
           <Button asChild>
             <Link href="/invitations/new">Send Invitation</Link>

ui/app/(prowler)/roles/_components/roles-filters.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { filterRoles } from "@/components/filters/data-filters";
+import { DataTableFilterCustom } from "@/components/shadcn/table";
+import { capitalize } from "@/lib/utils";
+
+// Client-side so labelFormatter never crosses the RSC boundary.
+export const RolesFilters = () => (
+  <DataTableFilterCustom
+    filters={filterRoles.map((filter) => ({
+      ...filter,
+      labelFormatter: capitalize,
+    }))}
+    gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
+  />
+);

ui/app/(prowler)/roles/page.tsx

@@ -3,11 +3,11 @@ import Link from "next/link";
 import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles";
-import { filterRoles } from "@/components/filters/data-filters";
+import { RolesFilters } from "@/app/(prowler)/roles/_components/roles-filters";
 import { ColumnsRoles, SkeletonTableRoles } from "@/components/roles/table";
 import { Button } from "@/components/shadcn";
 import { ContentLayout } from "@/components/shadcn/content-layout";
-import { DataTable, DataTableFilterCustom } from "@/components/shadcn/table";
+import { DataTable } from "@/components/shadcn/table";
 import { SearchParamsProps } from "@/types";
 
 export default async function Roles({
@@ -22,10 +22,7 @@ export default async function Roles({
     <ContentLayout title="Roles" icon={<UserCog />}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-row items-end justify-between">
-          <DataTableFilterCustom
-            filters={filterRoles || []}
-            gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
-          />
+          <RolesFilters />
           <Button asChild>
             <Link href="/roles/new">Add Role</Link>
           </Button>

ui/changelog.d/invitations-roles-filter-labels.changed.md

@@ -0,0 +1 @@
+Invitations page uses `Status` instead of `State` in the filter, table column and invitation details, and the Invitations and Roles filters show capitalized options

ui/components/filters/data-filters.ts

@@ -99,7 +99,7 @@ export const filterUsers = [
 export const filterInvitations = [
   {
     key: "state",
-    labelCheckboxGroup: "State",
+    labelCheckboxGroup: "Status",
     values: ["pending", "accepted", "expired", "revoked"],
   },
 ];

ui/components/invitations/invitation-details.tsx

@@ -68,7 +68,7 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
             <InfoField label="Token">{attributes.token}</InfoField>
 
             <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <InfoField label="State">
+              <InfoField label="Status">
                 <span className="capitalize">{attributes.state}</span>
               </InfoField>
 

ui/components/invitations/table/column-invitations.tsx

@@ -27,11 +27,11 @@ export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
   {
     accessorKey: "state",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"State"} param="state" />
+      <DataTableColumnHeader column={column} title="Status" param="state" />
     ),
     cell: ({ row }) => {
       const { state } = getInvitationData(row);
-      return <p className="font-semibold">{state}</p>;
+      return <p className="font-semibold capitalize">{state}</p>;
     },
   },
   {

ui/lib/utils.ts

@@ -40,6 +40,11 @@ export function getOptionalText(value: unknown): string | undefined {
     : undefined;
 }
 
+/** Uppercases the first letter ("pending" → "Pending"). */
+export function capitalize(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
 interface IncludedApiItemRelationshipRef {
   id: string;
 }