Cb 5819 administration tables redesign

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.module.css → webapp/packages/core-blocks/src/Containers/GroupBack.module.css

@@ -5,7 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-
-.box {
-  height: 664px;
+.button {
+  transform: rotate(90deg);
 }

webapp/packages/core-blocks/src/Containers/GroupBack.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+import { ActionIconButton } from '../ActionIconButton.js';
+import { Flex } from '../Flex/Flex.js';
+import { useTranslate } from '../localization/useTranslate.js';
+import { s } from '../s.js';
+import { useS } from '../useS.js';
+import classes from './GroupBack.module.css';
+
+export const GroupBack: React.FC<React.HTMLAttributes<HTMLButtonElement>> = function GroupBack({ className, children, ...rest }) {
+  const translate = useTranslate();
+  const styles = useS(classes);
+
+  return (
+    <Flex gap="xs" align="center">
+      <ActionIconButton className={s(styles, { button: true }, className)} name="angle" title={translate('ui_close')} {...rest} />
+      {children}
+    </Flex>
+  );
+};

webapp/packages/core-blocks/src/Containers/GroupTitle.tsx

@@ -26,5 +26,6 @@ export const GroupTitle: React.FC<Props & ILayoutSizeProps & React.HTMLAttribute
   const style = useS(styles, elementsSizeStyles);
   const divProps = filterLayoutFakeProps(rest);
   const layoutProps = getLayoutProps(rest);
+
   return <h2 tabIndex={-1} {...divProps} className={s(style, { groupTitle: true, sticky, header, ...layoutProps }, className)} />;
 };

webapp/packages/core-blocks/src/Slide/SlideElement.module.css

@@ -13,10 +13,12 @@
   white-space: normal;
   transition: transform ease-in-out 0.3s;
   transform: translateX(-100%);
+  will-change: transform;
 
   &:first-child {
     transition: width ease-in-out 0.3s;
     width: 100%;
+    will-change: width;
   }
 }
 

webapp/packages/core-blocks/src/index.ts

@@ -161,6 +161,7 @@ export * from './Containers/GroupClose.js';
 export * from './Containers/GroupItem.js';
 export * from './Containers/GroupSubTitle.js';
 export * from './Containers/GroupTitle.js';
+export * from './Containers/GroupBack.js';
 export * from './Containers/ColoredContainer.js';
 export * from './Containers/IContainerProps.js';
 export * from './Containers/ILayoutSizeProps.js';

webapp/packages/core-localization/src/locales/en.ts

