Merge branch 'main' into 26.4

Author: yomybaby

packages/backend.ai-ui/src/components/BAIDeleteConfirmModal.stories.tsx

@@ -20,15 +20,15 @@ const meta: Meta<typeof BAIDeleteConfirmModal> = {
 **BAIDeleteConfirmModal** is a unified delete confirmation modal for table row deletion.
 
 ## Behavior
-- **Single item**: Simple confirm dialog with item name displayed. OK button is immediately enabled.
-- **Multiple items (2+)**: Requires typing confirmation text (localized "Delete") before OK is enabled.
-- **\`requireConfirmInput\`**: Forces text-input confirmation even for a single item.
+- **Single item**: Simple confirm dialog. OK button is immediately enabled.
+- **Single item + \`requireConfirmInput\`**: Requires typing the item name. Item list is hidden — the name already appears in the description.
+- **Multiple items (2+)**: Shows scrollable item list followed by a confirmation input requiring "Delete" to be typed.
 
 ## Key Features
 - Accepts \`React.ReactNode\` for item labels (icons, tags, custom rendering)
-- Scrollable item list for large selections
+- Scrollable item list for multi-item selections
 - \`extraContent\` slot for domain-specific additions (checkboxes, warnings)
-- Built on \`BAIConfirmModalWithInput\` (multi) and \`BAIModal\` (single)
+- Built on \`BAIModal\`
         `,
       },
     },
@@ -74,7 +74,7 @@ export const SingleItemWithInput: Story = {
     docs: {
       description: {
         story:
-          'Single item with `requireConfirmInput={true}`. User must type the item name to confirm.',
+          'Single item with `requireConfirmInput={true}`. Item list is hidden (name already appears in description). User must type the item name into the confirmation input to enable the Delete button.',
       },
     },
   },
@@ -106,7 +106,7 @@ export const MultipleItems: Story = {
     docs: {
       description: {
         story:
-          'Multiple items require typing "Delete" to confirm. Shows scrollable item list.',
+          'Multiple items require typing "Delete" to confirm. Shows scrollable item list above the confirmation input.',
       },
     },
   },

packages/backend.ai-ui/src/components/BAIDeleteConfirmModal.tsx

@@ -1,9 +1,8 @@
-import BAIConfirmModalWithInput from './BAIConfirmModalWithInput';
 import BAIFlex from './BAIFlex';
 import BAIModal, { type BAIModalProps } from './BAIModal';
 import BAIText from './BAIText';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { theme, Typography, type InputProps } from 'antd';
+import { Form, Input, theme, Typography, type InputProps } from 'antd';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -39,7 +38,7 @@ export interface BAIDeleteConfirmModalProps extends Omit<
   inputLabel?: React.ReactNode;
   /** Additional props for the confirmation Input. */
   inputProps?: InputProps;
-  /** Content rendered between the item list and the input field (e.g. checkboxes). */
+  /** Content rendered between the input field and "cannot be undone" text (e.g. checkboxes). */
   extraContent?: React.ReactNode;
   /** Max height (px) of the scrollable item list. Default: 200. Set 0 for no limit. */
   itemListMaxHeight?: number;
@@ -71,6 +70,8 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
 
   const { t } = useTranslation();
   const { token } = theme.useToken();
+  const [form] = Form.useForm();
+  const typedText = Form.useWatch('confirmText', form) ?? '';
 
   const needsInput = items.length > 1 || requireConfirmInput;
 
@@ -101,6 +102,17 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
     />
   );
 
+  const modalTitle = (
+    <BAIFlex direction="column" justify="start" align="start">
+      <Text strong>
+        <ExclamationCircleFilled
+          style={{ color: token.colorWarning, marginRight: token.sizeXXS }}
+        />
+        {resolvedTitle}
+      </Text>
+    </BAIFlex>
+  );
+
   const itemListContent =
     items.length > 0 ? (
       <div
@@ -125,49 +137,58 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
       </div>
     ) : null;
 
