Reverse proxy using base tag (ToolJet#3889)

* reverse proxy * reverse proxy * Fix for yjs * Fix for ws * Fixes org switching * Fixes org creation * Fixes login logo * Fixes download icon * Construct use invite URL from base URI * Fixes apiUrl if sub path is set * Remove commented code * Fix profile link * invitation url changes * Fixes dev env * Use url-join lib to connect urls for goto app and invitation link * Use useHistory instead of helper to get history for template modal * Review changes Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com> Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
jbzhang99 · Aug 27, 2022 · 98bb751 · 98bb751
1 parent c75b627
commit 98bb751
Show file tree

Hide file tree

Showing 66 changed files with 939 additions and 363 deletions.
diff --git a/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx b/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx
@@ -12,7 +12,7 @@ export default function GitSSOLoginButton({ configs, text }) {
   return (
     <div data-cy="git-tile">
       <button onClick={gitLogin} className="btn border-0 rounded-2">
-        <img src="/assets/images/sso-buttons/git.svg" className="h-4" data-cy="git-icon" />
+        <img src="assets/images/sso-buttons/git.svg" className="h-4" data-cy="git-icon" />
         <span className="px-1" data-cy="git-sign-in-text">
           {text || 'Sign in with GitHub'}
         </span>

diff --git a/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx b/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx
@@ -9,16 +9,14 @@ export default function GoogleSSOLoginButton(props) {
         buttonText="Login"
         cookiePolicy={'single_host_origin'}
         uxMode="redirect"
-        redirectUri={`${window.location.protocol}//${window.location.host}/sso/google${
-          props.configId ? `/${props.configId}` : ''
-        }`}
+        redirectUri={`${window.public_config?.TOOLJET_HOST}/sso/google${props.configId ? `/${props.configId}` : ''}`}
         render={(renderProps) => (
           <div>
             <button {...renderProps} className="btn border-0 rounded-2">
               <img
                 onClick={renderProps.onClick}
                 disabled={renderProps.disabled}
-                src="/assets/images/sso-buttons/google.svg"
+                src="assets/images/sso-buttons/google.svg"
                 className="h-4"
                 data-cy="google-icon"
               />

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,6 +26,7 @@
     "babel-plugin-import": "^1.13.3",
     "bootstrap": "^4.6.0",
     "classnames": "^2.3.1",
+    "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^6.5.1",
     "date-fns": "^2.28.0",
     "dompurify": "^2.2.7",
@@ -95,13 +96,13 @@
     "superstruct": "^0.15.4",
     "terser-webpack-plugin": "^5.3.4",
     "tinycolor2": "^1.4.2",
+    "url-join": "^5.0.0",
     "uuid": "8.3.2",
     "webpack": "^5.55.1",
     "webpack-cli": "^4.8.0",
     "y-websocket": "^1.4.0",
     "yjs": "^13.5.28",
-    "yup": "^0.27.0",
-    "compression-webpack-plugin": "^10.0.0"
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "eslint": "^7.32.0",
@@ -154,4 +155,4 @@
       "jsx"
     ]
   }
-}
+}
diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import config from 'config';
-import { Router, Route, Redirect } from 'react-router-dom';
+import { BrowserRouter, Route, Redirect } from 'react-router-dom';
 import { history } from '@/_helpers';
 import { authenticationService, tooljetService } from '@/_services';
 import { PrivateRoute } from '@/_components';
@@ -86,7 +86,7 @@ class App extends React.Component {
 
     return (
       <>
-        <Router history={history}>
+        <BrowserRouter history={history} basename={window.public_config?.SUB_PATH || '/'}>
           <div className={`main-wrapper ${darkMode ? 'theme-dark' : ''}`}>
             {updateAvailable && (
               <div className="alert alert-info alert-dismissible" role="alert">
@@ -258,7 +258,7 @@ class App extends React.Component {
               darkMode={darkMode}
             />
           </div>
-        </Router>
+        </BrowserRouter>
         <Toaster toastOptions={toastOptions} />
       </>
     );

diff --git a/frontend/src/ConfirmationPage/ConfirmationPage.jsx b/frontend/src/ConfirmationPage/ConfirmationPage.jsx
@@ -140,7 +140,7 @@ class ConfirmationPage extends React.Component {
         >
           <div className="text-center mb-4">
             <a href=".">
-              <img src="/assets/images/logo-color.svg" height="30" alt="" data-cy="page-logo" />
+              <img src="assets/images/logo-color.svg" height="30" alt="" data-cy="page-logo" />
             </a>
           </div>
           <form className="card card-md" action="." method="get" autoComplete="off" data-cy="confirm-invite-container">

diff --git a/frontend/src/ConfirmationPage/OrganizationInvitationPage.jsx b/frontend/src/ConfirmationPage/OrganizationInvitationPage.jsx
@@ -90,7 +90,7 @@ class OrganizationInvitationPage extends React.Component {
         <div className="container-tight py-2 invitation-page" data-cy="confirm-invite-container">
           <div className="text-center mb-4">
             <a href=".">
-              <img src="/assets/images/logo-color.svg" height="30" alt="" data-cy="page-logo" />
+              <img src="assets/images/logo-color.svg" height="30" alt="" data-cy="page-logo" />
             </a>
           </div>
           <form className="card card-md" action="." method="get" autoComplete="off">

diff --git a/frontend/src/Editor/AppVersionsManager.jsx b/frontend/src/Editor/AppVersionsManager.jsx
@@ -181,7 +181,7 @@ export const AppVersionsManager = function AppVersionsManager({
         }}
       >
         <span className={`${releasedVersionId === editingAppVersion.id ? 'released' : ''}`}>
-          {releasedVersionId === editingAppVersion.id && <img src={'/assets/images/icons/editor/deploy-rocket.svg'} />}
+          {releasedVersionId === editingAppVersion.id && <img src={'assets/images/icons/editor/deploy-rocket.svg'} />}
           <span className="px-1">{editingAppVersion.name}</span>
         </span>
         {showDropDown && (
@@ -198,7 +198,7 @@ export const AppVersionsManager = function AppVersionsManager({
                       >
                         <div className="col-md-4">{version.name}</div>
                         <div className="released-subtext">
-                          <img src={'/assets/images/icons/editor/deploy-rocket.svg'} />
+                          <img src={'assets/images/icons/editor/deploy-rocket.svg'} />
                           <span className="px-1">Currently Released</span>
                         </div>
                       </div>
@@ -229,7 +229,7 @@ export const AppVersionsManager = function AppVersionsManager({
                             }}
                           >
                             <img
-                              src="/assets/images/icons/edit.svg"
+                              src="assets/images/icons/edit.svg"
                               width="12"
                               height="12"
                               className="mx-1"
@@ -250,7 +250,7 @@ export const AppVersionsManager = function AppVersionsManager({
                             }}
                           >
                             <img
-                              src="/assets/images/icons/query-trash-icon.svg"
+                              src="assets/images/icons/query-trash-icon.svg"
                               width="12"
                               height="12"
                               className="mx-1"
@@ -423,7 +423,7 @@ const CreateVersionModal = function CreateVersionModal({
               <div className="row py-3">
                 <div className="col-1 py-2">
                   <span className="pe-1">
-                    <img src={'/assets/images/icons/editor/bulb-sharp.svg'} />
+                    <img src={'assets/images/icons/editor/bulb-sharp.svg'} />
                   </span>
                 </div>
                 <div className="col">

diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
@@ -312,7 +312,7 @@ export const Box = function Box({
                     width: '20px',
                     height: '20px',
                     backgroundSize: 'contain',
-                    backgroundImage: `url(/assets/images/icons/widgets/${component.name.toLowerCase()}.svg)`,
+                    backgroundImage: `url(assets/images/icons/widgets/${component.name.toLowerCase()}.svg)`,
                     backgroundRepeat: 'no-repeat',
                   }}
                 ></div>

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -371,7 +371,7 @@ const PopupIcon = ({ callback, icon, tip }) => {
       >
         <img
           className="svg-icon m-2 popup-btn"
-          src={`/assets/images/icons/${icon}.svg`}
+          src={`assets/images/icons/${icon}.svg`}
           width="12"
           height="12"
           onClick={(e) => {

diff --git a/frontend/src/Editor/Comment/index.jsx b/frontend/src/Editor/Comment/index.jsx
@@ -63,7 +63,7 @@ const Comment = ({
       fetchData();
     } else {
       // resetting the query param
-      router.push(window.location.pathname);
+      // router.push(window.location.pathname);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);

diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -57,19 +57,19 @@ const HEADINGS = [
 
 const BLOCK_TYPES = [
   {
-    label: <img src="/assets/images/icons/rich-text-editor/blockquote.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/blockquote.svg" style={{ height: '16px' }} />,
     style: 'blockquote',
   },
   {
-    label: <img src="/assets/images/icons/rich-text-editor/ul.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/ul.svg" style={{ height: '16px' }} />,
     style: 'unordered-list-item',
   },
   {
-    label: <img src="/assets/images/icons/rich-text-editor/ol.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/ol.svg" style={{ height: '16px' }} />,
     style: 'ordered-list-item',
   },
   {
-    label: <img src="/assets/images/icons/rich-text-editor/codeblock.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/codeblock.svg" style={{ height: '16px' }} />,
     style: 'code-block',
   },
 ];
@@ -114,15 +114,15 @@ const BlockStyleControls = (props) => {
 
 var INLINE_STYLES = [
   {
-    label: <img src="/assets/images/icons/rich-text-editor/bold.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/bold.svg" style={{ height: '16px' }} />,
     style: 'BOLD',
   },
   {
-    label: <img src="/assets/images/icons/rich-text-editor/italic.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/italic.svg" style={{ height: '16px' }} />,
     style: 'ITALIC',
   },
   {
-    label: <img src="/assets/images/icons/rich-text-editor/underline.svg" style={{ height: '16px' }} />,
+    label: <img src="assets/images/icons/rich-text-editor/underline.svg" style={{ height: '16px' }} />,
     style: 'UNDERLINE',
   },
 ];

diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
@@ -317,7 +317,7 @@ export const FilePicker = ({
                       clearSelectedFiles(index);
                     }}
                   >
-                    <img src="/assets/images/icons/trash.svg" width="12" height="12" className="mx-1" />
+                    <img src="assets/images/icons/trash.svg" width="12" height="12" className="mx-1" />
                   </button>
                 </div>
               </>

diff --git a/frontend/src/Editor/Components/KanbanBoard/Card.jsx b/frontend/src/Editor/Components/KanbanBoard/Card.jsx
@@ -86,7 +86,7 @@ export const Card = ({
                 type="btn btn-sm btn-danger"
                 onClick={() => removeCardHandler(keyIndex, index)}
               >
-                <img className="mx-1" src={`/assets/images/icons/trash.svg`} width={12} height={12} />
+                <img className="mx-1" src={`assets/images/icons/trash.svg`} width={12} height={12} />
               </span>
             )}
             {eventPopoverOptions.show && (

diff --git a/frontend/src/Editor/Components/KanbanBoard/CardPopover.jsx b/frontend/src/Editor/Components/KanbanBoard/CardPopover.jsx
@@ -100,7 +100,7 @@ export const CardEventPopover = function ({
                 <h3>
                   {card?.title ?? ''}
                   <img
-                    src="/assets/images/icons/editor/edit.svg"
+                    src="assets/images/icons/editor/edit.svg"
                     style={{ visibility: titleHovered ? 'visible' : 'hidden', height: 15, width: 15, paddingLeft: 1 }}
                     onClick={() => setTitleEditMode(true)}
                   />
@@ -136,7 +136,7 @@ export const CardEventPopover = function ({
                     card.description
                   )}
                   <img
-                    src="/assets/images/icons/editor/edit.svg"
+                    src="assets/images/icons/editor/edit.svg"
                     style={{
                       visibility: descriptionHovered ? 'visible' : 'hidden',
                       height: 15,

diff --git a/frontend/src/Editor/Components/Map/Map.jsx b/frontend/src/Editor/Components/Map/Map.jsx
@@ -144,7 +144,7 @@ export const Map = function Map({
           top: height * 0.5 - 50,
         }}
       >
-        <img className="mx-2" src="/assets/images/icons/marker.svg" width="24" height="64" />
+        <img className="mx-2" src="assets/images/icons/marker.svg" width="24" height="64" />
       </div>
       <LoadScript googleMapsApiKey={window.public_config.GOOGLE_MAPS_API_KEY} libraries={['places']}>
         <GoogleMap

diff --git a/frontend/src/Editor/Components/PDF.jsx b/frontend/src/Editor/Components/PDF.jsx
@@ -143,7 +143,7 @@ export const PDF = React.memo(({ styles, properties, width, height, component })
                 onClick={() => downloadFile(url, pdfName)}
               >
                 <img
-                  src="/assets/images/icons/download.svg"
+                  src="assets/images/icons/download.svg"
                   alt="download logo"
                   style={downloadIconImgStyle}
                   className="mx-1"

diff --git a/frontend/src/Editor/Components/Statistics.jsx b/frontend/src/Editor/Components/Statistics.jsx
@@ -96,12 +96,12 @@ export const Statistics = function Statistics({ width, height, properties, style
               <div className="d-flex flex-row justify-content-center align-items-baseline">
                 {secondarySignDisplay !== 'negative' ? (
                   <img
-                    src="/assets/images/icons/widgets/upstatistics.svg"
+                    src="assets/images/icons/widgets/upstatistics.svg"
                     style={{ ...marginStyle, marginRight: '6.5px' }}
                   />
                 ) : (
                   <img
-                    src="/assets/images/icons/widgets/downstatistics.svg"
+                    src="assets/images/icons/widgets/downstatistics.svg"
                     style={{ ...marginStyle, marginRight: '6.5px' }}
                   />
                 )}

diff --git a/frontend/src/Editor/Components/Table/GlobalFilter.jsx b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
@@ -25,7 +25,7 @@ export const GlobalFilter = ({
   return (
     <div className="ms-2 d-flex border px-2 mx-1 btn-light align-items-center" style={{ padding: '0.25rem 0' }}>
       <img
-        src="/assets/images/icons/search.svg"
+        src="assets/images/icons/search.svg"
         alt="search icon"
         style={{ width: '15px', height: '15px', marginRight: '0.25rem' }}
       />

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
@@ -913,7 +913,7 @@ export function Table({
             <div>
               {showFilterButton && (
                 <span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-1" onClick={() => showFilters()}>
-                  <img src="/assets/images/icons/filter.svg" width="15" height="15" />
+                  <img src="assets/images/icons/filter.svg" width="15" height="15" />
                   {filters.length > 0 && (
                     <a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
                   )}
@@ -925,7 +925,7 @@ export function Table({
                   className="btn btn-light btn-sm p-1"
                   onClick={() => exportData('csv', true)}
                 >
-                  <img src="/assets/images/icons/download.svg" width="15" height="15" />
+                  <img src="assets/images/icons/download.svg" width="15" height="15" />
                 </span>
               )}
             </div>

diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
@@ -30,7 +30,7 @@ export const ConfigHandle = function ConfigHandle({
         >
           <img
             style={{ cursor: 'pointer', marginRight: '5px', verticalAlign: 'middle' }}
-            src="/assets/images/icons/settings.svg"
+            src="assets/images/icons/settings.svg"
             width="12"
             height="12"
             draggable="false"
@@ -41,7 +41,7 @@ export const ConfigHandle = function ConfigHandle({
           <div className="delete-part">
             <img
               style={{ cursor: 'pointer', marginLeft: '5px' }}
-              src="/assets/images/icons/trash-light.svg"
+              src="assets/images/icons/trash-light.svg"
               width="12"
               role="button"
               height="12"

diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -539,7 +539,7 @@ class DataSourceManager extends React.Component {
                       autoFocus
                     />
                     <span className="input-icon-addon">
-                      <img src="/assets/images/icons/edit-source.svg" width="12" height="12" />
+                      <img src="assets/images/icons/edit-source.svg" width="12" height="12" />
                     </span>
                   </div>
                 </div>
@@ -550,7 +550,7 @@ class DataSourceManager extends React.Component {
               className={`close-btn mx-4 mt-3 ${this.props.darkMode ? 'dark' : ''}`}
               onClick={() => this.hideModal()}
             >
-              <img src="/assets/images/icons/close.svg" width="12" height="12" />
+              <img src="assets/images/icons/close.svg" width="12" height="12" />
             </span>
           </Modal.Header>
 
@@ -708,7 +708,7 @@ const EmptyStateContainer = ({
     <div className="empty">
       {queryString && !suggestionUI && <h3>No results for &quot;{queryString} &quot;</h3>}
       <center className={`empty-results ${suggestionUI ? 'suggestionUI-results' : ''}`}>
-        <img src="/assets/images/icons/no-results.svg" width="150" height="150" />
+        <img src="assets/images/icons/no-results.svg" width="150" height="150" />
         {status ? (
           <div>
             <p className="text-success mt-2">Thank you, we&apos;ve taken a note of that!</p>