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>
   );
 }