chore: draw.io diagram of authentication

fix: adding missing global vars to autoexec

.github/workflows/release.yml

@@ -32,10 +32,17 @@ jobs:
         env:
           CI: true
 
+      - name: Compress Executables
+        working-directory: ./executables
+        run: |
+          zip linux.zip api-linux
+          zip macos.zip api-macos
+          zip windows.zip api-win.exe
+
       - name: Release
         uses: softprops/action-gh-release@v1
         with:
           files: |
-            ./executables/api-linux
-            ./executables/api-macos
-            ./executables/api-win.exe
+            ./executables/linux.zip
+            ./executables/macos.zip
+            ./executables/windows.zip

CHANGELOG.md

@@ -2,6 +2,84 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.23](https://github.com/sasjs/server/compare/v0.0.22...v0.0.23) (2022-02-08)
+
+### [0.0.22](https://github.com/sasjs/server/compare/v0.0.17...v0.0.22) (2022-02-08)
+
+
+### Bug Fixes
+
+* adding missing global vars to autoexec ([1966b17](https://github.com/sasjs/server/commit/1966b17f27e66bf1c9673ef6e1c11f4868b4f816))
+* avoid uninitialised note ([e4c027a](https://github.com/sasjs/server/commit/e4c027ad5121302b9ae093b2b76dc27f51a94365))
+* bumping core version ([a8df5f4](https://github.com/sasjs/server/commit/a8df5f4afd6c4522270d0a60ab8153dfbdf79e16))
+* bumping sasjs/core and updating descriptions ([31532c0](https://github.com/sasjs/server/commit/31532c0efa41e53f87377a2c7c41d21c7909e3a0))
+* compressing release files for faster download times ([d8b75a4](https://github.com/sasjs/server/commit/d8b75a47d305e0772ccbf8837ba4d7347b94cc93))
+* fixing versioning blooper ([a3b57f6](https://github.com/sasjs/server/commit/a3b57f6e28448fe98e634383041a5633541c8c02))
+
+### [0.0.21](https://github.com/sasjs/server/compare/v0.0.20...v0.0.21) (2022-02-01)
+
+
+### Bug Fixes
+
+* avoid uninitialised note ([e4c027a](https://github.com/sasjs/server/commit/e4c027ad5121302b9ae093b2b76dc27f51a94365))
+
+### [0.0.20](https://github.com/sasjs/server/compare/v0.0.2...v0.0.20) (2022-01-20)
+
+
+### Bug Fixes
+
+* fixing versioning blooper ([a3b57f6](https://github.com/sasjs/server/commit/a3b57f6e28448fe98e634383041a5633541c8c02))
+
+### [0.0.19](https://github.com/sasjs/server/compare/v0.0.18...v0.0.19) (2022-01-20)
+
+
+### Bug Fixes
+
+* bumping sasjs/core and updating descriptions ([31532c0](https://github.com/sasjs/server/commit/31532c0efa41e53f87377a2c7c41d21c7909e3a0))
+
+### [0.0.18](https://github.com/sasjs/server/compare/v0.0.17...v0.0.18) (2022-01-08)
+
+
+### Bug Fixes
+
+* compressing release files for faster download times ([d8b75a4](https://github.com/sasjs/server/commit/d8b75a47d305e0772ccbf8837ba4d7347b94cc93))
+
+### [0.0.17](https://github.com/sasjs/server/compare/v0.0.16...v0.0.17) (2022-01-07)
+
+
+### Bug Fixes
+
+* bug removed, log is clean now ([43769e7](https://github.com/sasjs/server/commit/43769e711d37a4f670786545630139a2d926dc76))
+
+### [0.0.16](https://github.com/sasjs/server/compare/v0.0.15...v0.0.16) (2022-01-07)
+
+
+### Bug Fixes
+
+* added sas9 server address ([cd83891](https://github.com/sasjs/server/commit/cd838915fdb216ee364ea677747409311b1214fb))
+* recreate crashed session ([6cbc657](https://github.com/sasjs/server/commit/6cbc657da3eb7fa821a678443a3ae4079c2a1f09))
+* session should be marked as consumed ([7a3d710](https://github.com/sasjs/server/commit/7a3d710153f37d12160ff45f8f97fb4fcc75d684))
+
+### [0.0.15](https://github.com/sasjs/server/compare/v0.0.14...v0.0.15) (2022-01-06)
+
+
+### Bug Fixes
+
+* **studio:** web component updated ([2d77222](https://github.com/sasjs/server/commit/2d77222ae8a139acd9d96466d0e68291c4ebd70e))
+* updated route for sas code ([e1eb044](https://github.com/sasjs/server/commit/e1eb04494a5650726c95990f74fc719eced4ccb5))
+* **web:** autosave and autofocus ([51ee8c0](https://github.com/sasjs/server/commit/51ee8c0825f021d1d67b2d765d5b434cbf248a1f))
+* **web:** parsing of webout ([a115160](https://github.com/sasjs/server/commit/a1151606f21e0007e2b1ca1245d592d96866f62a))
+* **web:** sticky tabs on Studio + extra run code button removed ([450d99f](https://github.com/sasjs/server/commit/450d99f06e5929eb1679e6203284e4faa44e19b0))
+
+### [0.0.14](https://github.com/sasjs/server/compare/v0.0.13...v0.0.14) (2021-12-19)
+
+
+### Bug Fixes
+
+* actually a README change, the fix was in the previous commit (updating ms_webout) that should have been a PR, to trigger a release ([d86c841](https://github.com/sasjs/server/commit/d86c841f1fb94455ac3500f215a42b4acb8b0017))
+* bumping sasjs/core with adjustment to ms_webout() ([076b866](https://github.com/sasjs/server/commit/076b866c020fb017512c2764801022a57fe4cca8))
+* switch to main branch ([ceca370](https://github.com/sasjs/server/commit/ceca370e2757baf2e8ebb90dab6dfd27f7b990fc))
+
 ### [0.0.13](https://github.com/sasjs/server/compare/v0.0.12...v0.0.13) (2021-12-16)
 
 

README.md

@@ -8,6 +8,23 @@ SASjs Server provides a NodeJS wrapper for calling the SAS binary executable. It
 
 One major benefit of using SASjs Server (alongside other components of the SASjs framework such as the [CLI](https://cli.sasjs.io), [Adapter](https://adapter.sasjs.io) and [Core](https://core.sasjs.io) library) is that the projects you create can be very easily ported to SAS 9 (Stored Process server) or Viya (Job Execution server).
 
+## Installation
+
+First, download the relevant package from the [releases](https://github.com/sasjs/server/releases) page - either manually, or with commandline, eg as follow:
+
+```bash
+curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+unzip linux.zip
+./api-linux
+```
+
+Second, trigger by double clicking (windows) or executing from commandline.
+
+You are presented with two prompts:
+
+* Location of your `sas.exe` / `sas.sh` executable
+* Path to a filesystem location for Stored Programs and temporary files
+
 ## Configuration
 
 Configuration is made in the `configuration` section of `package.json`:

SASjsServer.drawio

@@ -0,0 +1,211 @@
+<mxfile host="65bd71144e">
+    <diagram id="HJy_QFGaI9JSrArARLup" name="Page-1">
+        <mxGraphModel dx="3103" dy="2723" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="7" value="SASjs Server" style="whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=0;fontSize=30;" parent="1" vertex="1">
+                    <mxGeometry x="30" y="-150" width="360" height="1250" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" value="&lt;font style=&quot;font-size: 22px&quot;&gt;Internal Authentication&lt;/font&gt;" style="whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=0;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="-60" width="320" height="330" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="End user" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;fontStyle=0" parent="1" vertex="1">
+                    <mxGeometry x="-740" y="-120" width="40" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="" style="edgeStyle=none;html=1;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" parent="1" target="28" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-530" y="23" as="sourcePoint"/>
+                        <mxPoint x="115" y="22.586363636363558" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="11" value="&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px ; line-height: 18px&quot;&gt;&lt;span style=&quot;color: #a31515&quot;&gt;/SASjsApi/auth/authorize&lt;br&gt;(username,password,clientId)&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="8" vertex="1" connectable="0">
+                    <mxGeometry x="-0.1257" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="14" value="" style="edgeStyle=none;html=1;exitX=-0.002;exitY=0.874;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="28" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="110" y="80" as="sourcePoint"/>
+                        <mxPoint x="-530" y="80" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="16" value="&lt;font color=&quot;#a31515&quot; face=&quot;menlo, monaco, courier new, monospace&quot;&gt;&lt;span style=&quot;font-size: 12px&quot;&gt;`code`&lt;/span&gt;&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="14" vertex="1" connectable="0">
+                    <mxGeometry x="0.1931" y="-1" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="21" value="End user" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;fontStyle=0" parent="1" vertex="1">
+                    <mxGeometry x="-730" y="1100" width="40" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="22" value="" style="edgeStyle=none;html=1;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" parent="1" target="30" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-530" y="163" as="sourcePoint"/>
+                        <mxPoint x="115" y="165" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="23" value="&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px ; line-height: 18px&quot;&gt;&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; line-height: 18px&quot;&gt;&lt;span style=&quot;color: #a31515&quot;&gt;/SASjsApi/auth/token&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;color: #a31515&quot;&gt;(clientId,code)&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="22" vertex="1" connectable="0">
+                    <mxGeometry x="-0.1257" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="24" value="" style="edgeStyle=none;html=1;exitX=0.009;exitY=0.905;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="30" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="210" y="222.5" as="sourcePoint"/>
+                        <mxPoint x="-530" y="223" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="25" value="&lt;font color=&quot;#a31515&quot; face=&quot;menlo, monaco, courier new, monospace&quot;&gt;&lt;span style=&quot;font-size: 12px&quot;&gt;`&lt;/span&gt;&lt;/font&gt;&lt;span style=&quot;color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px&quot;&gt;accessToken&lt;/span&gt;&lt;span style=&quot;font-size: 12px ; color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace&quot;&gt;` &amp;amp; `&lt;/span&gt;&lt;span style=&quot;color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px&quot;&gt;refreshToken&lt;/span&gt;&lt;span style=&quot;color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px&quot;&gt;`&lt;/span&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="24" vertex="1" connectable="0">
+                    <mxGeometry x="0.1931" y="-1" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="26" value="" style="endArrow=none;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;" parent="1" source="21" target="4" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="-340" y="240" as="sourcePoint"/>
+                        <mxPoint x="-290" y="190" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="28" value="&lt;span&gt;Validates&lt;/span&gt;&lt;br&gt;&lt;span&gt;username/password/clientId&lt;/span&gt;&lt;br&gt;&lt;span&gt;and issue short&lt;/span&gt;&lt;br&gt;&lt;span&gt;Authorization code&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="115" width="190" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="30" value="Validates&lt;br&gt;clientId &amp;amp; authorization code&lt;br&gt;and issue&lt;br&gt;Access Token &amp;amp; Refresh Token" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="115" y="140" width="190" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" value="Protected APIs&lt;br&gt;Authenticate requests &lt;br&gt;with provided Bearer Token" style="whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=0;" parent="1" vertex="1">
+                    <mxGeometry x="50" y="920" width="320" height="150" as="geometry"/>
+                </mxCell>
+                <mxCell id="33" value="" style="edgeStyle=none;html=1;entryX=-0.012;entryY=0.384;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" target="32" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-520" y="978" as="sourcePoint"/>
+                        <mxPoint x="-80" y="819" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="34" value="&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px ; line-height: 18px&quot;&gt;&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; line-height: 18px&quot;&gt;&lt;font color=&quot;#a31515&quot;&gt;Request with Access Token&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="33" vertex="1" connectable="0">
+                    <mxGeometry x="-0.1257" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="37" value="Browser" style="rounded=0;whiteSpace=wrap;html=1;fontSize=22;" vertex="1" parent="1">
+                    <mxGeometry x="-590" y="-100" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="38" value="Browser" style="rounded=0;whiteSpace=wrap;html=1;fontSize=22;" vertex="1" parent="1">
+                    <mxGeometry x="-590" y="1110" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" value="" style="endArrow=none;dashed=1;html=1;fontSize=22;entryX=0.5;entryY=1;entryDx=0;entryDy=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="38" target="37">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="-340" y="390" as="sourcePoint"/>
+                        <mxPoint x="-290" y="340" as="targetPoint"/>
+                        <Array as="points"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="40" value="&lt;font style=&quot;font-size: 22px&quot;&gt;Okta Authentication&lt;/font&gt;" style="whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=0;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="300" width="320" height="560" as="geometry"/>
+                </mxCell>
+                <mxCell id="41" value="" style="edgeStyle=none;html=1;entryX=-0.013;entryY=0.092;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" target="49">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-530" y="373" as="sourcePoint"/>
+                        <mxPoint x="115" y="372.58636363636356" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="42" value="&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px ; line-height: 18px&quot;&gt;&lt;span style=&quot;color: #a31515&quot;&gt;/SASjsApi/auth/okta/authorize&lt;br&gt;&lt;/span&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="41">
+                    <mxGeometry x="-0.1257" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="49" value="redirects to okta server&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;OKTA OIDC middleware&lt;br&gt;https://github.com/okta/okta-oidc-middleware&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;OKTA nodeJS Express implementation&lt;br&gt;https://github.com/okta/samples-nodejs-express-4/tree/master/okta-hosted-login&lt;br&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="115" y="350" width="190" height="280" as="geometry"/>
+                </mxCell>
+                <mxCell id="75" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=14;" edge="1" parent="1" source="50" target="32">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="50" value="Validates express session &lt;br&gt;through OKTA OIDC middleware" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="115" y="710" width="190" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="51" value="&lt;span style=&quot;font-size: 22px&quot;&gt;Okta Authorization Server&lt;br&gt;&lt;/span&gt;" style="whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=0;" vertex="1" parent="1">
+                    <mxGeometry x="600" y="300" width="320" height="380" as="geometry"/>
+                </mxCell>
+                <mxCell id="52" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="665" y="350" width="190" height="280" as="geometry"/>
+                </mxCell>
+                <mxCell id="53" value="" style="endArrow=classic;html=1;fontSize=22;exitX=1.002;exitY=0.123;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="49">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="400" y="480" as="sourcePoint"/>
+                        <mxPoint x="660" y="384" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="54" value="&lt;span style=&quot;color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px&quot;&gt;/authorize&lt;/span&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=22;" vertex="1" connectable="0" parent="53">
+                    <mxGeometry x="0.0222" y="1" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="58" value="" style="endArrow=classic;html=1;fontSize=22;exitX=-0.016;exitY=0.291;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="52">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-300" y="470" as="sourcePoint"/>
+                        <mxPoint x="-530" y="431" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="61" value="302 redirect to authentication prompt&amp;nbsp;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=22;" vertex="1" connectable="0" parent="58">
+                    <mxGeometry x="-0.659" y="3" relative="1" as="geometry">
+                        <mxPoint x="-630" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="62" value="" style="endArrow=classic;html=1;fontSize=22;" edge="1" parent="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-530" y="500" as="sourcePoint"/>
+                        <mxPoint x="665" y="500.48" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="64" value="Authentication &amp;amp; Consent" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=22;" vertex="1" connectable="0" parent="62">
+                    <mxGeometry x="-0.4695" y="6" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="65" value="" style="endArrow=classic;html=1;fontSize=22;exitX=0;exitY=0.679;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.995;entryY=0.679;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="52" target="49">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="230" y="560" as="sourcePoint"/>
+                        <mxPoint x="280" y="510" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="66" value="Authorization Code to redirect uri" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;" vertex="1" connectable="0" parent="65">
+                    <mxGeometry x="0.0583" y="1" relative="1" as="geometry">
+                        <mxPoint x="26" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="67" value="" style="endArrow=classic;html=1;fontSize=22;exitX=0;exitY=0.679;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.995;entryY=0.679;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="304.0500000000002" y="569.9999999999999" as="sourcePoint"/>
+                        <mxPoint x="665.0000000000005" y="569.9999999999999" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="68" value="&lt;span style=&quot;color: rgb(163 , 21 , 21) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px&quot;&gt;/token&lt;/span&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;" vertex="1" connectable="0" parent="67">
+                    <mxGeometry x="0.0583" y="1" relative="1" as="geometry">
+                        <mxPoint x="-5" y="1" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="69" value="" style="endArrow=classic;html=1;fontSize=22;exitX=0;exitY=0.679;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.995;entryY=0.679;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="665.9500000000005" y="599.9999999999999" as="sourcePoint"/>
+                        <mxPoint x="305.00000000000017" y="599.9999999999999" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="70" value="Access Token" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;" vertex="1" connectable="0" parent="69">
+                    <mxGeometry x="0.0583" y="1" relative="1" as="geometry">
+                        <mxPoint x="26" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="71" value="" style="edgeStyle=none;html=1;entryX=-0.012;entryY=0.384;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="-530" y="760" as="sourcePoint"/>
+                        <mxPoint x="115.00000000000031" y="759.9999999999999" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="72" value="&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; font-size: 12px ; line-height: 18px&quot;&gt;&lt;div style=&quot;font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; line-height: 18px&quot;&gt;&lt;font color=&quot;#a31515&quot;&gt;Request with OKTA mechanism&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="71">
+                    <mxGeometry x="-0.1257" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Api of SASjs server",
   "main": "./src/server.ts",
   "scripts": {
@@ -41,12 +41,12 @@
   },
   "release": {
     "branches": [
-      "master"
+      "main"
     ]
   },
-  "author": "Analytium Ltd",
+  "author": "4GL Ltd",
   "dependencies": {
-    "@sasjs/core": "^2.59.0",
+    "@sasjs/core": "3.11.1",
     "@sasjs/utils": "2.34.1",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",

api/public/swagger.yaml

@@ -92,6 +92,16 @@ components:
                 - clientSecret
             type: object
             additionalProperties: false
+        ExecuteSASCodePayload:
+            properties:
+                code:
+                    type: string
+                    description: 'Code of SAS program'
+                    example: '* SAS Code HERE;'
+            required:
+                - code
+            type: object
+            additionalProperties: false
         MemberType.folder:
             enum:
                 - folder
@@ -358,16 +368,6 @@ components:
                 - description
             type: object
             additionalProperties: false
-        RunSASPayload:
-            properties:
-                code:
-                    type: string
-                    description: 'Code of SAS program'
-                    example: '* SAS Code HERE;'
-            required:
-                - code
-            type: object
-            additionalProperties: false
         ExecuteReturnJsonResponse:
             properties:
                 status:
@@ -401,7 +401,7 @@ info:
     version: 0.0.1
     description: 'Api of SASjs server'
     contact:
-        name: 'Analytium Ltd'
+        name: '4GL Ltd'
 openapi: 3.0.0
 paths:
     /SASjsApi/auth/authorize:
@@ -511,6 +511,30 @@ paths:
                     application/json:
                         schema:
                             $ref: '#/components/schemas/ClientPayload'
+    /SASjsApi/code/execute:
+        post:
+            operationId: ExecuteSASCode
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                type: string
+            description: 'Execute SAS code.'
+            summary: 'Run SAS Code and returns log'
+            tags:
+                - CODE
+            security:
+                -
+                    bearerAuth: []
+            parameters: []
+            requestBody:
+                required: true
+                content:
+                    application/json:
+                        schema:
+                            $ref: '#/components/schemas/ExecuteSASCodePayload'
     /SASjsApi/drive/deploy:
         post:
             operationId: Deploy
@@ -982,6 +1006,26 @@ paths:
                         format: double
                         type: number
                     example: '6789'
+    /SASjsApi/session:
+        get:
+            operationId: Session
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                $ref: '#/components/schemas/UserResponse'
+                            examples:
+                                'Example 1':
+                                    value: {id: 123, username: johnusername, displayName: John}
+            summary: 'Get session info (username).'
+            tags:
+                - Session
+            security:
+                -
+                    bearerAuth: []
+            parameters: []
     /SASjsApi/stp/execute:
         get:
             operationId: ExecuteReturnRaw
@@ -1037,50 +1081,6 @@ paths:
                     application/json:
                         schema:
                             $ref: '#/components/schemas/ExecuteReturnJsonPayload'
-    /SASjsApi/stp/run:
-        post:
-            operationId: RunSAS
-            responses:
-                '200':
-                    description: Ok
-                    content:
-                        application/json:
-                            schema:
-                                type: string
-            description: 'Trigger a SAS program.'
-            summary: 'Run SAS Program, return raw content'
-            tags:
-                - STP
-            security:
-                -
-                    bearerAuth: []
-            parameters: []
-            requestBody:
-                required: true
-                content:
-                    application/json:
-                        schema:
-                            $ref: '#/components/schemas/RunSASPayload'
-    /SASjsApi/session:
-        get:
-            operationId: Session
-            responses:
-                '200':
-                    description: Ok
-                    content:
-                        application/json:
-                            schema:
-                                $ref: '#/components/schemas/UserResponse'
-                            examples:
-                                'Example 1':
-                                    value: {id: 123, username: johnusername, displayName: John}
-            summary: 'Get session info (username).'
-            tags:
-                - Session
-            security:
-                -
-                    bearerAuth: []
-            parameters: []
 servers:
     -
         url: /
@@ -1106,3 +1106,6 @@ tags:
     -
         name: STP
         description: 'Operations about STP'
+    -
+        name: CODE
+        description: 'Operations on SAS code'

api/src/app.ts

@@ -13,11 +13,14 @@ dotenv.config()
 const app = express()
 
 const { MODE, CORS, PORT_WEB } = process.env
+const whiteList = [
+  `http://localhost:${PORT_WEB ?? 3000}`,
+  'https://sas.analytium.co.uk:8343'
+]
+
 if (MODE?.trim() !== 'server' || CORS?.trim() === 'enable') {
   console.log('All CORS Requests are enabled')
-  app.use(
-    cors({ credentials: true, origin: `http://localhost:${PORT_WEB ?? 3000}` })
-  )
+  app.use(cors({ credentials: true, origin: whiteList }))
 }
 
 app.use(express.json({ limit: '50mb' }))

api/src/controllers/code.ts

@@ -0,0 +1,63 @@
+import express from 'express'
+import { Request, Security, Route, Tags, Post, Body } from 'tsoa'
+import { ExecutionController } from './internal'
+import { PreProgramVars } from '../types'
+
+interface ExecuteSASCodePayload {
+  /**
+   * Code of SAS program
+   * @example "* SAS Code HERE;"
+   */
+  code: string
+}
+
+@Security('bearerAuth')
+@Route('SASjsApi/code')
+@Tags('CODE')
+export class CodeController {
+  /**
+   * Execute SAS code.
+   * @summary Run SAS Code and returns log
+   */
+  @Post('/execute')
+  public async executeSASCode(
+    @Request() request: express.Request,
+    @Body() body: ExecuteSASCodePayload
+  ): Promise<string> {
+    return executeSASCode(request, body)
+  }
+}
+
+const executeSASCode = async (req: any, { code }: ExecuteSASCodePayload) => {
+  try {
+    const result = await new ExecutionController().executeProgram(
+      code,
+      getPreProgramVariables(req),
+      { ...req.query, _debug: 131 },
+      undefined,
+      true
+    )
+
+    return result as string
+  } catch (err: any) {
+    throw {
+      code: 400,
+      status: 'failure',
+      message: 'Job execution failed.',
+      error: typeof err === 'object' ? err.toString() : err
+    }
+  }
+}
+
+const getPreProgramVariables = (req: any): PreProgramVars => {
+  const host = req.get('host')
+  const protocol = req.protocol + '://'
+  const { user, accessToken } = req
+  return {
+    username: user.username,
+    userId: user.userId,
+    displayName: user.displayName,
+    serverUrl: protocol + host,
+    accessToken
+  }
+}

api/src/controllers/index.ts

@@ -1,7 +1,8 @@
 export * from './auth'
 export * from './client'
+export * from './code'
 export * from './drive'
 export * from './group'
+export * from './session'
 export * from './stp'
 export * from './user'
-export * from './session'

api/src/controllers/internal/Execution.ts

@@ -37,6 +37,7 @@ export class ExecutionController {
 
     const session = await sessionController.getSession()
     session.inUse = true
+    session.consumed = true
 
     const logPath = path.join(session.path, 'log.log')
 
@@ -63,7 +64,16 @@ export class ExecutionController {
 %let _sasjs_apipath=/SASjsApi/stp/execute;
 %let _metaperson=&_sasjs_displayname;
 %let _metauser=&_sasjs_username;
-%let sasjsprocessmode=Stored Program;`
+%let sasjsprocessmode=Stored Program;
+
+%global SYSPROCESSMODE SYSTCPIPHOSTNAME;
+%macro _sasjs_server_init();
+  %if "&SYSPROCESSMODE"="" %then %let SYSPROCESSMODE=&sasjsprocessmode;
+  %if "&SYSTCPIPHOSTNAME"="" %then %let SYSTCPIPHOSTNAME=&_sasjs_apiserverurl;
+%mend;
+%_sasjs_server_init()
+%sysmacdelete _sasjs_server_init;
+`
 
     program = `
 /* runtime vars */
@@ -100,14 +110,12 @@ ${program}`
     await createFile(codePath + '.bkp', program)
     await moveFile(codePath + '.bkp', codePath)
 
-    // we now need to poll the session array
+    // we now need to poll the session status
     while (!session.completed) {
       await delay(50)
     }
 
-    const log =
-      ((await fileExists(logPath)) ? await readFile(logPath) : '') +
-      session.crashed
+    const log = (await fileExists(logPath)) ? await readFile(logPath) : ''
     const webout = (await fileExists(weboutPath))
       ? await readFile(weboutPath)
       : ''
@@ -115,8 +123,8 @@ ${program}`
     const debugValue =
       typeof vars._debug === 'string' ? parseInt(vars._debug) : vars._debug
 
+    // it should be deleted by scheduleSessionDestroy
     session.inUse = false
-    sessionController.deleteSession(session)
 
     if (returnJson) {
       return {

api/src/controllers/internal/Session.ts

@@ -12,7 +12,8 @@ import {
   createFile,
   fileExists,
   generateTimestamp,
-  readFile
+  readFile,
+  moveFile
 } from '@sasjs/utils'
 
 const execFilePromise = promisify(execFile)
@@ -20,8 +21,11 @@ const execFilePromise = promisify(execFile)
 export class SessionController {
   private sessions: Session[] = []
 
+  private getReadySessions = (): Session[] =>
+    this.sessions.filter((sess: Session) => sess.ready && !sess.consumed)
+
   public async getSession() {
-    const readySessions = this.sessions.filter((sess: Session) => sess.ready)
+    const readySessions = this.getReadySessions()
 
     const session = readySessions.length
       ? readySessions[0]
@@ -32,7 +36,7 @@ export class SessionController {
     return session
   }
 
-  private async createSession() {
+  private async createSession(): Promise<Session> {
     const sessionId = generateUniqueFileName(generateTimestamp())
     const sessionFolder = path.join(getTmpSessionsFolderPath(), sessionId)
 
@@ -47,6 +51,7 @@ export class SessionController {
       id: sessionId,
       ready: false,
       inUse: false,
+      consumed: false,
       completed: false,
       creationTimeStamp,
       deathTimeStamp,
@@ -105,15 +110,16 @@ export class SessionController {
     return session
   }
 
-  public async waitForSession(session: Session) {
+  private async waitForSession(session: Session) {
     const codeFilePath = path.join(session.path, 'code.sas')
 
     // TODO: don't wait forever
     while ((await fileExists(codeFilePath)) && !session.crashed) {}
-    console.log('session crashed?', !!session.crashed, session.crashed)
+
+    if (session.crashed)
+      console.log('session crashed! while waiting to be ready', session.crashed)
 
     session.ready = true
-    return Promise.resolve(session)
   }
 
   public async deleteSession(session: Session) {
@@ -121,11 +127,9 @@ export class SessionController {
     await deleteFolder(session.path)
 
     // remove the session from the session array
-    if (session.ready) {
-      this.sessions = this.sessions.filter(
-        (sess: Session) => sess.id !== session.id
-      )
-    }
+    this.sessions = this.sessions.filter(
+      (sess: Session) => sess.id !== session.id
+    )
   }
 
   private scheduleSessionDestroy(session: Session) {
@@ -153,6 +157,7 @@ const autoExecContent = `
 data _null_;
   /* remove the dummy SYSIN */
   length fname $8;
+  call missing(fname);
   rc=filename(fname,getoption('SYSIN') );
   if rc = 0 and fexist(fname) then rc=fdelete(fname);
   rc=filename(fname);

api/src/controllers/stp.ts

@@ -5,13 +5,6 @@ import { ExecutionController } from './internal'
 import { PreProgramVars } from '../types'
 import { getTmpFilesFolderPath, makeFilesNamesMap } from '../utils'
 
-interface RunSASPayload {
-  /**
-   * Code of SAS program
-   * @example "* SAS Code HERE;"
-   */
-  code: string
-}
 interface ExecuteReturnJsonPayload {
   /**
    * Location of SAS program
@@ -48,18 +41,6 @@ export class STPController {
     return executeReturnRaw(request, _program)
   }
 
-  /**
-   * Trigger a SAS program.
-   * @summary Run SAS Program, return raw content
-   */
-  @Post('/run')
-  public async runSAS(
-    @Request() request: express.Request,
-    @Body() body: RunSASPayload
-  ): Promise<string> {
-    return runSAS(request, body)
-  }
-
   /**
    * Trigger a SAS program using it's location in the _program parameter.
    * Enable debugging using the _debug parameter.
@@ -109,25 +90,6 @@ const executeReturnRaw = async (
   }
 }
 
-const runSAS = async (req: any, { code }: RunSASPayload) => {
-  try {
-    const result = await new ExecutionController().executeProgram(
-      code,
-      getPreProgramVariables(req),
-      req.query
-    )
-
-    return result as string
-  } catch (err: any) {
-    throw {
-      code: 400,
-      status: 'failure',
-      message: 'Job execution failed.',
-      error: typeof err === 'object' ? err.toString() : err
-    }
-  }
-}
-
 const executeReturnJson = async (
   req: any,
   _program: string

api/src/routes/api/code.ts

@@ -0,0 +1,25 @@
+import express from 'express'
+import { runSASValidation } from '../../utils'
+import { CodeController } from '../../controllers/'
+
+const runRouter = express.Router()
+
+const controller = new CodeController()
+
+runRouter.post('/execute', async (req, res) => {
+  const { error, value: body } = runSASValidation(req.body)
+  if (error) return res.status(400).send(error.details[0].message)
+
+  try {
+    const response = await controller.executeSASCode(req, body)
+    res.send(response)
+  } catch (err: any) {
+    const statusCode = err.code
+
+    delete err.code
+
+    res.status(statusCode).send(err)
+  }
+})
+
+export default runRouter

api/src/routes/api/index.ts

@@ -11,6 +11,7 @@ import {
 
 import driveRouter from './drive'
 import stpRouter from './stp'
+import codeRouter from './code'
 import userRouter from './user'
 import groupRouter from './group'
 import clientRouter from './client'
@@ -31,6 +32,7 @@ router.use(
 router.use('/drive', authenticateAccessToken, driveRouter)
 router.use('/group', desktopRestrict, groupRouter)
 router.use('/stp', authenticateAccessToken, stpRouter)
+router.use('/code', authenticateAccessToken, codeRouter)
 router.use('/user', desktopRestrict, userRouter)
 router.use(
   '/',

api/src/routes/api/stp.ts

@@ -24,22 +24,6 @@ stpRouter.get('/execute', async (req, res) => {
   }
 })
 
-stpRouter.post('/run', async (req, res) => {
-  const { error, value: body } = runSASValidation(req.body)
-  if (error) return res.status(400).send(error.details[0].message)
-
-  try {
-    const response = await controller.runSAS(req, body)
-    res.send(response)
-  } catch (err: any) {
-    const statusCode = err.code
-
-    delete err.code
-
-    res.status(statusCode).send(err)
-  }
-})
-
 stpRouter.post(
   '/execute',
   fileUploadController.preuploadMiddleware,

api/src/types/Session.ts

@@ -5,6 +5,7 @@ export interface Session {
   deathTimeStamp: string
   path: string
   inUse: boolean
+  consumed: boolean
   completed: boolean
   crashed?: string
 }

api/src/utils/connectDB.ts

@@ -7,8 +7,11 @@ import { getRealPath } from '@sasjs/utils'
 
 export const connectDB = async () => {
   // NOTE: when exporting app.js as agent for supertest
-  // we should exlcude connecting to the real database
-  if (process.env.NODE_ENV !== 'test') {
+  // we should exclude connecting to the real database
+  if (process.env.NODE_ENV === 'test') {
+    process.driveLoc = path.join(process.cwd(), 'tmp')
+    return
+  } else {
     const { MODE } = process.env
 
     if (MODE?.trim() !== 'server') {

api/tsoa.json

@@ -38,6 +38,10 @@
       {
         "name": "STP",
         "description": "Operations about STP"
+      },
+      {
+        "name": "CODE",
+        "description": "Operations on SAS code"
       }
     ],
     "yaml": true,

docker-compose.yml

@@ -43,7 +43,7 @@ services:
       - ./web:/usr/server/web
 
   mongodb:
-    image: mongo:latest
+    image: mongo:5.0.4
     ports:
       - 27017:27017
     volumes:

package.json

@@ -1,7 +1,8 @@
 {
   "name": "server",
-  "version": "0.0.13",
+  "version": "0.0.23",
   "description": "NodeJS wrapper for calling the SAS binary executable",
+  "repository": "https://github.com/sasjs/server",
   "scripts": {
     "server": "npm run server:prepare && npm run server:start",
     "server:prepare": "cd web && npm ci && npm run build && cd ../api && npm ci && cd ..",

web/src/components/home.tsx

@@ -23,7 +23,7 @@ const Home = () => {
         and contributions are welcomed.
       </p>
       <p>
-        SASjs Server is maintained by the SASjs Apps team -{' '}
+        SASjs Server is maintained by the SAS Apps team -{' '}
         <a
           href="https://sasapps.io/contact-us"
           target="_blank"

web/src/containers/Studio/index.tsx

@@ -2,17 +2,37 @@ import React, { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 
 import Box from '@mui/material/Box'
-import { Button, Paper, Stack, Toolbar } from '@mui/material'
-import Editor from '@monaco-editor/react'
+import { Button, Paper, Stack, Tab } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import Editor, { OnMount } from '@monaco-editor/react'
 import { useLocation } from 'react-router-dom'
+import { TabContext, TabList, TabPanel } from '@mui/lab'
+
+const useStyles = makeStyles(() => ({
+  root: {
+    fontSize: '1rem',
+    color: 'gray',
+    '&.Mui-selected': {
+      color: 'black'
+    }
+  }
+}))
 
 const Studio = () => {
   const location = useLocation()
   const [fileContent, setFileContent] = useState('')
   const [log, setLog] = useState('')
+  const [webout, setWebout] = useState('')
+  const [tab, setTab] = React.useState('1')
+  const handleTabChange = (_e: any, newValue: string) => {
+    setTab(newValue)
+  }
 
-  const editorRef = useRef(null)
-  const handleEditorDidMount = (editor: any) => (editorRef.current = editor)
+  const editorRef = useRef(null as any)
+  const handleEditorDidMount: OnMount = (editor) => {
+    editor.focus()
+    editorRef.current = editor
+  }
 
   const getSelection = () => {
     const editor = editorRef.current as any
@@ -20,25 +40,47 @@ const Studio = () => {
     return selection ?? ''
   }
 
-  const handleRunSelectionBtnClick = () => runCode(getSelection())
-
-  const handleRunBtnClick = () => runCode(fileContent)
+  const handleRunBtnClick = () => runCode(getSelection() || fileContent)
 
   const runCode = (code: string) => {
     axios
-      .post(`/SASjsApi/stp/run`, { code })
+      .post(`/SASjsApi/code/execute`, { code })
       .then((res: any) => {
-        const data =
-          typeof res.data === 'string'
-            ? res.data
-            : `<pre><code>${JSON.stringify(res.data, null, 4)}</code></pre>`
+        setLog(`<div><h2>SAS Log</h2><pre>${res?.data?.log}</pre></div>`)
 
-        setLog(data)
-        document?.getElementById('sas_log')?.scrollIntoView()
+        let weboutString: string
+        try {
+          weboutString = res.data.webout
+            .split('>>weboutBEGIN<<')[1]
+            .split('>>weboutEND<<')[0]
+        } catch (_) {
+          weboutString = res?.data?.webout ?? ''
+        }
+
+        let webout: string
+        try {
+          webout = JSON.stringify(JSON.parse(weboutString), null, 4)
+        } catch (_) {
+          webout = weboutString
+        }
+
+        setWebout(`<pre><code>${webout}</code></pre>`)
+        setTab('2')
       })
       .catch((err) => console.log(err))
   }
 
+  useEffect(() => {
+    const content = localStorage.getItem('fileContent') ?? ''
+    setFileContent(content)
+  }, [])
+
+  useEffect(() => {
+    if (fileContent.length) {
+      localStorage.setItem('fileContent', fileContent)
+    }
+  }, [fileContent])
+
   useEffect(() => {
     const params = new URLSearchParams(location.search)
     const programPath = params.get('_program')
@@ -50,48 +92,74 @@ const Studio = () => {
         .catch((err) => console.log(err))
   }, [location.search])
 
+  const classes = useStyles()
   return (
-    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
-      <Toolbar />
-      <Paper
-        sx={{
-          height: '75vh',
-          padding: '10px',
-          overflow: 'auto',
-          position: 'relative'
-        }}
-        elevation={3}
-      >
-        <Editor
-          height="95%"
-          value={fileContent}
-          onMount={handleEditorDidMount}
-          onChange={(val) => {
-            if (val) setFileContent(val)
-          }}
-        />
-      </Paper>
-      <Stack
-        spacing={3}
-        direction="row"
-        sx={{ justifyContent: 'center', marginTop: '20px' }}
-      >
-        <Button variant="contained" onClick={handleRunBtnClick}>
-          Run SAS Code
-        </Button>
-        <Button variant="contained" onClick={handleRunSelectionBtnClick}>
-          Run Selected SAS Code
-        </Button>
-      </Stack>
-      {log && (
-        <>
-          <br />
-          <h2 id="sas_log">Output</h2>
-          <br />
-          <div dangerouslySetInnerHTML={{ __html: log }} />
-        </>
-      )}
-    </Box>
+    <>
+      <br />
+      <br />
+      <br />
+      <Box sx={{ width: '100%', typography: 'body1' }}>
+        <TabContext value={tab}>
+          <Box
+            sx={{
+              borderBottom: 1,
+              borderColor: 'divider'
+            }}
+            style={{ position: 'fixed', background: 'white', width: '100%' }}
+          >
+            <TabList onChange={handleTabChange} centered>
+              <Tab className={classes.root} label="Code" value="1" />
+              <Tab className={classes.root} label="Log" value="2" />
+              <Tab className={classes.root} label="Webout" value="3" />
+            </TabList>
+          </Box>
+          <TabPanel value="1">
+            {/* <Toolbar /> */}
+            <Paper
+              sx={{
+                height: '70vh',
+                marginTop: '50px',
+                padding: '10px',
+                overflow: 'auto',
+                position: 'relative'
+              }}
+              elevation={3}
+            >
+              <Editor
+                height="95%"
+                value={fileContent}
+                onMount={handleEditorDidMount}
+                onChange={(val) => {
+                  if (val) setFileContent(val)
+                }}
+              />
+            </Paper>
+            <Stack
+              spacing={3}
+              direction="row"
+              sx={{ justifyContent: 'center', marginTop: '20px' }}
+            >
+              <Button variant="contained" onClick={handleRunBtnClick}>
+                Run SAS Code
+              </Button>
+            </Stack>
+          </TabPanel>
+          <TabPanel value="2">
+            <div
+              id="sas_log"
+              style={{ marginTop: '50px' }}
+              dangerouslySetInnerHTML={{ __html: log }}
+            />
+          </TabPanel>
+          <TabPanel value="3">
+            <div
+              style={{ marginTop: '50px' }}
+              dangerouslySetInnerHTML={{ __html: webout }}
+            />
+          </TabPanel>
+        </TabContext>
+      </Box>
+    </>
   )
 }