CB-5819 redesign teams

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,37 @@
  * 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, 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 onClose={teamsTableOptionsPanelService.close}>
+        {translate('ui_edit')}
+        {data.config.teamName ? ` "${data.config.teamName}"` : ''}
+      </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.teamId) {
+    return <TextPlaceholder>{translate('ui_not_found')}</TextPlaceholder>;
+  }
+
+  return <TeamEdit item={teamsTableOptionsPanelService.teamId} onClose={teamsTableOptionsPanelService.close} />;
+});

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

@@ -0,0 +1,63 @@
+/*
+ * 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 { importLazyComponent } from '@cloudbeaver/core-blocks';
+import { injectable } from '@cloudbeaver/core-di';
+import { Executor, type IExecutor } from '@cloudbeaver/core-executor';
+import { OptionsPanelService } from '@cloudbeaver/core-ui';
+
+const TeamsTableOptionsPanel = importLazyComponent(() => import('./TeamsTableOptionsPanel.js').then(m => m.TeamsTableOptionsPanel));
+const panelGetter = () => TeamsTableOptionsPanel;
+
+@injectable()
+export class TeamsTableOptionsPanelService {
+  teamId: string | null;
+
+  readonly onClose: IExecutor;
+
+  constructor(private readonly optionsPanelService: OptionsPanelService) {
+    this.teamId = null;
+    this.onClose = new Executor();
+
+    this.optionsPanelService.closeTask.next(this.onClose, undefined, () => this.optionsPanelService.isOpen(panelGetter));
+    this.close = this.close.bind(this);
+
+    makeObservable(this, {
+      teamId: observable.ref,
+      open: action,
+      close: action,
+    });
+  }
+
+  async open(teamId: string): Promise<boolean> {
+    if (this.optionsPanelService.isOpen(panelGetter)) {
+      return true;
+    }
+
+    const state = await this.optionsPanelService.open(panelGetter);
+
+    if (state) {
+      this.teamId = teamId;
+    }
+
+    return state;
+  }
+
+  async close(): Promise<void> {
+    if (!this.optionsPanelService.isOpen(panelGetter)) {
+      return;
+    }
+
+    const result = await this.optionsPanelService.close();
+
+    if (result) {
+      this.teamId = null;
+    }
+  }
+}

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

@@ -15,7 +15,6 @@ import {
   s,
   type TableItemExpandProps,
   useExecutor,
-  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -25,12 +24,10 @@ import { FormMode } from '@cloudbeaver/core-ui';
 
 import { AdministrationUserForm } from '../UserForm/AdministrationUserForm.js';
 import { useAdministrationUserFormState } from './useAdministrationUserFormState.js';
-import style from './UserEdit.module.css';
 import { UsersTableOptionsPanelService } from './UsersTableOptionsPanelService.js';
 
 export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit({ item, onClose }) {
   const translate = useTranslate();
-  const styles = useS(style);
   const usersTableOptionsPanelService = useService(UsersTableOptionsPanelService);
   const commonDialogService = useService(CommonDialogService);
   const state = useAdministrationUserFormState(item, state => state.setMode(FormMode.Edit));
@@ -42,7 +39,7 @@ export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit
         if (state.isChanged) {
           const result = await commonDialogService.open(ConfirmationDialog, {
             title: 'core_blocks_confirmation_dialog_title',
-            message: 'administration_drivers_driver_unsaved_changes',
+            message: 'ui_save_reminder',
             confirmActionText: 'ui_close',
           });
 
@@ -55,9 +52,10 @@ export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit
   });
 
   return (
-    <ColoredContainer className={s(styles, { box: true })} vertical parent noWrap surface gap compact>
+    <ColoredContainer vertical parent noWrap surface gap compact>
       <GroupTitle header onClose={usersTableOptionsPanelService.close}>
-        {`${translate('ui_edit')}${state.state.userId ? ` "${state.state.userId}"` : ''}`}
+        {translate('ui_edit')}
+        {state.state.userId ? ` "${state.state.userId}"` : ''}
       </GroupTitle>
       <Loader suspense>
         <AdministrationUserForm state={state} onClose={onClose} />

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTableOptionsPanelService.ts

@@ -7,6 +7,7 @@
  */
 import { action, makeObservable, observable } from 'mobx';
 
+import { UsersResource } from '@cloudbeaver/core-authentication';
 import { importLazyComponent } from '@cloudbeaver/core-blocks';
 import { injectable } from '@cloudbeaver/core-di';
 import { Executor, type IExecutor } from '@cloudbeaver/core-executor';
@@ -21,13 +22,22 @@ export class UsersTableOptionsPanelService {
 
   readonly onClose: IExecutor;
 
-  constructor(private readonly optionsPanelService: OptionsPanelService) {
+  constructor(
+    private readonly optionsPanelService: OptionsPanelService,
+    private readonly usersResource: UsersResource,
+  ) {
     this.userId = null;
     this.onClose = new Executor();
 
     this.optionsPanelService.closeTask.next(this.onClose, undefined, () => this.optionsPanelService.isOpen(panelGetter));
     this.close = this.close.bind(this);
 
+    this.usersResource.onItemDelete.addHandler(data => {
+      if (data === this.userId) {
+        this.close();
+      }
+    });
+
     makeObservable(this, {
       userId: observable.ref,
       open: action,

webapp/packages/plugin-authentication-administration/src/manifest.ts

@@ -37,5 +37,6 @@ export const manifest: PluginManifest = {
     () => import('./Administration/Users/UserForm/Info/UserFormInfoPartService.js').then(m => m.UserFormInfoPartService),
     () => import('./AdministrationUsersManagementService.js').then(m => m.AdministrationUsersManagementService),
     () => import('./Administration/Users/UsersTable/UsersTableOptionsPanelService.js').then(m => m.UsersTableOptionsPanelService),
+    () => import('./Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanelService.js').then(m => m.TeamsTableOptionsPanelService),
   ],
 };