From ecaf0a209bb5ad6aa81e13fa48859bf930e0d331 Mon Sep 17 00:00:00 2001
From: Ary <arylmoraesn@gmail.com>
Date: Wed, 14 Feb 2024 11:52:24 -0700
Subject: [PATCH] wip

---
 .../src/features/app-settings/AppSettings.tsx |  2 ++
 .../panel/url-alias-panel/UrlAliasList.tsx    | 32 +++++++++++++++++
 .../url-alias-panel/UrlAliasPanel.module.scss |  0
 .../panel/url-alias-panel/UrlAliasPanel.tsx   | 34 +++++++++++++++++++
 .../features/app-settings/settingsStore.ts    |  1 +
 .../modals/settings-modal/AliasesForm.tsx     |  2 ++
 6 files changed, 71 insertions(+)
 create mode 100644 apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx
 create mode 100644 apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss
 create mode 100644 apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx

diff --git a/apps/client/src/features/app-settings/AppSettings.tsx b/apps/client/src/features/app-settings/AppSettings.tsx
index 36103aebf..12142da2f 100644
--- a/apps/client/src/features/app-settings/AppSettings.tsx
+++ b/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>
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx
new file mode 100644
index 000000000..c6a1dc3c9
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx
new file mode 100644
index 000000000..85256c698
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/apps/client/src/features/app-settings/settingsStore.ts b/apps/client/src/features/app-settings/settingsStore.ts
index 1e6cfffbe..753d1f8f6 100644
--- a/apps/client/src/features/app-settings/settingsStore.ts
+++ b/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',
diff --git a/apps/client/src/features/modals/settings-modal/AliasesForm.tsx b/apps/client/src/features/modals/settings-modal/AliasesForm.tsx
index 7937e8b5e..ab5b92def 100644
--- a/apps/client/src/features/modals/settings-modal/AliasesForm.tsx
+++ b/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' }} />