Merge pull request #493 from dbeaver/fix/confirmation-dialog

fix(core-dialogs): CB-1286 add ConfirmationDialogDelete, small ui cha…

webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts

@@ -24,6 +24,9 @@ export const topMenuStyles = composes(
     menu-box {
       background-color: #338ecc!important;
     }
+    menu-box menu-panel-item {
+      border-color: #ffffff !important;
+    }
     MenuTrigger {
       height: 100%;
       padding: 0 16px !important;

webapp/packages/core-app/src/shared/NodesManager/NavNodeContextMenuService.ts

@@ -8,7 +8,7 @@
 
 import { ConnectionInfoResource } from '@cloudbeaver/core-connections';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, ContextMenuService, DialogueStateResult, IMenuPanel, RenameDialog } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, ContextMenuService, DialogueStateResult, IMenuPanel, RenameDialog } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { isNavigatorViewSettingsEqual, CONNECTION_NAVIGATOR_VIEW_SETTINGS, NavigatorViewSettings } from '@cloudbeaver/core-root';
 
@@ -206,7 +206,6 @@ export class NavNodeContextMenuService extends Bootstrap {
       this.contextMenuService.getRootMenuToken(),
       {
         id: 'rename',
-        icon: 'edit',
         title: 'ui_rename',
         isPresent: context => context.contextType === NavNodeContextMenuService.nodeContextType,
         isHidden: context => !context.data.node.features?.includes(ENodeFeature.canRename),
@@ -250,12 +249,10 @@ export class NavNodeContextMenuService extends Bootstrap {
           const node = context.data.node;
           const nodeName = getNodeName(node);
 
-          const result = await this.commonDialogService.open(ConfirmationDialog, {
+          const result = await this.commonDialogService.open(ConfirmationDialogDelete, {
             title: 'ui_data_delete_confirmation',
-            subTitle: node.name,
             message: `You're going to delete "${nodeName}". Are you sure?`,
             confirmActionText: 'ui_delete',
-            icon: node.icon,
           });
 
           if (result === DialogueStateResult.Rejected) {

webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts

@@ -9,7 +9,7 @@
 import { observable, computed, makeObservable } from 'mobx';
 
 import { injectable } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { resourceKeyList } from '@cloudbeaver/core-sdk';
 
@@ -73,7 +73,7 @@ export class ConnectionsAdministrationController {
       .map(id => this.connectionsResource.get(id)?.name)
       .filter(Boolean);
 
-    const result = await this.commonDialogService.open(ConfirmationDialog, {
+    const result = await this.commonDialogService.open(ConfirmationDialogDelete, {
       title: 'ui_data_delete_confirmation',
       message: `You're going to delete these connections: ${connectionNames.map(name => `"${name}"`).join(', ')}. Are you sure?`,
       confirmActionText: 'ui_delete',

webapp/packages/core-connections/src/ConnectionsManagerService.ts

@@ -10,7 +10,7 @@ import { Subject } from 'rxjs';
 
 import { ProcessSnackbar } from '@cloudbeaver/core-blocks';
 import { injectable } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { Executor, IExecutionContextProvider, IExecutor } from '@cloudbeaver/core-executor';
 
@@ -70,7 +70,7 @@ export class ConnectionsManagerService {
       return;
     }
 
-    const result = await this.commonDialogService.open(ConfirmationDialog, {
+    const result = await this.commonDialogService.open(ConfirmationDialogDelete, {
       title: 'ui_data_delete_confirmation',
       message: `You're going to delete "${connection.name}" connection. Are you sure?`,
       confirmActionText: 'ui_delete',

webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialogDelete.tsx

@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 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 type { DialogComponent } from '../CommonDialog/CommonDialogService';
+import { ConfirmationDialog } from '../CommonDialog/ConfirmationDialog';
+import type { ConfirmationDialogPayload } from '../CommonDialog/ConfirmationDialog';
+
+export const ConfirmationDialogDelete: DialogComponent<ConfirmationDialogPayload> = function ConfirmationDialogDelete({
+  payload,
+  ...rest
+}) {
+  return (
+    <ConfirmationDialog
+      payload={{ ...payload, icon: '/icons/error_icon.svg', bigIcon: true }}
+      {...rest}
+    />
+  );
+};

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

@@ -1,6 +1,7 @@
 export * from './CommonDialog/CommonDialog/CommonDialogWrapper';
 export * from './CommonDialog/CommonDialogService';
 export * from './CommonDialog/ConfirmationDialog';
+export * from './CommonDialog/ConfirmationDialogDelete';
 export * from './CommonDialog/RenameDialog';
 export * from './CommonDialog/DialogsPortal';
 

webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/useConfigurationsTable.tsx

@@ -11,7 +11,7 @@ import { computed, observable } from 'mobx';
 import { AuthConfigurationsResource, compareAuthConfigurations } from '@cloudbeaver/core-authentication';
 import { TableState, useObservableRef } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { AdminAuthProviderConfiguration, resourceKeyList } from '@cloudbeaver/core-sdk';
 
@@ -64,7 +64,7 @@ export function useConfigurationsTable(): Readonly<State> {
         .map(id => resource.get(id)?.displayName)
         .filter(Boolean);
 
-      const result = await dialogService.open(ConfirmationDialog, {
+      const result = await dialogService.open(ConfirmationDialogDelete, {
         title: 'ui_data_delete_confirmation',
         message: `You're going to delete these configurations: ${configurationsNames.map(name => `"${name}"`).join(', ')}. Are you sure?`,
         confirmActionText: 'ui_delete',

webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/useRolesTable.tsx

@@ -11,7 +11,7 @@ import { computed, observable } from 'mobx';
 import { compareRoles, RoleInfo, RolesResource } from '@cloudbeaver/core-authentication';
 import { TableState, useObservableRef } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { resourceKeyList } from '@cloudbeaver/core-sdk';
 
@@ -60,7 +60,7 @@ export function useRolesTable(): Readonly<State> {
         return;
       }
 
-      const result = await dialogService.open(ConfirmationDialog, {
+      const result = await dialogService.open(ConfirmationDialogDelete, {
         title: 'ui_data_delete_confirmation',
         message: `You're going to delete these roles: ${deletionList.map(name => `"${name}"`).join(', ')}. Are you sure?`,
         confirmActionText: 'ui_delete',

webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts

@@ -10,7 +10,7 @@ import { observable, computed, makeObservable } from 'mobx';
 
 import { AdminUser, AuthProvidersResource, AUTH_PROVIDER_LOCAL_ID, UsersResource } from '@cloudbeaver/core-authentication';
 import { injectable, IInitializableController } from '@cloudbeaver/core-di';
-import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { CommonDialogService, ConfirmationDialogDelete, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { ErrorDetailsDialog } from '@cloudbeaver/core-notifications';
 import { GQLErrorCatcher, resourceKeyList } from '@cloudbeaver/core-sdk';
@@ -92,7 +92,7 @@ export class UsersAdministrationController implements IInitializableController {
       return;
     }
 
-    const result = await this.commonDialogService.open(ConfirmationDialog, {
+    const result = await this.commonDialogService.open(ConfirmationDialogDelete, {
       title: 'ui_data_delete_confirmation',
       message: `You're going to delete these users: ${deletionList.map(name => `"${name}"`).join(', ')}. Are you sure?`,
       confirmActionText: 'ui_delete',

webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx

@@ -31,6 +31,10 @@ const styles = composes(
     }
 `,
   css`
+    CommonDialogWrapper {
+      min-height: 490px !important;
+      max-height: max(100vh - 48px, 490px) !important;
+    }
     SubmittingForm {
       overflow: auto;
       &[|form] {
@@ -93,7 +97,7 @@ export const AuthDialog: DialogComponent<IAuthPayload, null> = observer(function
   const configurable = !!controller.provider?.configurable;
 
   const dialogTitle = `${controller.provider?.label || ''} ${translate('authentication_login_dialog_title')}`;
-  let subTitle: string | undefined;
+  let subTitle = controller.provider?.description;
 
   if (configurable) {
     subTitle = 'authentication_identity_provider_dialog_subtitle';

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/ObjectPropertyTableFooterService.ts

@@ -11,7 +11,7 @@ import type { TableState } from '@cloudbeaver/core-blocks';
 import { injectable } from '@cloudbeaver/core-di';
 import {
   ContextMenuService, IMenuContext, IContextMenuItem, IMenuItem,
-  CommonDialogService, ConfirmationDialog, DialogueStateResult
+  CommonDialogService, DialogueStateResult, ConfirmationDialogDelete
 } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { resourceKeyList } from '@cloudbeaver/core-sdk';
@@ -57,11 +57,9 @@ export class ObjectPropertyTableFooterService {
           .filter(node => node.features?.includes(ENodeFeature.canDelete));
         const nodeNames = nodes.map(getNodeName);
 
-        const result = await this.commonDialogService.open(ConfirmationDialog, {
+        const result = await this.commonDialogService.open(ConfirmationDialogDelete, {
           title: 'ui_data_delete_confirmation',
           message: `You're going to delete following items: "${nodeNames.join(', ')}". Are you sure?`,
-          icon: '/icons/error_icon.svg',
-          bigIcon: true,
           confirmActionText: 'ui_delete',
         });