CB-5819 truncate titles

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;

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}

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;
+}

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>
+  );
 });

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 || ''}

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} />

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>

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>