feat(FR-2688): migrate notification item VirtualFolderNode branch to Strawberry V2

Author: ironAiken2

react/src/components/BAINodeNotificationItem.tsx

@@ -4,7 +4,7 @@
  */
 import { NotificationState } from '../hooks/useBAINotification';
 import BAIComputeSessionNodeNotificationItem from './BAIComputeSessionNodeNotificationItem';
-import BAIVirtualFolderNodeNotificationItem from './BAIVirtualFolderNodeNotificationItem';
+import BAIVFolderNotificationItem from './BAIVFolderNotificationItem';
 import React from 'react';
 import { graphql, useRefetchableFragment } from 'react-relay';
 import { BAINodeNotificationItemFragment$key } from 'src/__generated__/BAINodeNotificationItemFragment.graphql';
@@ -20,11 +20,9 @@ const nodeFragmentOperation = graphql`
       ...BAIComputeSessionNodeNotificationItemFragment
         @alias(as: "sessionFrgmt")
     }
-    ... on VirtualFolderNode {
+    ... on VFolder {
       __typename
-      status
-      ...BAIVirtualFolderNodeNotificationItemFragment
-        @alias(as: "virtualFolderNodeFrgmt")
+      ...BAIVFolderNotificationItemFragment @alias(as: "vfolderFrgmt")
     }
   }
 `;
@@ -45,11 +43,11 @@ const BAINodeNotificationItem: React.FC<{
         primaryAppOption={notification.extraData}
       />
     );
-  } else if (node?.__typename === 'VirtualFolderNode') {
+  } else if (node?.__typename === 'VFolder') {
     return (
-      <BAIVirtualFolderNodeNotificationItem
+      <BAIVFolderNotificationItem
         notification={notification}
-        virtualFolderNodeFrgmt={node.virtualFolderNodeFrgmt || null}
+        vfolderFrgmt={node.vfolderFrgmt || null}
         showDate={showDate}
       />
     );

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

@@ -5,27 +5,35 @@
 import BAINotificationBackgroundProgress from './BAINotificationBackgroundProgress';
 import { useToggle } from 'ahooks';
 import { Card, List, theme, Typography } from 'antd';
-import { BAIFlex, BAILink, BAINotificationItem, BAIText } from 'backend.ai-ui';
+import {
+  BAIFlex,
+  BAILink,
+  BAINotificationItem,
+  BAIText,
+  toLocalId,
+} from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 import { useNavigate } from 'react-router-dom';
-import { BAIVirtualFolderNodeNotificationItemFragment$key } from 'src/__generated__/BAIVirtualFolderNodeNotificationItemFragment.graphql';
+import { BAIVFolderNotificationItemFragment$key } from 'src/__generated__/BAIVFolderNotificationItemFragment.graphql';
 import {
   NotificationState,
   useSetBAINotification,
 } from 'src/hooks/useBAINotification';
 
-interface BAIVirtualFolderNodeNotificationItemProps {
+interface BAIVFolderNotificationItemProps {
   notification: NotificationState;
-  virtualFolderNodeFrgmt: BAIVirtualFolderNodeNotificationItemFragment$key | null;
+  vfolderFrgmt: BAIVFolderNotificationItemFragment$key | null;
   showDate?: boolean;
 }
 
-const BAIVirtualFolderNodeNotificationItem: React.FC<
-  BAIVirtualFolderNodeNotificationItemProps
-> = ({ notification, virtualFolderNodeFrgmt, showDate }) => {
+const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
+  notification,
+  vfolderFrgmt,
+  showDate,
+}) => {
   'use memo';
 
   const navigate = useNavigate();
@@ -37,16 +45,19 @@ const BAIVirtualFolderNodeNotificationItem: React.FC<
 
   const node = useFragment(
     graphql`
-      fragment BAIVirtualFolderNodeNotificationItemFragment on VirtualFolderNode {
-        row_id
+      fragment BAIVFolderNotificationItemFragment on VFolder {
         id
-        name
-        status
+        metadata {
+          name
+        }
       }
     `,
-    virtualFolderNodeFrgmt,
+    vfolderFrgmt,
   );
 
+  const folderName = node?.metadata?.name;
+  const folderLocalId = node?.id ? toLocalId(node.id) : undefined;
+
   return (
     node && (
       <BAINotificationItem
@@ -57,15 +68,15 @@ const BAIVirtualFolderNodeNotificationItem: React.FC<
               style={{
                 fontWeight: 'normal',
               }}
-              title={node.name || ''}
+              title={folderName || ''}
               onClick={() => {
                 navigate(
-                  `/data${node.row_id ? `?${new URLSearchParams({ folder: node.row_id }).toString()}` : ''}`,
+                  `/data${folderLocalId ? `?${new URLSearchParams({ folder: folderLocalId }).toString()}` : ''}`,
                 );
                 closeNotification(notification.key);
               }}
             >
-              {node.name}
+              {folderName}
             </BAILink>
           </BAIText>
         }
@@ -138,4 +149,4 @@ const BAIVirtualFolderNodeNotificationItem: React.FC<
   );
 };
 
-export default BAIVirtualFolderNodeNotificationItem;
+export default BAIVFolderNotificationItem;