CB-3456 refactor: user form

webapp/packages/core-authentication/src/UsersResource.ts

@@ -56,12 +56,6 @@ export const UsersResourceNewUsers = resourceKeyListAlias('@users-resource/new-u
 
 interface UserCreateOptions {
   userId: string;
-  teams: string[];
-  credentials: IAuthCredentials;
-  metaParameters: Record<string, any>;
-  grantedConnections: string[];
-  enabled: boolean;
-  authRole?: string;
 }
 
 @injectable()
@@ -129,30 +123,17 @@ export class UsersResource extends CachedMapResource<string, AdminUser, UserReso
     await this.graphQLService.sdk.saveUserMetaParameters({ userId, parameters });
   }
 
-  async create({ userId, teams, credentials, metaParameters, grantedConnections, enabled, authRole }: UserCreateOptions): Promise<AdminUser> {
+  async create({ userId }: UserCreateOptions): Promise<AdminUser> {
     const { user } = await this.graphQLService.sdk.createUser({
       userId,
-      enabled,
-      authRole,
+      enabled: false,
       ...this.getDefaultIncludes(),
       ...this.getIncludesMap(userId),
     });
 
-    try {
-      await this.updateCredentials(userId, credentials);
-
-      for (const teamId of teams) {
-        await this.grantTeam(userId, teamId, true);
-      }
-
-      await this.setConnections(userId, grantedConnections);
-      await this.setMetaParameters(userId, metaParameters);
-      const user = (await this.refresh(userId)) as unknown as AdminUserNew;
-      user[NEW_USER_SYMBOL] = true;
-    } catch (exception: any) {
-      this.delete(userId);
-      throw exception;
-    }
+    const newUser = user as unknown as AdminUserNew;
+    newUser[NEW_USER_SYMBOL] = true;
+    this.set(user.userId, newUser);
 
     return this.get(user.userId)!;
   }

webapp/packages/core-blocks/src/Containers/Group.m.css

@@ -31,4 +31,8 @@
   &.center {
     margin: 0 auto;
   }
+
+  &.overflow {
+    overflow: auto;
+  }
 }

webapp/packages/core-blocks/src/FormControls/Form.tsx

@@ -0,0 +1,67 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 React, { forwardRef, useState } from 'react';
+
+import { useCombinedRef } from '../useCombinedRef';
+import { useFocus } from '../useFocus';
+import { FormChangeHandler, FormContext, IFormContext } from './FormContext';
+import { useForm } from './useForm';
+
+type FormDetailedProps = Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, 'onChange' | 'onSubmit'> & {
+  context?: IFormContext;
+  disabled?: boolean;
+  disableEnterSubmit?: boolean;
+  focusFirstChild?: boolean;
+  onSubmit?: (event?: SubmitEvent) => Promise<void> | void;
+  onChange?: FormChangeHandler;
+};
+
+export const Form = forwardRef<HTMLFormElement, FormDetailedProps>(function Form(
+  { context, disabled: disabledProp, disableEnterSubmit, focusFirstChild, children, onSubmit, onChange, ...rest },
+  ref,
+) {
+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild });
+  const [disabledLocal, setDisabledLocal] = useState(false);
+
+  const disabled = disabledLocal || disabledProp || false;
+
+  const formContext = useForm({
+    disableEnterSubmit,
+    parent: context,
+    onSubmit(event) {
+      const result = onSubmit?.(event);
+
+      if (result instanceof Promise) {
+        setDisabledLocal(true);
+        result.finally(() => {
+          setDisabledLocal(false);
+        });
+      }
+    },
+    onChange,
+  });
+
+  const setFormRef = useCombinedRef<HTMLFormElement>(formContext.setRef, focusedRef, ref);
+
+  if (formContext.parent && formContext.parent !== context) {
+    return (
+      <fieldset disabled={disabled} className={rest.className}>
+        <FormContext.Provider value={formContext}>{children}</FormContext.Provider>
+      </fieldset>
+    );
+  }
+
+  return (
+    <form {...rest} ref={setFormRef}>
+      <fieldset disabled={disabled} className={rest.className}>
+        <FormContext.Provider value={formContext}>{children}</FormContext.Provider>
+      </fieldset>
+      <button type="submit" disabled={disableEnterSubmit} aria-hidden={disableEnterSubmit} hidden />
+    </form>
+  );
+});

webapp/packages/core-blocks/src/FormControls/FormContext.ts

@@ -7,7 +7,7 @@
  */
 import { createContext } from 'react';
 