@@ -135,6 +135,7 @@ export default [
   ['ui_export', 'Export'],
   ['ui_you', 'You'],
   ['ui_ms', 'ms'],
+  ['ui_not_found', 'Not found'],
 
   ['root_permission_denied', "You don't have permissions"],
   ['root_permission_no_permission', "You don't have permission for this action"],

webapp/packages/core-localization/src/locales/fr.ts

@@ -129,6 +129,7 @@ export default [
   ['ui_export', 'Exporter'],
   ['ui_you', 'Vous'],
   ['ui_ms', 'ms'],
+  ['ui_not_found', 'Not found'],
 
   ['root_permission_denied', "Vous n'avez pas les permissions"],
   ['root_permission_no_permission', "Vous n'avez pas la permission pour cette action"],

webapp/packages/core-localization/src/locales/it.ts

@@ -125,6 +125,7 @@ export default [
   ['ui_export', 'Export'],
   ['ui_you', 'You'],
   ['ui_ms', 'ms'],
+  ['ui_not_found', 'Not found'],
 
   ['root_permission_denied', 'Non hai i permessi'],
   ['app_root_session_expire_warning_title', 'La sessione sta per scadere'],

webapp/packages/core-localization/src/locales/ru.ts

@@ -131,6 +131,7 @@ export default [
   ['ui_export', 'Экспорт'],
   ['ui_you', 'Вы'],
   ['ui_ms', 'мс'],
+  ['ui_not_found', 'Не найдено'],
 
   ['root_permission_denied', 'Отказано в доступе'],
   ['root_permission_no_permission', 'У вас нет разрешения на это действие'],

webapp/packages/core-localization/src/locales/zh.ts

@@ -142,4 +142,5 @@ export default [
   ['app_root_quota_exceeded', '超出配额'],
   ['app_root_event_permissions_changed_message', '您的权限已修改'],
   ['core_eventsLog_dbeaverErrorDetails', '错误详情'],
+  ['ui_not_found', 'Not found'],
 ];

webapp/packages/core-ui/src/Screens/AppScreen/BaseOptionsPanelService.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+import { action, makeObservable, observable } from 'mobx';
+
+import { Executor, type IExecutor } from '@cloudbeaver/core-executor';
+
+import type { OptionsPanelService } from './OptionsPanelService.js';
+
+export abstract class BaseOptionsPanelService<T> {
+  itemId: T | null;
+  readonly onClose: IExecutor;
+
+  constructor(
+    protected readonly optionsPanelService: OptionsPanelService,
+    private readonly panelGetter: () => React.FC,
+  ) {
+    this.itemId = null;
+    this.onClose = new Executor();
+
+    this.optionsPanelService.closeTask.next(this.onClose, undefined, () => this.optionsPanelService.isOpen(panelGetter));
+    this.close = this.close.bind(this);
+
+    makeObservable(this, {
+      itemId: observable.ref,
+      open: action,
+      close: action,
+    });
+  }
+
+  async open(itemId: T): Promise<boolean> {
+    if (this.optionsPanelService.isOpen(this.panelGetter)) {
+      return true;
+    }
+
+    const state = await this.optionsPanelService.open(this.panelGetter);
+
+    if (state) {
+      this.itemId = itemId;
+    }
+
+    return state;
+  }
+
+  async close(): Promise<void> {
+    if (!this.optionsPanelService.isOpen(this.panelGetter)) {
+      return;
+    }
+
+    const result = await this.optionsPanelService.close();
+
+    if (result) {
+      this.itemId = null;
+    }
+  }
+}

webapp/packages/core-ui/src/index.ts

@@ -90,5 +90,6 @@ export * from './SideBarPanel/SideBarPanelService.js';
 
 export * from './AuthenticationProviderLoader.js';
 export * from './useAuthenticationAction.js';
+export * from './Screens/AppScreen/BaseOptionsPanelService.js';
 
 export { manifest as coreUIManifest } from './manifest.js';

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/Team.tsx

@@ -8,12 +8,12 @@
 import { observer } from 'mobx-react-lite';
 
 import type { TeamInfo } from '@cloudbeaver/core-authentication';
-import { Loader, Placeholder, s, TableColumnValue, TableItem, TableItemExpand, TableItemSelect, useS } from '@cloudbeaver/core-blocks';
+import { Link, Loader, Placeholder, s, TableColumnValue, TableItem, TableItemSelect, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import { TeamsAdministrationService } from '../TeamsAdministrationService.js';
 import style from './Team.module.css';
-import { TeamEdit } from './TeamEdit.js';
+import { TeamsTableOptionsPanelService } from './TeamsTableOptionsPanelService.js';
 
 interface Props {
   team: TeamInfo;
@@ -22,17 +22,15 @@ interface Props {
 export const Team = observer<Props>(function Team({ team }) {
   const styles = useS(style);
   const service = useService(TeamsAdministrationService);
+  const teamsTableOptionsPanelService = useService(TeamsTableOptionsPanelService);
 
   return (
-    <TableItem item={team.teamId} expandElement={TeamEdit}>
+    <TableItem item={team.teamId}>
       <TableColumnValue centerContent flex>
         <TableItemSelect />
       </TableColumnValue>
-      <TableColumnValue className={s(styles, { expand: true })} centerContent flex expand>
-        <TableItemExpand />
-      </TableColumnValue>
-      <TableColumnValue className={s(styles, { expand: true })} title={team.teamId} ellipsis expand>
-        {team.teamId}
+      <TableColumnValue title={team.teamId} ellipsis onClick={() => teamsTableOptionsPanelService.open(team.teamId)}>
+        <Link>{team.teamId}</Link>
       </TableColumnValue>
       <TableColumnValue title={team.teamName} ellipsis>
         {team.teamName || ''}

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx

@@ -6,37 +6,39 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useCallback, useContext } from 'react';
 
 import { TeamInfoMetaParametersResource, TeamsResource } from '@cloudbeaver/core-authentication';
-import { Container, s, TableContext, useS } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, GroupBack, GroupTitle, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import { TeamForm } from '../TeamForm.js';
 import { useTeamFormState } from '../useTeamFormState.js';
-import style from './TeamEdit.module.css';
+import { TeamsTableOptionsPanelService } from './TeamsTableOptionsPanelService.js';
 
 interface Props {
   item: string;
+  onClose: () => void;
 }
 
 export const TeamEdit = observer<Props>(function TeamEdit({ item }) {
-  const styles = useS(style);
+  const translate = useTranslate();
   const resource = useService(TeamsResource);
   const teamInfoMetaParametersResource = useService(TeamInfoMetaParametersResource);
-  const tableContext = useContext(TableContext);
-
-  const collapse = useCallback(() => {
-    tableContext?.setItemExpand(item, false);
-  }, [tableContext, item]);
+  const teamsTableOptionsPanelService = useService(TeamsTableOptionsPanelService);
 
   const data = useTeamFormState(resource, teamInfoMetaParametersResource, state => state.setOptions('edit'));
 
   data.config.teamId = item;
 
   return (
-    <Container className={s(styles, { box: true })} parent vertical>
-      <TeamForm state={data} onCancel={collapse} />
-    </Container>
+    <ColoredContainer parent vertical noWrap surface gap compact>
+      <GroupTitle header>
+        <GroupBack onClick={teamsTableOptionsPanelService.close}>
+          {translate('ui_edit')}
+          {data.config.teamName ? ` "${data.config.teamName}"` : ''}
+        </GroupBack>
+      </GroupTitle>
+      <TeamForm state={data} onCancel={teamsTableOptionsPanelService.close} />
+    </ColoredContainer>
   );
 });

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx

@@ -54,7 +54,6 @@ export const TeamsTable = observer<Props>(function TeamsTable({ teams, state, se
             <TableColumnHeader min flex centerContent>
               <TableSelect />
             </TableColumnHeader>
-            <TableColumnHeader min />
             <TableColumnHeader>{translate('administration_teams_team_id')}</TableColumnHeader>
             <TableColumnHeader>{translate('administration_teams_team_name')}</TableColumnHeader>
             <TableColumnHeader>{translate('administration_teams_team_description')}</TableColumnHeader>

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanel.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+import { observer } from 'mobx-react-lite';
+
+import { TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+
+import { TeamEdit } from './TeamEdit.js';
+import { TeamsTableOptionsPanelService } from './TeamsTableOptionsPanelService.js';
+
+export const TeamsTableOptionsPanel = observer(function TeamsTableOptionsPanel() {
+  const translate = useTranslate();
+  const teamsTableOptionsPanelService = useService(TeamsTableOptionsPanelService);
+
+  if (!teamsTableOptionsPanelService.itemId) {
+    return <TextPlaceholder>{translate('ui_not_found')}</TextPlaceholder>;
+  }
+
+  return <TeamEdit item={teamsTableOptionsPanelService.itemId} onClose={teamsTableOptionsPanelService.close} />;
+});

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanelService.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+import { importLazyComponent } from '@cloudbeaver/core-blocks';
+import { injectable } from '@cloudbeaver/core-di';
+import { BaseOptionsPanelService, OptionsPanelService } from '@cloudbeaver/core-ui';
+
+const TeamsTableOptionsPanel = importLazyComponent(() => import('./TeamsTableOptionsPanel.js').then(m => m.TeamsTableOptionsPanel));
+const panelGetter = () => TeamsTableOptionsPanel;
+
+@injectable()
+export class TeamsTableOptionsPanelService extends BaseOptionsPanelService<string> {
+  constructor(optionsPanelService: OptionsPanelService) {
+    super(optionsPanelService, panelGetter);
+  }
+}

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.module.css

@@ -5,10 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.expand {
-  cursor: pointer;
-}
-
 .gap {
   gap: 16px;
 }

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx

@@ -10,11 +10,11 @@ import { observer } from 'mobx-react-lite';
 import { type AdminUser, UsersResource } from '@cloudbeaver/core-authentication';
 import {
   Checkbox,
+  Link,
   Loader,
   Placeholder,
   TableColumnValue,
   TableItem,
-  TableItemExpand,
   TableItemSelect,
   useAutoLoad,
   useTranslate,
@@ -26,7 +26,7 @@ import { clsx } from '@cloudbeaver/core-utils';
 import { AdministrationUsersManagementService } from '../../../AdministrationUsersManagementService.js';
 import { UsersAdministrationService } from '../UsersAdministrationService.js';
 import style from './User.module.css';
-import { UserEdit } from './UserEdit.js';
+import { UsersTableOptionsPanelService } from './UsersTableOptionsPanelService.js';
 
 interface Props {
   user: AdminUser;
@@ -39,6 +39,7 @@ export const User = observer<Props>(function User({ user, displayAuthRole, selec
   const usersService = useService(UsersResource);
   const notificationService = useService(NotificationService);
   const administrationUsersManagementService = useService(AdministrationUsersManagementService);
+  const usersTableOptionsPanelService = useService(UsersTableOptionsPanelService);
   const translate = useTranslate();
 
   useAutoLoad(User, administrationUsersManagementService.loaders);
@@ -59,20 +60,18 @@ export const User = observer<Props>(function User({ user, displayAuthRole, selec
   const teams = user.grantedTeams.join(', ');
 
   return (
-    <TableItem item={user.userId} expandElement={UserEdit} selectDisabled={!selectable}>
+    <TableItem item={user.userId} selectDisabled={!selectable}>
+      <TableColumnValue />
       {selectable && (
         <TableColumnValue centerContent flex>
           <TableItemSelect />
         </TableColumnValue>
       )}
-      <TableColumnValue centerContent flex expand>
-        <TableItemExpand />
-      </TableColumnValue>
-      <TableColumnValue className={style['expand']} title={user.userId} expand ellipsis>
-        {user.userId}
+      <TableColumnValue title={user.userId} ellipsis onClick={() => usersTableOptionsPanelService.open(user.userId)}>
+        <Link>{user.userId}</Link>
       </TableColumnValue>
       {displayAuthRole && (
-        <TableColumnValue className={style['expand']} title={user.authRole} expand ellipsis>
+        <TableColumnValue title={user.authRole} ellipsis>
           {user.authRole}
         </TableColumnValue>
       )}