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-data.instructions.md

@@ -0,0 +1,7 @@
+가---
+applyTo: "react/data/**/*"
+---
+
+- Use `react/data` for deterministic fixtures only. Keep JSON/TS files lightweight, versioned, and aligned with Backend.AI API schemas.
+- Annotate sample payloads with comments or README links where appropriate, and avoid embedding secrets or production identifiers.
+- Update dependent tests or demos when fixture structure changes and validate serialization via TypeScript definitions.

react-instructions.md

@@ -0,0 +1,47 @@
+# Copilot React Review Instruction
+
+## Purpose
+This document outlines the review guidelines Copilot should follow when evaluating changes under the `/react` directory. The React SPA powers the latest Backend.AI Web UI features and ships web component wrappers that integrate with the legacy Lit-based shell.
+
+## Review Focus Areas
+- **Structure & Patterns**
+  - New components must be loaded via `React.lazy`, rendered inside `DefaultProviders`, and registered with `reactToWebComponent` using the `backend-ai-react-*` naming convention in `customElements.define`.
+  - When slotting Lit web components into React wrappers, ensure the README-documented `<slot>` pattern is respected.
+- **Data & State Management**
+  - GraphQL updates require matching Relay compiler artifacts. Confirm `pnpm run relay` output is committed whenever fragments or queries change.
+  - For TanStack Query, Jotai, and custom hooks, verify cache keys/atom names are stable and avoid unnecessary re-renders.
+  - Backend.AI client access should go through provided hooks such as `useSuspendedBackendaiClient`.
+- **Styling & Theme**
+  - Disallow direct CSS imports. Prefer inline styles, CSS-in-JS, or `?raw` string imports injected via `<style>` tags.
+  - Ant Design v5 theme tokens and `resources/theme.json` must be respected to prevent leaking global styles.
+- **Static Assets**
+  - Images/fonts should live under `/resources` and be referenced by path—avoid bundling assets via import statements.
+- **Internationalization**
+  - Wrap new user-facing strings with `react-i18next` utilities and provide translation keys in `resources/i18n/*.json`.
+- **Validation & Quality**
+  - Maintain strict TypeScript typing with minimal `any` usage and honor ESLint rules (`import/no-duplicates`, unused vars suppression via `_` prefix, etc.).
+  - Update Jest specs (`react/__test__`) or Storybook stories when behavior changes warrant it.
+  - Ensure asynchronous flows supply loading and error UI consistent with `Suspense`/`ErrorBoundary` patterns.
+- **Build & Dependencies**
+  - New dependencies belong in `react/package.json` using `workspace:*` or appropriate semver ranges.
+  - Changes to CRACO or build setup must pass `pnpm run build:only`.
+- **Accessibility & UX**
+  - Confirm ARIA attributes, keyboard navigation, and focus handling meet accessibility expectations.
+
+## Review Checklist
+1. Style: `pnpm --filter react lint` passes without violations.
+2. Format: `pnpm --filter react format` (or `format-fix`) succeeds.
+3. Types/Relay: Run `pnpm run relay` and, if needed, `pnpm dlx tsc`.
+4. Tests: Execute `pnpm --filter react test` or other relevant suites.
+5. Build: For major UI updates, run `pnpm run build:react-only` to verify bundling.
+6. Resources: Confirm i18n JSON, theme files, static paths, and docs are updated when required.
+
+## Reference Commands
+- Dev server: `pnpm run server:d`
+- Lint: `pnpm --filter react lint`
+- Format: `pnpm --filter react format`
+- Test: `pnpm --filter react test`
+- Relay compile: `pnpm run relay`
+- Storybook: `pnpm --filter react storybook`
+
+Copilot should recommend fixes whenever changes fail to meet these standards.

react-patches.instructions.md

@@ -0,0 +1,7 @@
+---
+applyTo: "react/patches/**/*"
+---
+
+- Each patch must be generated with `pnpm exec patch-package` and accompanied by a note in the PR explaining why upstream cannot be updated. Keep patches minimal and scoped to the issue at hand.
+- Preserve existing headers added by patch-package and ensure the target dependency version matches `package.json`. Update or remove patches when bumping dependencies.
+- Verify patched packages still satisfy lint/build steps (`pnpm --filter react lint`, `pnpm run build:react-only`).

