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,27 @@
+# [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)
+
+
+### Bug Fixes
+
+* **web:** disable launch icon button when file content is not saved ([c574b42](https://github.com/sasjs/server/commit/c574b4223591c4a6cd3ef5e146ce99cd8f7c9190))
+* **web:** saveAs functionality fixed in studio page ([3c987c6](https://github.com/sasjs/server/commit/3c987c61ddc258f991e2bf38c1f16a0c4248d6ae))
+* **web:** show original name as default name in rename file/folder modal ([9640f65](https://github.com/sasjs/server/commit/9640f6526496f3564664ccb1f834d0f659dcad4e))
+* **web:** webout tab item fixed in studio page ([7cdffe3](https://github.com/sasjs/server/commit/7cdffe30e36e5cad0284f48ea97925958e12704c))
+* **web:** when no file is selected save the editor content to local storage ([3b1fcb9](https://github.com/sasjs/server/commit/3b1fcb937d06d02ab99c9e8dbe307012d48a7a3a))
+
 # [0.12.0](https://github.com/sasjs/server/compare/v0.11.5...v0.12.0) (2022-07-26)
 
 

web/src/components/filePathInputModal.tsx

@@ -22,8 +22,14 @@ const FilePathInputModal = ({
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
-    const regex = /\.(exe|sh|htaccess)$/i
+
-    if (regex.test(value)) {
+    const specialChars = /[`!@#$%^&*()_+\-=[\]{};':"\\|,<>?~]/
+    const fileExtension = /\.(exe|sh|htaccess)$/i
+
+    if (specialChars.test(value)) {
+      setHasError(true)
+      setErrorText('can not have special characters')
+    } else if (fileExtension.test(value)) {
       setHasError(true)
       setErrorText('can not save file with extensions [exe, sh, htaccess]')
     } else {
@@ -33,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)}>
@@ -55,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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
 
@@ -12,6 +12,7 @@ type NameInputModalProps = {
   isFolder: boolean
   actionLabel: string
   action: (name: string) => void
+  defaultName?: string
 }
 
 const NameInputModal = ({
@@ -20,12 +21,25 @@ const NameInputModal = ({
   title,
   isFolder,
   actionLabel,
-  action
+  action,
+  defaultName
 }: NameInputModalProps) => {
   const [name, setName] = useState('')
   const [hasError, setHasError] = useState(false)
   const [errorText, setErrorText] = useState('')
 
+  useEffect(() => {
+    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
 
@@ -49,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)}>
@@ -71,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,6 +212,7 @@ const TreeViewNode = ({
         action={
           nameInputModalActionLabel === 'Add' ? addFileFolder : renameFileFolder
         }
+        defaultName={defaultInputModalName}
       />
       <Menu
         open={contextMenu !== null}

web/src/containers/Studio/editor.tsx

@@ -14,7 +14,8 @@ import {
   Select,
   SelectChangeEvent,
   Tab,
-  Tooltip
+  Tooltip,
+  Typography
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
@@ -29,7 +30,8 @@ import {
 import Editor, {
   MonacoDiffEditor,
   DiffEditorDidMount,
-  EditorDidMount
+  EditorDidMount,
+  monaco
 } from 'react-monaco-editor'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 
@@ -39,7 +41,7 @@ import FilePathInputModal from '../../components/filePathInputModal'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
 import Modal from '../../components/modal'
 
-import usePrompt from '../../utils/usePrompt'
+import { usePrompt, useStateWithCallback } from '../../utils/hooks'
 
 const StyledTabPanel = styled(TabPanel)(() => ({
   padding: '10px'
@@ -74,7 +76,7 @@ const SASjsEditor = ({
   const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
     AlertSeverityType.Success
   )
-  const [prevFileContent, setPrevFileContent] = useState('')
+  const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
   const [fileContent, setFileContent] = useState('')
   const [log, setLog] = useState('')
   const [ctrlPressed, setCtrlPressed] = useState(false)
@@ -88,21 +90,41 @@ 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(
     'Changes you made may not be saved.',
-    prevFileContent !== fileContent
+    prevFileContent !== fileContent && !!selectedFilePath
   )
 
   useEffect(() => {
@@ -134,10 +156,21 @@ const SASjsEditor = ({
         })
         .finally(() => setIsLoading(false))
     } else {
-      setFileContent('')
+      const content = localStorage.getItem('fileContent') ?? ''
+      setFileContent(content)
     }
+    setLog('')
+    setWebout('')
+    setTab('1')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilePath])
 
+  useEffect(() => {
+    if (fileContent.length && !selectedFilePath) {
+      localStorage.setItem('fileContent', fileContent)
+    }
+  }, [fileContent, selectedFilePath])
+
   useEffect(() => {
     if (runTimes.includes(selectedFileExtension))
       setSelectedRunTime(selectedFileExtension)
@@ -211,6 +244,10 @@ const SASjsEditor = ({
   const saveFile = (filePath?: string) => {
     setIsLoading(true)
 
+    if (filePath) {
+      filePath = filePath.startsWith('/') ? filePath : `/${filePath}`
+    }
+
     const formData = new FormData()
 
     const stringBlob = new Blob([fileContent], { type: 'text/plain' })
@@ -223,10 +260,22 @@ const SASjsEditor = ({
 
     axiosPromise
       .then(() => {
-        if (filePath) {
+        if (filePath && fileContent === prevFileContent) {
+          // when fileContent and prevFileContent is same,
+          // callback function in setPrevFileContent method is not called
+          // because behind the scene useEffect hook is being used
+          // for calling callback function, and it's only fired when the
+          // new value is not equal to old value.
+          // So, we'll have to explicitly update the selected file path
+
           setSelectedFilePath(filePath, true)
+        } else {
+          setPrevFileContent(fileContent, () => {
+            if (filePath) {
+              setSelectedFilePath(filePath, true)
+            }
+          })
         }
-        setPrevFileContent(fileContent)
         setSnackbarMessage('File saved!')
         setSnackbarSeverity(AlertSeverityType.Success)
         setOpenSnackbar(true)
@@ -312,9 +361,14 @@ const SASjsEditor = ({
             <TabList onChange={handleTabChange} centered>
               <StyledTab label="Code" value="1" />
               <StyledTab label="Log" value="2" />
-              <Tooltip title="Displays content from the _webout fileref">
+              <StyledTab
-                <StyledTab label="Webout" value="3" />
+                label={
-              </Tooltip>
+                  <Tooltip title="Displays content from the _webout fileref">
+                    <Typography>Webout</Typography>
+                  </Tooltip>
+                }
+                value="3"
+              />
             </TabList>
           </Box>
 
@@ -324,6 +378,8 @@ const SASjsEditor = ({
           >
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <RunMenu
+                fileContent={fileContent}
+                prevFileContent={prevFileContent}
                 selectedFilePath={selectedFilePath}
                 selectedRunTime={selectedRunTime}
                 runTimes={runTimes}
@@ -423,6 +479,8 @@ export default SASjsEditor
 
 type RunMenuProps = {
   selectedFilePath: string
+  fileContent: string
+  prevFileContent: string
   selectedRunTime: string
   runTimes: string[]
   handleChangeRunTime: (event: SelectChangeEvent) => void
@@ -431,6 +489,8 @@ type RunMenuProps = {
 
 const RunMenu = ({
   selectedFilePath,
+  fileContent,
+  prevFileContent,
   selectedRunTime,
   runTimes,
   handleChangeRunTime,
@@ -463,10 +523,21 @@ const RunMenu = ({
       </Tooltip>
       {selectedFilePath ? (
         <Box sx={{ marginLeft: '10px' }}>
-          <Tooltip title="Launch program in new window">
+          <Tooltip
-            <IconButton onClick={launchProgram}>
+            title={
-              <RocketLaunch />
+              fileContent !== prevFileContent
-            </IconButton>
+                ? 'Save file before launching program'
+                : 'Launch program in new window'
+            }
+          >
+            <span>
+              <IconButton
+                disabled={fileContent !== prevFileContent}
+                onClick={launchProgram}
+              >
+                <RocketLaunch />
+              </IconButton>
+            </span>
           </Tooltip>
         </Box>
       ) : (

web/src/utils/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './usePrompt'
+export * from './useStateWithCallback'

web/src/utils/hooks/usePrompt.ts

@@ -2,7 +2,7 @@ import { useEffect, useCallback, useContext } from 'react'
 import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom'
 import { History, Blocker, Transition } from 'history'
 
-function useBlocker(blocker: Blocker, when = true) {
+const useBlocker = (blocker: Blocker, when = true) => {
   const navigator = useContext(NavigationContext).navigator as History
 
   useEffect(() => {
@@ -24,7 +24,7 @@ function useBlocker(blocker: Blocker, when = true) {
   }, [navigator, blocker, when])
 }
 
-export default function usePrompt(message: string, when = true) {
+export const usePrompt = (message: string, when = true) => {
   const blocker = useCallback(
     (tx) => {
       if (window.confirm(message)) tx.retry()

web/src/utils/hooks/useStateWithCallback.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useRef } from 'react'
+
+export const useStateWithCallback = <T>(
+  initialValue: T
+): [T, (newValue: T, callback?: () => void) => void] => {
+  const callbackRef = useRef<any>(null)
+
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    if (typeof callbackRef.current === 'function') {
+      callbackRef.current()
+
+      callbackRef.current = null
+    }
+  }, [value])
+
+  const setValueWithCallback = (newValue: T, callback?: () => void) => {
+    callbackRef.current = callback
+
+    setValue(newValue)
+  }
+
+  return [value, setValueWithCallback]
+}
+
+export default useStateWithCallback