feat(FR-1296): Improve error message for deleting in-use vfolder

react/src/components/BAIGeneralNotificationItem.tsx

@@ -1,10 +1,11 @@
 import { NotificationState } from '../hooks/useBAINotification';
+import BAINotificationBackgroundItem from './BAINotificationBackgroundItem';
 import {
   CheckCircleOutlined,
   ClockCircleOutlined,
   CloseCircleOutlined,
 } from '@ant-design/icons';
-import { Button, Card, List, Progress, Typography, theme } from 'antd';
+import { Button, Card, List, Typography, theme } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -117,36 +118,23 @@ const BAIGeneralNotificationItem: React.FC<{
                 marginTop: token.marginSM,
               }}
             >
-              <Typography.Text type="secondary" copyable>
-                {notification.extraDescription}
-              </Typography.Text>
+              {_.isString(notification.extraDescription) ? (
+                <Typography.Text type="secondary" copyable>
+                  {notification.extraDescription}
+                </Typography.Text>
+              ) : (
+                notification.extraDescription
+              )}
             </Card>
           ) : null}
 
           <BAIFlex direction="row" align="center" justify="end" gap={'sm'}>
-            {notification.backgroundTask &&
-            _.isNumber(notification.backgroundTask.percent) ? (
-              <Progress
-                size="small"
-                showInfo={false}
-                percent={notification.backgroundTask.percent}
-                strokeColor={
-                  notification.backgroundTask.status === 'rejected'
-                    ? token.colorTextDisabled
-                    : undefined
-                }
-                style={{
-                  margin: 0,
-                  opacity:
-                    notification.backgroundTask.status === 'resolved' &&
-                    showDate
-                      ? 0
-                      : 1,
-                }}
-
-                // status={item.progressStatus}
+            {notification.backgroundTask && (
+              <BAINotificationBackgroundItem
+                backgroundTask={notification.backgroundTask}
+                showDate={showDate}
               />
-            ) : null}
+            )}
             {showDate ? (
               <BAIFlex>
                 <Typography.Text type="secondary">

react/src/components/BAINodeNotificationItem.tsx

@@ -1,5 +1,6 @@
 import { NotificationState } from '../hooks/useBAINotification';
 import BAIComputeSessionNodeNotificationItem from './BAIComputeSessionNodeNotificationItem';
+import BAIVirtualFolderNodeNotificationItem from './BAIVirtualFolderNodeNotificationItem';
 import React from 'react';
 import { graphql, useRefetchableFragment } from 'react-relay';
 import { BAINodeNotificationItemFragment$key } from 'src/__generated__/BAINodeNotificationItemFragment.graphql';
@@ -18,6 +19,8 @@ const nodeFragmentOperation = graphql`
     ... on VirtualFolderNode {
       __typename
       status
+      ...BAIVirtualFolderNodeNotificationItemFragment
+        @alias(as: "virtualFolderNodeFrgmt")
     }
   }
 `;
@@ -39,6 +42,13 @@ const BAINodeNotificationItem: React.FC<{
       />
     );
   } else if (node?.__typename === 'VirtualFolderNode') {
+    return (
+      <BAIVirtualFolderNodeNotificationItem
+        notification={notification}
+        virtualFolderNodeFrgmt={node.virtualFolderNodeFrgmt || null}
+        showDate={showDate}
+      />
+    );
   } else {
     // console.warn('Unknown node type in BAINodeNotificationItem:', node);
     return null;

react/src/components/BAINotificationBackgroundItem.tsx

@@ -0,0 +1,35 @@
+import { Progress, theme } from 'antd';
+import _ from 'lodash';
+import { NotificationState } from 'src/hooks/useBAINotification';
+
+interface BAINotificationBackgroundItemProps {
+  backgroundTask: NotificationState['backgroundTask'];
+  showDate?: boolean;
+}
+
+const BAINotificationBackgroundItem: React.FC<
+  BAINotificationBackgroundItemProps
+> = ({ backgroundTask, showDate }) => {
+  'use memo';
+
+  const { token } = theme.useToken();
+
+  return _.isNumber(backgroundTask?.percent) ? (
+    <Progress
+      size="small"
+      showInfo={false}
+      percent={backgroundTask.percent}
+      strokeColor={
+        backgroundTask.status === 'rejected'
+          ? token.colorTextDisabled
+          : undefined
+      }
+      style={{
+        margin: 0,
+        opacity: backgroundTask.status === 'resolved' && showDate ? 0 : 1,
+      }}
+    />
+  ) : null;
+};
+
+export default BAINotificationBackgroundItem;

react/src/components/BAIVirtualFolderNodeNotificationItem.tsx

@@ -0,0 +1,135 @@
+import BAINotificationBackgroundItem from './BAINotificationBackgroundItem';
+import { useToggle } from 'ahooks';
+import { Card, List, theme, Typography } from 'antd';
+import { BAIFlex, BAILink, BAINotificationItem, BAIText } from 'backend.ai-ui';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+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 {
+  NotificationState,
+  useSetBAINotification,
+} from 'src/hooks/useBAINotification';
+
+interface BAIVirtualFolderNodeNotificationItemProps {
+  notification: NotificationState;
+  virtualFolderNodeFrgmt: BAIVirtualFolderNodeNotificationItemFragment$key | null;
+  showDate?: boolean;
+}
+
+const BAIVirtualFolderNodeNotificationItem: React.FC<
+  BAIVirtualFolderNodeNotificationItemProps
+> = ({ notification, virtualFolderNodeFrgmt, showDate }) => {
+  'use memo';
+
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { closeNotification } = useSetBAINotification();
+  const [showExtraDescription, { toggle: toggleShowExtraDescription }] =
+    useToggle(false);
+
+  const node = useFragment(
+    graphql`
+      fragment BAIVirtualFolderNodeNotificationItemFragment on VirtualFolderNode {
+        row_id
+        id
+        name
+        status
+      }
+    `,
+    virtualFolderNodeFrgmt,
+  );
+
+  return (
+    node && (
+      <BAINotificationItem
+        title={
+          <BAIText ellipsis>
+            {t('general.Folder')}:&nbsp;
+            <BAILink
+              style={{
+                fontWeight: 'normal',
+              }}
+              title={node.name || ''}
+              onClick={() => {
+                navigate(
+                  `/data${node.row_id ? `?${new URLSearchParams({ folder: node.row_id }).toString()}` : ''}`,
+                );
+                closeNotification(notification.key);
+              }}
+            >
+              {node.name}
+            </BAILink>
+          </BAIText>
+        }
+        description={
+          <List.Item>
+            <BAIFlex direction="column" align="stretch" gap={'xxs'}>
+              <BAIFlex
+                direction="row"
+                align="end"
+                gap={'xxs'}
+                justify="between"
+              >
+                {_.isString(notification.description) ? (
+                  <BAIText>
+                    {_.truncate(notification.description, { length: 300 })}
+                  </BAIText>
+                ) : (
+                  notification.description
+                )}
+
+                {notification.extraDescription && !notification?.onCancel ? (
+                  <BAIFlex>
+                    <Typography.Link
+                      onClick={() => {
+                        toggleShowExtraDescription();
+                      }}
+                    >
+                      {t('notification.SeeDetail')}
+                    </Typography.Link>
+                  </BAIFlex>
+                ) : null}
+              </BAIFlex>
+
+              {notification.extraDescription && showExtraDescription ? (
+                <Card
+                  size="small"
+                  style={{
+                    maxHeight: '300px',
+                    overflow: 'auto',
+                    overflowX: 'hidden',
+                    marginTop: token.marginSM,
+                  }}
+                >
+                  {_.isString(notification.extraDescription) ? (
+                    <Typography.Text type="secondary" copyable>
+                      {notification.extraDescription}
+                    </Typography.Text>
+                  ) : (
+                    notification.extraDescription
+                  )}
+                </Card>
+              ) : null}
+
+              {notification.backgroundTask && (
+                <BAINotificationBackgroundItem
+                  backgroundTask={notification.backgroundTask}
+                  showDate={showDate}
+                />
+              )}
+            </BAIFlex>
+          </List.Item>
+        }
+        footer={
+          showDate ? dayjs(notification.created).format('lll') : undefined
+        }
+      />
+    )
+  );
+};
+
+export default BAIVirtualFolderNodeNotificationItem;

react/src/components/VFolderNodes.tsx

@@ -43,6 +43,7 @@ import _ from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
+import { useNavigate } from 'react-router-dom';
 
 export const statusTagColor = {
   // mountable
@@ -84,6 +85,7 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
   const { upsertNotification } = useSetBAINotification();
   const { generateFolderPath } = useFolderExplorerOpener();
   const { getErrorMessage } = useErrorMessageResolver();
+  const navigate = useNavigate();
 
   const [deletingVFolder, setDeletingVFolder] =
     useState<VFolderNodeInList | null>(null);
@@ -107,6 +109,7 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
         ...VFolderNodeIdenticonFragment
         ...SharedFolderPermissionInfoModalFragment
         ...BAIVFolderDeleteButtonFragment
+        ...BAINodeNotificationItemFragment
       }
     `,
     vfoldersFrgmt,
@@ -274,6 +277,8 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
                             },
                             onError: (error) => {
                               upsertNotification({
+                                key: `vfolder-error-${vfolder?.id}`,
+                                node: vfolder,
                                 description: getErrorMessage(error),
                                 open: true,
                               });
@@ -298,9 +303,46 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
                             );
                           },
                           onError: (error) => {
+                            const matchString = error?.message.match(
+                              /sessions\(ids: (\[.*?\])\)/,
+                            )?.[1];
+                            const occupiedSession = JSON.parse(
+                              matchString?.replace(/'/g, '"') || '[]',
+                            );
                             upsertNotification({
-                              description: getErrorMessage(error),
                               open: true,
+                              key: `vfolder-error-${vfolder?.id}`,
+                              node: vfolder,
+                              description: getErrorMessage(error).replace(
+                                /\(ids[\s\S]*$/,
+                                '',
+                              ),
+                              extraDescription: !_.isEmpty(occupiedSession) ? (
+                                <BAIFlex direction="column" align="stretch">
+                                  <Typography.Text
+                                    style={{
+                                      color: token.colorTextDescription,
+                                    }}
+                                  >
+                                    {t('data.folders.MountedSessions')}
+                                  </Typography.Text>
+                                  {_.map(occupiedSession, (sessionId) => (
+                                    <BAILink
+                                      key={sessionId}
+                                      style={{
+                                        fontWeight: 'normal',
+                                      }}
+                                      onClick={() => {
+                                        navigate(
+                                          `/session${`?${new URLSearchParams({ sessionDetail: sessionId }).toString()}`}`,
+                                        );
+                                      }}
+                                    >
+                                      {sessionId}
+                                    </BAILink>
+                                  ))}
+                                </BAIFlex>
+                              ) : null,
                             });
                           },
                         });
@@ -427,6 +469,8 @@ const VFolderNodes: React.FC<VFolderNodesProps> = ({
             },
             onError: (error) => {
               upsertNotification({
+                key: `vfolder-error-${deletingVFolder?.id}`,
+                ...(deletingVFolder && { node: deletingVFolder }),
                 description: getErrorMessage(error),
                 open: true,
               });

react/src/hooks/useBAINotification.tsx

@@ -64,7 +64,7 @@ export interface NotificationState
     renderDataMessage?: (message?: string) => React.ReactNode;
     promise?: Promise<unknown> | null;
   };
-  extraDescription?: string | null;
+  extraDescription?: ReactNode | null;
   onCancel?: (() => void) | null;
   skipDesktopNotification?: boolean;
   extraData: any;
@@ -279,6 +279,8 @@ export const useBAINotificationEffect = () => {
  * @returns An object containing functions for manipulating notifications.
  */
 export const useSetBAINotification = () => {
+  'use memo';
+
   // Don't use _notifications carefully when you need to mutate it.
   const setNotifications = useSetAtom(notificationListState);
   const [desktopNotification] = useBAISettingUserState('desktop_notification');

resources/i18n/de.json

@@ -402,6 +402,7 @@
       "MaxSize": "Maximale Größe",
       "ModifyPermissions": "Berechtigungen ändern",
       "MountPermission": "Erlaubnis montieren",
+      "MountedSessions": "Gemountete Sitzungen",
       "MoveToTrash": "Ziehen Sie zu Müllbehälter",
       "MoveToTrashDescription": "Sind Sie sicher, dass Sie \"{{folderName}}\" in den Müll verschieben möchten?",
       "MoveToTrashMultipleDescription": "Sind Sie sicher, dass Sie {{folderLength}} Ordner in Müll bin verschieben möchten?",
@@ -693,6 +694,7 @@
     "Enabled": "aktiviert",
     "ErrorOccurred": "Etwas lief schief. \nBitte versuchen Sie es später erneut.",
     "ExtendLoginSession": "Eine Anmeldesitzung verlängern",
+    "Folder": "Ordner",
     "Folders": "Ordner",
     "General": "Allgemein",
     "Image": "Bild",