web: improve truncation of strings

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -2,6 +2,7 @@ import "@goauthentik/admin/events/EventInfo";
 import { ActionToLabel } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
+import { truncate } from "@goauthentik/common/utils";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
 import "@goauthentik/elements/buttons/ModalButton";
@@ -78,7 +79,7 @@ export class RecentEventsCard extends Table<Event> {
             item.user?.username
                 ? html`<div>
                           <a href="#/identity/users/${item.user.pk}"
-                              >${item.user?.username.substring(0, 15)}</a
+                              >${truncate(item.user?.username, 15)}</a
                           >
                       </div>
                       ${item.user.on_behalf_of

web/src/common/utils.ts

@@ -29,12 +29,8 @@ export function convertToTitle(text: string): string {
     });
 }
 
-export function truncate(input?: string, max = 10): string {
-    input = input || "";
-    const array = input.trim().split(" ");
-    const ellipsis = array.length > max ? "..." : "";
-
-    return array.slice(0, max).join(" ") + ellipsis;
+export function truncate(string: string, length = 10): string {
+    return string.length > length ? `${string.substring(0, length)}...` : string;
 }
 
 export function camelToSnake(key: string): string {

web/src/user/LibraryApplication.ts

@@ -126,7 +126,9 @@ export class LibraryApplication extends AKElement {
                     <small>${this.application.metaPublisher}</small>
                 </div>
             </div>
-            <div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
+            <div class="pf-c-card__body">
+                ${truncate(this.application.metaDescription || "", 35)}
+            </div>
         </div>`;
     }
 }