fix(FR-2813): render folder-create notification with VFolder node card

Author: ironAiken2

react/src/components/BAIGeneralNotificationItem.tsx

@@ -29,6 +29,10 @@ const BAIGeneralNotificationItem: React.FC<{
   const { token } = theme.useToken();
   const [showExtraDescription, setShowExtraDescription] = useState(false);
 
+  // antd v6 deprecated `notification.message` in favor of `notification.title`.
+  // Read `title` first and fall back to `message` so legacy callers that still
+  // populate `message` keep rendering until they migrate.
+  const headerContent = notification.title ?? notification.message;
   const explicitIcon = notification.icon === 'folder' ? <FolderIcon /> : null;
   const icon =
     explicitIcon ||
@@ -62,11 +66,11 @@ const BAIGeneralNotificationItem: React.FC<{
                 fontWeight: 500,
               }}
             >
-              {_.isString(notification.message)
-                ? _.truncate(notification.message, {
+              {_.isString(headerContent)
+                ? _.truncate(headerContent, {
                     length: 200,
                   })
-                : notification.message}
+                : headerContent}
             </Typography.Paragraph>
           </BAIFlex>
           <BAIFlex direction="row" align="end" gap={'xxs'} justify="between">

react/src/components/BAINodeNotificationItem.tsx

@@ -4,17 +4,16 @@
  */
 import { NotificationState } from '../hooks/useBAINotification';
 import BAIComputeSessionNodeNotificationItem from './BAIComputeSessionNodeNotificationItem';
-import BAIVFolderNotificationItem from './BAIVFolderNotificationItem';
-import BAIVirtualFolderNodeNotificationItem from './BAIVirtualFolderNodeNotificationItem';
+import BAIVirtualFolderNodeNotificationItemV2 from './BAIVirtualFolderNodeNotificationItemV2';
 import React from 'react';
 import { graphql, useRefetchableFragment } from 'react-relay';
 import { BAINodeNotificationItemFragment$key } from 'src/__generated__/BAINodeNotificationItemFragment.graphql';
 
-// `... on VFolder` is the V2 (Strawberry GraphQL, FR-2573) branch and the
-// preferred path for new VFolder list/mutation flows.
-// `... on VirtualFolderNode` is the legacy V1 branch and is **deprecated** —
-// kept here only so callers that still hold V1 fragments keep rendering. It
-// will be removed once all VFolder callers migrate to V2 `VFolder`.
+// `... on VFolder` is the V2 (Strawberry GraphQL, FR-2573) branch — the only
+// VFolder-side path. The legacy `... on VirtualFolderNode` (V1) branch and its
+// `BAIVirtualFolderNodeNotificationItem` component were removed once the last
+// V1 producer (`VFolderNodes.tsx` error notifications) migrated to inline
+// `title` ReactNodes that no longer need this polymorphic dispatcher.
 const nodeFragmentOperation = graphql`
   fragment BAINodeNotificationItemFragment on Node
   @refetchable(queryName: "BAINodeNotificationItemRefetchQuery") {
@@ -28,13 +27,8 @@ const nodeFragmentOperation = graphql`
     }
     ... on VFolder {
       __typename
-      ...BAIVFolderNotificationItemFragment @alias(as: "vfolderFrgmt")
-    }
-    ... on VirtualFolderNode {
-      __typename
-      status
-      ...BAIVirtualFolderNodeNotificationItemFragment
-        @alias(as: "virtualFolderNodeFrgmt")
+      ...BAIVirtualFolderNodeNotificationItemV2Fragment
+        @alias(as: "vfolderFrgmt")
     }
   }
 `;
@@ -57,23 +51,12 @@ const BAINodeNotificationItem: React.FC<{
     );
   } else if (node?.__typename === 'VFolder') {
     return (
-      <BAIVFolderNotificationItem
+      <BAIVirtualFolderNodeNotificationItemV2
         notification={notification}
         vfolderFrgmt={node.vfolderFrgmt || null}
         showDate={showDate}
       />
     );
-  } else if (node?.__typename === 'VirtualFolderNode') {
-    // @deprecated Renders the legacy V1 VFolder notification. Will be removed
-    // once all V1 callers are gone — see the matching note on the V2 branch
-    // above.
-    return (
-      <BAIVirtualFolderNodeNotificationItem
-        notification={notification}
-        virtualFolderNodeFrgmt={node.virtualFolderNodeFrgmt || null}
-        showDate={showDate}
-      />
-    );
   } else {
     // console.warn('Unknown node type in BAINodeNotificationItem:', node);
     return null;

react/src/components/BAIVirtualFolderNodeNotificationItem.tsx

@@ -3,6 +3,7 @@
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
 import BAINotificationBackgroundProgress from './BAINotificationBackgroundProgress';
+import { useFolderExplorerOpener } from './FolderExplorerOpener';
 import { useToggle } from 'ahooks';
 import { Card, List, theme, Typography } from 'antd';
 import {
@@ -16,16 +17,15 @@ import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
-import { BAIVFolderNotificationItemFragment$key } from 'src/__generated__/BAIVFolderNotificationItemFragment.graphql';
-import { useWebUINavigate } from 'src/hooks';
+import { BAIVirtualFolderNodeNotificationItemV2Fragment$key } from 'src/__generated__/BAIVirtualFolderNodeNotificationItemV2Fragment.graphql';
 import {
   NotificationState,
   useSetBAINotification,
 } from 'src/hooks/useBAINotification';
 
-interface BAIVFolderNotificationItemProps {
+interface BAIVirtualFolderNodeNotificationItemV2Props {
   notification: NotificationState;
-  vfolderFrgmt: BAIVFolderNotificationItemFragment$key | null;
+  vfolderFrgmt: BAIVirtualFolderNodeNotificationItemV2Fragment$key | null;
   showDate?: boolean;
 }
 
@@ -34,14 +34,12 @@ interface BAIVFolderNotificationItemProps {
 // list/mutation flows can pass `node: vfolder` to `upsertNotification` and
 // get the same rich folder-link + extra-description rendering as the legacy
 // V1 path. The V1 component stays in place until all callers migrate.
-const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
-  notification,
-  vfolderFrgmt,
-  showDate,
-}) => {
+const BAIVirtualFolderNodeNotificationItemV2: React.FC<
+  BAIVirtualFolderNodeNotificationItemV2Props
+> = ({ notification, vfolderFrgmt, showDate }) => {
   'use memo';
 
-  const navigate = useWebUINavigate();
+  const { open: openFolderExplorer } = useFolderExplorerOpener();
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { closeNotification } = useSetBAINotification();
@@ -50,7 +48,7 @@ const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
 
   const node = useFragment(
     graphql`
