From 8bc3f5a56cc0f4a59718cce7644a3be2d0265ff2 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 6 Dec 2024 16:48:35 +0100
Subject: [PATCH] Fix links (#1366)

* chore: remove unused code

* bump version to 3.9.3

* chore: use constant links

* refactor: build links

* chore: ignore ontime-data
---
 .gitignore                                    |  1 +
 apps/cli/package.json                         |  2 +-
 apps/client/package.json                      |  4 +-
 .../navigation-menu/NavigationMenu.tsx        |  7 ++-
 apps/client/src/common/utils/linkUtils.js     | 30 ----------
 apps/client/src/common/utils/linkUtils.ts     | 40 +++++++++++++
 apps/client/src/externals.ts                  | 60 +++++++++++++------
 .../panel/network-panel/NetworkInterfaces.tsx |  8 +--
 .../panel/network-panel/NetworkLogPanel.tsx   |  4 +-
 .../panel/project-panel/ProjectCreateForm.tsx |  5 +-
 .../panel/project-panel/ProjectData.tsx       |  5 +-
 apps/electron/package.json                    |  2 +-
 apps/server/package.json                      |  2 +-
 apps/server/src/utils/__tests__/url.test.ts   | 33 ----------
 apps/server/src/utils/url.ts                  | 20 -------
 e2e/tests/000-upload-showfile.spec.ts         |  4 ++
 ...mote.spec.ts => 210-client-remote.spec.ts} |  0
 package.json                                  |  2 +-
 18 files changed, 110 insertions(+), 119 deletions(-)
 delete mode 100644 apps/client/src/common/utils/linkUtils.js
 create mode 100644 apps/client/src/common/utils/linkUtils.ts
 delete mode 100644 apps/server/src/utils/__tests__/url.test.ts
 delete mode 100644 apps/server/src/utils/url.ts
 rename e2e/tests/features/{302-client-remote.spec.ts => 210-client-remote.spec.ts} (100%)

diff --git a/.gitignore b/.gitignore
index 0cf66a490..a73158227 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,7 @@ dist/
 # docker utils
 ontime-db
 ontime-external/
+ontime-data/
 
 # versioning file
 **/ONTIME_VERSION.js
diff --git a/apps/cli/package.json b/apps/cli/package.json
index f07fd9d11..021140b01 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "3.9.2",
+    "version": "3.9.3",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",
diff --git a/apps/client/package.json b/apps/client/package.json
index 8bfcd3489..1f655beed 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -39,7 +39,7 @@
     "build": "vite build",
     "build:local": "cross-env NODE_ENV=local vite build",
     "build:electron": "cross-env NODE_ENV=local vite build",
-    "build:docker": "cross-env VITE_IS_CLOUD=true vite build",
+    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
     "build:localdocker": "cross-env NODE_ENV=local vite build",
     "lint": "eslint . --quiet",
     "test": "vitest",
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
index 7180f2d36..97371d8e9 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
@@ -17,7 +17,7 @@ import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
-import { isLocalhost, serverPort } from '../../../externals';
+import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
 import { useElectronEvent } from '../../hooks/useElectronEvent';
@@ -25,7 +25,7 @@ import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
-import { handleLinks, openLink } from '../../utils/linkUtils';
+import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
 import { cx } from '../../utils/styleUtils';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
 import CopyTag from '../copy-tag/CopyTag';
@@ -154,7 +154,8 @@ function OtherAddresses(props: OtherAddressesProps) {
             return null;
           }
 
