chore(release): 0.13.0 [skip ci]

# [0.13.0](https://github.com/sasjs/server/compare/v0.12.1...v0.13.0) (2022-07-28)

### Bug Fixes

* autofocus input field and submit on enter ([7681722](7681722e5a))
* move api button to user menu ([8de032b](8de032b543))

### Features

* add action and command to editor ([706e228](706e228a8e))

CHANGELOG.md

@@ -1,3 +1,16 @@
+# [0.13.0](https://github.com/sasjs/server/compare/v0.12.1...v0.13.0) (2022-07-28)
+
+
+### Bug Fixes
+
+* autofocus input field and submit on enter ([7681722](https://github.com/sasjs/server/commit/7681722e5afdc2df0c9eed201b05add3beda92a7))
+* move api button to user menu ([8de032b](https://github.com/sasjs/server/commit/8de032b5431b47daabcf783c47ff078bf817247d))
+
+
+### Features
+
+* add action and command to editor ([706e228](https://github.com/sasjs/server/commit/706e228a8e1924786fd9dc97de387974eda504b1))
+
 ## [0.12.1](https://github.com/sasjs/server/compare/v0.12.0...v0.12.1) (2022-07-26)
 
 

web/src/components/filePathInputModal.tsx

@@ -39,21 +39,30 @@ const FilePathInputModal = ({
     setFilePath(value)
   }
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (hasError || !filePath) return
+    saveFile(filePath)
+  }
+
   return (
     <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
         Save File
       </BootstrapDialogTitle>
       <DialogContent dividers>
-        <TextField
+        <form onSubmit={handleSubmit}>
-          fullWidth
+          <TextField
-          variant="outlined"
+            fullWidth
-          label="File Path"
+            autoFocus
-          value={filePath}
+            variant="outlined"
-          onChange={handleChange}
+            label="File Path"
-          error={hasError}
+            value={filePath}
-          helperText={errorText}
+            onChange={handleChange}
-        />
+            error={hasError}
+            helperText={errorText}
+          />
+        </form>
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={() => setOpen(false)}>
@@ -61,9 +70,7 @@ const FilePathInputModal = ({
         </Button>
         <Button
           variant="contained"
-          onClick={() => {
+          onClick={() => saveFile(filePath)}
-            saveFile(filePath)
-          }}
           disabled={hasError || !filePath}
         >
           Save

web/src/components/header.tsx

@@ -90,17 +90,6 @@ const Header = (props: any) => {
             component={Link}
           />
         </Tabs>
-        <Button
-          href={`${baseUrl}/SASjsApi`}
-          target="_blank"
-          rel="noreferrer"
-          variant="contained"
-          color="primary"
-          size="large"
-          endIcon={<OpenInNewIcon />}
-        >
-          API Docs
-        </Button>
         <Button
           href={`${baseUrl}/AppStream`}
           target="_blank"
@@ -110,7 +99,7 @@ const Header = (props: any) => {
           size="large"
           endIcon={<OpenInNewIcon />}
         >
-          App Stream
+          Apps
         </Button>
         <div
           style={{
@@ -138,18 +127,6 @@ const Header = (props: any) => {
             open={!!anchorEl}
             onClose={handleClose}
           >
-            <MenuItem sx={{ justifyContent: 'center' }}>
-              <Button
-                href={'https://server.sasjs.io'}
-                target="_blank"
-                rel="noreferrer"
-                variant="contained"
-                color="primary"
-                size="large"
-              >
-                Documentation
-              </Button>
-            </MenuItem>
             <MenuItem sx={{ justifyContent: 'center' }}>
               <Button
                 component={Link}
@@ -162,6 +139,32 @@ const Header = (props: any) => {
                 Settings
               </Button>
             </MenuItem>
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                href={'https://server.sasjs.io'}
+                target="_blank"
+                rel="noreferrer"
+                variant="contained"
+                size="large"
+                color="primary"
+                endIcon={<OpenInNewIcon />}
+              >
+                Docs
+              </Button>
+            </MenuItem>
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                href={`${baseUrl}/SASjsApi`}
+                target="_blank"
+                rel="noreferrer"
+                variant="contained"
+                color="primary"
+                size="large"
+                endIcon={<OpenInNewIcon />}
+              >
+                API
+              </Button>
+            </MenuItem>
             <MenuItem onClick={handleLogout} sx={{ justifyContent: 'center' }}>
               <Button variant="contained" color="primary">
                 Logout

web/src/components/nameInputModal.tsx

@@ -32,6 +32,14 @@ const NameInputModal = ({
     if (defaultName) setName(defaultName)
   }, [defaultName])
 
+  const handleFocus = (
+    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>
+  ) => {
+    if (defaultName) {
+      event.target.select()
+    }
+  }
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
 
@@ -55,21 +63,32 @@ const NameInputModal = ({
     setName(value)
   }
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (hasError || !name) return
+    action(name)
+  }
+
   return (
     <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
         {title}
       </BootstrapDialogTitle>
       <DialogContent dividers>
-        <TextField
+        <form onSubmit={handleSubmit}>
-          fullWidth
+          <TextField
-          variant="outlined"
+            id="input-box"
-          label={isFolder ? 'Folder Name' : 'File Name'}
+            fullWidth
-          value={name}
+            autoFocus
-          onChange={handleChange}
+            onFocus={handleFocus}
-          error={hasError}
+            variant="outlined"
-          helperText={errorText}
+            label={isFolder ? 'Folder Name' : 'File Name'}
-        />
+            value={name}
+            onChange={handleChange}
+            error={hasError}
+            helperText={errorText}
+          />
+        </form>
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={() => setOpen(false)}>
@@ -77,9 +96,7 @@ const NameInputModal = ({
         </Button>
         <Button
           variant="contained"
-          onClick={() => {
+          onClick={() => action(name)}
-            action(name)
-          }}
           disabled={hasError || !name}
         >
           {actionLabel}

web/src/components/tree.tsx

@@ -67,6 +67,7 @@ const TreeViewNode = ({
     useState(false)
   const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
     useState('')
+  const [defaultInputModalName, setDefaultInputModalName] = useState('')
   const [nameInputModalOpen, setNameInputModalOpen] = useState(false)
   const [nameInputModalTitle, setNameInputModalTitle] = useState('')
   const [nameInputModalActionLabel, setNameInputModalActionLabel] = useState('')
@@ -129,6 +130,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Add Folder')
     setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(true)
+    setDefaultInputModalName('')
   }
 
   const handleNewFileItemClick = () => {
@@ -137,6 +139,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Add File')
     setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(false)
+    setDefaultInputModalName('')
   }
 
   const addFileFolder = (name: string) => {
@@ -152,6 +155,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Rename')
     setNameInputModalActionLabel('Rename')
     setNameInputModalForFolder(node.isFolder)
+    setDefaultInputModalName(node.relativePath.split('/').pop() ?? '')
   }
 
   const renameFileFolder = (name: string) => {
@@ -208,7 +212,7 @@ const TreeViewNode = ({
         action={
           nameInputModalActionLabel === 'Add' ? addFileFolder : renameFileFolder
         }
-        defaultName={node.relativePath.split('/').pop()}
+        defaultName={defaultInputModalName}
       />
       <Menu
         open={contextMenu !== null}

web/src/containers/Studio/editor.tsx

@@ -30,7 +30,8 @@ import {
 import Editor, {
   MonacoDiffEditor,
   DiffEditorDidMount,
-  EditorDidMount
+  EditorDidMount,
+  monaco
 } from 'react-monaco-editor'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 
@@ -89,16 +90,36 @@ const SASjsEditor = ({
 
   const editorRef = useRef(null as any)
 
-  const diffEditorRef = useRef(null as any)
-
   const handleEditorDidMount: EditorDidMount = (editor) => {
-    editor.focus()
     editorRef.current = editor
+    editor.focus()
+    editor.addAction({
+      // An unique identifier of the contributed action.
+      id: 'show-difference',
+
+      // A label of the action that will be presented to the user.
+      label: 'Show Differences',
+
+      // An optional array of keybindings for the action.
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
+
+      contextMenuGroupId: 'navigation',
+
+      contextMenuOrder: 1,
+
+      // Method that will be executed when the action is triggered.
+      // @param editor The editor instance is passed in as a convenience
+      run: function (ed) {
+        setShowDiff(true)
+      }
+    })
   }
 
   const handleDiffEditorDidMount: DiffEditorDidMount = (diffEditor) => {
     diffEditor.focus()
-    diffEditorRef.current = diffEditor
+    diffEditor.addCommand(monaco.KeyCode.Escape, function () {
+      setShowDiff(false)
+    })
   }
 
   usePrompt(