From f918b0b066e4529dd9730553a3595fac446198ec Mon Sep 17 00:00:00 2001
From: Chris Anderson <canderson@twochris.com>
Date: Mon, 9 Oct 2023 12:20:17 -0500
Subject: [PATCH] Various UI improvements (#279)

---
 README.md                                    |  3 ++
 apps/platform/src/api.ts                     |  2 ++
 apps/ui/src/types.ts                         |  1 +
 apps/ui/src/ui/Modal.css                     |  2 +-
 apps/ui/src/ui/Tag.css                       |  4 +++
 apps/ui/src/ui/Tag.tsx                       |  2 +-
 apps/ui/src/views/journey/JourneyEditor.tsx  |  5 +--
 apps/ui/src/views/settings/ApiKeys.tsx       |  9 ++++--
 apps/ui/src/views/settings/Subscriptions.tsx | 10 ++++--
 apps/ui/src/views/settings/Tags.tsx          | 33 ++++++--------------
 apps/ui/src/views/users/UserDetailEvents.tsx | 27 +++++++++-------
 11 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 678a0f60..05c7e953 100644
--- a/README.md
+++ b/README.md
@@ -56,3 +56,6 @@ AUTH_BASIC_PASSWORD=password
 For full documentation on the platform and more information on deployment, check out our docs.
 
 **[Explore the Docs »](https://docs.parcelvoy.com)**
+
+### Contributing
+You can report bugs, suggest features, or just say hi on [Github discussions](https://github.com/parcelvoy/platform/discussions/new/choose) 
diff --git a/apps/platform/src/api.ts b/apps/platform/src/api.ts
index 1c1bb367..d0048229 100644
--- a/apps/platform/src/api.ts
+++ b/apps/platform/src/api.ts
@@ -29,6 +29,8 @@ export default class Api extends Koa {
                     ctx.status = error.statusCode ?? 400
                     ctx.body = error
                     return
+                } else if (error.status === 404) {
+                    return
                 } else {
                     ctx.status = 400
                     ctx.body = process.env.NODE_ENV === 'production'
diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
index 287e2ca4..e3b46c45 100644
--- a/apps/ui/src/types.ts
+++ b/apps/ui/src/types.ts
@@ -205,6 +205,7 @@ export interface UserEvent {
     id: number
     name: string
     data: Record<string, any>
+    created_at: string
 }
 
 export type ListState = 'ready' | 'loading'
diff --git a/apps/ui/src/ui/Modal.css b/apps/ui/src/ui/Modal.css
index 3cc98ee3..9d132692 100644
--- a/apps/ui/src/ui/Modal.css
+++ b/apps/ui/src/ui/Modal.css
@@ -1,5 +1,5 @@
 .modal {
-    position: absolute;
+    position: fixed;
     height: 100vh;
     width: 100vw;
     top: 0;
diff --git a/apps/ui/src/ui/Tag.css b/apps/ui/src/ui/Tag.css
index 701aea1d..6e68286e 100644
--- a/apps/ui/src/ui/Tag.css
+++ b/apps/ui/src/ui/Tag.css
@@ -49,6 +49,10 @@
     border-radius: var(--border-radius-inner);
 }
 
+.ui-tag.large {
+    padding: 10px;
+}
+
 .ui-tag.tiny .icon {
     width: 12px;
     height: 12px;
diff --git a/apps/ui/src/ui/Tag.tsx b/apps/ui/src/ui/Tag.tsx
index 254c7214..f4ae4ccf 100644
--- a/apps/ui/src/ui/Tag.tsx
+++ b/apps/ui/src/ui/Tag.tsx
@@ -3,7 +3,7 @@ import './Tag.css'
 import clsx from 'clsx'
 
 export type TagVariant = 'info' | 'plain' | 'success' | 'error' | 'warn'
-export type TagSize = 'tiny' | 'regular'
+export type TagSize = 'tiny' | 'regular' | 'large'
 
 export type TagProps = PropsWithChildren<{
     onClick?: () => void
diff --git a/apps/ui/src/views/journey/JourneyEditor.tsx b/apps/ui/src/views/journey/JourneyEditor.tsx
index 51aea144..0c83064a 100644
--- a/apps/ui/src/views/journey/JourneyEditor.tsx
+++ b/apps/ui/src/views/journey/JourneyEditor.tsx
@@ -528,12 +528,13 @@ export default function JourneyEditor() {
             onClose={() => navigate('../journeys')}
             actions={
                 <>
-                    <Tag variant={journey.published ? 'success' : 'plain'}>
+                    <Tag
+                        variant={journey.published ? 'success' : 'plain'}
+                        size="large">
                         {journey.published ? 'Published' : 'Draft'}
                     </Tag>
                     <Button
                         variant="secondary"
-                        style={{ marginRight: 5 }}
                         onClick={() => setEditOpen(true)}
                     >
                         {'Edit Details'}
diff --git a/apps/ui/src/views/settings/ApiKeys.tsx b/apps/ui/src/views/settings/ApiKeys.tsx
index 4d280fd1..cd67aa5e 100644
--- a/apps/ui/src/views/settings/ApiKeys.tsx
+++ b/apps/ui/src/views/settings/ApiKeys.tsx
@@ -42,10 +42,15 @@ export default function ProjectApiKeys() {
                 {...state}
                 columns={[
                     { key: 'name' },
-                    { key: 'scope' },
+                    {
+                        key: 'scope',
+                        cell: ({ item }) => snakeToTitle(item.scope),
+                    },
                     {
                         key: 'role',
-                        cell: ({ item }) => item.scope === 'public' ? undefined : item.role,
+                        cell: ({ item }) => item.scope === 'public'
+                            ? undefined
+                            : snakeToTitle(item.role ?? ''),
                     },
                     {
                         key: 'value',
diff --git a/apps/ui/src/views/settings/Subscriptions.tsx b/apps/ui/src/views/settings/Subscriptions.tsx
index ed424a77..45b1dcb0 100644
--- a/apps/ui/src/views/settings/Subscriptions.tsx
+++ b/apps/ui/src/views/settings/Subscriptions.tsx
@@ -10,6 +10,7 @@ import TextInput from '../../ui/form/TextInput'
 import { SingleSelect } from '../../ui/form/SingleSelect'
 import Button from '../../ui/Button'
 import { PlusIcon } from '../../ui/icons'
+import { snakeToTitle } from '../../utils'
 
 export default function Subscriptions() {
     const navigate = useNavigate()
@@ -23,7 +24,10 @@ export default function Subscriptions() {
                 {...state}
                 columns={[
                     { key: 'name' },
-                    { key: 'channel' },
+                    {
+                        key: 'channel',
+                        cell: ({ item }) => snakeToTitle(item.channel),
+                    },
                 ]}
                 itemKey={({ item }) => item.id}
                 onSelectRow={(row) => navigate(`${row.id}`)}
@@ -48,6 +52,7 @@ export default function Subscriptions() {
             >
                 <FormWrapper<Pick<Subscription, 'name' | 'channel'>>
                     onSubmit={async ({ name, channel }) => {
+                        console.log(channel)
                         await api.subscriptions.create(project.id, { name, channel })
                         await state.reload()
                         setOpen(false)
@@ -69,7 +74,8 @@ export default function Subscriptions() {
                                     form={form}
                                     name="channel"
                                     label="Channel"
-                                    options={['email', 'push', 'text', 'webhook']}
+                                    options={['email', 'push', 'text', 'webhook'].map((channel) => ({ key: channel, label: snakeToTitle(channel) }))}
+                                    toValue={x => x.key}
                                 />
                             </>
                         )
diff --git a/apps/ui/src/views/settings/Tags.tsx b/apps/ui/src/views/settings/Tags.tsx
index 1b5af679..609ea238 100644
--- a/apps/ui/src/views/settings/Tags.tsx
+++ b/apps/ui/src/views/settings/Tags.tsx
@@ -13,21 +13,14 @@ export default function Tags() {
 
     const [project] = useContext(ProjectContext)
     const search = useSearchTableState(useCallback(async params => await api.tags.search(project.id, params), [project]))
-    const [editing, setEditing] = useState<null | Tag>(null)
+    const [editing, setEditing] = useState<Tag>()
 
     return (
         <>
             <SearchTable
                 {...search}
                 columns={[
-                    {
-                        key: 'name',
-                    },
-                    {
-                        key: 'usage',
-                        title: 'Usage',
-                        cell: () => 'TODO',
-                    },
+                    { key: 'name' },
                 ]}
                 title="Tags"
                 description="Use tags to organize and report on your campaigns, journeys, lists, and users."
@@ -47,30 +40,24 @@ export default function Tags() {
             />
             <Modal
                 open={!!editing}
-                onClose={() => setEditing(null)}
+                onClose={() => setEditing(undefined)}
                 title={editing?.id ? 'Update Tag' : 'Create Tag'}
             >
                 {
                     editing && (
                         <FormWrapper<Tag>
                             onSubmit={async ({ id, name }) => {
-                                if (id) {
-                                    await api.tags.update(project.id, id, { name })
-                                } else {
-                                    await api.tags.create(project.id, { name })
-                                }
+                                id != null
+                                    ? await api.tags.update(project.id, id, { name })
+                                    : await api.tags.create(project.id, { name })
                                 await search.reload()
-                                setEditing(null)
+                                setEditing(undefined)
                             }}
                             defaultValues={editing}
                         >
-                            {
-                                form => (
-                                    <>
-                                        <TextInput.Field form={form} name="name" required />
-                                    </>
-                                )
-                            }
+                            {form => (
+                                <TextInput.Field form={form} name="name" required />
+                            )}
                         </FormWrapper>
                     )
                 }
diff --git a/apps/ui/src/views/users/UserDetailEvents.tsx b/apps/ui/src/views/users/UserDetailEvents.tsx
index 38245bb9..981f3b94 100644
--- a/apps/ui/src/views/users/UserDetailEvents.tsx
+++ b/apps/ui/src/views/users/UserDetailEvents.tsx
@@ -1,4 +1,3 @@
-import { JsonViewer } from '@textea/json-viewer'
 import { useCallback, useContext, useState } from 'react'
 import api from '../../api'
 import { ProjectContext, UserContext } from '../../contexts'
@@ -6,8 +5,12 @@ import { useResolver } from '../../hooks'
 import { SearchParams, UserEvent } from '../../types'
 import Modal from '../../ui/Modal'
 import { SearchTable } from '../../ui/SearchTable'
+import { JsonPreview } from '../../ui'
+import { PreferencesContext } from '../../ui/PreferencesContext'
+import { formatDate } from '../../utils'
 
 export default function UserDetailEvents() {
+    const [preferences] = useContext(PreferencesContext)
     const [project] = useContext(ProjectContext)
     const [user] = useContext(UserContext)
     const [params, setParams] = useState<SearchParams>({
@@ -30,16 +33,18 @@ export default function UserDetailEvents() {
                 { key: 'name' },
                 { key: 'created_at' },
             ]}
-            onSelectRow={(event) => {
-                setEvent(event)
-            }}
+            onSelectRow={setEvent}
         />
-        <Modal title={event?.name}
-            size="large"
-            open={event != null}
-            onClose={() => setEvent(undefined)}
-        >
-            <JsonViewer value={{ name: event?.name, ...event?.data }} rootName={false} />
-        </Modal>
+        {event && (
+            <Modal
+                title={event.name}
+                description={formatDate(preferences, event.created_at)}
+                size="large"
+                open={event != null}
+                onClose={() => setEvent(undefined)}
+            >
+                <JsonPreview value={{ name: event.name, ...event.data, created_at: event.created_at }} />
+            </Modal>
+        )}
     </>
 }