From d40a00d3610ba8c7d20692cda18ca5384930838e Mon Sep 17 00:00:00 2001
From: Maximilian Zenz <e1633058@student.tuwien.ac.at>
Date: Fri, 14 Feb 2025 13:37:59 +0100
Subject: [PATCH] #276 Improve File Tree Tab

- add quick action to open file web url
- fix size of the content list in fileTreeElementInfoDialog.tsx
---
 .../contextMenu/contextMenuHelper.ts           |  2 +-
 .../fileList/fileListElements/fileListFile.tsx | 18 +++++++++++++++---
 .../fileTreeElementInfoDialog.module.scss      |  7 +++++++
 .../fileTreeElementInfoDialog.tsx              | 15 ++++++++++-----
 4 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.module.scss

diff --git a/binocular-frontend-new/src/components/contextMenu/contextMenuHelper.ts b/binocular-frontend-new/src/components/contextMenu/contextMenuHelper.ts
index 30aababf..51f1c7f7 100644
--- 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/binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx b/binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx
index 342dd69d..3e60e42d 100644
--- a/binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx
+++ b/binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx
@@ -4,8 +4,9 @@ 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();
@@ -13,13 +14,24 @@ function FileListFile(props: { file: FileTreeElementType; listOnly?: boolean })
   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/binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.module.scss b/binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.module.scss
new file mode 100644
index 00000000..3d2418d2
--- /dev/null
+++ b/binocular-frontend-new/src/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/binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.tsx b/binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.tsx
index 0f219739..6d0dc2e6 100644
--- a/binocular-frontend-new/src/components/tabs/fileTree/fileTreeElementInfoDialog/fileTreeElementInfoDialog.tsx
+++ b/binocular-frontend-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>
               </>
             )}
           </>