Merge pull request #2727 from nickofolas/feature/editor-tab-actions

Script Editor Tab Actions

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -33,6 +33,8 @@ import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
 import Box from "@mui/material/Box";
 import SettingsIcon from "@mui/icons-material/Settings";
+import SyncIcon from '@mui/icons-material/Sync';
+import CloseIcon from '@mui/icons-material/Close';
 import Table from "@mui/material/Table";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
@@ -41,6 +43,7 @@ import { PromptEvent } from "../../ui/React/PromptManager";
 import { Modal } from "../../ui/React/Modal";
 
 import libSource from "!!raw-loader!../NetscriptDefinitions.d.ts";
+import { Tooltip } from "@mui/material";
 
 interface IProps {
   // Map of filename -> code
@@ -692,17 +695,56 @@ export function Root(props: IProps): React.ReactElement {
     }
   }
 
+  function onTabUpdate(index: number): void {
+    const openScript = openScripts[index];
+    const serverScriptCode = getServerCode(index);
+    if (serverScriptCode === null) return;
+
+    if (openScript.code !== serverScriptCode) {
+      PromptEvent.emit({
+        txt: "Do you want to overwrite the current editor content with the contents of " +
+          openScript.fileName + " on the server? This cannot be undone.",
+        resolve: (result: boolean) => {
+          if (result) {
+            // Save changes
+            openScript.code = serverScriptCode;
+
+            // Switch to target tab
+            onTabClick(index)
+
+            if (editorRef.current !== null && openScript !== null) {
+              if (openScript.model === undefined || openScript.model.isDisposed()) {
+                regenerateModel(openScript);
+              }
+              editorRef.current.setModel(openScript.model);
+
+              editorRef.current.setValue(openScript.code);
+              updateRAM(openScript.code);
+              editorRef.current.focus();
+            }
+          }
+        },
+      });
+    }
+  }
+
   function dirty(index: number): string {
+    const openScript = openScripts[index];
+    const serverScriptCode = getServerCode(index);
+    if (serverScriptCode === null) return " *";
+
+    // The server code is stored with its starting & trailing whitespace removed
+    const openScriptFormatted = Script.formatCode(openScript.code);
+    return serverScriptCode !== openScriptFormatted ? " *" : "";
+  }
+
+  function getServerCode(index: number): string | null {
     const openScript = openScripts[index];
     const server = GetServer(openScript.hostname);
     if (server === null) throw new Error(`Server '${openScript.hostname}' should not be null, but it is.`);
 
     const serverScript = server.scripts.find((s) => s.filename === openScript.fileName);
-    if (serverScript === undefined) return " *";
+    return serverScript?.code ?? null;
-
-    // The server code is stored with its starting & trailing whitespace removed
-    const openScriptFormatted = Script.formatCode(openScript.code);
-    return serverScript.code !== openScriptFormatted ? " *" : "";
   }
 
   // Toolbars are roughly 112px:
@@ -734,7 +776,23 @@ export function Root(props: IProps): React.ReactElement {
                   overflowX: "scroll",
                 }}
               >
-                {openScripts.map(({ fileName, hostname }, index) => (
+                {openScripts.map(({ fileName, hostname }, index) => {
+                  const iconButtonStyle = {
+                    maxWidth: "25px",
+                    minWidth: "25px",
+                    minHeight: '38.5px',
+                    maxHeight: '38.5px',
+                    ...(currentScript?.fileName === openScripts[index].fileName ? {
+                      background: Settings.theme.button,
+                      borderColor: Settings.theme.button,
+                      color: Settings.theme.primary
+                    } : {
+                      background: Settings.theme.backgroundsecondary,
+                      borderColor: Settings.theme.backgroundsecondary,
+                      color: Settings.theme.secondary
+                    })
+                  };
+                  return (
                     <Draggable
                       key={fileName + hostname}
                       draggableId={fileName + hostname}
@@ -750,41 +808,42 @@ export function Root(props: IProps): React.ReactElement {
                             ...provided.draggableProps.style,
                             marginRight: "5px",
                             flexShrink: 0,
+                            border: '1px solid ' + Settings.theme.well,
                           }}
                         >
                           <Button
                             onClick={() => onTabClick(index)}
-                          style={
+                            onMouseDown={e => {
-                            currentScript?.fileName === openScripts[index].fileName ? {
+                              e.preventDefault();
-                              background: Settings.theme.button,
+                              if (e.button === 1) onTabClose(index);
-                              color: Settings.theme.primary
-                            } : {
-                              background: Settings.theme.backgroundsecondary,
-                              color: Settings.theme.secondary
                             }}
-                        >
-                          {hostname}:~/{fileName} {dirty(index)}
-                        </Button>
-                        <Button
-                          onClick={() => onTabClose(index)}
                             style={{
-                            maxWidth: "20px",
-                            minWidth: "20px",
                               ...(currentScript?.fileName === openScripts[index].fileName ? {
                                 background: Settings.theme.button,
+                                borderColor: Settings.theme.button,
                                 color: Settings.theme.primary
                               } : {
                                 background: Settings.theme.backgroundsecondary,
+                                borderColor: Settings.theme.backgroundsecondary,
                                 color: Settings.theme.secondary
                               })
                             }}
                           >
-                          x
+                            {hostname}:~/{fileName} {dirty(index)}
+                          </Button>
+                          <Tooltip title="Overwrite editor content with saved file content">
+                            <Button onClick={() => onTabUpdate(index)} style={iconButtonStyle} >
+                              <SyncIcon fontSize='small' />
+                            </Button>
+                          </Tooltip>
+                          <Button onClick={() => onTabClose(index)} style={iconButtonStyle}>
+                            <CloseIcon fontSize='small' />
                           </Button>
                         </div>
                       )}
                     </Draggable>
-                ))}
+                  )
+                })}
                 {provided.placeholder}
               </Box>
             )}