-      fragment BAIVFolderNotificationItemFragment on VFolder {
+      fragment BAIVirtualFolderNodeNotificationItemV2Fragment on VFolder {
         id
         metadata {
           name
@@ -76,9 +74,9 @@ const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
             }}
             title={folderName || ''}
             onClick={() => {
-              navigate(
-                `/data${localId ? `?${new URLSearchParams({ folder: localId }).toString()}` : ''}`,
-              );
+              if (localId) {
+                openFolderExplorer(localId);
+              }
               closeNotification(notification.key);
             }}
           >
@@ -148,4 +146,4 @@ const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
   );
 };
 
-export default BAIVFolderNotificationItem;
+export default BAIVirtualFolderNodeNotificationItemV2;

…omponents/BAIVFolderNotificationItem.tsx …IVirtualFolderNodeNotificationItemV2.tsxreact/src/components/BAIVFolderNotificationItem.tsx renamed to react/src/components/BAIVirtualFolderNodeNotificationItemV2.tsx react/src/components/BAIVFolderNotificationItem.tsx renamed to react/src/components/BAIVirtualFolderNodeNotificationItemV2.tsx

@@ -197,7 +197,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
         createVfolderV2(input: $input) {
           vfolder {
             id
-            status
+            vfolderStatus: status
             host
             metadata {
               name
@@ -214,6 +214,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
               projectId
               creatorEmail
             }
+            ...BAINodeNotificationItemFragment @alias(as: "notificationFrgmt")
           }
         }
       }
@@ -232,7 +233,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
         createVFolderInProject(projectId: $projectId, input: $input) {
           vfolder {
             id
-            status
+            vfolderStatus: status
             host
             metadata {
               name
@@ -249,6 +250,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
               projectId
               creatorEmail
             }
+            ...BAINodeNotificationItemFragment @alias(as: "notificationFrgmt")
           }
         }
       }
@@ -323,19 +325,14 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
         user: vfolder.ownership.userId ?? '',
         group: vfolder.ownership.projectId ?? null,
         cloneable: vfolder.metadata.cloneable,
-        status: vfolder.status ?? '',
+        status: vfolder.vfolderStatus ?? '',
       };
 
       upsertNotification({
         key: `folder-create-success-${result.id}`,
         icon: 'folder',
-        message: `${result.name}: ${t('data.folders.FolderCreated')}`,
-        toText: t('data.folders.OpenAFolder'),
-        to: {
-          search: new URLSearchParams({
-            folder: result.id,
-          }).toString(),
-        },
+        node: vfolder.notificationFrgmt ?? null,
+        description: t('data.folders.FolderCreated'),
         open: true,
       });
       document.dispatchEvent(new CustomEvent('backend-ai-folder-list-changed'));