react-public.instructions.md

@@ -0,0 +1,7 @@
+---
+applyTo: "react/public/**/*"
+---
+
+- Static assets served from `react/public` should be optimized (SVG preferred, no unused bitmap variants) and referenced via absolute paths; avoid importing them into bundles.
+- Keep `index.html` adjustments minimal and compatible with CRACO overrides—ensure injected scripts honor CSP and do not reintroduce deprecated polyfills.
+- Update cache-busting or manifest references alongside `resources/` when assets move, and document any new public endpoints in relevant README sections.

react-src.instructions.md

@@ -0,0 +1,19 @@
+applyTo: "react/src/**/*.{ts,tsx}"
+---
+
+- **React 19 & Compiler Alignment**
+  - Keep components pure and side-effect free during render so React Compiler can optimize them; lift expensive calculations outside component bodies or wrap them with `useMemo` only when referential stability is required (e.g. Ant Design props, Relay variables).
+  - Use stable hook signatures (`useSuspenseQuery`, TanStack Query hooks, Jotai atoms) and avoid conditional hooks. Prefer `useEffectEvent` or event handlers defined outside `useEffect` bodies to prevent stale closures.
+  - Compose async flows with `Suspense`/`ErrorBoundary`, `useTransition`, and `useDeferredValue` where appropriate; when using the experimental `use` helper, gate it behind feature flags that match Backend.AI server capabilities.
+- **Component Structure**
+  - Lazy load new pages/components via `React.lazy` and wrap them with `DefaultProviders` before calling `reactToWebComponent`. Follow the `backend-ai-react-*` naming convention in `customElements.define` and expose slots consistent with existing wrappers.
+  - Co-locate derived hooks and helper functions next to their components; hoist shared logic into `packages/backend.ai-ui` or dedicated hooks to prevent duplication.
+- **Data & State**
+  - Keep Relay fragments colocated and run `pnpm run relay` whenever schema fragments change. Commit generated artifacts and ensure query variables remain serializable.
+  - For TanStack Query / Jotai, define cache keys/atoms in stable modules and document invalidation rules. Prefer optimistic updates + `queryClient.invalidateQueries` rather than manual state mutation.
+- **Styling & Assets**
+  - Honor Ant Design v5 token usage (`resources/theme.json`) and shadow DOM isolation. Do not import `.css`/`.less` into components; inject styles via inline props, CSS-in-JS, or `?raw` string resources.
+  - Reference images/fonts through `/resources` paths to keep CRA bundles lean. Run accessibility checks for new UI (ARIA labels, keyboard focus, reduced motion support).
+- **Internationalization & Quality**
+  - Wrap user-visible copy with `react-i18next` helpers and update corresponding entries in `resources/i18n/*.json`.
+  - Maintain strict TypeScript typing; avoid `any`, prefer discriminated unions for API responses, and extend shared types in `@backend.ai-ui` where possible. Update Storybook stories/Jest specs when behavior shifts.

react-storybook.instructions.md

@@ -0,0 +1,7 @@
+---
+applyTo: "react/.storybook/**/*"
+---
+
+- Keep Storybook configuration aligned with Ant Design v5 and React 19 baseline; ensure global decorators wrap stories with `DefaultProviders` and theming tokens.
+- When adjusting preview parameters or webpack/craco overrides, verify compatibility with Relay mock environment and CSS-in-JS injection patterns.
+- Document any new addons or manager customizations in README/CHANGELOG and confirm `pnpm --filter react storybook` runs without warnings.

react-tests.instructions.md

@@ -0,0 +1,8 @@
+---
+applyTo: "react/__test__/**/*"
+---
+
+- Mirror production behavior by using React Testing Library and Jest with `NODE_OPTIONS='--no-deprecation'`. Prefer user-centric queries and avoid brittle selectors.
+- Provide coverage for new hooks or components under test, mocking Backend.AI clients via existing helpers. Keep Relay environment mocks updated and regenerate snapshots responsibly.
+- Localize expectations: assert translated output via i18n keys rather than hardcoded strings. Ensure loading/error states align with `Suspense` and `ErrorBoundary` flows.
+- Run `pnpm --filter react test` after changes and include any new fixtures or mock data alongside tests.