feature(FR-1471): migrate the GitHub/GitLab importing feature to React

Author: yomybaby

packages/backend.ai-ui/src/hooks/index.ts

@@ -37,3 +37,4 @@ export { default as useErrorMessageResolver } from './useErrorMessageResolver';
 export { default as useViewer } from './useViewer';
 export type { ErrorResponse } from './useErrorMessageResolver';
 export type { ESMClientErrorResponse } from './useErrorMessageResolver';
+export { default as useGetAvailableFolderName } from './useGetAvailableFolderName';

packages/backend.ai-ui/src/hooks/useGetAvailableFolderName.ts

@@ -0,0 +1,40 @@
+import { useGetAvailableFolderNameQuery } from '../__generated__/useGetAvailableFolderNameQuery.graphql';
+import { generateRandomString } from '../helper';
+import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
+
+export const useGetAvailableFolderName = () => {
+  'use memo';
+  const relayEnv = useRelayEnvironment();
+  return async (seedName: string) => {
+    // Limit folder name length to 64 characters
+    const targetName = seedName.substring(0, 64);
+    const count = await fetchQuery<useGetAvailableFolderNameQuery>(
+      relayEnv,
+      graphql`
+        query useGetAvailableFolderNameQuery($filter: String!) {
+          vfolder_nodes(filter: $filter, permission: "read_attribute") {
+            edges {
+              node {
+                name
+                status
+              }
+            }
+            count
+          }
+        }
+      `,
+      {
+        filter: `(name  == "${targetName}") & (status != "delete-complete")`,
+      },
+    )
+      .toPromise()
+      .then((data) => data?.vfolder_nodes?.count)
+      .catch(() => 0);
+
+    const hash = generateRandomString(5);
+    console.log(targetName, count);
+    return count === 0 ? targetName : `${targetName.substring(0, 58)}_${hash}`;
+  };
+};
+
+export default useGetAvailableFolderName;

react/src/components/ImportNotebook.tsx

@@ -54,6 +54,7 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
           } as PrimaryAppOption,
         },
       ]);
+      webuiNavigate('/session');
     }
 
     if (results?.rejected && results.rejected.length > 0) {
@@ -63,13 +64,10 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
         content: getErrorMessage(error),
       });
     }
-
-    webuiNavigate('/session');
-
   };
 
   return (
-    <Form ref={formRef} layout="inline" {...props}>
+    <Form ref={formRef} layout="vertical" {...props}>
       <Form.Item
         name="url"
         label={t('import.NotebookURL')}
@@ -95,6 +93,7 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
       <BAIButton
         icon={<CloudDownloadOutlined />}
         type="primary"
+        block
         action={async () => {
           const values = await formRef.current
             ?.validateFields()