From f7856aabf216bc334e03d8550bfc53dc9da60e6b Mon Sep 17 00:00:00 2001
From: Boris Yuzhakov <yuzhakov.boris@gmail.com>
Date: Mon, 1 Jul 2024 17:34:03 +0300
Subject: [PATCH] fix: add validation for create directory modal

---
 .../CreateDirectoryDialog.scss                | 11 ++---
 .../CreateDirectoryDialog.tsx                 | 32 +++++++++++--
 .../Tenant/Schema/SchemaTree/SchemaTree.tsx   | 47 ++++++++++++-------
 3 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss b/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss
index 3770ffd52..081eee895 100644
--- a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss
+++ b/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss
@@ -1,14 +1,13 @@
-@import '../../../../styles/mixins.scss';
-
 .ydb-schema-create-directory-dialog {
-    &__modal {
-        max-height: 100%;
-        @include flex-container();
-    }
     &__label {
         margin-bottom: 10px;
     }
     &__description {
         color: var(--g-color-text-secondary);
     }
+    &__error {
+        margin-top: 10px;
+
+        color: var(--g-color-private-red-450);
+    }
 }
diff --git a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx b/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx
index 598c71782..b70a2b650 100644
--- a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx
+++ b/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx
@@ -11,23 +11,43 @@ const b = cn('ydb-schema-create-directory-dialog');
 interface SchemaTreeProps {
     open: boolean;
     parent: string;
+    isLoading: boolean;
     onClose: () => void;
     onSubmit: (value: string) => void;
+    onUpdate: (value: string) => void;
+    error: string;
 }
 
 export function CreateDirectoryDialog(props: SchemaTreeProps) {
-    const {open, parent, onClose, onSubmit} = props;
+    const {open, parent, isLoading, onClose, onSubmit, onUpdate, error} = props;
     const [child, setChild] = React.useState('');
 
     const handleClose = () => {
-        setChild('');
         onClose();
     };
+
     const handleSubmit = () => {
-        setChild('');
         onSubmit(child);
     };
 
+    const handleUpdate = (value: string) => {
+        setChild(value);
+    };
+
+    React.useEffect(() => {
+        if (!open) {
+            setChild('');
+        }
+    }, [open]);
+
+    React.useEffect(() => {
+        onUpdate(child);
+    }, [onUpdate, child]);
+
+    const invalid = React.useMemo(() => {
+        return /\s/.test(child);
+    }, [child]);
+
     return (
         <Dialog open={open} onClose={handleClose} onEnterKeyDown={handleSubmit}>
             <Dialog.Header caption={i18n('schema.tree.dialog.header')} />
@@ -39,12 +59,16 @@ export function CreateDirectoryDialog(props: SchemaTreeProps) {
                 <TextInput
                     placeholder={i18n('schema.tree.dialog.placeholder')}
                     value={child}
-                    onUpdate={setChild}
+                    onUpdate={handleUpdate}
                     autoFocus
                     hasClear
+                    disabled={isLoading}
+                    validationState={error || invalid ? 'invalid' : undefined}
                 />
+                {error && <div className={b('error')}>{error}</div>}
             </Dialog.Body>
             <Dialog.Footer
+                loading={isLoading}
                 textButtonApply={i18n('schema.tree.dialog.buttonApply')}
                 textButtonCancel={i18n('schema.tree.dialog.buttonCancel')}
                 onClickButtonCancel={handleClose}
diff --git a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx
index a1b78e57b..2ed951529 100644
--- a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx
+++ b/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx
@@ -28,18 +28,19 @@ export function SchemaTree(props: SchemaTreeProps) {
     const [_, setQueryMode] = useQueryModes();
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
     const [parent, setParent] = React.useState<string>('');
+    const [child, setChild] = React.useState<string>('');
     const [navigationTreeKey, setNavigationTreeKey] = React.useState('');
+    const [error, setError] = React.useState<string>('');
+    const [createDirectory, createDirectoryResult] = schemaApi.useCreateDirectoryMutation();
 
-    const [createDirectory, {isSuccess, requestId}] = schemaApi.useCreateDirectoryMutation();
-
-    const fetchPath = async (path: string) => {
+    const fetchPath = async (value: string) => {
         const promise = dispatch(
-            schemaApi.endpoints.getSchema.initiate({path}, {forceRefetch: true}),
+            schemaApi.endpoints.getSchema.initiate({path: value}, {forceRefetch: true}),
         );
         const {data} = await promise;
         promise.unsubscribe();
         if (!data) {
-            throw new Error(`no describe data about path ${path}`);
+            throw new Error(`no describe data about path ${value}`);
         }
         const {PathDescription: {Children = []} = {}} = data;
 
@@ -59,10 +60,20 @@ export function SchemaTree(props: SchemaTreeProps) {
     };
 
     React.useEffect(() => {
-        if (isSuccess) {
-            setNavigationTreeKey(requestId);
+        if (createDirectoryResult.isSuccess) {
+            setNavigationTreeKey(createDirectoryResult.requestId);
+            onActivePathUpdate(`${parent}/${child}`);
+            setCreateDirectoryOpen(false);
+        }
+    }, [createDirectoryResult, onActivePathUpdate, parent, child]);
+
+    React.useEffect(() => {
+        if (createDirectoryResult.isError) {
+            const errorMessage =
+                (createDirectoryResult.error as {data: string})?.data || ' Unknown error';
+            setError(errorMessage);
         }
-    }, [isSuccess, requestId]);
+    }, [createDirectoryResult]);
 
     React.useEffect(() => {
         // if the cached path is not in the current tree, show root
@@ -75,19 +86,20 @@ export function SchemaTree(props: SchemaTreeProps) {
         setCreateDirectoryOpen(false);
     };
 
-    const handleCreateDirectorySubmit = (child: string) => {
-        createDirectory({database: parent, path: `${parent}/${child}`});
-
-        onActivePathUpdate(`${parent}/${child}`);
-
-        setCreateDirectoryOpen(false);
+    const handleCreateDirectorySubmit = (value: string) => {
+        setChild(value);
+        createDirectory({database: parent, path: `${parent}/${value}`});
     };
 
-    const handleOpenCreateDirectoryDialog = (path: string) => {
-        setParent(path);
+    const handleOpenCreateDirectoryDialog = (value: string) => {
+        setParent(value);
         setCreateDirectoryOpen(true);
     };
 
+    const handleCreateDirectoryUpdate = React.useCallback(() => {
+        setError('');
+    }, []);
+
     return (
         <React.Fragment>
             <CreateDirectoryDialog
@@ -95,6 +107,9 @@ export function SchemaTree(props: SchemaTreeProps) {
                 parent={parent}
                 onClose={handleCreateDirectoryClose}
                 onSubmit={handleCreateDirectorySubmit}
+                onUpdate={handleCreateDirectoryUpdate}
+                isLoading={createDirectoryResult.isLoading}
+                error={error}
             />
             <NavigationTree
                 key={navigationTreeKey}