UI bug fixes

MythicReactUI/CHANGELOG.MD

@@ -4,6 +4,14 @@ 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.1.67] - 2024-02-14
+
+### Changed
+
+- Added tab-complete options for the `help` command
+- Updated tab-complete ordering to be based off of a command parameter's ui_position
+- Fixed an issue with auto scrolling when paginating
+
 ## [0.1.66] - 2024-02-13
 
 ### Changed

MythicReactUI/src/components/pages/Callbacks/CallbacksTabsTaskingInput.js

@@ -145,6 +145,7 @@ export function CallbacksTabsTaskingInputPreMemo(props){
             }
             const cmds = data.data.loadedcommands.map( c => {
                 let cmdData = {...c.command};
+                cmdData.commandparameters.sort( (a,b) => a.ui_position > b.ui_position ? 1 : -1);
                 return cmdData;
             })
             cmds.push({cmd: "help", description: "Get help for a command or info about loaded commands", commandparameters: [], attributes: {supported_os: []}});
@@ -235,6 +236,29 @@ export function CallbacksTabsTaskingInputPreMemo(props){
                     snackActions.warning("unknown command");
                     return
                 }
+                if(cmd.cmd === "help"){
+                    // somebody hit tab with either a blank message or a partial word
+                    let helpCmd = message.split(" ");
+                    if (helpCmd.length > 1) {
+                        helpCmd = helpCmd[1];
+                    } else {
+                        helpCmd = "";
+                    }
+                    if(tabOptions.length === 0){
+                        let opts = loadedOptions.filter( l => l.cmd.toLowerCase().startsWith(helpCmd.toLocaleLowerCase()) && (l.attributes.supported_os.length === 0 || l.attributes.supported_os.includes(props.callback_os)));
+                        setTabOptions(opts);
+                        setTabOptionsIndex(0);
+                        if(opts.length > 0){
+                            setMessage("help " + opts[0].cmd);
+                        }
+                    }else{
+                        let newIndex = forwardOrBackwardTabIndex(event, tabOptionsIndex, tabOptions);
+                        setTabOptionsIndex(newIndex);
+                        setMessage("help " + tabOptions[newIndex].cmd);
+                    }
+                    return;
+                }
+                console.log(cmd.commandparameters);
                 if(cmd.commandparameters.length > 0){
                     if(message[message.length -1] === " "){
                         // somebody hit tab after a parameter name or after a parameter value

MythicReactUI/src/components/pages/Callbacks/ResponseDisplay.js

@@ -392,7 +392,7 @@ export const PaginationBar = ({selectAllOutput, totalCount, onSubmitPageChange,
   const pageCount = Math.max(1, Math.ceil(localTotalCount / pageSize));
   // don't bother people with pagination information if they haven't even started paginating
   if(pageCount < 2){
-    return (<div id={'scrolltotaskbutton' + task.id}></div>)
+    return (<div id={'scrolltotaskbottom' + task.id}></div>)
   }
   return (
     <div id={'scrolltotaskbottom' + task.id} style={{background: "transparent", display: "flex", justifyContent: "center", alignItems: "center", paddingBottom: "10px",}} >

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayDownload.js

@@ -7,7 +7,7 @@ import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
 export const ResponseDisplayDownload = (props) =>{
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${props.task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${props.task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayInteractive.js

@@ -314,7 +314,7 @@ export const ResponseDisplayInteractive = (props) =>{
     }
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${props.task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${props.task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayMaterialReactTable.js

@@ -625,7 +625,7 @@ export const ResponseDisplayMaterialReactTable = ({table, callback_id, expand, t
   });
   const scrollContent = (node, isAppearing) => {
     // only auto-scroll if you issued the task
-    document.getElementById(`scrolltotaskbutton${task.id}`).scrollIntoView({
+    document.getElementById(`scrolltotaskbottom${task.id}`)?.scrollIntoView({
       //behavior: "smooth",
       block: "end",
       inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayMedia.js

@@ -76,7 +76,7 @@ export const DisplayMedia = ({agent_file_id, filename, expand, task}) => {
     }, [agent_file_id, filename]);
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayPlaintext.js

@@ -56,7 +56,7 @@ export const ResponseDisplayPlaintext = (props) =>{
     }
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${props.task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${props.task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayScreenshot.js

@@ -14,7 +14,7 @@ export const ResponseDisplayScreenshot = (props) =>{
   }
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${props.task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${props.task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplaySearch.js

@@ -6,7 +6,7 @@ import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
 export const ResponseDisplaySearch = (props) =>{
     const scrollContent = (node, isAppearing) => {
         // only auto-scroll if you issued the task
-        document.getElementById(`scrolltotaskbutton${props.task.id}`).scrollIntoView({
+        document.getElementById(`scrolltotaskbottom${props.task.id}`)?.scrollIntoView({
             //behavior: "smooth",
             block: "end",
             inline: "nearest"

MythicReactUI/src/components/pages/Callbacks/ResponseDisplayTable.js

@@ -559,7 +559,7 @@ export const ResponseDisplayTable = ({table, callback_id, expand, task}) =>{
   }, [expand, dataHeight]);
   const scrollContent = (node, isAppearing) => {
     // only auto-scroll if you issued the task
-    document.getElementById(`scrolltotaskbutton${task.id}`).scrollIntoView({
+    document.getElementById(`scrolltotaskbottom${task.id}`)?.scrollIntoView({
       //behavior: "smooth",
       block: "end",
       inline: "nearest"

MythicReactUI/src/index.js

@@ -15,7 +15,7 @@ import jwt_decode from 'jwt-decode';
 import {meState} from './cache';
 
 export const mythicVersion = "3.2.18-rc4";
-export const mythicUIVersion = "0.1.66";
+export const mythicUIVersion = "0.1.67";
 
 let fetchingNewToken = false;
 

mythic-react-docker/mythic/public/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/new/static/css/main.00d51b79.css",
-    "main.js": "/new/static/js/main.72c89999.js",
+    "main.js": "/new/static/js/main.a3ff9006.js",
     "static/media/[email protected]": "/new/static/media/[email protected]",
     "static/media/mythic_red_small.svg": "/new/static/media/mythic_red_small.793b41cc7135cdede246661ec232976b.svg",
     "index.html": "/new/index.html",
     "main.00d51b79.css.map": "/new/static/css/main.00d51b79.css.map",
-    "main.72c89999.js.map": "/new/static/js/main.72c89999.js.map"
+    "main.a3ff9006.js.map": "/new/static/js/main.a3ff9006.js.map"
   },
   "entrypoints": [
     "static/css/main.00d51b79.css",
-    "static/js/main.72c89999.js"
+    "static/js/main.a3ff9006.js"
   ]
 }

mythic-react-docker/mythic/public/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/new/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="/new/logo192.png"/><link rel="manifest" href="/new/manifest.json"/><title>Mythic</title><script defer="defer" src="/new/static/js/main.72c89999.js"></script><link href="/new/static/css/main.00d51b79.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/new/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="/new/logo192.png"/><link rel="manifest" href="/new/manifest.json"/><title>Mythic</title><script defer="defer" src="/new/static/js/main.a3ff9006.js"></script><link href="/new/static/css/main.00d51b79.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>