fix(studio): removed external dependencies and fixed paths

build/gulp.core.js

@@ -81,12 +81,16 @@ const cleanStudio = () => {
   return gulp.src('./out/bp/ui-studio/public', { allowEmpty: true }).pipe(rimraf())
 }
 
+const cleanStudioAssets = () => {
+  return gulp.src('./out/bp/assets/ui-studio/public', { allowEmpty: true }).pipe(rimraf())
+}
+
 const copyStudio = () => {
   return gulp.src('./src/bp/ui-studio/public/**/*').pipe(gulp.dest('./out/bp/ui-studio/public'))
 }
 
 const createStudioSymlink = () => {
-  return gulp.src('./src/bp/ui-studio/public').pipe(symlink('./out/bp/ui-studio/', { type: 'dir' }))
+  return gulp.src('./src/bp/ui-studio/public').pipe(symlink('./out/bp/assets/ui-studio/', { type: 'dir' }))
 }
 
 const buildSchemas = cb => {
@@ -122,6 +126,7 @@ module.exports = {
   copyBotTemplate,
   copyAdmin,
   cleanStudio,
+  cleanStudioAssets,
   copyStudio,
   createStudioSymlink,
   watch,

gulpfile.js

@@ -12,7 +12,7 @@ const dataTasks = [core.createDirectories, core.copyData, core.copyBotTemplate]
 const uiTasks = [core.copyAdmin, core.copyStudio]
 const buildTasks = [core.fetchPro, core.writeEdition, core.buildTs, core.buildSchemas, ...dataTasks, ...uiTasks]
 
-gulp.task('create-studio-symlink', gulp.series([core.cleanStudio, core.createStudioSymlink]))
+gulp.task('create-studio-symlink', gulp.series([core.cleanStudioAssets, core.cleanStudio, core.createStudioSymlink]))
 gulp.task('copy-admin', core.copyAdmin)
 gulp.task('copy-studio', gulp.series([core.cleanStudio, core.copyStudio]))
 gulp.task('build-reference', core.buildReferenceDoc)

modules/channel-web/src/views/web/side/style.scss

@@ -205,7 +205,7 @@
         height: 100%;
         opacity: 0.05;
         z-index: -1;
-        background: url(/assets/modules/channel-web/background_1.png);
+        background: url(/assets/modules/channel-web/images/background_1.png);
       }
 
       .bottom {

src/bp/core/botpress.ts

@@ -110,6 +110,15 @@ export class Botpress {
   async deployAssets() {
     const assets = path.resolve(process.PROJECT_LOCATION, 'assets')
     fse.copySync(path.join(__dirname, '../ui-admin'), `${assets}/ui-admin`)
+
+    // Avoids overwriting the folder when developping locally on the studio
+    if (fse.pathExistsSync(`${assets}/ui-studio/public`)) {
+      const studioPath = await fse.lstatSync(`${assets}/ui-studio/public`)
+      if (studioPath.isSymbolicLink()) {
+        return
+      }
+    }
+
     fse.copySync(path.join(__dirname, '../ui-studio'), `${assets}/ui-studio`)
   }
 

src/bp/core/server.ts

@@ -111,7 +111,7 @@ export default class HTTPServer {
     }
 
     this.app.use('/assets', express.static(this.resolveAsset('')))
-    this.app.use(rewrite('/:app/:botId/env.js', '/api/v1/bots/:botId/:app/js/env.js'))
+    this.app.use(rewrite('/:app/:botId/*env.js', '/api/v1/bots/:botId/:app/js/env.js'))
 
     this.app.use(`${BASE_API_PATH}/auth`, this.authRouter.router)
     this.app.use(`${BASE_API_PATH}/admin`, this.adminRouter.router)

src/bp/ui-studio/src/web/components/Authentication/index.jsx

@@ -47,6 +47,7 @@ const ensureAuthenticated = WrappedComponent => {
       if (pathname !== '/login' && !urlToken) {
         this.context.router.history.push('/login?returnTo=' + pathname)
       }
+      window.location.href = '/admin'
       window.botpressWebChat && window.botpressWebChat.sendEvent({ type: 'hide' })
     }
 

src/bp/ui-studio/src/web/components/Hero/style.scss

@@ -55,7 +55,7 @@
 
     .rays {
       height: 100%;
-      background: url(/img/rays.png) no-repeat;
+      background: url(/assets/ui-studio/public/img/rays.png) no-repeat;
       background-size: cover;
       opacity: 0.05;
     }

src/bp/ui-studio/src/web/components/Layout/Sidebar.jsx

@@ -73,7 +73,7 @@ class Sidebar extends React.Component {
 
   renderModuleItem = module => {
     const path = `/modules/${module.name}`
-    const iconPath = `/img/modules/${module.name}.png`
+    const iconPath = `/assets/module/${module.name}/icon.png`
     const moduleIcon =
       module.menuIcon === 'custom' ? (
         <img className={classnames(style.customIcon, 'bp-custom-icon')} src={iconPath} />

src/bp/ui-studio/src/web/components/Modules/index.jsx

@@ -19,7 +19,7 @@ class ModuleComponent extends React.Component {
   renderLeftSideModule() {
     const { docLink, icon, description, author, license, title, name } = this.props.module
     const isLoaded = this.props.isLoaded
-    const iconPath = `/img/modules/${name}.png`
+    const iconPath = `/assets/modules/${name}/icon.png`
 
     const hasCustomIcon = icon === 'custom' && isLoaded
     const moduleIcon = hasCustomIcon ? (

src/bp/ui-studio/src/web/external/font-lato.css

@@ -0,0 +1,68 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Lato Light'), local('Lato-Light'), url(font_lato/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Lato Light'), local('Lato-Light'), url(font_lato/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(font_lato/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(font_lato/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(font_lato/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(font_lato/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Lato Black'), local('Lato-Black'), url(font_lato/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Lato Black'), local('Lato-Black'), url(font_lato/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/bp/ui-studio/src/web/index.html

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="description" content="" />
     <meta name="keywords" content="" />
-    <link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16" />
-    <link href="external/material-icons.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,600,700,900" rel="stylesheet" />
-    <link href="external/bootstrap.min.css" rel="stylesheet" />
-    <link href="assets/custom/custom-theme.css" rel="stylesheet" />
+    <link rel="icon" type="image/png" href="/assets/ui-studio/public/img/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/assets/ui-studio/public/img/favicon-16x16.png" sizes="16x16" />
+    <link href="/assets/ui-studio/public/external/material-icons.css" rel="stylesheet" />
+    <link href="/assets/ui-studio/public/external/font-lato.css" rel="stylesheet" />
+    <link href="/assets/ui-studio/public/external/bootstrap.min.css" rel="stylesheet" />
+    <link href="/assets/custom-theme.css" rel="stylesheet" />
   </head>
 
   <body>

src/bp/ui-studio/src/web/lite.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="description" content="" />
     <meta name="keywords" content="" />
-    <link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/png" href="/assets/ui-studio/public/img/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/assets/ui-studio/public/img/favicon-16x16.png" sizes="16x16" />
   </head>
 
   <body>

src/bp/ui-studio/src/web/views/FlowBuilder/style.scss

@@ -70,7 +70,7 @@
 .diagram :global(.storm-diagrams-canvas) {
   width: 100%;
   height: 100%;
-  background: url('/img/grid.png') repeat;
+  background: url('/assets/ui-studio/public/img/grid.png') repeat;
 }
 
 .wrapper {

src/bp/ui-studio/webpack.web.js

@@ -19,7 +19,7 @@ const webConfig = {
   },
   output: {
     path: path.resolve(__dirname, './public/js'),
-    publicPath: 'js/',
+    publicPath: '/assets/ui-studio/public/js/',
     filename: '[name].[chunkhash].js'
   },
   resolve: {