-          const address = `http://${nif.address}:${serverPort}${currentLocation}`;
+          const address = linkToOtherHost(nif.address, currentLocation);
+
           return (
             <CopyTag
               key={nif.name}
diff --git a/apps/client/src/common/utils/linkUtils.js b/apps/client/src/common/utils/linkUtils.js
deleted file mode 100644
index a59644bbe..000000000
--- a/apps/client/src/common/utils/linkUtils.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Returns hostname
- * @type {string}
- */
-export const host = window?.location?.host;
-
-/**
- * Open an external URLs: specifically for a electron / browser case
- * If electron: ask main process to call a new browser window
- * If browser: open in new tab
- * @param url
- */
-export function openLink(url) {
-  if (window.process?.type === 'renderer') {
-    window.ipcRenderer.send('send-to-link', url);
-  } else {
-    window.open(url);
-  }
-}
-
-/**
- * Handles opening external links
- * @param event
- * @param location
- */
-export function handleLinks(event, location) {
-  // we handle the link manually
-  event.preventDefault();
-  openLink(`http://${host}/${location}`);
-}
diff --git a/apps/client/src/common/utils/linkUtils.ts b/apps/client/src/common/utils/linkUtils.ts
new file mode 100644
index 000000000..4dd1b78fb
--- /dev/null
+++ b/apps/client/src/common/utils/linkUtils.ts
@@ -0,0 +1,40 @@
+import type { MouseEvent } from 'react';
+
+import { baseURI, serverURL } from '../../externals';
+
+/**
+ * Open an external URLs: specifically for a electron / browser case
+ * If electron: ask main process to call a new browser window
+ * If browser: open in new tab
+ * @param url
+ */
+export function openLink(url: string) {
+  if (window.process?.type === 'renderer') {
+    window.ipcRenderer.send('send-to-link', url);
+  } else {
+    window.open(url);
+  }
+}
+
+/**
+ * Handles opening external links
+ * @param event
+ * @param location
+ */
+export function handleLinks(event: MouseEvent, location: string) {
+  // we handle the link manually
+  event.preventDefault();
+
+  const destination = new URL(serverURL);
+  destination.pathname = baseURI ? `${baseURI}/${location}` : location;
+  openLink(destination.toString());
+}
+
+export function linkToOtherHost(host: string, path?: string) {
+  const destination = new URL(serverURL);
+  destination.hostname = host;
+  if (path) {
+    destination.pathname = baseURI ? `${baseURI}/${path}` : path;
+  }
+  return destination.toString();
+}
diff --git a/apps/client/src/externals.ts b/apps/client/src/externals.ts
index 1fd3e4618..e2e4b082e 100644
--- a/apps/client/src/externals.ts
+++ b/apps/client/src/externals.ts
@@ -1,8 +1,9 @@
-import { version } from '../../../package.json';
 /**
  * This file contains a list of constants that may need to be resolved at runtime
  */
 
+import { version } from '../../../package.json';
+
 export const githubUrl = 'https://www.github.com/cpvalente/ontime';
 export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
 export const websiteUrl = 'https://www.getontime.no';
@@ -16,31 +17,56 @@ export const appVersion = version;
 export const isProduction = import.meta.env.MODE === 'production';
 export const isDev = !isProduction;
 export const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-export const isOntimeCloud = Boolean(import.meta.env.VITE_IS_CLOUD);
+export const isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
+export const isOntimeCloud = window.location.hostname.includes('cloud.getontime.no');
 
-// resolve protocol
-const socketProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+// resolve entrypoint URLs
 
-// resolve port
-const STATIC_PORT = 4001; // this is used as a fallback port for development
-export const serverPort = isProduction ? window.location.port : STATIC_PORT;
+/**
+ * Resolve base
+ * @example '' for electron
+ * @example '/client-hash' for cloud
+ */
 export const baseURI = resolveBaseURI();
-export const serverURL = `${window.location.protocol}//${window.location.hostname}:${serverPort}${baseURI}`;
-export const websocketUrl = `${socketProtocol}://${window.location.hostname}:${serverPort}${baseURI}/ws`;
+export const serverURL = resolveUrl('http', '');
+export const websocketUrl = resolveUrl('ws', 'ws');
+
+function resolveUrl(protocol: 'http' | 'ws', path: string) {
+  const url = new URL(window.location.origin);
+
+  // check if protocol URL is secure
+  url.protocol = protocol === 'http' ? 'http' : 'ws';
+  url.protocol += window.location.protocol === 'https:' ? 's' : '';
+
+  // make path name relative to the base URI
+  url.pathname = baseURI ? `${baseURI}/${path}` : path;
+
+  // in development mode, we use the React port for UI, but need the requests to target the server
+  if (isDev) {
+    // this is used as a fallback port for development
+    url.port = '4001';
+  }
+
+  const result = url.toString();
+
+  // prevent trailing slash
+  return result.endsWith('/') ? result.slice(0, -1) : result;
+}
 
 /**
  * Resolves a base URI for a client that is not at the root segment
  * ie: https://cloud.getontime.com/client-hash/timer
  * This is necessary for ontime cloud and should otherwise not affect the client
  */
-function resolveBaseURI() {
-  if (!isOntimeCloud) {
-    return '';
-  }
-  const [_, base, location] = window.location.pathname.split('/');
-  if (!location) {
-    return '';
+function resolveBaseURI(): string {
+  // in ontime cloud, the base tag is set by the server
+  const baseHref = document.querySelector('base')?.getAttribute('href');
+  const base = baseHref ?? '';
+
+  // prevent a trailing slash from either an empty base or a base with a trailing slash
+  if (base.endsWith('/')) {
+    return base.slice(0, -1);
   }
 
-  return `/${base}`;
+  return base;
 }
diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
index db4c98f98..556531b38 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
+++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
@@ -2,8 +2,8 @@ import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
-import { openLink } from '../../../../common/utils/linkUtils';
-import { isLocalhost, serverPort } from '../../../../externals';
+import { linkToOtherHost, openLink } from '../../../../common/utils/linkUtils';
+import { isLocalhost } from '../../../../externals';
 
 import style from './NetworkInterfaces.module.scss';
 
@@ -14,11 +14,11 @@ export default function InfoNif() {
 
   return (
     <div className={style.interfaces}>
-      {data.networkInterfaces?.map((nif) => {
+      {data.networkInterfaces.map((nif) => {
         // interfaces outside localhost wont have access
         if (nif.name === 'localhost' && !isLocalhost) return null;
+        const address = linkToOtherHost(nif.address);
 
-        const address = `http://${nif.address}:${serverPort}`;
         return (
           <CopyTag
             key={nif.name}
diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx
index c5a92674e..8661a1e35 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx
+++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { usePing } from '../../../../common/hooks/useSocket';
 import { socketSendJson } from '../../../../common/utils/socket';
-import { isOntimeCloud } from '../../../../externals';
+import { isDockerImage } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import ClientControlPanel from '../client-control-panel/ClientControlPanel';
@@ -19,7 +19,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     <>
       <Panel.Header>Network</Panel.Header>
       <Panel.Section>
-        {isOntimeCloud && <OntimeCloudStats />}
+        {isDockerImage && <OntimeCloudStats />}
         <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
       </Panel.Section>
       <InfoNif />
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
index d88bfd7e1..fa5b902de 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import { documentationUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -118,7 +119,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
           <Input
             variant='ontime-filled'
             size='sm'
-            placeholder='www.getontime.no'
+            placeholder={websiteUrl}
             autoComplete='off'
             {...register('publicUrl')}
           />
@@ -140,7 +141,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
           <Input
             variant='ontime-filled'
             size='sm'
-            placeholder='http://docs.getontime.no'
+            placeholder={documentationUrl}
             autoComplete='off'
             {...register('backstageUrl')}
           />
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
index 960ceb218..7f3094f64 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
@@ -10,6 +10,7 @@ import { postProjectData, uploadProjectLogo } from '../../../../common/api/proje
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
 import { validateLogo } from '../../../../common/utils/uploadUtils';
+import { documentationUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -203,7 +204,7 @@ export default function ProjectData() {
             <Input
               variant='ontime-filled'
               size='sm'
-              placeholder='www.getontime.no'
+              placeholder={websiteUrl}
               autoComplete='off'
               {...register('publicUrl')}
             />
@@ -225,7 +226,7 @@ export default function ProjectData() {
             <Input
               variant='ontime-filled'
               size='sm'
-              placeholder='http://docs.getontime.no'
+              placeholder={documentationUrl}
               autoComplete='off'
               {...register('backstageUrl')}
             />
diff --git a/apps/electron/package.json b/apps/electron/package.json
index f60b19fe1..e6274e056 100644
--- a/apps/electron/package.json
+++ b/apps/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",
diff --git a/apps/server/package.json b/apps/server/package.json
index 36206f19b..1e2d68481 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
diff --git a/apps/server/src/utils/__tests__/url.test.ts b/apps/server/src/utils/__tests__/url.test.ts
deleted file mode 100644
index 326a33357..000000000
--- a/apps/server/src/utils/__tests__/url.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { cleanURL } from '../url.js';
-
-describe('url is correctly formatted', () => {
-  it('has no leading spaces', () => {
-    const test = '         http://testing';
-    const expected = 'http://testing';
-    expect(cleanURL(test)).toBe(expected);
-  });
-
-  it('has no trailing spaces', () => {
-    const test = 'http://testing  ';
-    const expected = 'http://testing';
-    expect(cleanURL(test)).toBe(expected);
-  });
-
-  it('doesnt contain spaces', () => {
-    const test = 'http://t e s t i n g';
-    const expected = 'http://t%20e%20s%20t%20i%20n%20g';
-    expect(cleanURL(test)).toBe(expected);
-  });
-
-  it('only contains allowed characters', () => {
-    const test = 'http://<>[]{}|^';
-    const expected = 'http://';
-    expect(cleanURL(test)).toBe(expected);
-  });
-
-  it('begins with http://', () => {
-    const test = 'ontime.com';
-    const expected = 'http://ontime.com';
-    expect(cleanURL(test)).toBe(expected);
-  });
-});
diff --git a/apps/server/src/utils/url.ts b/apps/server/src/utils/url.ts
deleted file mode 100644
index 9f8fd7bba..000000000
--- a/apps/server/src/utils/url.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @description Cleans given url
- * @param {string} url - URL to be checked
- * @returns {string} Sanitized url
- */
-export const cleanURL = (url: string): string => {
-  // trim whitespaces
-  let sanitised = url.trim();
-
-  // clear any whitespaces
-  sanitised = sanitised.split(' ').join('%20');
-
-  // contain only allowed characters
-  sanitised = sanitised.replace(/([@\s<>[\]{}|\\^])+/g, '');
-
-  // starts with http://
-  if (!sanitised.startsWith('http://')) sanitised = `http://${sanitised}`;
-
-  return sanitised;
-};
diff --git a/e2e/tests/000-upload-showfile.spec.ts b/e2e/tests/000-upload-showfile.spec.ts
index 5517b83ab..f1245ac82 100644
--- a/e2e/tests/000-upload-showfile.spec.ts
+++ b/e2e/tests/000-upload-showfile.spec.ts
@@ -4,6 +4,10 @@ const fileToUpload = 'e2e/tests/fixtures/test-db.json';
 
 test('project file upload', async ({ page }) => {
   await page.goto('http://localhost:4001/editor');
+
+  // close the welcome modal if it is open
+  await page.keyboard.down('Escape');
+
   await page.getByRole('button', { name: 'Edit' }).click();
   await page.getByRole('button', { name: 'Clear rundown' }).click();
   await page.getByRole('button', { name: 'Delete all' }).click();
diff --git a/e2e/tests/features/302-client-remote.spec.ts b/e2e/tests/features/210-client-remote.spec.ts
similarity index 100%
rename from e2e/tests/features/302-client-remote.spec.ts
rename to e2e/tests/features/210-client-remote.spec.ts
diff --git a/package.json b/package.json
index c01073e36..31d644e5e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",