chore(authenctication): user create item sub

webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUser.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { observer } from 'mobx-react';
+import { useCallback } from 'react';
+import styled, { css } from 'reshadow';
+
+import {
+  InputField, SubmittingForm, ErrorMessage, Button
+} from '@dbeaver/core/blocks';
+import { useController } from '@dbeaver/core/di';
+import { useTranslate } from '@dbeaver/core/localization';
+import { useStyles, composes } from '@dbeaver/core/theming';
+
+import { CreateUserController } from './CreateUserController';
+
+const styles = composes(
+  css`
+  `,
+  css`
+  SubmittingForm {
+    display: flex;
+    flex: 1;
+  }
+  create-form {
+    flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  group {
+    box-sizing: border-box;
+    display: flex;
+    margin: 0 12px;
+  }
+  controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  item-title {
+    composes: theme-typography--headline5 from global;
+    padding: 16px;
+  }
+  `
+);
+
+export const CreateUser = observer(function CreateUser() {
+  const controller = useController(CreateUserController);
+  const translate = useTranslate();
+  const handleChange = useCallback(
+    (value: string) => controller.login = value,
+    []
+  );
+
+  return styled(useStyles(styles))(
+    <>
+      <item-title as='div'>
+        User creation
+      </item-title>
+      <SubmittingForm>
+        <create-form as='div'>
+          <group as="div">
+            <InputField
+              type='text'
+              name='login'
+              value={controller.login}
+              onChange={handleChange}
+              disabled={controller.isCreating}
+              mod='surface'
+            >
+              {translate('User name')}
+            </InputField>
+          </group>
+          <controls as="div">
+            <Button
+              type="button"
+              mod={['unelevated']}
+              onClick={controller.create}
+              disabled={controller.isCreating}
+            >
+              {translate('Create')}
+            </Button>
+          </controls>
+        </create-form>
+      </SubmittingForm>
+
+      {controller.error.responseMessage && (
+        <ErrorMessage
+          text={controller.error.responseMessage}
+          hasDetails={controller.error.hasDetails}
+          onShowDetails={controller.showDetails}
+        />
+      )}
+    </>
+  );
+});

webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUserController.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { observable } from 'mobx';
+
+import { AdministrationScreenService } from '@dbeaver/administration';
+import { ErrorDetailsDialog } from '@dbeaver/core/app';
+import { injectable } from '@dbeaver/core/di';
+import { CommonDialogService } from '@dbeaver/core/dialogs';
+import { NotificationService } from '@dbeaver/core/eventsLog';
+import { GQLErrorCatcher } from '@dbeaver/core/sdk';
+
+import { UsersManagerService } from '../../UsersManagerService';
+
+
+@injectable()
+export class CreateUserController {
+  @observable isCreating = false;
+  @observable login = '';
+
+  readonly error = new GQLErrorCatcher();
+
+  constructor(
+    private notificationService: NotificationService,
+    private administrationScreenService: AdministrationScreenService,
+    private usersManagerService: UsersManagerService,
+    private commonDialogService: CommonDialogService,
+  ) { }
+
+  create = async () => {
+    if (this.isCreating) {
+      return;
+    }
+
+    this.isCreating = true;
+    try {
+      await this.usersManagerService.create(this.login);
+      this.administrationScreenService.navigateToItem('users');
+    } catch (exception) {
+      if (!this.error.catch(exception)) {
+        this.notificationService.logException(exception, 'User create failed');
+      }
+    } finally {
+      this.isCreating = false;
+    }
+  }
+
+  showDetails = () => {
+    if (this.error.exception) {
+      this.commonDialogService.open(ErrorDetailsDialog, this.error.exception);
+    }
+  }
+}

webapp/packages/authentication/src/Administration/Users/UsersAdministrationService.ts

@@ -6,10 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { AdministrationItemService } from '@dbeaver/administration';
+import { AdministrationItemService, AdministrationScreenService } from '@dbeaver/administration';
 import { injectable, Bootstrap } from '@dbeaver/core/di';
 
 import { UsersManagerService } from '../UsersManagerService';
+import { CreateUser } from './CreateUser/CreateUser';
 import { UsersAdministration } from './UsersAdministration';
 import { UsersDrawerItem } from './UsersDrawerItem';
 
@@ -17,6 +18,7 @@ import { UsersDrawerItem } from './UsersDrawerItem';
 export class UsersAdministrationService extends Bootstrap {
   constructor(
     private administrationItemService: AdministrationItemService,
+    private administrationScreenService: AdministrationScreenService,
     private usersManagerService: UsersManagerService,
   ) {
     super();
@@ -25,12 +27,34 @@ export class UsersAdministrationService extends Bootstrap {
   bootstrap() {
     this.administrationItemService.create({
       name: 'users',
+      sub: [
+        {
+          name: 'create',
+          getComponent: () => CreateUser,
+        },
+        {
+          name: 'edit',
+          getComponent: () => UsersAdministration,
+        },
+      ],
       getContentComponent: () => UsersAdministration,
       getDrawerComponent: () => UsersDrawerItem,
       onActivate: this.loadUsers.bind(this),
     });
   }
 
+  navToRoot() {
+    this.administrationScreenService.navigateToItem('users');
+  }
+
+  navToCreate() {
+    this.administrationScreenService.navigateToItemSub('users', 'create');
+  }
+
+  navToEdit(userId: string) {
+    this.administrationScreenService.navigateToItemSub('users', 'edit', userId);
+  }
+
   private async loadUsers() {
     await this.usersManagerService.users.load();
   }