feature: add a link to open a folder explorer in notification

lablup · Jul 1, 2024 · a027af3 · a027af3
1 parent b321557
commit a027af3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/react/src/components/FolderExplorerOpener.tsx b/react/src/components/FolderExplorerOpener.tsx
@@ -49,7 +49,7 @@ const FolderExplorerOpener = () => {
         });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDataViewReady]); // don't need to watch `folderId` because this used only once right after the backend-ai-data-view is ready
+  }, [isDataViewReady, folderId]); // don't need to watch `folderId` because this used only once right after the backend-ai-data-view is ready
 
   return null;
 };

diff --git a/src/components/backend-ai-storage-list.ts b/src/components/backend-ai-storage-list.ts
@@ -1109,13 +1109,7 @@ export default class BackendAiStorageList extends BackendAIPage {
         narrowLayout
         scrimClickAction
         @dialog-closed=${() => {
-          const queryParams = new URLSearchParams(window.location.search);
-          queryParams.delete('folder');
-          window.history.replaceState(
-            {},
-            '',
-            `${location.pathname}${queryParams.toString().length == 0 ? '' : '?' + queryParams}`,
-          );
+          this.triggerCloseFilebrowserToReact();
         }}
       >
         <span slot="title" style="margin-right:1rem;">${this.explorer.id}</span>
@@ -1769,7 +1763,9 @@ export default class BackendAiStorageList extends BackendAIPage {
                   class="fg blue controls-running"
                   icon="folder_open"
                   title=${_t('data.folders.OpenAFolder')}
-                  @click="${(e) => this._folderExplorer(rowData)}"
+                  @click="${() => {
+                    this.triggerOpenFilebrowserToReact(rowData);
+                  }}"
                   ?disabled="${this._isUncontrollableStatus(
                     rowData.item.status,
                   )}"
@@ -1780,7 +1776,7 @@ export default class BackendAiStorageList extends BackendAIPage {
           <div
             @click="${(e) =>
               !this._isUncontrollableStatus(rowData.item.status) &&
-              this._folderExplorer(rowData)}"
+              this.triggerOpenFilebrowserToReact(rowData)}"
             .folder-id="${rowData.item.name}"
             style="cursor:${this._isUncontrollableStatus(rowData.item.status)
               ? 'default'
@@ -3381,6 +3377,32 @@ export default class BackendAiStorageList extends BackendAIPage {
     }
   }
 
+  triggerOpenFilebrowserToReact(rowData) {
+    const queryParams = new URLSearchParams(window.location.search);
+    queryParams.set('folder', rowData.item.id);
+    document.dispatchEvent(
+      new CustomEvent('react-navigate', {
+        detail: {
+          pathname: '/data',
+          search: queryParams.toString(),
+        },
+      }),
+    );
+  }
+
+  triggerCloseFilebrowserToReact() {
+    const queryParams = new URLSearchParams(window.location.search);
+    queryParams.delete('folder');
+    document.dispatchEvent(
+      new CustomEvent('react-navigate', {
+        detail: {
+          pathname: window.location.pathname,
+          search: queryParams.toString(),
+        },
+      }),
+    );
+  }
+
   /**
    * Set up the explorer of the folder and call the _clearExplorer() function.
    *
@@ -3400,10 +3422,6 @@ export default class BackendAiStorageList extends BackendAIPage {
       breadcrumb: ['.'],
     };
 
-    const queryParams = new URLSearchParams(window.location.search);
-    queryParams.set('folder', rowData.item.id);
-    window.history.replaceState({}, '', `${location.pathname}?${queryParams}`);
-
     /**
      * NOTICE: If it's admin user and the folder type is group, It will have write permission.
      */