-  const bodyContent = (
-    <BAIFlex direction="column" align="stretch" gap="xs">
-      <Text>{resolvedDescription}</Text>
-      {itemListContent}
-      <Text type="danger">
-        {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
-      </Text>
-      {extraContent}
-    </BAIFlex>
-  );
-
   if (needsInput) {
     return (
-      <BAIConfirmModalWithInput
-        {...restModalProps}
+      <BAIModal
         destroyOnHidden
-        title={resolvedTitle}
-        confirmText={resolvedConfirmText}
-        content={bodyContent}
-        inputLabel={resolvedInputLabel}
-        inputProps={inputProps}
+        {...restModalProps}
+        title={modalTitle}
         okText={resolvedOkText}
-        okButtonProps={okButtonProps}
-        onOk={onOk}
-        onCancel={onCancel}
-      />
+        okButtonProps={{
+          danger: true,
+          disabled: typedText !== resolvedConfirmText,
+          ...okButtonProps,
+        }}
+        onOk={(e) => {
+          form.resetFields();
+          onOk?.(e);
+        }}
+        onCancel={(e) => {
+          form.resetFields();
+          onCancel?.(e);
+        }}
+      >
+        <BAIFlex direction="column" align="stretch" gap="xs">
+          <Text>{resolvedDescription}</Text>
+          {items.length > 1 && itemListContent}
+          <Form
+            form={form}
+            layout="vertical"
+            requiredMark={false}
+            preserve={false}
+          >
+            <Form.Item
+              name="confirmText"
+              label={resolvedInputLabel}
+              style={{ marginBottom: 0 }}
+            >
+              <Input autoFocus autoComplete="off" allowClear {...inputProps} />
+            </Form.Item>
+          </Form>
+          <Text type="danger">
+            {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
+          </Text>
+          {extraContent}
+        </BAIFlex>
+      </BAIModal>
     );
   }
 
   return (
     <BAIModal
       {...restModalProps}
       destroyOnHidden
-      title={
-        <BAIFlex direction="column" justify="start" align="start">
-          <Text strong>
-            <ExclamationCircleFilled
-              style={{ color: token.colorWarning, marginRight: 5 }}
-            />
-            {resolvedTitle}
-          </Text>
-        </BAIFlex>
-      }
+      title={modalTitle}
       okText={resolvedOkText}
       okButtonProps={{
         danger: true,
@@ -177,7 +198,14 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
       onOk={onOk}
       onCancel={onCancel}
     >
-      {bodyContent}
+      <BAIFlex direction="column" align="stretch" gap="xs">
+        <Text>{resolvedDescription}</Text>
+        {itemListContent}
+        <Text type="danger">
+          {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
+        </Text>
+        {extraContent}
+      </BAIFlex>
     </BAIModal>
   );
 };

packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx

@@ -475,9 +475,12 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
     onChange: propOnChange,
   });
 
-  const [conditions, setConditions] = useState<FilterCondition[]>(() =>
-    convertGraphQLFilterToConditions(value, filterProperties),
-  );
+  // Reassign sequential ids: the converter generates random ids per call,
+  // which would change every render and remount every Tag.
+  const conditions = convertGraphQLFilterToConditions(
+    value,
+    filterProperties,
+  ).map((c, i) => ({ ...c, id: `cond-${i}` }));
 
   const [search, setSearch] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);
@@ -505,15 +508,11 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
   const [isValid, setIsValid] = useState(true);
   const [isFocused, setIsFocused] = useState(false);
 
-  const propertyOptions = useMemo(
-    () =>
-      filterProperties.map((property) => ({
-        label: property.propertyLabel,
-        value: property.key,
-        filter: property,
-      })),
-    [filterProperties],
-  );
+  const propertyOptions = filterProperties.map((property) => ({
+    label: property.propertyLabel,
+    value: property.key,
+    filter: property,
+  }));
 
   const availableOperators = useMemo(() => {
     const mode = getEffectiveValueMode(selectedProperty);
@@ -536,7 +535,6 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
   }, [availableOperators, t]);
 
   const updateConditions = (newConditions: FilterCondition[]) => {
-    setConditions(newConditions);
     const filter = convertConditionsToGraphQLFilter(
       newConditions,
       filterProperties,

packages/backend.ai-ui/src/locale/ko.json

@@ -96,7 +96,7 @@
     "CannotBeUndone": "이 작업은 되돌릴 수 없습니다.",
     "DeleteItem": "삭제",
     "DeleteNItems": "{{count}}개 항목 삭제",
-    "TypeToConfirm": "<code>{{confirmText}}</code>을(를) 입력하여 확인하세요."
+    "TypeToConfirm": "삭제를 위해 <code>{{confirmText}}</code>을(를) 입력하세요."
   },
   "comp:BAIDeploymentSelect": {
     "SelectDeployment": "배포를 선택해주세요"

packages/eslint-config-bai/react.js

@@ -36,6 +36,20 @@ export const react = [
     },
   },
 
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "no-restricted-syntax": [
+        "warn",
+        {
+          selector: "ImportDeclaration[source.value=/^src\\u002F.+/]",
+          message:
+            "Use a relative import path instead of 'src/...'. Mixing absolute and relative paths in the same file is inconsistent; prefer relative paths.",
+        },
+      ],
+    },
+  },
+
   {
     files: ["**/*.tsx", "**/*.jsx"],
     rules: {

react/src/components/AdminModelCardSettingModal.tsx

@@ -11,8 +11,7 @@ import {
 } from '../hooks/useCurrentProject';
 import FolderCreateModalV2 from './FolderCreateModalV2';
 import FolderLink from './FolderLink';
-import { shapes } from '@dicebear/collection';
-import { createAvatar } from '@dicebear/core';
+import VFolderNodeIdenticonV2 from './VFolderNodeIdenticonV2';
 import {
   App,
   Button,
@@ -23,7 +22,6 @@ import {
   Popconfirm,
   Select,
   Typography,
-  theme,
 } from 'antd';
 import {
   BAIButton,
@@ -33,7 +31,6 @@ import {
   BAIVFolderSelect,
   BAIVFolderSelectRef,
   convertToUUID,
-  mergeFilterValues,
   toGlobalId,
   toLocalId,
   useBAILogger,
@@ -83,7 +80,6 @@ const AdminModelCardSettingModal: React.FC<AdminModelCardSettingModalProps> = ({
   const { t } = useTranslation();
   const { message } = App.useApp();
   const { logger } = useBAILogger();
-  const { token } = theme.useToken();
   const formRef = useRef<FormInstance<FormInputType>>(null);
   const vfolderSelectRef = useRef<BAIVFolderSelectRef>(null);
   const [isOpenCreateFolderModal, setIsOpenCreateFolderModal] = useState(false);
@@ -101,6 +97,7 @@ const AdminModelCardSettingModal: React.FC<AdminModelCardSettingModalProps> = ({
           metadata {
             name
           }
+          ...VFolderNodeIdenticonV2Fragment
         }
         domainName
         projectId
@@ -307,21 +304,11 @@ const AdminModelCardSettingModal: React.FC<AdminModelCardSettingModalProps> = ({
           {isEditMode ? (
             <Form.Item label={t('adminModelCard.ModelStorageFolder')}>
               <BAIFlex gap="xs" align="center">
-                <img
-                  src={createAvatar(shapes, {
-                    seed: modelCard.vfolderId,
-                    shape3: [],
-                  })?.toDataUri()}
-                  alt="VFolder Identicon"
-                  style={{
-                    borderRadius: '0.25em',
-                    width: '1em',
-                    height: '1em',
-                    borderWidth: 0.5,
-                    borderStyle: 'solid',
-                    borderColor: token.colorBorder,
-                  }}
-                />
+                {modelCard.vfolder && (
+                  <VFolderNodeIdenticonV2
+                    vfolderNodeIdenticonFrgmt={modelCard.vfolder}
+                  />
+                )}
                 <FolderLink
                   folderId={modelCard.vfolderId}
                   folderName={
@@ -347,8 +334,8 @@ const AdminModelCardSettingModal: React.FC<AdminModelCardSettingModalProps> = ({
                     <BAIVFolderSelect
                       ref={vfolderSelectRef}
                       excludeDeleted
-                      currentProjectId={currentProject.id ?? undefined}
-                      filter={mergeFilterValues(['ownership_type == "group"'])}
+                      filter='ownership_type == "group"'
+                      currentProjectId={modelStoreProject?.id ?? undefined}
                       style={{ flex: 1 }}
                     />
                   </Form.Item>

react/src/components/AgentDetailDrawer.tsx

@@ -2,13 +2,13 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
+import { AgentDetailDrawerFragment$key } from '../__generated__/AgentDetailDrawerFragment.graphql';
 import AgentDetailDrawerContent from './AgentDetailDrawerContent';
 import { Drawer, type DrawerProps, Skeleton } from 'antd';
 import { BAIFetchKeyButton, toLocalId, useBAILogger } from 'backend.ai-ui';
 import { Suspense, useEffect, useEffectEvent, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useMutation, useRefetchableFragment } from 'react-relay';
-import { AgentDetailDrawerFragment$key } from 'src/__generated__/AgentDetailDrawerFragment.graphql';
 
 interface AgentDetailDrawerProps extends DrawerProps {
   onRequestClose?: () => void;

react/src/components/AgentDetailDrawerContent.tsx

@@ -2,6 +2,8 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
+import { AgentDetailDrawerContentFragment$key } from '../__generated__/AgentDetailDrawerContentFragment.graphql';
+import { useSuspendedBackendaiClient } from '../hooks';
 import AgentActionButtons from './AgentNodeItems/AgentActionButtons';
 import AgentComputePlugins from './AgentNodeItems/AgentComputePlugins';
 import AgentResources from './AgentNodeItems/AgentResources';
@@ -19,8 +21,6 @@ import * as _ from 'lodash-es';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
-import { AgentDetailDrawerContentFragment$key } from 'src/__generated__/AgentDetailDrawerContentFragment.graphql';
-import { useSuspendedBackendaiClient } from 'src/hooks';
 
 interface AgentDetailDrawerContentProps {
   agentNodeFrgmt?: AgentDetailDrawerContentFragment$key | null;

react/src/components/AgentList.tsx

@@ -8,6 +8,7 @@ import {
   AgentListQuery$variables,
 } from '../__generated__/AgentListQuery.graphql';
 import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
+import { useBAISettingUserState } from '../hooks/useBAISetting';
 import { useThemeMode } from '../hooks/useThemeMode';
 import AgentDetailDrawer from './AgentDetailDrawer';
 import BAIRadioGroup from './BAIRadioGroup';
@@ -32,7 +33,6 @@ import { parseAsString, useQueryStates } from 'nuqs';
 import React, { useState, useDeferredValue } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
-import { useBAISettingUserState } from 'src/hooks/useBAISetting';
 
 type Agent = NonNullable<
   NonNullable<AgentListQuery$data['agent_nodes']>['edges'][number]