many UI tweaks and updates

its-a-feature · Jul 29, 2024 · bdc4d2f · bdc4d2f
1 parent 32d9d76
commit bdc4d2f
Show file tree

Hide file tree

Showing 29 changed files with 307 additions and 40 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.3.0-rc7] - 2024-07-29
+
+### Changed
+
+- Many UI Updates check out [UI Fixes](/MythicReactUI/CHANGELOG.MD) for 2.0.6
+
 ## [3.3.0-rc6] - 2024-07-29
 
 ### Changed

diff --git a/MythicReactUI/CHANGELOG.MD b/MythicReactUI/CHANGELOG.MD
@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.6] - 2024-07-29
+
+### Changed
+
+- fixed browser scripts not toggling
+- fixed condensed view browser script for numbers not showing up
+- saved preferences for user changing panel sizes on active callbacks page
+- saved preferences for user filtering tables on active callbacks page
+- adjusted tooltip timer to be .75s instead of 1s
+- auto scroll to selected callback in the top panel of active callbacks when selecting corresponding tab
+- unhighlight callback when tab is closed
+- highlight active tab to mirror highlighting of table row
+- updated tabs to reduce extra space
+
 ## [0.2.4] - 2024-07-29
 
 ### Changed

diff --git a/MythicReactUI/src/components/MythicComponents/MythicResizableGrid/MythicResizableGrid.js b/MythicReactUI/src/components/MythicComponents/MythicResizableGrid/MythicResizableGrid.js
@@ -75,6 +75,7 @@ const ResizableGridWrapper = ({
     rowContextMenuOptions,
     rowHeight,
     widthMeasureKey,
+    callbackTableGridRef,
     ...AutoSizerProps
 }) => {
     /* Hooks */
@@ -211,7 +212,9 @@ const ResizableGridWrapper = ({
         //console.log(updatedWidths, longestElementInColumn);
         setColumnWidths(updatedWidths);
     };
-
+    useEffect( () => {
+        callbackTableGridRef.current = gridRef.current;
+    }, [gridRef.current])
     const itemsWithHeader = [columns, ...items];
     const headerCellData = {
         "getRowHeight": getRowHeight,
@@ -275,12 +278,14 @@ const MythicResizableGrid = ({
     rowContextMenuOptions,
     widthMeasureKey,
     rowHeight = 20,
+    callbackTableGridRef,
 }) => {
     return (
         <AutoSizer style={{height: "100%"}}>
             {(AutoSizerProps) => (
                 <ResizableGridWrapper
                     columns={columns}
+                    callbackTableGridRef={callbackTableGridRef}
                     headerNameKey={headerNameKey}
                     sortIndicatorIndex={sortIndicatorIndex}
                     sortDirection={sortDirection}

diff --git a/MythicReactUI/src/components/MythicComponents/MythicStyledTooltip.js b/MythicReactUI/src/components/MythicComponents/MythicStyledTooltip.js
@@ -6,7 +6,7 @@ export function MythicStyledTooltip(props){
     const { children, title, style, ...other} = props;
     const theme = useTheme();
     return (
-        <Tooltip title={title} arrow followCursor enterDelay={1000} componentsProps={{
+        <Tooltip title={title} arrow followCursor enterDelay={750} componentsProps={{
             tooltip: {
                 sx: {
                     backgroundColor: theme.palette.background.contrast,

diff --git a/MythicReactUI/src/components/MythicComponents/MythicTabPanel.js b/MythicReactUI/src/components/MythicComponents/MythicTabPanel.js
@@ -103,6 +103,7 @@ export function MythicTabLabel(props) {
         onEditTabDescription,
         getCallbackData,
         onDragTab,
+        selectedIndex,
         ...other
     } = props;
     const onClick = (e) => {
@@ -135,6 +136,7 @@ export function MythicTabLabel(props) {
             onDragEnter={onDragEnter}
             onDragLeave={onDragLeave}
             draggable={!!onDragTab}
+            className={selectedIndex === index ? "selectedCallback" : "" }
             onDragStart={drag}
             label={
                 <span onContextMenu={handleContextClick} style={{ display: 'inline-block', zIndex: 1}} ref={dropdownAnchorRef}>
@@ -172,7 +174,7 @@ export function MythicTabLabel(props) {
 
             {...a11yProps(index)}
             {...other}
-            style={{padding: "0px 5px 0px 5px"}}
+            style={{padding: "0px 5px 0px 5px", borderRadius: "4px", margin: 0}}
         />
     );
 }

diff --git a/MythicReactUI/src/components/pages/Callbacks/Callbacks.js b/MythicReactUI/src/components/pages/Callbacks/Callbacks.js
@@ -51,13 +51,38 @@ const StyledSpeedDial = styled(SpeedDial)(({theme}) => ({
         color: theme.palette.background.contrast,
     }
 }));
-
+export const getCallbackIdFromClickedTab = (tabId) => {
+    if(tabId.includes("fileBrowser")) {
+        return Number(tabId.split("fileBrowser")[0]);
+    }else if(tabId.includes("interact")){
+        return Number(tabId.split("interact")[0]);
+    }else if(tabId.includes("processBrowser")){
+        return Number(tabId.split("processBrowser")[0]);
+    } else {
+        console.log("unknown tab type", tabId);
+        return 0;
+    }
+}
 
 export function Callbacks({me}) {
     const [topDisplay, setTopDisplay] = React.useState('table');
     const [openTabs, setOpenTabs] = React.useState([]);
-    const [clickedTabId, setClickedTabId] = React.useState('');
+    const [clickedTabId, setClickedTabIdValue] = React.useState('');
     const openTabRef = React.useRef([]);
+    const callbackTableGridRef = React.useRef();
+    const [callbackTableSplitSizes, setCallbackTableSplitSizes] = React.useState([30, 70]);
+    const setClickedTabId = (tabID) => {
+        if(callbackTableGridRef.current){
+            let tabIDNumber = getCallbackIdFromClickedTab(tabID);
+            let rowIndex = callbackTableGridRef.current?.props?.itemData?.items?.findIndex((e) => {
+                return e[0]?.props?.rowData?.id === tabIDNumber
+            });
+            if(rowIndex >= 0){
+                callbackTableGridRef.current?.scrollToItem({rowIndex: rowIndex, align: "end", columnIndex: 0})
+            }
+        }
+        setClickedTabIdValue(tabID);
+    }
     useEffect(() => {
         const oldTabs = localStorage.getItem('openTabs');
         if (oldTabs !== undefined && oldTabs !== null) {
@@ -72,6 +97,14 @@ export function Callbacks({me}) {
                 console.log('failed to parse oldTabs', error);
             }
         }
+        const oldSizes = localStorage.getItem("callbackTableSplitSizes");
+        if (oldSizes) {
+            try{
+                setCallbackTableSplitSizes(JSON.parse(oldSizes));
+            }catch(error){
+                console.log("failed to parse callback table split sizes");
+            }
+        }
     }, []);
     useEffect( () => {
         openTabRef.current = openTabs;
@@ -108,6 +141,10 @@ export function Callbacks({me}) {
         });
         localStorage.setItem('openTabs', JSON.stringify(tabSet));
         setOpenTabs(tabSet);
+        if(tabSet.length === 0){
+            setClickedTabId("0");
+            localStorage.removeItem("clickedTab");
+        }
     }, [openTabs]);
     const onDragTab = ({selected, toLeftOf}) => {
         //console.log("onDragTab in CallbacksTabs", selected, toLeftOf);
@@ -172,9 +209,17 @@ export function Callbacks({me}) {
     return (
         <>
             <SpeedDialWrapper setTopDisplay={setTopDisplay} />
-            <Split direction="vertical" sizes={[30, 70]} minSize={[0,0]} style={{ height: "100%" }}>
+            <Split direction="vertical"
+                   sizes={callbackTableSplitSizes}
+                   minSize={[0,0]}
+                   onDragEnd={(sizes) => localStorage.setItem('callbackTableSplitSizes', JSON.stringify(sizes))}
+                   style={{ height: "100%" }}>
                 <div className="bg-gray-base">
-                    <CallbacksTop topDisplay={topDisplay} onOpenTab={onOpenTab.current} me={me} clickedTabId={clickedTabId}/>
+                    <CallbacksTop
+                        callbackTableGridRef={callbackTableGridRef}
+                        topDisplay={topDisplay}
+                        onOpenTab={onOpenTab.current}
+                        me={me} clickedTabId={clickedTabId}/>
                 </div>
                 <div className="bg-gray-mid">
                     <CallbacksTabs

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTable.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTable.js
@@ -37,6 +37,7 @@ import Popper from '@mui/material/Popper';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
+import {getCallbackIdFromClickedTab} from './Callbacks';
 
 export const ipCompare = (a, b) => {
     let aJSON = JSON.parse(a);
@@ -76,18 +77,7 @@ export const ipCompare = (a, b) => {
         return 0;
     }
 }
-export const getCallbackIdFromClickedTab = (tabId) => {
-    if(tabId.includes("fileBrowser")) {
-        return Number(tabId.split("fileBrowser")[0]);
-    }else if(tabId.includes("interact")){
-        return Number(tabId.split("interact")[0]);
-    }else if(tabId.includes("processBrowser")){
-        return Number(tabId.split("processBrowser")[0]);
-    } else {
-        console.log("unknown tab type", tabId);
-        return 0;
-    }
-}
+
 function CallbacksTablePreMemo(props){
     const callbacks = useContext(CallbacksContext);
     const [openMetaDialog, setOpenMetaDialog] = React.useState(false);
@@ -210,6 +200,15 @@ function CallbacksTablePreMemo(props){
       }catch(error){
         console.log("Failed to load callbacks_table_columns", error);
       }
+      try {
+        const storageItemOptions = localStorage.getItem("callbacks_table_filter_options");
+        if(storageItemOptions !== null){
+            let filters = JSON.parse(storageItemOptions);
+            setFilterOptions(filters);
+        }
+      }catch(error){
+        console.log("Failed to load callbacks_table_columns", error);
+    }
     }, [])
     const columns = useMemo( 
       () => 
@@ -430,11 +429,18 @@ function CallbacksTablePreMemo(props){
     }, [callbacks, sortData, filterOptions, columnVisibility, clickedCallbackID]);
     const onSubmitFilterOptions = (newFilterOptions) => {
       setFilterOptions(newFilterOptions);
+      try{
+          let options = JSON.stringify(newFilterOptions);
+          localStorage.setItem("callbacks_table_filter_options", options);
+      }catch(error){
+          console.log("failed to save filter options");
+      }
     }
     const sortColumn = columns.findIndex((column) => column.key === sortData.sortKey);
     return (
         <div style={{ width: '100%', height: '100%', position: "relative",  }} >
           <MythicResizableGrid
+              callbackTableGridRef={props.callbackTableGridRef}
               columns={columns}
               sortIndicatorIndex={sortColumn}
               sortDirection={sortData.sortDirection}

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTableRow.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTableRow.js
@@ -223,7 +223,7 @@ export const CallbacksTableIDCell = React.memo(({rowData, metaDialog, updateDesc
         }}
     ];
     return (
-        <div>
+        <div id={`callbacksTableID${rowDataStatic.id}`}>
                 <IconButton style={{padding: 0, margin: 0}} color={rowDataStatic.integrity_level > 2 ? "error" : ""}
                     onClick={(evt) => {evt.stopPropagation();localOnOpenTab("interact")}}
                 >

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabs.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabs.js
@@ -25,8 +25,10 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
     }, [])
     const onCloseTabLocal = ({ tabID, index }) => {
         if (index > 0) {
+            setClickedTabId(openTabs[index-1].tabID);
             setValue(index - 1);
         } else {
+            setClickedTabId(openTabs[0].tabID);
             setValue(0);
         }
         onCloseTab({ tabID, index });
@@ -65,6 +67,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                         tabInfo={tab}
                                         index={index}
                                         me={me}
+                                        selectedIndex={value}
                                         onDragTab={onDragTab}
                                         contextMenuOptions={contextMenuOptions}
                                     />
@@ -78,6 +81,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                         tabInfo={tab}
                                         index={index}
                                         me={me}
+                                        selectedIndex={value}
                                         onDragTab={onDragTab}
                                         contextMenuOptions={contextMenuOptions}
                                     />
@@ -91,6 +95,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                         tabInfo={tab}
                                         index={index}
                                         me={me}
+                                        selectedIndex={value}
                                         onDragTab={onDragTab}
                                         contextMenuOptions={contextMenuOptions}
                                     />
@@ -104,6 +109,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                         tabInfo={tab}
                                         index={index}
                                         me={me}
+                                        selectedIndex={value}
                                         onDragTab={onDragTab}
                                         contextMenuOptions={contextMenuOptions}
                                     />
@@ -117,6 +123,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                         tabInfo={tab}
                                         index={index}
                                         me={me}
+                                        selectedIndex={value}
                                         onDragTab={onDragTab}
                                         contextMenuOptions={contextMenuOptions}
                                     />

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsFileBrowser.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsFileBrowser.js
@@ -129,7 +129,7 @@ export function CallbacksTabsFileBrowserLabel(props) {
                     }}
                     innerDialog={
                         <MythicModifyStringDialog
-                            title={"Edit Tab's Description"}
+                            title={"Edit Tab's Description - Displays as one line"}
                             onClose={() => {
                                 setOpenEditDescriptionDialog(false);
                             }}

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsProcessBrowser.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsProcessBrowser.js
@@ -109,7 +109,7 @@ export function CallbacksTabsProcessBrowserLabel(props){
             {openEditDescriptionDialog &&
                 <MythicDialog fullWidth={true} open={openEditDescriptionDialog}  onClose={() => {setOpenEditDescriptionDialog(false);}}
                     innerDialog={
-                        <MythicModifyStringDialog title={"Edit Tab's Description"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
+                        <MythicModifyStringDialog title={"Edit Tab's Description - Displays as one line"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
                     }
                 />
             }

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTasking.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTasking.js
@@ -51,7 +51,7 @@ export function CallbacksTabsTaskingLabel(props){
             {openEditDescriptionDialog &&
                 <MythicDialog fullWidth={true} open={openEditDescriptionDialog}  onClose={() => {setOpenEditDescriptionDialog(false);}}
                     innerDialog={
-                        <MythicModifyStringDialog title={"Edit Tab's Description"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
+                        <MythicModifyStringDialog title={"Edit Tab's Description - Displays as one line"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
                     }
                 />
             }

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTaskingConsole.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTaskingConsole.js
@@ -51,7 +51,7 @@ export function CallbacksTabsTaskingConsoleLabel(props){
             {openEditDescriptionDialog &&
                 <MythicDialog fullWidth={true} open={openEditDescriptionDialog}  onClose={() => {setOpenEditDescriptionDialog(false);}}
                               innerDialog={
-                                  <MythicModifyStringDialog title={"Edit Tab's Description"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
+                                  <MythicModifyStringDialog title={"Edit Tab's Description - Displays as one line"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
                               }
                 />
             }

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTaskingSplit.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTaskingSplit.js
@@ -55,7 +55,7 @@ export function CallbacksTabsTaskingSplitLabel(props){
             {openEditDescriptionDialog &&
                 <MythicDialog fullWidth={true} open={openEditDescriptionDialog}  onClose={() => {setOpenEditDescriptionDialog(false);}}
                     innerDialog={
-                        <MythicModifyStringDialog title={"Edit Tab's Description"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
+                        <MythicModifyStringDialog title={"Edit Tab's Description - Displays as one line"} onClose={() => {setOpenEditDescriptionDialog(false);}} value={description} onSubmit={editDescriptionSubmit} />
                     }
                 />
             }

diff --git a/MythicReactUI/src/components/pages/Callbacks/CallbacksTop.js b/MythicReactUI/src/components/pages/Callbacks/CallbacksTop.js
@@ -261,7 +261,9 @@ export function CallbacksTop(props){
                       ) : initialNewBrowserScriptTable ? (
                           <CallbacksTableMaterialReactTable clickedTabId={props.clickedTabId} parentMountedRef={mountedRef} me={me}/>
                       ) : (
-                          <CallbacksTable parentMountedRef={mountedRef} me={me} clickedTabId={props.clickedTabId}/>
+                          <CallbacksTable callbackTableGridRef={props.callbackTableGridRef}
+                                          parentMountedRef={mountedRef} me={me}
+                                          clickedTabId={props.clickedTabId}/>
                       )
                       }
                   </CallbacksContext.Provider>

diff --git a/MythicReactUI/src/components/pages/Callbacks/ResponseDisplay.js b/MythicReactUI/src/components/pages/Callbacks/ResponseDisplay.js
@@ -479,7 +479,6 @@ const ResponseDisplayComponent = ({rawResponses, viewBrowserScript, output, comm
     return copied;
   }
   useEffect( () => {
-    console.log("in use effect")
     if(loadingBrowserScript){
       return;
     }
@@ -505,6 +504,8 @@ const ResponseDisplayComponent = ({rawResponses, viewBrowserScript, output, comm
           console.log(error);
         }
       }
+    } else {
+      setViewBrowserScript(false);
     }
   }, [rawResponses, task, loadingBrowserScript, viewBrowserScript]);
   const [fetchScripts] = useLazyQuery(taskScript, {