-import type { IExecutor } from '@cloudbeaver/core-executor';
+import type { IExecutor, SyncExecutor } from '@cloudbeaver/core-executor';
 
 export type FormChangeValues = string | number | boolean | FileList | null | undefined;
 export type FormChangeHandler = (value: FormChangeValues, name: string | undefined) => void;
@@ -19,9 +19,18 @@ export interface IChangeData {
 }
 
 export interface IFormContext {
-  changeExecutor: IExecutor<IChangeData>;
+  ref: HTMLFormElement | null;
+  onValidate: SyncExecutor;
+  onSubmit: SyncExecutor;
+  onChange: IExecutor<IChangeData>;
+  parent: IFormContext | null;
+  disableEnterSubmit: boolean;
+  setRef: (ref: HTMLFormElement | null) => void;
   change: FormChangeHandler;
   keyDown: KeyHandler;
+  validate: () => boolean;
+  reportValidity: () => boolean;
+  submit: (event?: SubmitEvent) => void;
 }
 
 export const FormContext = createContext<IFormContext | null>(null);

webapp/packages/core-blocks/src/FormControls/InputField.tsx

@@ -20,6 +20,7 @@ import { Loader } from '../Loader/Loader';
 import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { useCombinedHandler } from '../useCombinedHandler';
+import { useCombinedRef } from '../useCombinedRef';
 import { useMergeRefs } from '../useMergeRefs';
 import { useS } from '../useS';
 import { useStateDelay } from '../useStateDelay';
@@ -97,7 +98,7 @@ export const InputField: InputFieldType = observer(
     ref,
   ) {
     const inputRef = useRef<HTMLInputElement | null>(null);
-    const mergedRef = useMergeRefs(inputRef, ref);
+    const mergedRef = useCombinedRef(inputRef, ref);
     const capsLock = useCapsLockTracker();
     const [passwordRevealed, setPasswordRevealed] = useState(false);
     const translate = useTranslate();
@@ -137,9 +138,9 @@ export const InputField: InputFieldType = observer(
     const handleKeyDown = useCombinedHandler(rest.onKeyDown, capsLock.handleKeyDown, context?.keyDown);
 
     const passwordType = rest.type === 'password';
-    const uncontrolled = passwordType && !canShowPassword;
+    let uncontrolled = passwordType && !canShowPassword;
 
-    let value: any = valueControlled ?? defaultValue ?? undefined;
+    let value: any = valueControlled ?? undefined;
 
     if (state && name !== undefined && name in state) {
       value = state[name];
@@ -153,6 +154,8 @@ export const InputField: InputFieldType = observer(
       description = translate('ui_capslock_on');
     }
 
+    uncontrolled ||= value === undefined;
+
     useLayoutEffect(() => {
       if (uncontrolled && isNotNullDefined(value) && inputRef.current) {
         inputRef.current.value = value;
@@ -176,6 +179,7 @@ export const InputField: InputFieldType = observer(
             type={passwordRevealed ? 'text' : rest.type}
             name={name}
             value={uncontrolled ? undefined : value ?? ''}
+            defaultValue={defaultValue}
             className={styles.input}
             onChange={handleChange}
             onBlur={handleBlur}

webapp/packages/core-blocks/src/FormControls/useCustomInputValidation.ts

@@ -0,0 +1,63 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 { useContext, useEffect, useRef } from 'react';
+
+import { ExecutorInterrupter } from '@cloudbeaver/core-executor';
+
+import { useExecutor } from '../useExecutor';
+import { FormContext } from './FormContext';
+
+export function useCustomInputValidation<T = void>(validation: (value: T) => string | null): React.RefObject<HTMLInputElement> {
+  const context = useContext(FormContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useExecutor({
+    executor: context?.onValidate,
+    handlers: [
+      function validationHandler(_, context) {
+        if (!inputRef.current) {
+          return;
+        }
+
+        let value: T = undefined as unknown as T;
+
+        if (inputRef.current instanceof HTMLInputElement) {
+          value = inputRef.current.value as unknown as T;
+        }
+
+        const result = validation(value);
+
+        if (typeof result === 'string') {
+          inputRef.current.setCustomValidity(result);
+          ExecutorInterrupter.interrupt(context);
+        } else {
+          inputRef.current?.setCustomValidity('');
+        }
+      },
+    ],
+  });
+
+  useEffect(() => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+
+    function resetValidationMessage() {
+      element?.setCustomValidity('');
+    }
+
+    element.addEventListener('input', resetValidationMessage);
+
+    return () => {
+      element?.removeEventListener('input', resetValidationMessage);
+    };
+  });
+
+  return inputRef;
+}