CB-5478 Add an ability to new forms to edit formState id

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx

@@ -6,28 +6,17 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
 
 import { Container, Loader, s, TableItemExpandProps, useS } from '@cloudbeaver/core-blocks';
-import { IServiceProvider, useService } from '@cloudbeaver/core-di';
 import { FormMode } from '@cloudbeaver/core-ui';
 
 import { AdministrationUserForm } from '../UserForm/AdministrationUserForm';
-import { AdministrationUserFormService } from '../UserForm/AdministrationUserFormService';
-import { AdministrationUserFormState } from '../UserForm/AdministrationUserFormState';
+import { useAdministrationUserFormState } from './useAdministrationUserFormState';
 import style from './UserEdit.module.css';
 
 export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit({ item, onClose }) {
   const styles = useS(style);
-  const administrationUserFormService = useService(AdministrationUserFormService);
-  const serviceProvider = useService(IServiceProvider);
-  const [state] = useState(() => {
-    const state = new AdministrationUserFormState(serviceProvider, administrationUserFormService, {
-      userId: item,
-    });
-    state.setMode(FormMode.Edit);
-    return state;
-  });
+  const state = useAdministrationUserFormState(item, state => state.setMode(FormMode.Edit));
 
   return (
     <Container className={s(styles, { box: true })} parent vertical>

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/useAdministrationUserFormState.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { observable } from 'mobx';
+import { useEffect } from 'react';
+
+import { useObservableRef } from '@cloudbeaver/core-blocks';
+import { IServiceProvider, useService } from '@cloudbeaver/core-di';
+
+import { AdministrationUserFormService } from '../UserForm/AdministrationUserFormService';
+import { AdministrationUserFormState } from '../UserForm/AdministrationUserFormState';
+
+export function useAdministrationUserFormState(id: string | null, configure?: (state: AdministrationUserFormState) => any) {
+  const service = useService(AdministrationUserFormService);
+  const serviceProvider = useService(IServiceProvider);
+  const ref = useObservableRef(
+    () => ({ formState: createFormState(id) }),
+    {
+      formState: observable.ref,
+    },
+    false,
+  );
+
+  function createFormState(id: string | null) {
+    const formState = new AdministrationUserFormState(serviceProvider, service, {
+      userId: id,
+    });
+    configure?.(formState);
+
+    return formState;
+  }
+
+  useEffect(() => {
+    if (ref.formState.id !== id) {
+      const formState = createFormState(id);
+      ref.formState = formState;
+    }
+  }, [id]);
+
+  return ref.formState;
+}