From 7f4da9400ae9c74202ecb988abd51727ec677cd5 Mon Sep 17 00:00:00 2001 From: Wroud Date: Tue, 2 Jun 2020 10:46:28 +0300 Subject: [PATCH] chore(core): some improvements CB-142 --- .../packages/authentication/locales/en.json | 1 + .../CreateUserDialog/CreateUserDialog.tsx | 2 +- .../Users/UsersAdministrationController.ts | 26 +++++-- webapp/packages/core/locales/en.json | 1 + webapp/packages/core/locales/ru.json | 1 + .../packages/core/src/blocks/InputField.tsx | 2 +- .../core/src/blocks/PropertiesTable/styles.ts | 2 +- .../core/src/blocks/Table/TableItemSelect.tsx | 10 ++- .../CommonDialog/CommonDialogWrapper.tsx | 55 ++++++++++++++ .../styles.ts} | 47 +----------- .../CommonDialog/CommonDialogService.ts | 1 + .../CommonDialog/ConfirmationDialog.tsx | 74 +++++++++++++++++++ .../SessionExpire/SessionExpiredDialog.tsx | 2 +- webapp/packages/core/src/dialogs/index.ts | 3 +- 14 files changed, 171 insertions(+), 56 deletions(-) create mode 100644 webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/CommonDialogWrapper.tsx rename webapp/packages/core/src/dialogs/CommonDialog/{CommonDialogWrapper.tsx => CommonDialog/styles.ts} (58%) create mode 100644 webapp/packages/core/src/dialogs/CommonDialog/ConfirmationDialog.tsx diff --git a/webapp/packages/authentication/locales/en.json b/webapp/packages/authentication/locales/en.json index cd3bd8728f..86f6bebfb4 100644 --- a/webapp/packages/authentication/locales/en.json +++ b/webapp/packages/authentication/locales/en.json @@ -1,5 +1,6 @@ { "authentication_administration_item": "Users", + "authentication_administration_confirm_user_deletion": "Confirm user deletion", "authentication_create_user_dialog_title": "Create new user", "authentication_create_user_dialog_create": "Create", "authentication_user_name": "User name", diff --git a/webapp/packages/authentication/src/Administration/Users/CreateUserDialog/CreateUserDialog.tsx b/webapp/packages/authentication/src/Administration/Users/CreateUserDialog/CreateUserDialog.tsx index c494af0f9e..d8913f7996 100644 --- a/webapp/packages/authentication/src/Administration/Users/CreateUserDialog/CreateUserDialog.tsx +++ b/webapp/packages/authentication/src/Administration/Users/CreateUserDialog/CreateUserDialog.tsx @@ -91,7 +91,7 @@ export const CreateUserDialog: DialogComponent = observer( )} onReject={props.rejectDialog} > - + value) + .map(([userId]) => userId); + if (deletionList.length === 0) { + return; + } + + const confirmed = await this.commonDialogService.open(ConfirmationDialog, { + title: 'authentication_administration_confirm_user_deletion', + message: `Would you like to delete users: ${deletionList.join(', ')}`, + }); + + if (!confirmed) { + return; + } + + for (const userId of deletionList) { + await this.usersManagerService.delete(userId); } this.selectedItems.clear(); await this.usersManagerService.users.refresh(undefined); diff --git a/webapp/packages/core/locales/en.json b/webapp/packages/core/locales/en.json index 3cd2791c2f..bfd114143f 100644 --- a/webapp/packages/core/locales/en.json +++ b/webapp/packages/core/locales/en.json @@ -33,6 +33,7 @@ "ui_processing_cancel": "Cancel", "ui_processing_canceling": "Canceling...", "ui_processing_retry": "Retry", + "ui_processing_ok": "Ok", "ui_error_message": "Error:", "ui_errors_details": "Details", "ui_search": "Search...", diff --git a/webapp/packages/core/locales/ru.json b/webapp/packages/core/locales/ru.json index 4817fabfff..6176418637 100644 --- a/webapp/packages/core/locales/ru.json +++ b/webapp/packages/core/locales/ru.json @@ -33,6 +33,7 @@ "ui_processing_cancel": "Отменить", "ui_processing_canceling": "Отмена...", "ui_processing_retry": "Повторить", + "ui_processing_ok": "Принять", "ui_error_message": "Ошибка:", "ui_errors_details": "Информация", "ui_search": "Поиск...", diff --git a/webapp/packages/core/src/blocks/InputField.tsx b/webapp/packages/core/src/blocks/InputField.tsx index 9ef285aa43..1328b531ee 100644 --- a/webapp/packages/core/src/blocks/InputField.tsx +++ b/webapp/packages/core/src/blocks/InputField.tsx @@ -22,7 +22,7 @@ const styles = css` padding: 12px 0; & label { - width: 230px; + width: 150px; text-align: right; padding: 0 12px; line-height: 16px; diff --git a/webapp/packages/core/src/blocks/PropertiesTable/styles.ts b/webapp/packages/core/src/blocks/PropertiesTable/styles.ts index dfb8bdfacd..b092a23517 100644 --- a/webapp/packages/core/src/blocks/PropertiesTable/styles.ts +++ b/webapp/packages/core/src/blocks/PropertiesTable/styles.ts @@ -28,7 +28,7 @@ export const PROPERTIES_TABLE_STYLES = composes( properties-header { box-sizing: border-box; display: inline-flex; - padding: 5px 1px; + padding: 2px; position: sticky; z-index: 1; top: 0; diff --git a/webapp/packages/core/src/blocks/Table/TableItemSelect.tsx b/webapp/packages/core/src/blocks/Table/TableItemSelect.tsx index f72a8e9123..454656601c 100644 --- a/webapp/packages/core/src/blocks/Table/TableItemSelect.tsx +++ b/webapp/packages/core/src/blocks/Table/TableItemSelect.tsx @@ -7,11 +7,12 @@ */ import { observer } from 'mobx-react'; -import { useContext } from 'react'; +import { useContext, useCallback } from 'react'; import styled from 'reshadow'; import { useStyles } from '@dbeaver/core/theming'; +import { TableContext } from './TableContext'; import { TableItemContext } from './TableItemContext'; type Props = { @@ -19,12 +20,17 @@ type Props = { } export const TableItemSelect = observer(function TableItemSelect({ className }: Props) { + const tableContext = useContext(TableContext); const context = useContext(TableItemContext); if (!context) { return null; } + const handleClick = useCallback((event: React.MouseEvent) => { + event.stopPropagation(); + tableContext?.setItemSelect(context.item, !context.isSelected()); + }, [tableContext, context]); return styled(useStyles())( - + ); }); diff --git a/webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/CommonDialogWrapper.tsx new file mode 100644 index 0000000000..353522763e --- /dev/null +++ b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/CommonDialogWrapper.tsx @@ -0,0 +1,55 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 styled, { use } from 'reshadow'; + +import { Icon } from '@dbeaver/core/blocks'; +import { useStyles } from '@dbeaver/core/theming'; + +import { commonDialogStyle } from './styles'; + +export type CommonDialogWrapperProps = { + title: string; + onReject?: () => void; + className?: string; + noBodyPadding?: boolean; + footer?: JSX.Element | boolean; + header?: JSX.Element | boolean; + children?: React.ReactNode; +} + +export function CommonDialogWrapper({ + title, + header, + footer, + noBodyPadding, + className, + onReject, + children, +}: CommonDialogWrapperProps) { + + return styled(useStyles(commonDialogStyle))( + +
+ +

{title}

+ {onReject && ( + + + + )} + + {header} +
+ {children} +
+ {footer} +
+ + ); +} diff --git a/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/styles.ts similarity index 58% rename from webapp/packages/core/src/dialogs/CommonDialog/CommonDialogWrapper.tsx rename to webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/styles.ts index 59b526b071..55edba7d76 100644 --- a/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogWrapper.tsx +++ b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialog/styles.ts @@ -6,22 +6,12 @@ * you may not use this file except in compliance with the License. */ -import styled, { css, use } from 'reshadow'; -import { Icon } from '@dbeaver/core/blocks'; -import { composes, useStyles } from '@dbeaver/core/theming'; +import { css } from 'reshadow'; -export type CommonDialogWrapperProps = { - title: string; - onReject?: () => void; - className?: string; - noBodyPadding?: boolean; - footer?: JSX.Element | boolean; - header?: JSX.Element | boolean; - children?: React.ReactNode; -} +import { composes } from '@dbeaver/core/theming'; -const style = composes( +export const commonDialogStyle = composes( css` dialog { composes: theme-background-surface theme-text-on-surface from global; @@ -91,34 +81,3 @@ const style = composes( } ` ); - -export function CommonDialogWrapper({ - title, - header, - footer, - noBodyPadding, - className, - onReject, - children, -}: CommonDialogWrapperProps) { - - return styled(useStyles(style))( - -
- -

{title}

- {onReject && ( - - - - )} - - {header} -
- {children} -
- {footer} -
- - ); -} diff --git a/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogService.ts b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogService.ts index 724e0f2e3f..e94f8fb7c4 100644 --- a/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogService.ts +++ b/webapp/packages/core/src/dialogs/CommonDialog/CommonDialogService.ts @@ -19,6 +19,7 @@ export type DialogComponentProps = { options?: DialogOptions; resolveDialog(result: TResult | null): void; rejectDialog(): void; // the dialog was closed by cancel button or backdrop click + className?: string; } export type DialogComponent = React.ElementType< diff --git a/webapp/packages/core/src/dialogs/CommonDialog/ConfirmationDialog.tsx b/webapp/packages/core/src/dialogs/CommonDialog/ConfirmationDialog.tsx new file mode 100644 index 0000000000..24560175d1 --- /dev/null +++ b/webapp/packages/core/src/dialogs/CommonDialog/ConfirmationDialog.tsx @@ -0,0 +1,74 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 { useCallback } from 'react'; +import styled, { css } from 'reshadow'; + +import { Icon, Button } from '@dbeaver/core/blocks'; +import { Translate } from '@dbeaver/core/localization'; +import { useStyles } from '@dbeaver/core/theming'; + +import { commonDialogStyle } from './CommonDialog/styles'; +import { DialogComponentProps } from './CommonDialogService'; + +const style = css` + footer { + align-items: center; + justify-content: flex-end; + } + + fill { + flex: 1; + } +`; + +export interface ConfirmationDialogPayload { + title: string; + message: string; +} + +export function ConfirmationDialog({ + payload, + resolveDialog, + rejectDialog, + className, +}: DialogComponentProps) { + const handleReject = useCallback(() => resolveDialog(false), [resolveDialog]); + const handleResolve = useCallback(() => resolveDialog(true), [resolveDialog]); + + return styled(useStyles(commonDialogStyle, style))( + +
+ +

+ + + + +
+ + + + ); +} diff --git a/webapp/packages/core/src/dialogs/SessionExpire/SessionExpiredDialog.tsx b/webapp/packages/core/src/dialogs/SessionExpire/SessionExpiredDialog.tsx index 66176949c1..27b34ff217 100644 --- a/webapp/packages/core/src/dialogs/SessionExpire/SessionExpiredDialog.tsx +++ b/webapp/packages/core/src/dialogs/SessionExpire/SessionExpiredDialog.tsx @@ -14,8 +14,8 @@ import { Button } from '@dbeaver/core/blocks'; import { useTranslate } from '@dbeaver/core/localization'; import { useStyles } from '@dbeaver/core/theming'; +import { CommonDialogWrapper } from '../CommonDialog/CommonDialog/CommonDialogWrapper'; import { DialogComponent } from '../CommonDialog/CommonDialogService'; -import { CommonDialogWrapper } from '../CommonDialog/CommonDialogWrapper'; const styles = css` dialog-content { diff --git a/webapp/packages/core/src/dialogs/index.ts b/webapp/packages/core/src/dialogs/index.ts index 01d5b7d111..691d8ac6db 100644 --- a/webapp/packages/core/src/dialogs/index.ts +++ b/webapp/packages/core/src/dialogs/index.ts @@ -1,5 +1,6 @@ +export * from './CommonDialog/CommonDialog/CommonDialogWrapper'; export * from './CommonDialog/CommonDialogService'; -export * from './CommonDialog/CommonDialogWrapper'; +export * from './CommonDialog/ConfirmationDialog'; export * from './CommonDialog/DialogsPortal'; export * from './Menu/IMenuPanel';