refactor(usage): address PR review — null-safe mark, hook renames, lazy intl

src/pages/usage/apis/resource.ts

@@ -287,9 +287,15 @@ function flattenItem(
   // The chart series legend can't render a tag, so it carries the deleted
   // marker as text ("<name> [Deleted.<id>]"); the tables render a DeletedTag off
   // ``flat.deleted`` + the id and so keep the clean name.
-  const deletedWord = getIntl().formatMessage({ id: 'usage.table.deleted' });
   const key =
-    rawKey != null ? withDeletedMark(rawKey, deleted, deletedWord, id) : rawKey;
+    rawKey != null
+      ? withDeletedMark(
+          rawKey,
+          deleted,
+          deleted ? getIntl().formatMessage({ id: 'usage.table.deleted' }) : '',
+          id
+        )
+      : rawKey;
   // Generic group label — for a compound (date + dim) trend row the key is the
   // sub-group value (the switch below targets single-dimension table rows).
   if (rawKey != null) flat.group = key;

src/pages/usage/hooks/use-apikeys-columns.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import DeletedTag from '../components/deleted-tag';
 import { BreakdownItem as ListItem } from '../config/types';
 
-const useModelsColumns = () => {
+const useAPIKeysColumns = () => {
   const intl = useIntl();
 
   return useMemo(() => {
@@ -113,4 +113,4 @@ const useModelsColumns = () => {
   }, [intl]);
 };
 
-export default useModelsColumns;
+export default useAPIKeysColumns;

src/pages/usage/hooks/use-users-columns.tsx

@@ -9,7 +9,7 @@ interface ColumnsHookProps {
   sortOrder: string[];
 }
 
-const useModelsColumns = () => {
+const useUsersColumns = () => {
   const intl = useIntl();
 
   return useMemo(() => {
@@ -123,4 +123,4 @@ const useModelsColumns = () => {
   }, [intl]);
 };
 
-export default useModelsColumns;
+export default useUsersColumns;

src/pages/usage/utils/deleted-label.ts

@@ -9,9 +9,13 @@
  * strings.
  */
 export const withDeletedMark = (
-  label: string,
+  label: string | undefined | null,
   deleted: boolean | undefined | null,
   deletedWord: string,
   id?: string | number | null
-): string =>
+): string => {
-  deleted ? `${label} [${deletedWord}${id != null ? `.#${id}` : ''}]` : label;
+  const safeLabel = label || '';
+  if (!deleted) return safeLabel;
+  const suffix = `[${deletedWord}${id != null ? `.#${id}` : ''}]`;
+  return safeLabel ? `${safeLabel} ${suffix}` : suffix;
+};