From dc8e7e76173e1df06dd665606a3b07e6fefef177 Mon Sep 17 00:00:00 2001 From: naumov Date: Sun, 27 Oct 2024 21:59:23 +0100 Subject: [PATCH] CB-5819 redesign teams --- .../Users/Teams/TeamsTable/Team.tsx | 14 ++--- .../Teams/TeamsTable/TeamEdit.module.css | 11 ---- .../Users/Teams/TeamsTable/TeamEdit.tsx | 24 +++---- .../Users/Teams/TeamsTable/TeamsTable.tsx | 1 - .../TeamsTable/TeamsTableOptionsPanel.tsx | 25 ++++++++ .../TeamsTableOptionsPanelService.ts | 63 +++++++++++++++++++ .../Users/UsersTable/UserEdit.module.css | 11 ---- .../Users/UsersTable/UserEdit.tsx | 10 ++- .../UsersTableOptionsPanelService.ts | 12 +++- .../src/manifest.ts | 1 + 10 files changed, 122 insertions(+), 50 deletions(-) delete mode 100644 webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.module.css create mode 100644 webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanel.tsx create mode 100644 webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanelService.ts delete mode 100644 webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.module.css 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 8b874504ae..19ebfa994d 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 @@ -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(function Team({ team }) { const styles = useS(style); const service = useService(TeamsAdministrationService); + const teamsTableOptionsPanelService = useService(TeamsTableOptionsPanelService); return ( - + - - - - - {team.teamId} + teamsTableOptionsPanelService.open(team.teamId)}> + {team.teamId} {team.teamName || ''} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.module.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.module.css deleted file mode 100644 index 769db6084c..0000000000 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.module.css +++ /dev/null @@ -1,11 +0,0 @@ -/* - * 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. - */ - -.box { - height: 664px; -} 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 4f0ec3ef4b..dc513a7886 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 @@ -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(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 ( - - - + + + {translate('ui_edit')} + {data.config.teamName ? ` "${data.config.teamName}"` : ''} + + + ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx index 7b94b6286d..35d92b5967 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx @@ -54,7 +54,6 @@ export const TeamsTable = observer(function TeamsTable({ teams, state, se - {translate('administration_teams_team_id')} {translate('administration_teams_team_name')} {translate('administration_teams_team_description')} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanel.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanel.tsx new file mode 100644 index 0000000000..1de58f2ce2 --- /dev/null +++ b/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 {translate('ui_not_found')}; + } + + return ; +}); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanelService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTableOptionsPanelService.ts new file mode 100644 index 0000000000..df4856e01a --- /dev/null +++ b/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 { + if (this.optionsPanelService.isOpen(panelGetter)) { + return true; + } + + const state = await this.optionsPanelService.open(panelGetter); + + if (state) { + this.teamId = teamId; + } + + return state; + } + + async close(): Promise { + if (!this.optionsPanelService.isOpen(panelGetter)) { + return; + } + + const result = await this.optionsPanelService.close(); + + if (result) { + this.teamId = null; + } + } +} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.module.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.module.css deleted file mode 100644 index 7dde534b0c..0000000000 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.module.css +++ /dev/null @@ -1,11 +0,0 @@ -/* - * 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. - */ - -.box { - height: 600px; -} 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 c5484efcf0..9f0f12f86e 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 @@ -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>(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>(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>(function UserEdit }); return ( - + - {`${translate('ui_edit')}${state.state.userId ? ` "${state.state.userId}"` : ''}`} + {translate('ui_edit')} + {state.state.userId ? ` "${state.state.userId}"` : ''} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTableOptionsPanelService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTableOptionsPanelService.ts index 6a523c4c67..0257ecbbf4 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTableOptionsPanelService.ts +++ b/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, diff --git a/webapp/packages/plugin-authentication-administration/src/manifest.ts b/webapp/packages/plugin-authentication-administration/src/manifest.ts index 80223867f8..03782a3f3f 100644 --- a/webapp/packages/plugin-authentication-administration/src/manifest.ts +++ b/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), ], };