feat: small improvements to instance info (#591)

* refactor: add typings to backend info

* refactor: write current version to project file

* feat: show location of css override

apps/client/src/common/api/ontimeApi.ts

@@ -2,6 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import {
   Alias,
   DatabaseModel,
+  GetInfo,
   OntimeRundown,
   OSCSettings,
   OscSubscription,
@@ -13,7 +14,6 @@ import {
 import { ExcelImportMap } from 'ontime-utils';
 
 import { apiRepoLatest } from '../../externals';
-import { InfoType } from '../models/Info';
 import fileDownload from '../utils/fileDownload';
 
 import { ontimeURL } from './apiConstants';
@@ -39,7 +39,7 @@ export async function postSettings(data: Settings) {
  * @description HTTP request to retrieve application info
  * @return {Promise}
  */
-export async function getInfo(): Promise<InfoType> {
+export async function getInfo(): Promise<GetInfo> {
   const res = await axios.get(`${ontimeURL}/info`);
   return res.data;
 }

apps/client/src/common/hooks-query/useInfo.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetInfo } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
@@ -6,7 +7,7 @@ import { getInfo } from '../api/ontimeApi';
 import { ontimePlaceholderInfo } from '../models/Info';
 
 export default function useInfo() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
     queryKey: APP_INFO,
     queryFn: getInfo,
     placeholderData: ontimePlaceholderInfo,
@@ -16,5 +17,5 @@ export default function useInfo() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }

apps/client/src/common/models/Info.ts

@@ -1,19 +1,25 @@
-import { Settings } from 'ontime-types';
+import { GetInfo, OSCSettings } from 'ontime-types';
 
-type NetworkInterfaceType = {
-  name: string;
-  address: string;
-};
-
-export type InfoType = {
-  networkInterfaces: NetworkInterfaceType[];
-  settings: Pick<Settings, 'version' | 'serverPort'>;
-};
-
-export const ontimePlaceholderInfo: InfoType = {
-  networkInterfaces: [],
-  settings: {
-    version: 2,
-    serverPort: 4001,
+export const oscPlaceholderSettings: OSCSettings = {
+  portIn: 0,
+  portOut: 0,
+  targetIP: '',
+  enabledIn: false,
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onPause: [],
+    onStop: [],
+    onUpdate: [],
+    onFinish: [],
   },
 };
+
+export const ontimePlaceholderInfo: GetInfo = {
+  networkInterfaces: [],
+  version: '2.0.0',
+  serverPort: 4001,
+  osc: oscPlaceholderSettings,
+  cssOverride: '',
+};

apps/client/src/common/models/OntimeSettings.ts

@@ -2,7 +2,7 @@ import { Settings } from 'ontime-types';
 
 export const ontimePlaceholderSettings: Settings = {
   app: 'ontime',
-  version: 2,
+  version: '2.0.0',
   serverPort: 4001,
   editorKey: null,
   operatorKey: null,

apps/client/src/features/modals/settings-modal/SettingsModal.module.scss

@@ -3,19 +3,24 @@
 .aliases {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   flex-direction: column;
   width: 100%;
-  padding: 8px 0;
+  padding: 0.5rem 0;
 
   .aliasRow {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
   }
 
   .grow {
     flex: 1;
   }
 }
+
+.url {
+  font-size: calc(1rem - 2px);
+  user-select: text;
+}

apps/client/src/features/modals/settings-modal/ViewSettingsForm.tsx

@@ -1,16 +1,18 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Input, Switch } from '@chakra-ui/react';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';
 
 import { logAxiosError } from '../../../common/api/apiUtils';
 import { postViewSettings } from '../../../common/api/ontimeApi';
 import { PopoverPickerRHF } from '../../../common/components/input/popover-picker/PopoverPicker';
+import useInfo from '../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { mtm } from '../../../common/utils/timeConstants';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
+import ModalLink from '../ModalLink';
 import ModalSplitInput from '../ModalSplitInput';
 import OntimeModalFooter from '../OntimeModalFooter';
 
@@ -18,8 +20,12 @@ import InputMillisWithString from './InputMillisWithString';
 
 import style from './SettingsModal.module.scss';
 
+const cssOverrideDocsUrl = 'https://ontime.gitbook.io/v2/features/custom-styling';
+
 export default function ViewSettingsForm() {
   const { data, status, refetch, isFetching } = useViewSettings();
+  const { data: info, isFetching: isFetchingInfo } = useInfo();
+
   const {
     control,
     handleSubmit,
@@ -75,13 +81,24 @@ export default function ViewSettingsForm() {
 
   const disableInputs = status === 'loading';
 
-  if (isFetching) {
+  if (isFetching || isFetchingInfo) {
     return <ModalLoader />;
   }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} id='view-settings' className={style.sectionContainer}>
       <span className={style.title}>General view settings</span>
+      <Alert status='info' variant='ontime-on-light-info'>
+        <AlertIcon />
+        <div className={style.column}>
+          <AlertTitle>CSS Override</AlertTitle>
+          <AlertDescription>
+            Ontime will use the CSS file at its install location. <br />
+            <span className={style.url}>{info.cssOverride}</span>
+            <ModalLink href={cssOverrideDocsUrl}>For more information, see the docs</ModalLink>
+          </AlertDescription>
+        </div>
+      </Alert>
       <ModalSplitInput
         field='overrideStyles'
         title='Override CSS Styles'