wip

apps/client/src/features/app-settings/AppSettings.tsx

@@ -7,6 +7,7 @@ import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
 import LogPanel from './panel/log-panel/LogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
 import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
+import UrlAliasPanel from './panel/url-alias-panel/UrlAliasPanel';
 import PanelContent from './panel-content/PanelContent';
 import PanelList from './panel-list/PanelList';
 import { useSettingsStore } from './settingsStore';
@@ -30,6 +31,7 @@ export default function AppSettings() {
           {selectedPanel === 'project' && <ProjectPanel />}
           {selectedPanel === 'integrations' && <IntegrationsPanel />}
           {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
+          {selectedPanel === 'url_alias' && <UrlAliasPanel />}
           {selectedPanel === 'about' && <AboutPanel />}
           {selectedPanel === 'log' && <LogPanel />}
         </PanelContent>

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx

@@ -0,0 +1,32 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+
+import ModalLink from '../../../../features/modals/ModalLink';
+import * as Panel from '../PanelUtils';
+
+const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
+
+export default function UrlAliasList() {
+  return (
+    <>
+      <Panel.Header>URL Aliases</Panel.Header>
+      <Panel.Section>
+        <Panel.Card>
+          <div>
+            <Alert status='info' variant='ontime-on-light-info'>
+              <AlertIcon />
+              <div>
+                <AlertTitle>URL Aliases</AlertTitle>
+                <AlertDescription>
+                  Custom aliases allow providing a short name for any ontime URL. <br />
+                  It serves two primary purposes: <br />
+                  - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
+                  <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
+                </AlertDescription>
+              </div>
+            </Alert>
+          </div>
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx

@@ -0,0 +1,34 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+
+import ModalLink from '../../../../features/modals/ModalLink';
+import * as Panel from '../PanelUtils';
+
+import style from './UrlAliasPanel.module.scss';
+
+const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
+
+export default function UrlAliasPanel() {
+  return (
+    <>
+      <Panel.Header>URL Aliases</Panel.Header>
+      <Panel.Section>
+        <Panel.Card>
+          <div>
+            <Alert status='info' variant='ontime-on-light-info'>
+              <AlertIcon />
+              <div className={style.column}>
+                <AlertTitle>URL Aliases</AlertTitle>
+                <AlertDescription>
+                  Custom aliases allow providing a short name for any ontime URL. <br />
+                  It serves two primary purposes: <br />
+                  - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
+                  <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
+                </AlertDescription>
+              </div>
+            </Alert>
+          </div>
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/settingsStore.ts

@@ -35,6 +35,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
     ],
   },
   { id: 'log', label: 'Log', split: true },
+  { id: 'url_alias', label: 'URL Aliases' },
   {
     id: 'about',
     label: 'About',

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

@@ -85,6 +85,8 @@ export default function AliasesForm() {
     return <ModalLoader />;
   }
 
+  console.log({ fields });
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} id='aliases' className={style.sectionContainer}>
       <div style={{ height: '16px' }} />