Skip to content

Commit 8ea186b

Browse files
ironAiken2ironAiken2
committed
fix(FR-2813): render folder-create notification with VFolder node card
1 parent 052967a commit 8ea186b

4 files changed

Lines changed: 45 additions & 27 deletions

File tree

‎react/src/components/BAIVFolderNotificationItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
44
*/
55
import BAINotificationBackgroundProgress from './BAINotificationBackgroundProgress';
6+
import { useFolderExplorerOpener } from './FolderExplorerOpener';
67
import { useToggle } from 'ahooks';
78
import { Card, List, theme, Typography } from 'antd';
89
import {
@@ -17,7 +18,6 @@ import * as _ from 'lodash-es';
1718
import { useTranslation } from 'react-i18next';
1819
import { graphql, useFragment } from 'react-relay';
1920
import { BAIVFolderNotificationItemFragment$key } from 'src/__generated__/BAIVFolderNotificationItemFragment.graphql';
20-
import { useWebUINavigate } from 'src/hooks';
2121
import {
2222
NotificationState,
2323
useSetBAINotification,
@@ -41,7 +41,7 @@ const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
4141
}) => {
4242
'use memo';
4343

44-
const navigate = useWebUINavigate();
44+
const { open: openFolderExplorer } = useFolderExplorerOpener();
4545
const { t } = useTranslation();
4646
const { token } = theme.useToken();
4747
const { closeNotification } = useSetBAINotification();
@@ -76,9 +76,9 @@ const BAIVFolderNotificationItem: React.FC<BAIVFolderNotificationItemProps> = ({
7676
}}
7777
title={folderName || ''}
7878
onClick={() => {
79-
navigate(
80-
`/data${localId ? `?${new URLSearchParams({ folder: localId }).toString()}` : ''}`,
81-
);
79+
if (localId) {
80+
openFolderExplorer(localId);
81+
}
8282
closeNotification(notification.key);
8383
}}
8484
>

‎react/src/components/BAIVirtualFolderNodeNotificationItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
44
*/
55
import BAINotificationBackgroundProgress from './BAINotificationBackgroundProgress';
6+
import { useFolderExplorerOpener } from './FolderExplorerOpener';
67
import { useToggle } from 'ahooks';
78
import { Card, List, theme, Typography } from 'antd';
89
import { BAIFlex, BAILink, BAINotificationItem, BAIText } from 'backend.ai-ui';
@@ -11,7 +12,6 @@ import * as _ from 'lodash-es';
1112
import { useTranslation } from 'react-i18next';
1213
import { graphql, useFragment } from 'react-relay';
1314
import { BAIVirtualFolderNodeNotificationItemFragment$key } from 'src/__generated__/BAIVirtualFolderNodeNotificationItemFragment.graphql';
14-
import { useWebUINavigate } from 'src/hooks';
1515
import {
1616
NotificationState,
1717
useSetBAINotification,
@@ -34,7 +34,7 @@ const BAIVirtualFolderNodeNotificationItem: React.FC<
3434
> = ({ notification, virtualFolderNodeFrgmt, showDate }) => {
3535
'use memo';
3636

37-
const navigate = useWebUINavigate();
37+
const { open: openFolderExplorer } = useFolderExplorerOpener();
3838
const { t } = useTranslation();
3939
const { token } = theme.useToken();
4040
const { closeNotification } = useSetBAINotification();
@@ -65,9 +65,9 @@ const BAIVirtualFolderNodeNotificationItem: React.FC<
6565
}}
6666
title={node.name || ''}
6767
onClick={() => {
68-
navigate(
69-
`/data${node.row_id ? `?${new URLSearchParams({ folder: node.row_id }).toString()}` : ''}`,
70-
);
68+
if (node.row_id) {
69+
openFolderExplorer(node.row_id);
70+
}
7171
closeNotification(notification.key);
7272
}}
7373
>

‎react/src/components/FolderCreateModalV2.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
197197
createVfolderV2(input: $input) {
198198
vfolder {
199199
id
200-
status
200+
vfolderStatus: status
201201
host
202202
metadata {
203203
name
@@ -214,6 +214,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
214214
projectId
215215
creatorEmail
216216
}
217+
...BAINodeNotificationItemFragment @alias(as: "notificationFrgmt")
217218
}
218219
}
219220
}
@@ -232,7 +233,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
232233
createVFolderInProject(projectId: $projectId, input: $input) {
233234
vfolder {
234235
id
235-
status
236+
vfolderStatus: status
236237
host
237238
metadata {
238239
name
@@ -249,6 +250,7 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
249250
projectId
250251
creatorEmail
251252
}
253+
...BAINodeNotificationItemFragment @alias(as: "notificationFrgmt")
252254
}
253255
}
254256
}
@@ -323,19 +325,14 @@ const FolderCreateModalV2: React.FC<FolderCreateModalProps> = ({
323325
user: vfolder.ownership.userId ?? '',
324326
group: vfolder.ownership.projectId ?? null,
325327
cloneable: vfolder.metadata.cloneable,
326-
status: vfolder.status ?? '',
328+
status: vfolder.vfolderStatus ?? '',
327329
};
328330

329331
upsertNotification({
330332
key: `folder-create-success-${result.id}`,
331333
icon: 'folder',
332-
message: `${result.name}: ${t('data.folders.FolderCreated')}`,
333-
toText: t('data.folders.OpenAFolder'),
334-
to: {
335-
search: new URLSearchParams({
336-
folder: result.id,
337-
}).toString(),
338-
},
334+
node: vfolder.notificationFrgmt ?? null,
335+
description: t('data.folders.FolderCreated'),
339336
open: true,
340337
});
341338
document.dispatchEvent(new CustomEvent('backend-ai-folder-list-changed'));

‎react/src/components/ImportRepoForm.tsx‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,30 @@ import {
1515
} from 'antd';
1616
import {
1717
BAIButton,
18+
toGlobalId,
1819
useBAILogger,
1920
useErrorMessageResolver,
2021
useGetAvailableFolderName,
2122
} from 'backend.ai-ui';
2223
import { FolderInput } from 'lucide-react';
2324
import { useRef } from 'react';
2425
import { useTranslation } from 'react-i18next';
26+
import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
27+
import { ImportRepoFormVFolderNotificationQuery } from 'src/__generated__/ImportRepoFormVFolderNotificationQuery.graphql';
2528
import { useSetBAINotification } from 'src/hooks/useBAINotification';
2629
import {
2730
StartSessionWithDefaultValue,
2831
useStartSession,
2932
} from 'src/hooks/useStartSession';
3033

34+
const IMPORT_REPO_FORM_VFOLDER_NOTIFICATION_QUERY = graphql`
35+
query ImportRepoFormVFolderNotificationQuery($id: String!) {
36+
vfolder_node(id: $id) {
37+
...BAINodeNotificationItemFragment @alias(as: "notificationFrgmt")
38+
}
39+
}
40+
`;
41+
3142
type URLType = 'github' | 'gitlab';
3243

3344
type VFolderUsageModeForImport = 'general' | 'model';
@@ -94,6 +105,7 @@ const ImportRepoForm: React.FC<ImportFromURLFormProps> = ({
94105
const formRef = useRef<FormInstance<ImportFromURLFormValues> | null>(null);
95106
const baiClient = useSuspendedBackendaiClient();
96107
const { upsertNotification } = useSetBAINotification();
108+
const relayEnv = useRelayEnvironment();
97109
const app = App.useApp();
98110
const { getErrorMessage } = useErrorMessageResolver();
99111

@@ -226,16 +238,25 @@ const ImportRepoForm: React.FC<ImportFromURLFormProps> = ({
226238
'rw', // permission
227239
);
228240

241+
// REST `/folders` does not return a Relay fragment, so query the new
242+
// VirtualFolderNode by id to drive the rich folder-card notification
243+
// (BAINodeNotificationItem). Falls back gracefully — if the node is
244+
// unreachable, the notification still opens but without the folder-link
245+
// header; the import session creation flow continues regardless.
246+
const notificationData =
247+
await fetchQuery<ImportRepoFormVFolderNotificationQuery>(
248+
relayEnv,
249+
IMPORT_REPO_FORM_VFOLDER_NOTIFICATION_QUERY,
250+
{ id: toGlobalId('VirtualFolderNode', vfolderInfo.id) },
251+
)
252+
.toPromise()
253+
.catch(() => null);
254+
229255
upsertNotification({
230256
key: `folder-create-success-${vfolderInfo.id}`,
231257
icon: 'folder',
232-
message: `${vfolderInfo.name}: ${t('data.folders.FolderCreated')}`,
233-
toText: t('data.folders.OpenAFolder'),
234-
to: {
235-
search: new URLSearchParams({
236-
folder: vfolderInfo.id,
237-
}).toString(),
238-
},
258+
node: notificationData?.vfolder_node?.notificationFrgmt ?? undefined,
259+
description: t('data.folders.FolderCreated'),
239260
open: true,
240261
duration: 0,
241262
});

0 commit comments

Comments
 (0)