refactor: improve links inside editor

apps/client/src/common/components/client-modal/RedirectClientModal.module.scss

@@ -22,10 +22,3 @@
 .label {
   color: $label-gray;
 }
-
-.link {
-  color: $label-gray;
-  font-size: $text-body-size;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -16,6 +16,7 @@ import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
 import Info from '../info/Info';
+import AppLink from '../link/app-link/AppLink';
 
 import style from './RedirectClientModal.module.scss';
 
@@ -58,9 +59,7 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
             Either by selecting a URL Preset or entering a custom path.
             <br />
             <br />
-            <a href='/editor?settings=feature_settings__urlpresets' target='_blank' className={style.link}>
-              Manage URL Presets
-            </a>
+            <AppLink search='settings=feature_settings__urlpresets'>Manage URL Presets</AppLink>
           </Info>
           <div>
             <span className={style.label}>Select View or URL Preset</span>

apps/client/src/common/components/link/app-link/AppLink.module.scss

@@ -1,12 +1,10 @@
-@use "../../../../theme/mixins" as *;
-
 .link {
-  @include action-link;
-  font-size: $inner-section-text-size;
-}
+  color: $label-gray;
+  font-size: $text-body-size;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 
-.linkIcon {
-  margin-left: $element-inner-spacing;
-  display: inline-block;
-  @include rotate-fourty-five;
+  &:hover {
+    color: $blue-400;
+  }
 }

apps/client/src/common/components/link/app-link/AppLink.tsx

@@ -1,26 +1,25 @@
-import { MouseEvent, ReactNode } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-
-import { openLink } from '../../../utils/linkUtils';
+import { type PropsWithChildren } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import style from './AppLink.module.scss';
 
 interface AppLinkProps {
-  href: string;
-  children: ReactNode;
+  search: string;
 }
 
-export default function AppLink(props: AppLinkProps) {
-  const { href, children } = props;
+/**
+ * Component used to navigate to an editor link inside the same window
+ * Handles the path to respect Ontime Clouds base URL
+ */
+export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
+  const { search, children } = props;
+  const navigate = useNavigate();
 
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    openLink(href);
-  };
+  const handleClick = () => navigate({ search });
 
   return (
-    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
-      {children} <IoArrowUp className={style.linkIcon} />
-    </a>
+    <button onClick={handleClick} className={style.link}>
+      {children}
+    </button>
   );
 }

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -76,10 +76,3 @@
   color: $ontime-roll;
   font-size: $text-body-size;
 }
-
-.reportLink {
-  color: $label-gray;
-  font-size: $text-body-size;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -3,6 +3,7 @@ import { Tooltip } from '@chakra-ui/react';
 import { MaybeNumber, Playback, TimerPhase } from 'ontime-types';
 import { dayInMs, millisToString } from 'ontime-utils';
 
+import AppLink from '../../../../common/components/link/app-link/AppLink';
 import { useTimer } from '../../../../common/hooks/useSocket';
 import useReport from '../../../../common/hooks-query/useReport';
 import { formatDuration } from '../../../../common/utils/time';
@@ -98,11 +99,7 @@ function StoppedStatus() {
   const hasReport = Object.keys(data).length > 0;
 
   if (hasReport) {
-    return (
-      <a className={style.reportLink} href='/editor?settings=feature_settings__report'>
-        Go to report management
-      </a>
-    );
+    return <AppLink search='settings=feature_settings__report'>Go to report management</AppLink>;
   }
 
   return null;

apps/client/src/features/rundown/event-editor/EventEditor.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Button } from '@chakra-ui/react';
 import { CustomFieldLabel, OntimeEvent } from 'ontime-types';
 
+import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
@@ -29,7 +28,6 @@ export default function EventEditor(props: EventEditorProps) {
   const { event } = props;
   const { data: customFields } = useCustomFields();
   const { updateEvent } = useEventAction();
-  const [_searchParams, setSearchParams] = useSearchParams();
 
   const isEditor = window.location.pathname.includes('editor');
 
@@ -45,10 +43,6 @@ export default function EventEditor(props: EventEditorProps) {
     [event?.id, updateEvent],
   );
 
-  const handleOpenCustomManager = () => {
-    setSearchParams({ settings: 'feature_settings__custom' });
-  };
-
   if (!event) {
     return <EventEditorEmpty />;
   }
@@ -83,11 +77,7 @@ export default function EventEditor(props: EventEditorProps) {
       <div className={style.column}>
         <Editor.Title>
           Custom Fields
-          {isEditor && (
-            <Button variant='ontime-subtle' size='sm' onClick={handleOpenCustomManager}>
-              Manage
-            </Button>
-          )}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
         </Editor.Title>
 
         {Object.keys(customFields).map((fieldKey) => {