Added the client name to the client list view to make it easier to read the list (#4056)

* Added the client name to the client list view to make it easier to differentiate clients with non-human readable client IDs

* changed order and added widths

Co-authored-by: stustison <stustison.ctr@kr.af.mil>
Co-authored-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

apps/admin-ui/public/resources/ca/common.json

@@ -26,6 +26,7 @@
   },
   "credentials": "Credencials",
   "clientId": "ID Client",
+  "clientName": "Nom",
   "id": "ID",
   "mapperType": "Tipus d''assignador",
   "password": "Contrasenya"

apps/admin-ui/public/resources/de/common.json

@@ -47,6 +47,7 @@
   "attributes": "Attribute",
   "credentials": "Passwörter",
   "clientId": "Client-ID",
+  "clientName": "Name",
   "leave": "Verlassen",
   "password": "Passwort",
   "passwordConfirmation": "Passwort bestätigen",

apps/admin-ui/public/resources/en/common.json

@@ -176,6 +176,7 @@
   "valuePlaceholder": "Type a value",
   "credentials": "Credentials",
   "clientId": "Client ID",
+  "clientName": "Name",
   "id": "ID",
   "addMapper": "Add mapper",
   "createNewMapper": "Create new mapper",

apps/admin-ui/public/resources/es/common.json

@@ -26,6 +26,7 @@
   },
   "credentials": "Credenciales",
   "clientId": "ID Cliente",
+  "clientName": "Nombre",
   "id": "ID",
   "mapperType": "Tipo de asignador",
   "password": "Contraseña"

apps/admin-ui/public/resources/ja/common.json

@@ -84,6 +84,7 @@
   "attributes": "属性",
   "credentials": "クレデンシャル",
   "clientId": "クライアントID",
+  "clientName": "名前",
   "id": "ID",
   "mapperType": "マッパータイプ",
   "leave": "外す",

apps/admin-ui/public/resources/lt/common.json

@@ -56,6 +56,7 @@
   "attributes": "Atributai",
   "credentials": "Prisijungimo duomenys",
   "clientId": "Kliento ID",
+  "clientName": "Vardas",
   "id": "ID",
   "mapperType": "Atitikmens tipas",
   "leave": "Palikti",

apps/admin-ui/public/resources/no/common.json

@@ -48,6 +48,7 @@
   "attributes": "Attributter",
   "credentials": "Innloggingsdetaljer",
   "clientId": "Klient-ID",
+  "clientName": "Navn",
   "id": "ID",
   "mapperType": "Mappertype",
   "leave": "Forlat",

apps/admin-ui/public/resources/pt-BR/common.json

@@ -47,6 +47,7 @@
   "attributes": "Atributos",
   "credentials": "Credenciais",
   "clientId": "ID do cliente",
+  "clientName": "Nome",
   "id": "ID",
   "mapperType": "Tipo de mapeamento",
   "leave": "Sair",

apps/admin-ui/public/resources/ru/common.json

@@ -56,6 +56,7 @@
   "attributes": "Атрибуты",
   "credentials": "Учетные данные",
   "clientId": "ID клиента",
+  "clientName": "Имя",
   "id": "ID",
   "mapperType": "Тип сопоставления",
   "leave": "Покинуть",

apps/admin-ui/public/resources/zh-CN/common.json

@@ -56,6 +56,7 @@
   "attributes": "属性",
   "credentials": "凭据",
   "clientId": "客户端 ID",
+  "clientName": "姓名",
   "id": "ID",
   "mapperType": "映射器类型",
   "leave": "离开",

apps/admin-ui/src/clients/ClientsSection.tsx

@@ -99,6 +99,12 @@ export default function ClientsSection() {
     </Link>
   );
 
+  const ClientName = (client: ClientRepresentation) => (
+    <TableText wrapModifier="truncate">
+      {emptyFormatter()(client.name)}
+    </TableText>
+  );
+
   const ClientDescription = (client: ClientRepresentation) => (
     <TableText wrapModifier="truncate">
       {emptyFormatter()(client.description)}
@@ -200,23 +206,32 @@ export default function ClientsSection() {
                 {
                   name: "clientId",
                   displayKey: "common:clientId",
+                  transforms: [cellWidth(20)],
                   cellRenderer: ClientDetailLink,
                 },
+                {
+                  name: "clientName",
+                  displayKey: "common:clientName",
+                  transforms: [cellWidth(20)],
+                  cellRenderer: ClientName,
+                },
                 {
                   name: "protocol",
                   displayKey: "common:type",
+                  transforms: [cellWidth(10)],
                   cellRenderer: (client) =>
                     getProtocolName(t, client.protocol ?? "openid-connect"),
                 },
                 {
                   name: "description",
                   displayKey: "common:description",
-                  transforms: [cellWidth(20)],
+                  transforms: [cellWidth(30)],
                   cellRenderer: ClientDescription,
                 },
                 {
                   name: "baseUrl",
                   displayKey: "clients:homeURL",
+                  transforms: [cellWidth(20)],
                   cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
                   cellRenderer: (c) =>
                     convertClientToUrl(c, adminClient.baseUrl),