chore(release): 0.34.1 [skip ci]

## [0.34.1](https://github.com/sasjs/server/compare/v0.34.0...v0.34.1) (2023-04-28)

### Bug Fixes

* **css:** fixed css loading ([9c5acd6](9c5acd6de3))
* **log:** fixed chunk collapsing ([64b156f](64b156f762))

CHANGELOG.md

@@ -1,3 +1,64 @@
+## [0.34.1](https://github.com/sasjs/server/compare/v0.34.0...v0.34.1) (2023-04-28)
+
+
+### Bug Fixes
+
+* **css:** fixed css loading ([9c5acd6](https://github.com/sasjs/server/commit/9c5acd6de32afdbc186f79ae5b35375dda2e49b0))
+* **log:** fixed chunk collapsing ([64b156f](https://github.com/sasjs/server/commit/64b156f7627969b7f13022726f984fbbfe1a33ef))
+
+# [0.34.0](https://github.com/sasjs/server/compare/v0.33.3...v0.34.0) (2023-04-28)
+
+
+### Bug Fixes
+
+* **log:** fixed checks for errors and warnings ([02e2b06](https://github.com/sasjs/server/commit/02e2b060f9bedf4806f45f5205fd87bfa2ecae90))
+* **log:** fixed default runtime ([e04300a](https://github.com/sasjs/server/commit/e04300ad2ac237be7b28a6332fa87a3bcf761c7b))
+* **log:** fixed parsing log for different runtime ([3b1e4a1](https://github.com/sasjs/server/commit/3b1e4a128b1f22ff6f3069f5aaada6bfb1b40d12))
+* **log:** fixed scrolling issue ([56a522c](https://github.com/sasjs/server/commit/56a522c07c6f6d4c26c6d3b7cd6e9ef7007067a9))
+* **log:** fixed single chunk display ([8254b78](https://github.com/sasjs/server/commit/8254b789555cb8bbb169f52b754b4ce24e876dd2))
+* **log:** fixed single chunk scrolling ([57b7f95](https://github.com/sasjs/server/commit/57b7f954a17936f39aa9b757998b5b25e9442601))
+* **log:** fixed switching runtime ([c7a7399](https://github.com/sasjs/server/commit/c7a73991a7aa25d0c75d0c00e712bdc78769300b))
+* **log:** fixing switching from SAS to other runtime ([c72ecc7](https://github.com/sasjs/server/commit/c72ecc7e5943af9536ee31cfa85398e016d5354f))
+
+
+### Features
+
+* **log:** added download chunk and entire log ([a38a9f9](https://github.com/sasjs/server/commit/a38a9f9c3dfe36bd55d32024c166147318216995))
+* **log:** added logComponent and LogTabWithIcons ([3a887de](https://github.com/sasjs/server/commit/3a887dec55371b6a00b92291bb681e4cccb770c0))
+* **log:** added parseErrorsAndWarnings utility ([7c1c1e2](https://github.com/sasjs/server/commit/7c1c1e241002313c10f94dd61702584b9f148010))
+* **log:** added time to downloaded log name ([3848bb0](https://github.com/sasjs/server/commit/3848bb0added69ca81a5c9419ea414bdd1c294bb))
+* **log:** put download log icon into log tab ([777b3a5](https://github.com/sasjs/server/commit/777b3a55be1ecf5b05bf755ce8b14735496509e1))
+* **log:** split large log into chunks ([75f5a3c](https://github.com/sasjs/server/commit/75f5a3c0b39665bef8b83dc7e1e8b3e5f23fc303))
+* **log:** use improved log for SAS run time only ([7b12591](https://github.com/sasjs/server/commit/7b12591595cdd5144d9311ffa06a80c5dab79364))
+
+## [0.33.3](https://github.com/sasjs/server/compare/v0.33.2...v0.33.3) (2023-04-27)
+
+
+### Bug Fixes
+
+* use RateLimiterMemory instead of RateLimiterMongo ([6a520f5](https://github.com/sasjs/server/commit/6a520f5b26a3e2ed6345721b30ff4e3d9bfa903d))
+
+## [0.33.2](https://github.com/sasjs/server/compare/v0.33.1...v0.33.2) (2023-04-24)
+
+
+### Bug Fixes
+
+* removing print redirection pending full [#274](https://github.com/sasjs/server/issues/274) fix ([d49ea47](https://github.com/sasjs/server/commit/d49ea47bd7a2add42bdb9a717082201f29e16597))
+
+## [0.33.1](https://github.com/sasjs/server/compare/v0.33.0...v0.33.1) (2023-04-20)
+
+
+### Bug Fixes
+
+* applying nologo only for sas.exe ([b4436ba](https://github.com/sasjs/server/commit/b4436bad0d24d5b5a402272632db1739b1018c90)), closes [#352](https://github.com/sasjs/server/issues/352)
+
+# [0.33.0](https://github.com/sasjs/server/compare/v0.32.0...v0.33.0) (2023-04-05)
+
+
+### Features
+
+* option to reset admin password on startup ([eda8e56](https://github.com/sasjs/server/commit/eda8e56bb0ea20fdaacabbbe7dcf1e3ea7bd215a))
+
 # [0.32.0](https://github.com/sasjs/server/compare/v0.31.0...v0.32.0) (2023-04-05)
 
 

README.md

@@ -184,10 +184,23 @@ MAX_WRONG_ATTEMPTS_BY_IP_PER_DAY = <number> default: 100;
 
 
 # After this, access is blocked for an hour
-# Store number for 90 days since first fail
+# Store number for 24 days since first fail
 # Once a successful login is attempted, it resets
 MAX_CONSECUTIVE_FAILS_BY_USERNAME_AND_IP = <number> default: 10;
 
+# Name of the admin user that will be created on startup if not exists already
+# Default is `secretuser`
+ADMIN_USERNAME=secretuser
+
+# Temporary password for the ADMIN_USERNAME, which is in place until the first login
+# Default is `secretpassword`
+ADMIN_PASSWORD_INITIAL=secretpassword
+
+# Specify whether app has to reset the ADMIN_USERNAME's password or not
+# Default is NO. Possible options are YES and NO
+# If ADMIN_PASSWORD_RESET is YES then the ADMIN_USERNAME will be prompted to change the password from ADMIN_PASSWORD_INITIAL on their next login. This will repeat on every server restart, unless the option is removed / set to NO.
+ADMIN_PASSWORD_RESET=NO
+
 # LOG_FORMAT_MORGAN options: [combined|common|dev|short|tiny] default: `common`
 # Docs: https://www.npmjs.com/package/morgan#predefined-formats
 LOG_FORMAT_MORGAN=

api/.env.example

@@ -30,6 +30,10 @@ MAX_WRONG_ATTEMPTS_BY_IP_PER_DAY=100
 #default value is 10
 MAX_CONSECUTIVE_FAILS_BY_USERNAME_AND_IP=10
 
+ADMIN_USERNAME=secretuser
+ADMIN_PASSWORD_INITIAL=secretpassword
+ADMIN_PASSWORD_RESET=NO
+
 RUN_TIMES=[sas,js,py | js,py | sas | sas,js] default considered as sas
 SAS_PATH=/opt/sas/sas9/SASHome/SASFoundation/9.4/sas
 NODE_PATH=~/.nvm/versions/node/v16.14.0/bin/node

api/src/controllers/internal/Session.ts

@@ -134,7 +134,7 @@ ${autoExecContent}`
       session.path,
       '-AUTOEXEC',
       autoExecPath,
-      isWindows() ? '-nologo' : '',
+      process.sasLoc!.endsWith('sas.exe') ? '-nologo' : '',
       process.sasLoc!.endsWith('sas.exe') ? '-nosplash' : '',
       process.sasLoc!.endsWith('sas.exe') ? '-icon' : '',
       process.sasLoc!.endsWith('sas.exe') ? '-nodms' : '',

api/src/controllers/internal/createSASProgram.ts

@@ -40,8 +40,6 @@ export const createSASProgram = async (
 %mend;
 %_sasjs_server_init()
 
-proc printto print="%sysfunc(getoption(log))";
-run;
 `
 
   program = `

api/src/routes/api/spec/web.spec.ts

@@ -47,6 +47,77 @@ describe('web', () => {
     })
   })
 
+  describe('SASLogon/authorize', () => {
+    let csrfToken: string
+    let authCookies: string
+
+    beforeAll(async () => {
+      ;({ csrfToken } = await getCSRF(app))
+
+      await userController.createUser(user)
+
+      const credentials = {
+        username: user.username,
+        password: user.password
+      }
+
+      ;({ authCookies } = await performLogin(app, credentials, csrfToken))
+    })
+
+    afterAll(async () => {
+      const collections = mongoose.connection.collections
+      const collection = collections['users']
+      await collection.deleteMany({})
+    })
+
+    it('should respond with authorization code', async () => {
+      const res = await request(app)
+        .post('/SASLogon/authorize')
+        .set('Cookie', [authCookies].join('; '))
+        .set('x-xsrf-token', csrfToken)
+        .send({ clientId })
+
+      expect(res.body).toHaveProperty('code')
+    })
+
+    it('should respond with Bad Request if CSRF Token is missing', async () => {
+      const res = await request(app)
+        .post('/SASLogon/authorize')
+        .set('Cookie', [authCookies].join('; '))
+        .send({ clientId })
+        .expect(400)
+
+      expect(res.text).toEqual('Invalid CSRF token!')
+      expect(res.body).toEqual({})
+    })
+
+    it('should respond with Bad Request if clientId is missing', async () => {
+      const res = await request(app)
+        .post('/SASLogon/authorize')
+        .set('Cookie', [authCookies].join('; '))
+        .set('x-xsrf-token', csrfToken)
+        .send({})
+        .expect(400)
+
+      expect(res.text).toEqual(`"clientId" is required`)
+      expect(res.body).toEqual({})
+    })
+
+    it('should respond with Forbidden if clientId is incorrect', async () => {
+      const res = await request(app)
+        .post('/SASLogon/authorize')
+        .set('Cookie', [authCookies].join('; '))
+        .set('x-xsrf-token', csrfToken)
+        .send({
+          clientId: 'WrongClientID'
+        })
+        .expect(403)
+
+      expect(res.text).toEqual('Error: Invalid clientId.')
+      expect(res.body).toEqual({})
+    })
+  })
+
   describe('SASLogon/login', () => {
     let csrfToken: string
 
@@ -187,78 +258,6 @@ describe('web', () => {
       expect(res.body).toEqual({})
     })
   })
-
-  describe('SASLogon/authorize', () => {
-    let csrfToken: string
-    let authCookies: string
-
-    beforeAll(async () => {
-      await deleteDocumentsFromLimitersCollections()
-      ;({ csrfToken } = await getCSRF(app))
-
-      await userController.createUser(user)
-
-      const credentials = {
-        username: user.username,
-        password: user.password
-      }
-
-      ;({ authCookies } = await performLogin(app, credentials, csrfToken))
-    })
-
-    afterAll(async () => {
-      const collections = mongoose.connection.collections
-      const collection = collections['users']
-      await collection.deleteMany({})
-    })
-
-    it('should respond with authorization code', async () => {
-      const res = await request(app)
-        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies].join('; '))
-        .set('x-xsrf-token', csrfToken)
-        .send({ clientId })
-
-      expect(res.body).toHaveProperty('code')
-    })
-
-    it('should respond with Bad Request if CSRF Token is missing', async () => {
-      const res = await request(app)
-        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies].join('; '))
-        .send({ clientId })
-        .expect(400)
-
-      expect(res.text).toEqual('Invalid CSRF token!')
-      expect(res.body).toEqual({})
-    })
-
-    it('should respond with Bad Request if clientId is missing', async () => {
-      const res = await request(app)
-        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies].join('; '))
-        .set('x-xsrf-token', csrfToken)
-        .send({})
-        .expect(400)
-
-      expect(res.text).toEqual(`"clientId" is required`)
-      expect(res.body).toEqual({})
-    })
-
-    it('should respond with Forbidden if clientId is incorrect', async () => {
-      const res = await request(app)
-        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies].join('; '))
-        .set('x-xsrf-token', csrfToken)
-        .send({
-          clientId: 'WrongClientID'
-        })
-        .expect(403)
-
-      expect(res.text).toEqual('Error: Invalid clientId.')
-      expect(res.body).toEqual({})
-    })
-  })
 })
 
 const getCSRF = async (app: Express) => {
@@ -285,12 +284,3 @@ const extractCSRF = (text: string) =>
   /<script>document.cookie = 'XSRF-TOKEN=(.*); Max-Age=86400; SameSite=Strict; Path=\/;'<\/script>/.exec(
     text
   )![1]
-
-const deleteDocumentsFromLimitersCollections = async () => {
-  const { collections } = mongoose.connection
-  const login_fail_ip_per_day_collection = collections['login_fail_ip_per_day']
-  await login_fail_ip_per_day_collection.deleteMany({})
-  const login_fail_consecutive_username_and_ip_collection =
-    collections['login_fail_consecutive_username_and_ip']
-  await login_fail_consecutive_username_and_ip_collection.deleteMany({})
-}

api/src/utils/rateLimiter.ts

@@ -1,10 +1,9 @@
-import mongoose from 'mongoose'
+import { RateLimiterMemory } from 'rate-limiter-flexible'
-import { RateLimiterMongo } from 'rate-limiter-flexible'
 
 export class RateLimiter {
   private static instance: RateLimiter
-  private limiterSlowBruteByIP: RateLimiterMongo
+  private limiterSlowBruteByIP: RateLimiterMemory
-  private limiterConsecutiveFailsByUsernameAndIP: RateLimiterMongo
+  private limiterConsecutiveFailsByUsernameAndIP: RateLimiterMemory
   private maxWrongAttemptsByIpPerDay: number
   private maxConsecutiveFailsByUsernameAndIp: number
 
@@ -19,19 +18,17 @@ export class RateLimiter {
       MAX_CONSECUTIVE_FAILS_BY_USERNAME_AND_IP
     )
 
-    this.limiterSlowBruteByIP = new RateLimiterMongo({
+    this.limiterSlowBruteByIP = new RateLimiterMemory({
-      storeClient: mongoose.connection,
       keyPrefix: 'login_fail_ip_per_day',
       points: this.maxWrongAttemptsByIpPerDay,
       duration: 60 * 60 * 24,
       blockDuration: 60 * 60 * 24 // Block for 1 day
     })
 
-    this.limiterConsecutiveFailsByUsernameAndIP = new RateLimiterMongo({
+    this.limiterConsecutiveFailsByUsernameAndIP = new RateLimiterMemory({
-      storeClient: mongoose.connection,
       keyPrefix: 'login_fail_consecutive_username_and_ip',
       points: this.maxConsecutiveFailsByUsernameAndIp,
-      duration: 60 * 60 * 24 * 90, // Store number for 90 days since first fail
+      duration: 60 * 60 * 24 * 24, // Store number for 24 days since first fail
       blockDuration: 60 * 60 // Block for 1 hour
     })
   }
@@ -60,8 +57,7 @@ export class RateLimiter {
       this.limiterConsecutiveFailsByUsernameAndIP.get(usernameIPkey)
     ])
 
-    // NOTE: To make use of blockDuration option from RateLimiterMongo
+    // NOTE: To make use of blockDuration option, comparison in both following if statements should have greater than symbol
-    //       comparison in both following if statements should have greater than symbol
     //       otherwise, blockDuration option will not work
     // For more info see: https://github.com/animir/node-rate-limiter-flexible/wiki/Options#blockduration
 
@@ -103,10 +99,11 @@ export class RateLimiter {
       if (rlRejected instanceof Error) {
         throw rlRejected
       } else {
-        // based upon the implementation of consume method of RateLimiterMongo
+        // based upon the implementation of consume method of RateLimiterMemory
         // we are sure that rlRejected will contain msBeforeNext
         // for further reference,
         // see https://github.com/animir/node-rate-limiter-flexible/wiki/Overall-example#login-endpoint-protection
+        // or see https://github.com/animir/node-rate-limiter-flexible#ratelimiterres-object
         return Math.ceil(rlRejected.msBeforeNext / 1000)
       }
     }

api/src/utils/seedDB.ts

@@ -1,7 +1,9 @@
+import bcrypt from 'bcryptjs'
 import Client from '../model/Client'
 import Group, { PUBLIC_GROUP_NAME } from '../model/Group'
-import User from '../model/User'
+import User, { IUser } from '../model/User'
 import Configuration, { ConfigurationType } from '../model/Configuration'
+import { ResetAdminPasswordType } from './verifyEnvVariables'
 
 import { randomBytes } from 'crypto'
 
@@ -40,9 +42,13 @@ export const seedDB = async (): Promise<ConfigurationType> => {
     process.logger.success(`DB Seed - Group created: ${PUBLIC_GROUP.name}`)
   }
 
+  const ADMIN_USER = getAdminUser()
+
   // Checking if user is already in the database
   let usernameExist = await User.findOne({ username: ADMIN_USER.username })
-  if (!usernameExist) {
+  if (usernameExist) {
+    usernameExist = await resetAdminPassword(usernameExist, ADMIN_USER.password)
+  } else {
     const user = new User(ADMIN_USER)
     usernameExist = await user.save()
 
@@ -51,7 +57,7 @@ export const seedDB = async (): Promise<ConfigurationType> => {
     )
   }
 
-  if (!groupExist.hasUser(usernameExist)) {
+  if (usernameExist.isAdmin && !groupExist.hasUser(usernameExist)) {
     groupExist.addUser(usernameExist)
     process.logger.success(
       `DB Seed - admin account '${ADMIN_USER.username}' added to Group '${ALL_USERS_GROUP.name}'`
@@ -90,11 +96,52 @@ const CLIENT = {
   clientId: 'clientID1',
   clientSecret: 'clientSecret'
 }
-const ADMIN_USER = {
+
-  id: 1,
+const getAdminUser = () => {
+  const { ADMIN_USERNAME, ADMIN_PASSWORD_INITIAL } = process.env
+
+  const salt = bcrypt.genSaltSync(10)
+  const hashedPassword = bcrypt.hashSync(ADMIN_PASSWORD_INITIAL as string, salt)
+
+  return {
     displayName: 'Super Admin',
-  username: 'secretuser',
+    username: ADMIN_USERNAME,
-  password: '$2a$10$hKvcVEZdhEQZCcxt6npazO6mY4jJkrzWvfQ5stdBZi8VTTwVMCVXO',
+    password: hashedPassword,
     isAdmin: true,
     isActive: true
+  }
+}
+
+const resetAdminPassword = async (user: IUser, password: string) => {
+  const { ADMIN_PASSWORD_RESET } = process.env
+
+  if (ADMIN_PASSWORD_RESET === ResetAdminPasswordType.YES) {
+    if (!user.isAdmin) {
+      process.logger.error(
+        `Can not reset the password of non-admin user (${user.username}) on startup.`
+      )
+
+      return user
+    }
+
+    if (user.authProvider) {
+      process.logger.error(
+        `Can not reset the password of admin (${user.username}) with ${user.authProvider} as authentication mechanism.`
+      )
+
+      return user
+    }
+
+    process.logger.info(
+      `DB Seed - resetting password for admin user: ${user.username}`
+    )
+
+    user.password = password
+    user.needsToUpdatePassword = true
+    user = await user.save()
+
+    process.logger.success(`DB Seed - successfully reset the password`)
+  }
+
+  return user
 }

api/src/utils/verifyEnvVariables.ts

@@ -52,6 +52,11 @@ export enum DatabaseType {
   COSMOS_MONGODB = 'cosmos_mongodb'
 }
 
+export enum ResetAdminPasswordType {
+  YES = 'YES',
+  NO = 'NO'
+}
+
 export const verifyEnvVariables = (): ReturnCode => {
   const errors: string[] = []
 
@@ -79,6 +84,8 @@ export const verifyEnvVariables = (): ReturnCode => {
 
   errors.push(...verifyRateLimiter())
 
+  errors.push(...verifyAdminUserConfig())
+
   if (errors.length) {
     process.logger?.error(
       `Invalid environment variable(s) provided: \n${errors.join('\n')}`
@@ -409,6 +416,38 @@ const verifyRateLimiter = () => {
   return errors
 }
 
+const verifyAdminUserConfig = () => {
+  const errors: string[] = []
+  const { MODE, ADMIN_USERNAME, ADMIN_PASSWORD_INITIAL, ADMIN_PASSWORD_RESET } =
+    process.env
+  if (MODE === ModeType.Server) {
+    if (ADMIN_USERNAME) {
+      process.env.ADMIN_USERNAME = ADMIN_USERNAME.toLowerCase()
+    } else {
+      process.env.ADMIN_USERNAME = DEFAULTS.ADMIN_USERNAME
+    }
+
+    if (!ADMIN_PASSWORD_INITIAL)
+      process.env.ADMIN_PASSWORD_INITIAL = DEFAULTS.ADMIN_PASSWORD_INITIAL
+
+    if (ADMIN_PASSWORD_RESET) {
+      const resetPasswordTypes = Object.values(ResetAdminPasswordType)
+      if (
+        !resetPasswordTypes.includes(
+          ADMIN_PASSWORD_RESET as ResetAdminPasswordType
+        )
+      )
+        errors.push(
+          `- ADMIN_PASSWORD_RESET '${ADMIN_PASSWORD_RESET}'\n - valid options ${resetPasswordTypes}`
+        )
+    } else {
+      process.env.ADMIN_PASSWORD_RESET = DEFAULTS.ADMIN_PASSWORD_RESET
+    }
+  }
+
+  return errors
+}
+
 const isNumeric = (val: string): boolean => {
   return !isNaN(Number(val))
 }
@@ -422,5 +461,8 @@ const DEFAULTS = {
   RUN_TIMES: RunTimeType.SAS,
   DB_TYPE: DatabaseType.MONGO,
   MAX_WRONG_ATTEMPTS_BY_IP_PER_DAY: '100',
-  MAX_CONSECUTIVE_FAILS_BY_USERNAME_AND_IP: '10'
+  MAX_CONSECUTIVE_FAILS_BY_USERNAME_AND_IP: '10',
+  ADMIN_USERNAME: 'secretuser',
+  ADMIN_PASSWORD_INITIAL: 'secretpassword',
+  ADMIN_PASSWORD_RESET: ResetAdminPasswordType.NO
 }

web/package.json

@@ -25,6 +25,7 @@
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
+    "react-highlight": "^0.15.0",
     "react-monaco-editor": "^0.48.0",
     "react-router-dom": "^6.3.0",
     "react-toastify": "^9.0.1"
@@ -41,6 +42,7 @@
     "@types/react": "^17.0.37",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^17.0.11",
+    "@types/react-highlight": "^0.12.5",
     "@types/react-router-dom": "^5.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-prismjs": "^2.1.0",
@@ -59,6 +61,7 @@
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.2",
+    "typescript-plugin-css-modules": "^5.0.1",
     "webpack": "5.64.3",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "4.7.4"

web/src/containers/Settings/internal/hooks/useAddPermission.tsx

@@ -9,7 +9,7 @@ import { PermissionsContext } from '../../../../context/permissionsContext'
 import {
   findExistingPermission,
   findUpdatingPermission
-} from '../../../../utils/helper'
+} from '../../../../utils'
 
 const useAddPermission = () => {
   const {

web/src/containers/Studio/editor.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction } from 'react'
 
 import {
   Backdrop,
@@ -17,10 +17,14 @@ import { TabContext, TabList, TabPanel } from '@mui/lab'
 import FilePathInputModal from '../../components/filePathInputModal'
 import FileMenu from './internal/components/fileMenu'
 import RunMenu from './internal/components/runMenu'
+import LogComponent from './internal/components/log/logComponent'
+import LogTabWithIcons from './internal/components/log/logTabWithIcons'
 
 import { usePrompt } from '../../utils/hooks'
 import { getLanguageFromExtension } from './internal/helper'
 import useEditor from './internal/hooks/useEditor'
+import { RunTimeType } from '../../context/appContext'
+import { LogObject } from '../../utils'
 
 const StyledTabPanel = styled(TabPanel)(() => ({
   padding: '10px'
@@ -108,6 +112,10 @@ const SASjsEditor = ({
     />
   )
 
+  // INFO: variable indicating if selected run type is SAS if there are any errors or warnings in the log
+  const logWithErrorsOrWarnings =
+    selectedRunTime === RunTimeType.SAS && log && typeof log === 'object'
+
   return (
     <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
       <Backdrop
@@ -145,7 +153,22 @@ const SASjsEditor = ({
           >
             <TabList onChange={handleTabChange} centered>
               <StyledTab label="Code" value="code" />
-              <StyledTab label="Log" value="log" />
+              <StyledTab
+                label={logWithErrorsOrWarnings ? '' : 'log'}
+                value="log"
+                icon={
+                  logWithErrorsOrWarnings ? (
+                    <LogTabWithIcons log={log as LogObject} />
+                  ) : (
+                    ''
+                  )
+                }
+                onClick={() => {
+                  const logWrapper = document.querySelector(`#logWrapper`)
+
+                  if (logWrapper) logWrapper.scrollTop = 0
+                }}
+              />
               <StyledTab
                 label={
                   <Tooltip title="Displays content from the _webout fileref">
@@ -195,15 +218,9 @@ const SASjsEditor = ({
             </Paper>
           </StyledTabPanel>
           <StyledTabPanel value="log">
-            <div>
+            {log && (
-              <h2>Log</h2>
+              <LogComponent log={log} selectedRunTime={selectedRunTime} />
-              <pre
+            )}
-                id="log"
-                style={{ overflow: 'auto', height: 'calc(100vh - 220px)' }}
-              >
-                {log}
-              </pre>
-            </div>
           </StyledTabPanel>
           <StyledTabPanel value="webout">
             <div>

web/src/containers/Studio/internal/components/log/log.module.css

@@ -0,0 +1,86 @@
+.ChunkHeader {
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  text-align: left;
+  border: none;
+  outline: none;
+  transition: 0.4s;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+}
+
+.ChunkDetails {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+}
+
+.ChunkExpandIcon {
+  margin-left: auto;
+}
+
+.ChunkBody {
+  background-color: white;
+  overflow: hidden;
+}
+
+.ChunksContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.LogContainer {
+  background-color: #fbfbfb;
+  border: 1px solid #e2e2e2;
+  border-radius: 3px;
+  min-height: 50px;
+  padding: 10px;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  font-family: Monaco, Courier, monospace;
+  position: relative;
+  width: 100%;
+}
+
+.LogWrapper {
+  overflow-y: auto;
+  max-height: calc(100vh - 130px);
+}
+
+.LogBody {
+  overflow: auto;
+  height: calc(100vh - 220px);
+}
+
+.TreeContainer {
+  background-color: white;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.TabContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+}
+
+.TabDownloadIcon {
+  margin-left: 20px;
+}
+
+.HighlightedLine {
+  background-color: #f6e30599;
+}
+
+.Icon {
+  font-size: 20px !important;
+}
+
+.GreenIcon {
+  color: green;
+}

web/src/containers/Studio/internal/components/log/logChunk.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, SyntheticEvent } from 'react'
+import { Typography } from '@mui/material'
+import Highlight from 'react-highlight'
+import { ErrorOutline, Warning } from '@mui/icons-material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import CheckIcon from '@mui/icons-material/Check'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import {
+  defaultChunkSize,
+  parseErrorsAndWarnings,
+  LogInstance,
+  clearErrorsAndWarningsHtmlWrapping,
+  download
+} from '../../../../../utils'
+import { logStyles } from './logComponent'
+import classes from './log.module.css'
+
+interface LogChunkProps {
+  id: number
+  text: string
+  expanded: boolean
+  logLineCount: number
+  onClick: (evt: any, id: number) => void
+  scrollToLogInstance?: LogInstance
+  updated: number
+}
+
+const LogChunk = (props: LogChunkProps) => {
+  const { id, text, logLineCount } = props
+  const [scrollToLogInstance, setScrollToLogInstance] = useState(
+    props.scrollToLogInstance
+  )
+  const rowText = clearErrorsAndWarningsHtmlWrapping(text)
+  const styles = logStyles()
+  const [expanded, setExpanded] = useState(props.expanded)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    setExpanded(props.expanded)
+  }, [props.expanded])
+
+  useEffect(() => {
+    if (props.expanded !== expanded) {
+      setExpanded(props.expanded)
+    }
+
+    if (
+      props.scrollToLogInstance &&
+      props.scrollToLogInstance !== scrollToLogInstance
+    ) {
+      setScrollToLogInstance(props.scrollToLogInstance)
+    }
+  }, [props])
+
+  useEffect(() => {
+    if (expanded && scrollToLogInstance) {
+      const { type, id } = scrollToLogInstance
+      const line = document.getElementById(`${type}_${id}`)
+      const logWrapper: HTMLDivElement | null =
+        document.querySelector(`#logWrapper`)
+      const logContainer: HTMLHeadElement | null =
+        document.querySelector(`#log_container`)
+
+      if (line && logWrapper && logContainer) {
+        line.className = classes.HighlightedLine
+
+        line.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+        setTimeout(() => {
+          line.classList.remove(classes.HighlightedLine)
+
+          setScrollToLogInstance(undefined)
+        }, 3000)
+      }
+    }
+  }, [expanded, scrollToLogInstance, props])
+
+  const { errors, warnings } = parseErrorsAndWarnings(text)
+
+  const getLineRange = (separator = ' ... ') =>
+    `${id * defaultChunkSize}${separator}${
+      (id + 1) * defaultChunkSize < logLineCount
+        ? (id + 1) * defaultChunkSize
+        : logLineCount
+    }`
+
+  return (
+    <div onClick={(evt) => props.onClick(evt, id)}>
+      <button className={classes.ChunkHeader}>
+        <Typography variant="subtitle1">
+          <div className={classes.ChunkDetails}>
+            <span>{`Lines: ${getLineRange()}`}</span>
+            {copied ? (
+              <CheckIcon
+                className={[classes.Icon, classes.GreenIcon].join(' ')}
+              />
+            ) : (
+              <ContentCopyIcon
+                className={classes.Icon}
+                onClick={(evt: SyntheticEvent) => {
+                  evt.stopPropagation()
+
+                  navigator.clipboard.writeText(rowText)
+
+                  setCopied(true)
+
+                  setTimeout(() => {
+                    setCopied(false)
+                  }, 1000)
+                }}
+              />
+            )}
+            <FileDownloadIcon
+              onClick={(evt: SyntheticEvent) => {
+                download(evt, rowText, `.${getLineRange('-')}`)
+              }}
+            />
+            {errors && errors.length !== 0 && (
+              <ErrorOutline
+                color="error"
+                className={classes.Icon}
+                onClick={() => {
+                  setScrollToLogInstance(errors[0])
+                }}
+              />
+            )}
+            {warnings && warnings.length !== 0 && (
+              <Warning
+                className={[classes.Icon, classes.GreenIcon].join(' ')}
+                onClick={(evt) => {
+                  if (expanded) evt.stopPropagation()
+
+                  setScrollToLogInstance(warnings[0])
+                }}
+              />
+            )}{' '}
+            <ExpandMoreIcon
+              className={classes.ChunkExpandIcon}
+              style={{
+                transform: expanded ? 'rotate(180deg)' : 'unset'
+              }}
+            />
+          </div>
+        </Typography>
+      </button>
+      <div
+        className={classes.ChunkBody}
+        style={{
+          display: expanded ? 'block' : 'none'
+        }}
+        onClick={(evt) => {
+          evt.stopPropagation()
+        }}
+      >
+        <div
+          id={`log_container`}
+          className={[styles.expansionDescription, classes.LogContainer].join(
+            ' '
+          )}
+        >
+          <Highlight className={'html'} innerHTML={true}>
+            {expanded ? text : ''}
+          </Highlight>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LogChunk

web/src/containers/Studio/internal/components/log/logComponent.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from 'react'
+import TreeView from '@mui/lab/TreeView'
+import TreeItem from '@mui/lab/TreeItem'
+import { ChevronRight, ExpandMore } from '@mui/icons-material'
+import { Typography } from '@mui/material'
+import { ListItemText } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import Highlight from 'react-highlight'
+import { LogObject, defaultChunkSize } from '../../../../../utils'
+import { RunTimeType } from '../../../../../context/appContext'
+import { splitIntoChunks, LogInstance } from '../../../../../utils'
+import LogChunk from './logChunk'
+import classes from './log.module.css'
+
+export const logStyles: any = makeStyles((theme: any) => ({
+  expansionDescription: {
+    [theme.breakpoints.down('sm')]: {
+      fontSize: theme.typography.pxToRem(12)
+    },
+    [theme.breakpoints.up('md')]: {
+      fontSize: theme.typography.pxToRem(16)
+    }
+  }
+}))
+
+interface LogComponentProps {
+  log: LogObject | string
+  selectedRunTime: RunTimeType | string
+}
+
+const LogComponent = (props: LogComponentProps) => {
+  const { log, selectedRunTime } = props
+  const logObject = log as LogObject
+  const logChunks = splitIntoChunks(logObject?.body || '')
+  const [logChunksState, setLogChunksState] = useState<boolean[]>(
+    new Array(logChunks.length).fill(false)
+  )
+  const [scrollToLogInstance, setScrollToLogInstance] = useState<LogInstance>()
+  const [oldestExpandedChunk, setOldestExpandedChunk] = useState<number>(
+    logChunksState.length - 1
+  )
+  const maxOpenedChunks = 2
+
+  const styles = logStyles()
+
+  const goToLogLine = (logInstance: LogInstance, ind: number) => {
+    let chunkNumber = 0
+
+    for (
+      let i = 0;
+      i <= Math.ceil(logObject.linesCount / defaultChunkSize);
+      i++
+    ) {
+      if (logInstance.line < (i + 1) * defaultChunkSize) {
+        chunkNumber = i
+
+        break
+      }
+    }
+
+    setLogChunksState((prevState) => {
+      const newState = [...prevState]
+      newState[chunkNumber] = true
+
+      const chunkToCollapse = getChunkToAutoCollapse()
+
+      if (chunkToCollapse !== undefined) {
+        newState[chunkToCollapse] = false
+      }
+
+      return newState
+    })
+
+    setScrollToLogInstance(logInstance)
+  }
+
+  useEffect(() => {
+    // INFO: expand the last chunk by default
+    setLogChunksState((prevState) => {
+      const lastChunk = prevState.length - 1
+
+      const newState = [...prevState]
+      newState[lastChunk] = true
+
+      return newState
+    })
+
+    setTimeout(() => {
+      scrollToTheBottom()
+    }, 100)
+  }, [])
+
+  // INFO: scroll to the bottom of the log
+  const scrollToTheBottom = () => {
+    const logWrapper: HTMLDivElement | null =
+      document.querySelector(`#logWrapper`)
+
+    if (logWrapper) {
+      logWrapper.scrollTop = logWrapper.scrollHeight
+    }
+  }
+
+  const getChunkToAutoCollapse = () => {
+    const openedChunks = logChunksState
+      .map((chunkState: boolean, id: number) => (chunkState ? id : undefined))
+      .filter((chunk) => chunk !== undefined)
+
+    if (openedChunks.length < maxOpenedChunks) return undefined
+    else {
+      const chunkToCollapse = oldestExpandedChunk
+      const newOldestChunk = openedChunks.filter(
+        (chunk) => chunk !== chunkToCollapse
+      )[0]
+
+      if (newOldestChunk !== undefined) {
+        setOldestExpandedChunk(newOldestChunk)
+
+        return chunkToCollapse
+      }
+
+      return undefined
+    }
+  }
+
+  const hasErrorsOrWarnings =
+    logObject.errors?.length !== 0 || logObject.warnings?.length !== 0
+  const logBody = typeof log === 'string' ? log : log.body
+
+  return (
+    <>
+      {selectedRunTime === RunTimeType.SAS && logObject.body ? (
+        <div id="logWrapper" className={classes.LogWrapper}>
+          <div>
+            {hasErrorsOrWarnings && (
+              <div className={classes.TreeContainer}>
+                <TreeView
+                  defaultCollapseIcon={<ExpandMore />}
+                  defaultExpandIcon={<ChevronRight />}
+                >
+                  {logObject.errors && logObject.errors.length !== 0 && (
+                    <TreeItem
+                      nodeId="errors"
+                      label={
+                        <Typography color="error">
+                          {`Errors (${logObject.errors.length})`}
+                        </Typography>
+                      }
+                    >
+                      {logObject.errors &&
+                        logObject.errors.map((error, ind) => (
+                          <TreeItem
+                            nodeId={`error_${ind}`}
+                            label={<ListItemText primary={error.body} />}
+                            key={`error_${ind}`}
+                            onClick={() => goToLogLine(error, ind)}
+                          />
+                        ))}
+                    </TreeItem>
+                  )}
+                  {logObject.warnings && logObject.warnings.length !== 0 && (
+                    <TreeItem
+                      nodeId="warnings"
+                      label={
+                        <Typography>{`Warnings (${logObject.warnings.length})`}</Typography>
+                      }
+                    >
+                      {logObject.warnings &&
+                        logObject.warnings.map((warning, ind) => (
+                          <TreeItem
+                            nodeId={`warning_${ind}`}
+                            label={<ListItemText primary={warning.body} />}
+                            key={`warning_${ind}`}
+                            onClick={() => goToLogLine(warning, ind)}
+                          />
+                        ))}
+                    </TreeItem>
+                  )}
+                </TreeView>
+              </div>
+            )}
+          </div>
+          <div className={classes.ChunksContainer}>
+            {Array.isArray(logChunks) ? (
+              logChunks.map((chunk: string, id: number) => (
+                <LogChunk
+                  id={id}
+                  text={chunk}
+                  expanded={logChunksState[id]}
+                  key={`log-chunk-${id}`}
+                  logLineCount={logObject.linesCount}
+                  scrollToLogInstance={scrollToLogInstance}
+                  updated={Date.now()}
+                  onClick={(_, chunkNumber) => {
+                    setLogChunksState((prevState) => {
+                      const newState = [...prevState]
+                      const expand = !newState[chunkNumber]
+
+                      newState[chunkNumber] = expand
+
+                      if (expand) {
+                        const chunkToCollapse = getChunkToAutoCollapse()
+
+                        if (chunkToCollapse !== undefined) {
+                          newState[chunkToCollapse] = false
+                        }
+                      }
+
+                      return newState
+                    })
+
+                    setScrollToLogInstance(undefined)
+                  }}
+                />
+              ))
+            ) : (
+              <Typography
+                id={`log_container`}
+                variant="h5"
+                className={[
+                  styles.expansionDescription,
+                  classes.LogContainer
+                ].join(' ')}
+              >
+                <Highlight className={'html'} innerHTML={true}>
+                  {logChunks}
+                </Highlight>
+              </Typography>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div>
+          <h2>Log</h2>
+          <pre id="log" className={classes.LogBody}>
+            {logBody}
+          </pre>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default LogComponent

web/src/containers/Studio/internal/components/log/logTabWithIcons.tsx

@@ -0,0 +1,41 @@
+import { ErrorOutline, Warning } from '@mui/icons-material'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import {
+  LogObject,
+  download,
+  clearErrorsAndWarningsHtmlWrapping
+} from '../../../../../utils'
+import Tooltip from '@mui/material/Tooltip'
+import classes from './log.module.css'
+
+interface LogTabProps {
+  log: LogObject
+}
+
+const LogTabWithIcons = (props: LogTabProps) => {
+  const { errors, warnings, body } = props.log
+
+  return (
+    <div className={classes.TabContainer}>
+      <span>log</span>
+      {errors && errors.length !== 0 && (
+        <ErrorOutline color="error" className={classes.Icon} />
+      )}
+      {warnings && warnings.length !== 0 && (
+        <Warning className={[classes.Icon, classes.GreenIcon].join(' ')} />
+      )}
+      <Tooltip
+        title="Download entire log"
+        onClick={(evt) => {
+          download(evt, clearErrorsAndWarningsHtmlWrapping(body))
+        }}
+      >
+        <FileDownloadIcon
+          className={[classes.Icon, classes.TabDownloadIcon].join(' ')}
+        />
+      </Tooltip>
+    </div>
+  )
+}
+
+export default LogTabWithIcons

web/src/containers/Studio/internal/hooks/useEditor.ts

@@ -18,6 +18,7 @@ import {
   useSnackbar,
   useStateWithCallback
 } from '../../../../utils/hooks'
+import { parseErrorsAndWarnings, LogObject } from '../../../../utils'
 
 const SASJS_LOGS_SEPARATOR =
   'SASJS_LOGS_SEPARATOR_163ee17b6ff24f028928972d80a26784'
@@ -41,10 +42,12 @@ const useEditor = ({
 
   const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
   const [fileContent, setFileContent] = useState('')
-  const [log, setLog] = useState('')
+  const [log, setLog] = useState<LogObject | string>()
   const [webout, setWebout] = useState('')
   const [runTimes, setRunTimes] = useState<string[]>([])
-  const [selectedRunTime, setSelectedRunTime] = useState('')
+  const [selectedRunTime, setSelectedRunTime] = useState<RunTimeType | string>(
+    ''
+  )
   const [selectedFileExtension, setSelectedFileExtension] = useState('')
   const [openFilePathInputModal, setOpenFilePathInputModal] = useState(false)
   const [showDiff, setShowDiff] = useState(false)
@@ -150,6 +153,13 @@ const useEditor = ({
   const runCode = useCallback(
     (code: string) => {
       setIsLoading(true)
+
+      // Scroll to bottom of log
+      const logElement = document.getElementById('log')
+      if (logElement) logElement.scrollTop = logElement.scrollHeight
+
+      setIsLoading(false)
+
       axios
         .post(`/SASjsApi/code/execute`, {
           code: programPathInjection(
@@ -160,8 +170,24 @@ const useEditor = ({
           runTime: selectedRunTime
         })
         .then((res: any) => {
-          setWebout(res.data.split(SASJS_LOGS_SEPARATOR)[0] ?? '')
+          if (selectedRunTime === RunTimeType.SAS) {
+            const { errors, warnings, logLines } = parseErrorsAndWarnings(
+              res.data.split(SASJS_LOGS_SEPARATOR)[1]
+            )
+
+            const log: LogObject = {
+              body: logLines.join(`\n`),
+              errors,
+              warnings,
+              linesCount: logLines.length
+            }
+
+            setLog(log)
+          } else {
             setLog(res.data.split(SASJS_LOGS_SEPARATOR)[1] ?? '')
+          }
+
+          setWebout(res.data.split(SASJS_LOGS_SEPARATOR)[0] ?? '')
           setTab('log')
 
           // Scroll to bottom of log
@@ -249,7 +275,7 @@ const useEditor = ({
   }, [appContext.runTimes])
 
   useEffect(() => {
-    if (runTimes.length) setSelectedRunTime(runTimes[0])
+    if (runTimes.length) setSelectedRunTime(runTimes[0] as RunTimeType)
   }, [runTimes])
 
   useEffect(() => {
@@ -280,7 +306,6 @@ const useEditor = ({
       const content = localStorage.getItem('fileContent') ?? ''
       setFileContent(content)
     }
-    setLog('')
     setWebout('')
     setTab('code')
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -294,7 +319,9 @@ const useEditor = ({
 
   useEffect(() => {
     const fileExtension = selectedFileExtension.toLowerCase()
-    if (runTimes.includes(fileExtension)) setSelectedRunTime(fileExtension)
+
+    if (runTimes.includes(fileExtension))
+      setSelectedRunTime(fileExtension as RunTimeType)
   }, [selectedFileExtension, runTimes])
 
   return {

web/src/types/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string }
+  export default classes
+}

web/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './log'
+export * from './types'
+export * from './helper'

web/src/utils/log.ts

@@ -0,0 +1,133 @@
+import { SyntheticEvent } from 'react'
+import { LogInstance } from './'
+
+export const parseErrorsAndWarnings = (log: string) => {
+  const logLines = log.split('\n')
+  const errorLines: LogInstance[] = []
+  const warningLines: LogInstance[] = []
+
+  logLines.forEach((line: string, index: number) => {
+    // INFO: check if content in element starts with ERROR
+    if (/<.*>ERROR/gm.test(line)) {
+      const errorLine = line.substring(line.indexOf('E'), line.length - 1)
+
+      errorLines.push({
+        body: errorLine,
+        line: index,
+        type: 'error',
+        id: errorLines.length
+      })
+    }
+
+    // INFO: check if line starts with ERROR
+    else if (/^ERROR/gm.test(line)) {
+      errorLines.push({
+        body: line,
+        line: index,
+        type: 'error',
+        id: errorLines.length
+      })
+
+      logLines[index] =
+        `<font id="error_${
+          errorLines.length - 1
+        }" style="color: red;" ref={scrollTo}>` +
+        logLines[index] +
+        '</font>'
+    }
+
+    // INFO: check if content in element starts with WARNING
+    else if (/<.*>WARNING/gm.test(line)) {
+      const warningLine = line.substring(line.indexOf('W'), line.length - 1)
+
+      warningLines.push({
+        body: warningLine,
+        line: index,
+        type: 'warning',
+        id: warningLines.length
+      })
+    }
+
+    // INFO: check if line starts with WARNING
+    else if (/^WARNING/gm.test(line)) {
+      warningLines.push({
+        body: line,
+        line: index,
+        type: 'warning',
+        id: warningLines.length
+      })
+
+      logLines[index] =
+        `<font id="warning_${warningLines.length - 1}" style="color: green;">` +
+        logLines[index] +
+        '</font>'
+    }
+  })
+
+  return { errors: errorLines, warnings: warningLines, logLines }
+}
+
+export const defaultChunkSize = 20000
+
+export const isTheLastChunk = (
+  lineCount: number,
+  chunkNumber: number,
+  chunkSize = defaultChunkSize
+) => {
+  if (lineCount <= chunkSize) return true
+
+  const chunksNumber = Math.ceil(lineCount / chunkSize)
+
+  return chunkNumber === chunksNumber
+}
+
+export const splitIntoChunks = (log: string, chunkSize = defaultChunkSize) => {
+  if (!log) return []
+
+  const logLines: string[] = log.split(`\n`)
+
+  if (logLines.length <= chunkSize) return [log]
+
+  const chunks: string[] = []
+
+  while (logLines.length) {
+    const chunk = logLines.splice(0, chunkSize)
+
+    chunks.push(chunk.join(`\n`))
+  }
+
+  return chunks
+}
+
+export const clearErrorsAndWarningsHtmlWrapping = (log: string) =>
+  log.replace(/^<font[^>]*>/gm, '').replace(/<\/font>/gm, '')
+
+export const download = (evt: SyntheticEvent, log: string, fileName = '') => {
+  evt.stopPropagation()
+
+  const padWithZero = (num: number) => (num < 9 ? `0${num}` : `${num}`)
+
+  const date = new Date()
+  const datePrefix = [
+    date.getFullYear(),
+    padWithZero(date.getMonth() + 1),
+    padWithZero(date.getDate()),
+    padWithZero(date.getHours()),
+    padWithZero(date.getMinutes()),
+    padWithZero(date.getSeconds())
+  ].join('')
+
+  const file = new Blob([log])
+  const url = URL.createObjectURL(file)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${datePrefix}${fileName}.log`
+  document.body.appendChild(a)
+  a.click()
+
+  setTimeout(() => {
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }, 0)
+}

web/src/utils/types.ts

@@ -39,3 +39,18 @@ export interface TreeNode {
   isFolder: boolean
   children: Array<TreeNode>
 }
+
+export interface LogInstance {
+  body: string
+  line: number
+  type: 'error' | 'warning'
+  id: number
+  ref?: any
+}
+
+export interface LogObject {
+  body: string
+  errors?: LogInstance[]
+  warnings?: LogInstance[]
+  linesCount: number
+}

web/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "include": ["src"]
 }

web/webpack.common.ts

@@ -33,9 +33,23 @@ const config: Configuration = {
       },
       {
         test: /\.css$/,
-        exclude: ['/node_modules/'],
+        exclude: ['/node_modules/', /\.module\.css$/],
         use: ['style-loader', 'css-loader']
       },
+      {
+        test: /\.module\.css$/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[local]--[hash:base64:5]'
+              }
+            }
+          }
+        ]
+      },
       {
         test: /\.scss$/,
         exclude: ['/node_modules/'],