Merge branch 'main' into develop

frontend/src/Editor/Components/Datepicker.jsx

@@ -76,21 +76,6 @@ export const Datepicker = function Datepicker({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isValid]);
 
-  const CustomInputBox = React.forwardRef((props, ref) => {
-    return (
-      <input
-        readOnly
-        {...props}
-        value={date !== null ? computeDateString(date) : 'select date'}
-        className={`input-field form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon px-2 ${
-          darkMode ? 'bg-dark color-white' : 'bg-light'
-        }`}
-        style={{ height, borderRadius: `${borderRadius}px` }}
-        ref={ref}
-      />
-    );
-  });
-
   return (
     <div
       data-disabled={disabledState}
@@ -99,11 +84,14 @@ export const Datepicker = function Datepicker({
       style={{
         height,
         display: visibility ? '' : 'none',
-        borderRadius: `${borderRadius}px`,
       }}
     >
       <DatePickerComponent
+        className={`input-field form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon px-2 ${
+          darkMode ? 'bg-dark color-white' : 'bg-light'
+        }`}
         selected={date}
+        value={date !== null ? computeDateString(date) : 'select date'}
         onChange={(date) => onDateChange(date)}
         showTimeInput={enableTime ? true : false}
         showTimeSelectOnly={enableDate ? false : true}
@@ -113,8 +101,8 @@ export const Datepicker = function Datepicker({
         showMonthDropdown
         showYearDropdown
         dropdownMode="select"
-        customInput={<CustomInputBox />}
         excludeDates={excludedDates}
+        customInput={<input style={{ borderRadius: `${borderRadius}px` }} />}
       />
 
       <div data-cy="date-picker-invalid-feedback" className={`invalid-feedback ${isValid ? '' : 'd-flex'}`}>

frontend/src/HomePage/AppCard.jsx

@@ -6,6 +6,7 @@ import { ToolTip } from '@/_components';
 import useHover from '@/_hooks/useHover';
 import configs from './Configs/AppIcon.json';
 import { Link } from 'react-router-dom';
+import urlJoin from 'url-join';
 
 const { defaultIcon } = configs;
 
@@ -133,7 +134,7 @@ export default function AppCard({
                     disabled={app?.current_version_id === null || app?.is_maintenance_on}
                     onClick={() => {
                       if (app?.current_version_id) {
-                        window.open(`/applications/${app.slug}`);
+                        window.open(urlJoin(window.public_config?.TOOLJET_HOST, `/applications/${app.slug}`));
                       } else {
                         history.push(app?.current_version_id ? `/applications/${app.slug}` : '');
                       }

server/src/app.module.ts

@@ -114,6 +114,8 @@ if (process.env.SERVE_CLIENT !== 'false') {
 
   imports.unshift(
     ServeStaticModule.forRoot({
+      // Have to remove trailing slash of SUB_PATH.
+      serveRoot: process.env.SUB_PATH === undefined ? '' : process.env.SUB_PATH.replace(/\/$/, ''),
       rootPath: join(__dirname, '../../../', 'frontend/build'),
     })
   );

server/src/controllers/app.controller.ts

@@ -61,4 +61,9 @@ export class AppController {
   async healthCheck(@Request() req) {
     return { works: 'yeah' };
   }
+
+  @Get('/')
+  async rootPage(@Request() req) {
+    return { message: 'Instance seems healthy but this is probably not the right URL to access.' };
+  }
 }

server/src/events/events.gateway.ts

@@ -9,8 +9,9 @@ import {
 import { Server } from 'ws';
 import { AuthService } from 'src/services/auth.service';
 import { isEmpty } from 'lodash';
+import { maybeSetSubPath } from '../helpers/utils.helper';
 
-@WebSocketGateway({ path: '/ws' })
+@WebSocketGateway({ path: maybeSetSubPath('/ws') })
 export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
   constructor(private authService: AuthService) {}
   @WebSocketServer()

server/src/events/yjs.gateway.ts

@@ -4,8 +4,9 @@ import { Server } from 'ws';
 import { AuthService } from 'src/services/auth.service';
 import { isEmpty } from 'lodash';
 import { setupWSConnection } from 'y-websocket/bin/utils';
+import { maybeSetSubPath } from '../helpers/utils.helper';
 
-@WebSocketGateway({ path: '/yjs' })
+@WebSocketGateway({ path: maybeSetSubPath('/yjs') })
 export class YjsGateway implements OnGatewayConnection, OnGatewayDisconnect {
   constructor(private authService: AuthService) {}
   @WebSocketServer()

server/src/helpers/utils.helper.ts

@@ -1,6 +1,19 @@
 import { QueryError } from 'src/modules/data_sources/query.errors';
 import * as sanitizeHtml from 'sanitize-html';
 import { EntityManager, getManager } from 'typeorm';
+import { isEmpty } from 'lodash';
+
+export function maybeSetSubPath(path) {
+  const hasSubPath = process.env.SUB_PATH !== undefined;
+  const urlPrefix = hasSubPath ? process.env.SUB_PATH : '';
+
+  if (isEmpty(urlPrefix)) {
+    return path;
+  }
+
+  const pathWithoutLeadingSlash = path.replace(/^\/+/, '');
+  return urlPrefix + pathWithoutLeadingSlash;
+}
 
 export function parseJson(jsonString: string, errorMessage?: string): object {
   try {

server/src/main.ts

@@ -6,7 +6,7 @@ import * as helmet from 'helmet';
 import { Logger } from 'nestjs-pino';
 import { urlencoded, json } from 'express';
 import { AllExceptionsFilter } from './all-exceptions-filter';
-import { ValidationPipe } from '@nestjs/common';
+import { RequestMethod, ValidationPipe } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { bootstrap as globalAgentBootstrap } from 'global-agent';
 
@@ -27,7 +27,19 @@ async function bootstrap() {
   app.useGlobalFilters(new AllExceptionsFilter(app.get(Logger)));
   app.useGlobalPipes(new ValidationPipe({ whitelist: true, transform: true }));
   app.useWebSocketAdapter(new WsAdapter(app));
-  app.setGlobalPrefix('api');
+  const hasSubPath = process.env.SUB_PATH !== undefined;
+  const UrlPrefix = hasSubPath ? process.env.SUB_PATH : '';
+
+  // Exclude these endpoints from prefix. These endpoints are required for health checks.
+  const pathsToExclude = [];
+  if (hasSubPath) {
+    pathsToExclude.push({ path: 'health', method: RequestMethod.GET });
+    pathsToExclude.push({ path: '/', method: RequestMethod.GET });
+  }
+
+  app.setGlobalPrefix(UrlPrefix + 'api', {
+    exclude: pathsToExclude,
+  });
   app.enableCors();
   app.use(compression());