@workos-inc/widgets 1.7.2 → 1.8.0

package/dist/cjs/lib/users-management.cjs

@@ -49,6 +49,9 @@ var import_constants = require("./constants.js");
 var import_users_management_context = require("./users-management-context.js");
 var import_generic_error = require("./generic-error.js");
 var import_react_icons = require("@radix-ui/react-icons");
+var import_translation = require("./i18n/translation.js");
+var import_use_translation = require("./i18n/use-translation.js");
+var import_use_locale = require("./i18n/use-locale.js");
 const UsersManagement = ({
   userData,
   rolesData,
@@ -62,6 +65,7 @@ const UsersManagement = ({
   const { listMetadata: pagination = {} } = userData;
   const { dispatch } = (0, import_users_management_context.useUsersManagementContext)();
   const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;
+  const translate = (0, import_use_translation.useTranslation)();
   const [deferredLoading, setDeferredLoading] = React.useState(false);
   React.useEffect(() => {
     if (isPending) {
@@ -94,13 +98,48 @@ const UsersManagement = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: "User" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: `Role${isMultipleRolesEnabled ? "s" : ""}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: "Last active" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: isMultipleRolesEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Roles",
+                id: "A1DuWM",
+                description: "Column header for user roles when multiple roles are enabled"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Role",
+                id: "nQbe+Y",
+                description: "Column header for user role when only single role is allowed"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were last active"
+              }
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -174,8 +213,11 @@ const UsersManagement = ({
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_actions_dropdown.UserActionsDropdown, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_elements.IconButton,
                     {
-                      title: "User actions",
-                      "aria-label": "User actions",
+                      title: translate({
+                        defaultMessage: "User actions",
+                        id: "1nsmNS",
+                        description: "Button tooltip for opening user actions menu"
+                      }),
                       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
                     }
                   ) }) })
@@ -200,7 +242,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Previous"
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_translation.Translation,
+                {
+                  defaultMessage: "Previous",
+                  id: "910Q6b",
+                  description: "Button text to navigate to the previous page of users"
+                }
+              )
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -218,7 +267,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Next"
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_translation.Translation,
+                {
+                  defaultMessage: "Next",
+                  id: "UlAY08",
+                  description: "Button text to navigate to the next page of users"
+                }
+              )
             }
           )
         ] }) : null
@@ -227,6 +283,15 @@ const UsersManagement = ({
   ) });
 };
 const UsersManagementLoading = (props) => {
+  const translate = (0, import_use_translation.useTranslation)();
+  const placeholderText = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "All",
+      id: "l/Do9/",
+      description: "Filter option to show all users"
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_themes.Flex,
     {
@@ -236,19 +301,57 @@ const UsersManagementLoading = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "1fr auto", gap: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextField, {}) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Root, { value: "all", onValueChange: () => void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { value: "all", children: "All" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.TextField,
+              {
+                disabled: true,
+                "aria-label": translate({
+                  defaultMessage: "User search",
+                  id: "lzPOKv",
+                  description: "Label for the user search input field"
+                })
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Root, { disabled: true, value: "all", onValueChange: () => void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: placeholderText }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { value: "all", children: placeholderText }) })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: "User" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Role" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Last active" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Role",
+                id: "FK7mP4",
+                description: "Column header for user role"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were last active"
+              }
+            ) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Body, { children: Array.from({ length: import_constants.USER_ROW_LIMIT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
@@ -273,8 +376,22 @@ const UsersManagementLoading = (props) => {
           ] }, index)) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Previous" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Next" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Previous",
+              id: "910Q6b",
+              description: "Button text to navigate to the previous page of users"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Next",
+              id: "UlAY08",
+              description: "Button text to navigate to the next page of users"
+            }
+          ) }) })
         ] })
       ]
     }
@@ -295,24 +412,73 @@ const UsersManagementError = ({
 };
 function UserBadge({ user }) {
   if (user.isLoggedInUser) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "You",
+        id: "ER1Vmv",
+        description: "Badge indicating the current logged-in user"
+      }
+    ) });
   }
   if (user.status === "Invited") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "amber", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: " }),
-      "Invited"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: ",
+          id: "E2o/+H",
+          description: "Prefix for status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Invited",
+          id: "byIkUu",
+          description: "Badge status indicating user has been invited but not yet accepted"
+        }
+      )
     ] });
   }
   if (user.status === "InviteExpired") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
-      "Expired"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Expired",
+          id: "+0sQaN",
+          description: "Badge status indicating user invitation has expired"
+        }
+      )
     ] });
   }
   if (user.status === "InviteRevoked") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
-      "Revoked"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Revoked",
+          id: "NNBv+r",
+          description: "Badge status indicating user invitation has been revoked"
+        }
+      )
     ] });
   }
   return null;
@@ -320,7 +486,21 @@ function UserBadge({ user }) {
 function LastActive(props) {
   if (!props.user.lastActivityAt) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: props.user.status === "Active" ? "Never" : "Not active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: props.user.status === "Active" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Never",
+          id: "0duvF4",
+          description: "Screen reader text indicating user has never been active"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Not active",
+          id: "hd2+kk",
+          description: "Screen reader text indicating user is not active"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
     ] });
   }
@@ -331,10 +511,11 @@ function LastActiveImpl({
   isHydrated,
   dim
 }) {
+  const locale = (0, import_use_locale.useLocale)();
   const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
     const defaultTimeZone = "America/Los_Angeles";
     const lastActiveDate = new Date(date);
-    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString("en-US", {
+    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString(locale, {
       // hard-coded timezone before hydration to prevent server/client mismatch
       timeZone: isHydrated ? void 0 : defaultTimeZone,
       month: "long",
@@ -343,18 +524,28 @@ function LastActiveImpl({
       hour: "numeric",
       minute: "numeric"
     });
-    const lastActiveDisplay2 = isHydrated ? (0, import_utils.getComparativeReadableDate)(/* @__PURE__ */ new Date(), lastActiveDate) : lastActiveDate.toLocaleDateString("en-US", {
+    const lastActiveDisplay2 = isHydrated ? (0, import_utils.getComparativeReadableDate)(/* @__PURE__ */ new Date(), lastActiveDate, { locale }) : lastActiveDate.toLocaleDateString(locale, {
       // hard-coded timezone to prevent server/client mismatch
       timeZone: defaultTimeZone,
       month: "long",
       day: "numeric",
       year: "numeric"
     });
-    return { lastActiveDateTime: lastActiveDateTime2, lastActiveDisplay: lastActiveDisplay2 };
-  }, [isHydrated, date]);
+    return {
+      lastActiveDateTime: lastActiveDateTime2,
+      lastActiveDisplay: lastActiveDisplay2
+    };
+  }, [isHydrated, date, locale]);
   if (lastActiveDisplay === "Invalid Date") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Unknown" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Unknown",
+          id: "UUigrK",
+          description: "Screen reader text indicating last active date is unknown"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
     ] });
   }
@@ -415,15 +606,17 @@ const UsersManagementEmptyState = ({ isPending }) => {
   }
   if (searchQuery || isClearing) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", justify: "center", py: "8", direction: "column", gap: "2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", children: [
-        "No users found for query",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { weight: "medium", children: [
-          "\u201C",
-          isClearing ? lastSearchQuery : searchQuery,
-          "\u201D"
-        ] })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "No users found for query '{query}'",
+          id: "wrEZ8+",
+          description: "Message shown when no users match the search query",
+          values: {
+            query: isClearing ? lastSearchQuery : searchQuery
+          }
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_elements.Button,
         {
@@ -434,12 +627,26 @@ const UsersManagementEmptyState = ({ isPending }) => {
             clearSearch();
           },
           loading: isPending,
-          children: "Clear search"
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Clear search",
+              id: "Xv3fVI",
+              description: "Button text to clear the current search query"
+            }
+          )
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: "No users found" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "No users found",
+      id: "MQ+LoA",
+      description: "Message shown when there are no users in the system"
+    }
+  ) }) });
 };
 function UserRolesCellContent({
   user,
@@ -448,19 +655,28 @@ function UserRolesCellContent({
 }) {
   if (!user.roles || user.roles.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "No roles assigned" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "No roles assigned",
+          id: "CVOVB0",
+          description: "Screen reader text indicating user has no roles assigned"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })
     ] });
   }
   if (isMultipleRolesEnabled && user.roles.length > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Tooltip,
+    const roleNames = user.roles?.map((role) => role.name).join(", ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Tooltip, { content: roleNames, maxWidth: "250px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
       {
-        content: user.roles?.map((role) => role.name).join(", "),
-        maxWidth: "250px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: (0, import_utils.pluralize)("role", user.roles.length) })
+        defaultMessage: "{count} roles",
+        id: "lWAmRC",
+        description: "Shows the number of roles assigned to a user (plural)",
+        values: { count: user.roles.length }
       }
-    );
+    ) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
 }