From 10ff04f39bfdbd5995d29cbfb6f58bd51214c7fd Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Tue, 29 Oct 2024 16:42:39 +0100
Subject: [PATCH] CB-5819 truncate titles

---
 webapp/packages/core-blocks/src/Link.module.css |  6 ++++++
 webapp/packages/core-blocks/src/Link.tsx        |  5 +++--
 webapp/packages/core-blocks/src/Text.module.css | 12 ++++++++++++
 webapp/packages/core-blocks/src/Text.tsx        | 17 +++++++++++++++--
 .../Users/Teams/TeamsTable/Team.tsx             |  2 +-
 .../Users/Teams/TeamsTable/TeamEdit.tsx         |  8 +++++---
 .../Administration/Users/UsersTable/User.tsx    |  2 +-
 .../Users/UsersTable/UserEdit.tsx               |  7 +++++--
 8 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/Text.module.css

diff --git a/webapp/packages/core-blocks/src/Link.module.css b/webapp/packages/core-blocks/src/Link.module.css
index e9a356eafb..da37b4afcc 100644
--- a/webapp/packages/core-blocks/src/Link.module.css
+++ b/webapp/packages/core-blocks/src/Link.module.css
@@ -10,6 +10,12 @@
     display: inline;
   }
 
+  &.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   & a {
     position: relative;
     cursor: pointer;
diff --git a/webapp/packages/core-blocks/src/Link.tsx b/webapp/packages/core-blocks/src/Link.tsx
index c1c8c581b5..f4d4ab1a10 100644
--- a/webapp/packages/core-blocks/src/Link.tsx
+++ b/webapp/packages/core-blocks/src/Link.tsx
@@ -16,14 +16,15 @@ interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   wrapper?: boolean;
   indicator?: boolean;
   inline?: boolean;
+  truncate?: boolean;
   children?: React.ReactNode;
 }
 
-export const Link = observer<Props>(function Link({ inline, wrapper, indicator, className, children, ...rest }) {
+export const Link = observer<Props>(function Link({ inline, wrapper, indicator, truncate, className, children, ...rest }) {
   const styles = useS(style);
 
   return (
-    <div className={s(styles, { linkContainer: true, inline }, className)}>
+    <div className={s(styles, { linkContainer: true, inline, truncate }, className)}>
       <a className={s(styles, { link: true, wrapper })} {...rest}>
         {indicator && <IconOrImage className={s(styles, { iconOrImage: true })} icon="external-link" />}
         {children}
diff --git a/webapp/packages/core-blocks/src/Text.module.css b/webapp/packages/core-blocks/src/Text.module.css
new file mode 100644
index 0000000000..eafc194fc6
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Text.module.css
@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/webapp/packages/core-blocks/src/Text.tsx b/webapp/packages/core-blocks/src/Text.tsx
index 83b7e8b138..d0404bcdec 100644
--- a/webapp/packages/core-blocks/src/Text.tsx
+++ b/webapp/packages/core-blocks/src/Text.tsx
@@ -7,6 +7,19 @@
  */
 import { observer } from 'mobx-react-lite';
 
-export const Text: React.FC<React.HTMLAttributes<HTMLDivElement>> = observer(function Text({ children, ...rest }) {
-  return <div {...rest}>{children}</div>;
+import { s } from './s.js';
+import classes from './Text.module.css';
+import { useS } from './useS.js';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  truncate?: boolean;
+}
+
+export const Text = observer<Props>(function Text({ truncate, children, className, ...rest }) {
+  const styles = useS(classes);
+  return (
+    <div className={s(styles, { truncate }, className)} {...rest}>
+      {children}
+    </div>
+  );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/Team.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/Team.tsx
index 19ebfa994d..cd6db0813c 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/Team.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/Team.tsx
@@ -30,7 +30,7 @@ export const Team = observer<Props>(function Team({ team }) {
         <TableItemSelect />
       </TableColumnValue>
       <TableColumnValue title={team.teamId} ellipsis onClick={() => teamsTableOptionsPanelService.open(team.teamId)}>
-        <Link>{team.teamId}</Link>
+        <Link truncate>{team.teamId}</Link>
       </TableColumnValue>
       <TableColumnValue title={team.teamName} ellipsis>
         {team.teamName || ''}
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
index 566d31a3dc..23952f8c8a 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 
 import { TeamInfoMetaParametersResource, TeamsResource } from '@cloudbeaver/core-authentication';
-import { ColoredContainer, GroupBack, GroupTitle, useTranslate } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, GroupBack, GroupTitle, Text, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import { TeamForm } from '../TeamForm.js';
@@ -34,8 +34,10 @@ export const TeamEdit = observer<Props>(function TeamEdit({ item }) {
     <ColoredContainer parent vertical noWrap surface gap compact>
       <GroupTitle header>
         <GroupBack onClick={teamsTableOptionsPanelService.close}>
-          {translate('ui_edit')}
-          {data.config.teamName ? ` "${data.config.teamName}"` : ''}
+          <Text truncate>
+            {translate('ui_edit')}
+            {data.config.teamName ? ` "${data.config.teamName}"` : ''}
+          </Text>
         </GroupBack>
       </GroupTitle>
       <TeamForm state={data} onCancel={teamsTableOptionsPanelService.close} />
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx
index 51fa469d37..0b39dea5c1 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx
@@ -67,7 +67,7 @@ export const User = observer<Props>(function User({ user, displayAuthRole, selec
         </TableColumnValue>
       )}
       <TableColumnValue title={user.userId} ellipsis onClick={() => usersTableOptionsPanelService.open(user.userId)}>
-        <Link>{user.userId}</Link>
+        <Link truncate>{user.userId}</Link>
       </TableColumnValue>
       {displayAuthRole && (
         <TableColumnValue title={user.authRole} ellipsis>
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
index 702b6b008e..f7de2e7db8 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
@@ -14,6 +14,7 @@ import {
   GroupTitle,
   Loader,
   type TableItemExpandProps,
+  Text,
   useExecutor,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
@@ -55,8 +56,10 @@ export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit
     <ColoredContainer vertical parent noWrap surface gap compact>
       <GroupTitle header>
         <GroupBack onClick={usersTableOptionsPanelService.close}>
-          {translate('ui_edit')}
-          {state.state.userId ? ` "${state.state.userId}"` : ''}
+          <Text truncate>
+            {translate('ui_edit')}
+            {state.state.userId ? ` "${state.state.userId}"` : ''}
+          </Text>
         </GroupBack>
       </GroupTitle>
       <Loader suspense>