#276 Improve File Tree Tab

- add quick action to open file web url - fix size of the content list in fileTreeElementInfoDialog.tsx
INSO-World · Feb 14, 2025 · d40a00d · d40a00d
1 parent 155a007
commit d40a00d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/binocular-frontend-new/src/components/contextMenu/contextMenuHelper.ts b/binocular-frontend-new/src/components/contextMenu/contextMenuHelper.ts
@@ -1,4 +1,4 @@
-interface ContextMenuOption {
+export interface ContextMenuOption {
   label: string;
   icon: string | null;
   function: () => void;

diff --git a/...ular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx b/...ular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx
@@ -4,22 +4,34 @@ import FileIcon from '../../../../../assets/file_gray.svg';
 import { showFileTreeElementInfo, updateFileListElement } from '../../../../../redux/reducer/data/filesReducer.ts';
 import { AppDispatch, useAppDispatch } from '../../../../../redux';
 import { formatName } from '../fileListUtilities/fileTreeUtilities.tsx';
-import { showContextMenu } from '../../../../contextMenu/contextMenuHelper.ts';
+import { ContextMenuOption, showContextMenu } from '../../../../contextMenu/contextMenuHelper.ts';
 import infoIcon from '../../../../../assets/info_gray.svg';
+import openInNewIcon from '../../../../../assets/open_in_new_gray.svg';
 
 function FileListFile(props: { file: FileTreeElementType; listOnly?: boolean }) {
   const dispatch: AppDispatch = useAppDispatch();
 
   function openFileContextMenu(e: React.MouseEvent<HTMLDivElement>) {
     e.preventDefault();
     e.stopPropagation();
-    showContextMenu(e.clientX, e.clientY, [
+
+    const contextMenuOptions: ContextMenuOption[] = [
       {
         label: 'info',
         icon: infoIcon,
         function: () => dispatch(showFileTreeElementInfo(props.file)),
       },
-    ]);
+    ];
+
+    if (props.file.element?.webUrl) {
+      contextMenuOptions.push({
+        label: 'open in browser',
+        icon: openInNewIcon,
+        function: () => window.open(props.file.element?.webUrl, '_blank'),
+      });
+    }
+
+    showContextMenu(e.clientX, e.clientY, contextMenuOptions);
   }
 
   return (

diff --git a/.../components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.module.scss b/.../components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.module.scss
@@ -0,0 +1,7 @@
+.FolderContentContainer{
+  max-height: 30vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  @apply mt-2;
+  @apply mb-2;
+}
diff --git a/...-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.tsx b/...-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.tsx
@@ -5,6 +5,7 @@ import FileListFolder from '../fileList/fileListElements/fileListFolder.tsx';
 import { filterFileTree } from '../fileList/fileListUtilities/fileTreeUtilities.tsx';
 import FileSearch from '../fileSearch/fileSearch.tsx';
 import { useState } from 'react';
+import FileTreeElementInfoDialogStyled from './fileTreeElementInfoDialog.module.scss';
 
 function FileTreeElementInfoDialog() {
   const selectedFileTreeElement: FileTreeElementType | undefined = useSelector((state: RootState) => state.files.selectedFileTreeElement);
@@ -47,7 +48,9 @@ function FileTreeElementInfoDialog() {
                 <div>{selectedFileTreeElement.element.maxLength}</div>
                 <h2>Url</h2>
                 <div>
-                  <a href={selectedFileTreeElement.element.webUrl}>{selectedFileTreeElement.element.webUrl}</a>
+                  <a href={selectedFileTreeElement.element.webUrl} target="_blank" rel="noreferrer">
+                    {selectedFileTreeElement.element.webUrl}
+                  </a>
                 </div>
               </>
             )}
@@ -56,10 +59,12 @@ function FileTreeElementInfoDialog() {
               <>
                 <h2>Folder Content</h2>
                 <FileSearch setFileSearch={setFileSearch}></FileSearch>
-                <FileListFolder
-                  folder={filterFileTree(selectedFileTreeElement, fileSearch)}
-                  foldedOut={true}
-                  listOnly={true}></FileListFolder>
+                <div className={FileTreeElementInfoDialogStyled.FolderContentContainer}>
+                  <FileListFolder
+                    folder={filterFileTree(selectedFileTreeElement, fileSearch)}
+                    foldedOut={true}
+                    listOnly={true}></FileListFolder>
+                </div>
               </>
             )}
           </>