From 6130b7c538f68edc50e9deeb1c57779db68942ad Mon Sep 17 00:00:00 2001
From: Chris Hills <christopherhills292@gmail.com>
Date: Sun, 12 Mar 2023 05:58:11 -0500
Subject: [PATCH 1/5] text field icon support

---
 apps/ui/package.json              |  2 +-
 apps/ui/src/index.css             |  5 --
 apps/ui/src/ui/SearchTable.tsx    |  2 +
 apps/ui/src/ui/form/TextField.css | 17 +++++++
 apps/ui/src/ui/form/TextField.tsx | 80 ++++++++++++++++++-------------
 apps/ui/src/ui/icons.tsx          |  6 +++
 package-lock.json                 |  2 +-
 7 files changed, 73 insertions(+), 41 deletions(-)
 create mode 100644 apps/ui/src/ui/form/TextField.css

diff --git a/apps/ui/package.json b/apps/ui/package.json
index dd76ca3c..f65e7afc 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -30,7 +30,7 @@
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "reactflow": "^11.3.3",
+    "reactflow": "11.5.6",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index 42f7517b..7b86fa23 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -89,11 +89,6 @@ textarea {
 
 input:hover, textarea:hover {
     border-color: var(--color-grey-hard);
-    z-index: 2;
-}
-
-input:focus, textarea:focus {
-    z-index: 2;
 }
 
 form .form-submit {
diff --git a/apps/ui/src/ui/SearchTable.tsx b/apps/ui/src/ui/SearchTable.tsx
index f8ab8ec4..abc83355 100644
--- a/apps/ui/src/ui/SearchTable.tsx
+++ b/apps/ui/src/ui/SearchTable.tsx
@@ -6,6 +6,7 @@ import { TagPicker } from '../views/settings/TagPicker'
 import { DataTable, DataTableProps } from './DataTable'
 import TextField from './form/TextField'
 import Heading from './Heading'
+import { SearchIcon } from './icons'
 import Pagination from './Pagination'
 import Stack from './Stack'
 
@@ -131,6 +132,7 @@ export function SearchTable<T extends Record<string, any>>({
                 value={search}
                 placeholder="Search..."
                 onChange={setSearch}
+                icon={<SearchIcon />}
             />,
         )
     }
diff --git a/apps/ui/src/ui/form/TextField.css b/apps/ui/src/ui/form/TextField.css
new file mode 100644
index 00000000..6cc99cff
--- /dev/null
+++ b/apps/ui/src/ui/form/TextField.css
@@ -0,0 +1,17 @@
+.ui-text-field-icon-wrapper {
+    position: relative;
+}
+
+.ui-text-field-icon-wrapper input,
+.ui-text-field-icon-wrapper textarea {
+    padding-left: 36px;
+}
+
+.ui-text-field-icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    height: 16px;
+    width: 16px;
+    transform: translate(0, -50%);
+}
diff --git a/apps/ui/src/ui/form/TextField.tsx b/apps/ui/src/ui/form/TextField.tsx
index cf1c051a..a8079045 100644
--- a/apps/ui/src/ui/form/TextField.tsx
+++ b/apps/ui/src/ui/form/TextField.tsx
@@ -1,8 +1,9 @@
 import clsx from 'clsx'
-import { useId, Ref } from 'react'
+import { useId, Ref, ReactNode } from 'react'
 import { FieldPath, FieldValues } from 'react-hook-form'
 import { snakeToTitle } from '../../utils'
 import { FieldProps } from './Field'
+import './TextField.css'
 
 export interface TextFieldProps<X extends FieldValues, P extends FieldPath<X>> extends FieldProps<X, P> {
     type?: 'text' | 'time' | 'date' | 'datetime-local' | 'number'
@@ -16,6 +17,7 @@ export interface TextFieldProps<X extends FieldValues, P extends FieldPath<X>> e
     inputRef?: Ref<HTMLLabelElement>
     min?: number
     max?: number
+    icon?: ReactNode
 }
 
 export default function TextField<X extends FieldValues, P extends FieldPath<X>>({
@@ -36,6 +38,7 @@ export default function TextField<X extends FieldValues, P extends FieldPath<X>>
     onFocus,
     placeholder,
     inputRef,
+    icon,
 }: TextFieldProps<X, P>) {
     const id = useId()
     const formParams = form?.register(name, { disabled, required })
@@ -52,40 +55,49 @@ export default function TextField<X extends FieldValues, P extends FieldPath<X>>
                 )
             }
             {subtitle && <span className="label-subtitle">{subtitle}</span>}
-            {
-                textarea
-                    ? (
-                        <textarea
-                            value={value}
-                            {...formParams}
-                            onChange={(event) => onChange?.(event?.target.value)}
-                            onBlur={async (event) => {
-                                await onBlur?.(event)
-                                onInputBlur?.(event)
-                            }}
-                            onFocus={onFocus}
-                            id={id}
-                        />
+            <div className={clsx(icon && 'ui-text-field-icon-wrapper')}>
+                {
+                    textarea
+                        ? (
+                            <textarea
+                                value={value}
+                                {...formParams}
+                                onChange={(event) => onChange?.(event?.target.value)}
+                                onBlur={async (event) => {
+                                    await onBlur?.(event)
+                                    onInputBlur?.(event)
+                                }}
+                                onFocus={onFocus}
+                                id={id}
+                            />
+                        )
+                        : (
+                            <input
+                                type={type}
+                                value={value}
+                                className={size}
+                                placeholder={placeholder}
+                                {...formParams}
+                                onChange={(event) => onChange?.(event?.target.value)}
+                                onBlur={async (event) => {
+                                    await onBlur?.(event)
+                                    onInputBlur?.(event)
+                                }}
+                                onFocus={onFocus}
+                                id={id}
+                                min={min}
+                                max={max}
+                            />
+                        )
+                }
+                {
+                    icon && (
+                        <span className="ui-text-field-icon">
+                            {icon}
+                        </span>
                     )
-                    : (
-                        <input
-                            type={type}
-                            value={value}
-                            className={size}
-                            placeholder={placeholder}
-                            {...formParams}
-                            onChange={(event) => onChange?.(event?.target.value)}
-                            onBlur={async (event) => {
-                                await onBlur?.(event)
-                                onInputBlur?.(event)
-                            }}
-                            onFocus={onFocus}
-                            id={id}
-                            min={min}
-                            max={max}
-                        />
-                    )
-            }
+                }
+            </div>
         </label>
     )
 }
diff --git a/apps/ui/src/ui/icons.tsx b/apps/ui/src/ui/icons.tsx
index 7a4f3add..af2f5a35 100644
--- a/apps/ui/src/ui/icons.tsx
+++ b/apps/ui/src/ui/icons.tsx
@@ -151,3 +151,9 @@ export const GateStepIcon = () => (
         <path fillRule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z"/>
     </svg>
 )
+
+export const SearchIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+    </svg>
+)
diff --git a/package-lock.json b/package-lock.json
index a31980a2..c0f806a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -122,7 +122,7 @@
         "react-popper": "^2.3.0",
         "react-router-dom": "^6.4.2",
         "react-scripts": "5.0.1",
-        "reactflow": "^11.3.3",
+        "reactflow": "11.5.6",
         "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
       },

From 426fb005c8754b47c19f4d969eff7152350f071b Mon Sep 17 00:00:00 2001
From: Chris Hills <christopherhills292@gmail.com>
Date: Sun, 12 Mar 2023 06:21:07 -0500
Subject: [PATCH 2/5] adds test for journey update step

---
 apps/platform/src/journey/JourneyService.ts   |  2 +-
 .../journey/__test__/JourneyService.spec.ts   | 84 +++++++++++++++++--
 2 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/apps/platform/src/journey/JourneyService.ts b/apps/platform/src/journey/JourneyService.ts
index bdb802be..fc46b593 100644
--- a/apps/platform/src/journey/JourneyService.ts
+++ b/apps/platform/src/journey/JourneyService.ts
@@ -60,7 +60,7 @@ export default class JourneyService {
             if (await nextStep.hasCompleted(user)) {
                 nextStep = await nextStep.next(user)
             } else if (await nextStep.condition(user, event)) {
-                await nextStep.complete(user)
+                await nextStep.complete(user, event)
                 nextStep = await nextStep.next(user)
             } else {
                 nextStep = null
diff --git a/apps/platform/src/journey/__test__/JourneyService.spec.ts b/apps/platform/src/journey/__test__/JourneyService.spec.ts
index 2e2b6916..63fa1f84 100644
--- a/apps/platform/src/journey/__test__/JourneyService.spec.ts
+++ b/apps/platform/src/journey/__test__/JourneyService.spec.ts
@@ -1,26 +1,34 @@
 import Project from '../../projects/Project'
 import { User } from '../../users/User'
+import { UserEvent } from '../../users/UserEvent'
 import Journey from '../Journey'
 import { lastJourneyStep, setJourneyStepMap } from '../JourneyRepository'
 import JourneyService from '../JourneyService'
+import { JourneyEntrance, JourneyUpdate } from '../JourneyStep'
 
 describe('Run', () => {
     describe('step progression', () => {
-        test('user should be taken to action 2 or 3', async () => {
 
+        const baseStep = {
+            x: 0,
+            y: 0,
+            data: {},
+        }
+
+        const setup = async () => {
             const project = await Project.insertAndFetch({
                 name: `Test Project ${Date.now()}`,
             })
-
             const journey = await Journey.insertAndFetch({
                 project_id: project.id,
                 name: `Test Journey ${Date.now()}`,
             })
+            return { project, journey }
+        }
 
-            const baseStep = {
-                x: 0,
-                y: 0,
-            }
+        test('user should be taken to action 2 or 3', async () => {
+
+            const { project, journey } = await setup()
 
             // entrance -> gate -> (action1 | experiment -> (action2 | action3))
             const { steps } = await setJourneyStepMap(journey.id, {
@@ -114,5 +122,69 @@ describe('Run', () => {
             const lastStep = await lastJourneyStep(user.id, journey.id)
             expect(actionIds).toContain(lastStep?.step_id)
         })
+
+        test('user update step adds data to profile', async () => {
+
+            const { project, journey } = await setup()
+
+            const { steps } = await setJourneyStepMap(journey.id, {
+                entrance: {
+                    ...baseStep,
+                    type: JourneyEntrance.type,
+                    children: [
+                        {
+                            external_id: 'update',
+                        },
+                    ],
+                },
+                update: {
+                    ...baseStep,
+                    type: JourneyUpdate.type,
+                    data: {
+                        template: `
+                            {
+                                "field2": 2,
+                                "fromUser": {
+                                    "prevField2": "{{user.field2}}"
+                                },
+                                "fromEvent": "{{event.name}}"
+                            }
+                        `,
+                    },
+                },
+            })
+
+            const user = await User.insertAndFetch({
+                project_id: project.id,
+                external_id: '2',
+                email: 'test3@twochris.com',
+                data: {
+                    field1: 1,
+                    field2: 'two',
+                },
+            })
+
+            const event = await UserEvent.insertAndFetch({
+                project_id: project.id,
+                user_id: user.id,
+                name: 'signin',
+                data: {
+                    project: 'Parcelvoy',
+                },
+            })
+
+            const service = new JourneyService(journey.id)
+
+            await service.run(user, event)
+
+            const updateStep = steps.find(s => s.external_id === 'update')!
+            const lastStep = await lastJourneyStep(user.id, journey.id)
+            expect(updateStep).toBeDefined()
+            expect(lastStep?.step_id).toBe(updateStep.id)
+            expect(user.data.field1).toBe(1)
+            expect(user.data.field2).toBe(2)
+            expect(user.data.fromUser.prevField2).toBe('two')
+            expect(user.data.fromEvent).toEqual('signin')
+        })
     })
 })

From ce64995e47936a8ce3d67c8aa4e36ae4d0e212f6 Mon Sep 17 00:00:00 2001
From: Chris Hills <christopherhills292@gmail.com>
Date: Sun, 12 Mar 2023 06:28:46 -0500
Subject: [PATCH 3/5] fix login redirect state error when no r param is
 supplied

---
 apps/ui/src/views/auth/Login.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/views/auth/Login.tsx b/apps/ui/src/views/auth/Login.tsx
index 84adb0fc..dbaf6f92 100644
--- a/apps/ui/src/views/auth/Login.tsx
+++ b/apps/ui/src/views/auth/Login.tsx
@@ -1,13 +1,14 @@
+import { useSearchParams } from 'react-router-dom'
 import { ReactComponent as Logo } from '../../assets/logo.svg'
 import { env } from '../../config/env'
 import Button from '../../ui/Button'
 import './Auth.css'
 
 export default function Login() {
+    const [searchParams] = useSearchParams()
 
     const handleRedirect = () => {
-        const urlParams = new URLSearchParams(window.location.search)
-        window.location.href = `${env.api.baseURL}/auth/login?r=${urlParams.get('r')}`
+        window.location.href = `${env.api.baseURL}/auth/login?r=${searchParams.get('r') ?? '/'}`
     }
 
     return (

From d7ce28fca98e8f65975e043bbfa662670f703798 Mon Sep 17 00:00:00 2001
From: Chris Hills <christopherhills292@gmail.com>
Date: Sun, 12 Mar 2023 15:31:34 -0500
Subject: [PATCH 4/5] projects list home page

---
 apps/platform/src/core/Model.ts               |   5 +-
 apps/platform/src/core/searchParams.ts        |   9 ++
 apps/ui/src/api.ts                            |  15 ++-
 apps/ui/src/types.ts                          |   1 +
 apps/ui/src/ui/PreferencesContext.tsx         |   9 +-
 apps/ui/src/ui/Tile.css                       |  24 +++-
 apps/ui/src/ui/Tile.tsx                       |  37 ++++++-
 apps/ui/src/utils.ts                          |  47 +++++++-
 apps/ui/src/views/project/ProjectForm.tsx     |  20 ++--
 apps/ui/src/views/project/Projects.tsx        | 103 ++++++++++++++++++
 apps/ui/src/views/router.tsx                  |  18 +--
 .../src/views/settings/IntegrationModal.tsx   |  12 +-
 .../ui/src/views/settings/ProjectSettings.tsx |  47 ++++----
 package-lock.json                             |   1 -
 14 files changed, 283 insertions(+), 65 deletions(-)
 create mode 100644 apps/ui/src/views/project/Projects.tsx

diff --git a/apps/platform/src/core/Model.ts b/apps/platform/src/core/Model.ts
index 56f4d001..8e5aca5f 100644
--- a/apps/platform/src/core/Model.ts
+++ b/apps/platform/src/core/Model.ts
@@ -166,7 +166,7 @@ export default class Model {
         query: Query = qb => qb,
         db: Database = App.main.db,
     ) {
-        let { page, itemsPerPage, sort, q } = params
+        let { page, itemsPerPage, sort, q, id } = params
         return await this.search(
             b => {
                 b = query(b)
@@ -193,6 +193,9 @@ export default class Model {
                     }
                     b.orderBy(sort, desc ? 'desc' : 'asc')
                 }
+                if (id?.length) {
+                    b.whereIn('id', id)
+                }
                 return b
             },
             page,
diff --git a/apps/platform/src/core/searchParams.ts b/apps/platform/src/core/searchParams.ts
index 74ad40fe..6d6de479 100644
--- a/apps/platform/src/core/searchParams.ts
+++ b/apps/platform/src/core/searchParams.ts
@@ -6,6 +6,7 @@ export interface SearchParams {
     q?: string
     sort?: string
     tag?: string[]
+    id?: number[]
 }
 
 export const searchParamsSchema: JSONSchemaType<SearchParams> = {
@@ -38,5 +39,13 @@ export const searchParamsSchema: JSONSchemaType<SearchParams> = {
             },
             nullable: true,
         },
+        id: {
+            type: 'array',
+            items: {
+                type: 'integer',
+                minimum: 1,
+            },
+            nullable: true,
+        },
     },
 }
diff --git a/apps/ui/src/api.ts b/apps/ui/src/api.ts
index 86d7a6d1..cb062483 100644
--- a/apps/ui/src/api.ts
+++ b/apps/ui/src/api.ts
@@ -46,7 +46,7 @@ type OmitFields = 'id' | 'created_at' | 'updated_at' | 'deleted_at'
 
 export interface EntityApi<T> {
     basePath: string
-    search: (params: SearchParams) => Promise<SearchResult<T>>
+    search: (params: Partial<SearchParams>) => Promise<SearchResult<T>>
     create: (params: Omit<T, OmitFields>) => Promise<T>
     get: (id: number | string) => Promise<T>
     update: (id: number | string, params: Omit<T, OmitFields>) => Promise<T>
@@ -106,6 +106,12 @@ function createProjectEntityPath<T, C = Omit<T, OmitFields>, U = Omit<T, OmitFie
     }
 }
 
+const cache: {
+    profile: null | Admin
+} = {
+    profile: null,
+}
+
 const api = {
 
     login() {
@@ -117,7 +123,12 @@ const api = {
     },
 
     profile: {
-        get: async () => await client.get<Admin>('/admin/profile').then(r => r.data),
+        get: async () => {
+            if (!cache.profile) {
+                cache.profile = await client.get<Admin>('/admin/profile').then(r => r.data)
+            }
+            return cache.profile!
+        },
     },
 
     admins: createEntityPath<Admin>('/admin/admins'),
diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
index fd68331e..164e929a 100644
--- a/apps/ui/src/types.ts
+++ b/apps/ui/src/types.ts
@@ -82,6 +82,7 @@ export interface SearchParams {
     itemsPerPage: number
     q: string
     tag?: string[]
+    id?: Array<number | string>
 }
 
 export interface SearchResult<T> {
diff --git a/apps/ui/src/ui/PreferencesContext.tsx b/apps/ui/src/ui/PreferencesContext.tsx
index 96ceb71b..b4e63535 100644
--- a/apps/ui/src/ui/PreferencesContext.tsx
+++ b/apps/ui/src/ui/PreferencesContext.tsx
@@ -1,14 +1,15 @@
 import { useMemo, useState, useEffect, Dispatch, PropsWithChildren, createContext, SetStateAction } from 'react'
 import { Preferences } from '../types'
-import { localStorageAssign, localStorageSet } from '../utils'
+import { localStorageGetJson, localStorageSetJson } from '../utils'
 
 const PREFERENCES = 'preferences'
 
-const initial = localStorageAssign<Preferences>(PREFERENCES, {
+const initial: Preferences = {
+    ...localStorageGetJson<Preferences>(PREFERENCES) ?? {},
     lang: window.navigator.language,
     mode: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
     timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-})
+}
 
 export const PreferencesContext = createContext<readonly [Preferences, Dispatch<SetStateAction<Preferences>>]>([
     initial,
@@ -35,7 +36,7 @@ export function PreferencesProvider({ children }: PropsWithChildren<{}>) {
 
     useEffect(() => {
         document.body.setAttribute('data-theme', preferences.mode === 'dark' ? 'dark' : 'light')
-        localStorageSet(PREFERENCES, preferences)
+        localStorageSetJson(PREFERENCES, preferences)
     }, [preferences])
 
     return (
diff --git a/apps/ui/src/ui/Tile.css b/apps/ui/src/ui/Tile.css
index ab4910e4..93e331d8 100644
--- a/apps/ui/src/ui/Tile.css
+++ b/apps/ui/src/ui/Tile.css
@@ -10,6 +10,9 @@
     padding: 20px;
     transition: box-shadow ease-in .1s;
     cursor: pointer;
+    display: flex;
+    gap: 10px;
+    align-items: center;
 }
 
 .ui-tile:hover {
@@ -20,6 +23,23 @@
     border: 1px solid var(--color-primary);
 }
 
-.ui-tile p {
-    margin: 5px 0;
+.ui-tile img {
+    border-radius: var(--border-radius);
+    width: 100%;
+    max-width: 40px;
+    flex-shrink: 0;
+}
+
+.ui-tile-text {
+    flex-grow: 1;
+}
+
+.ui-tile h5 {
+    margin: 0 0 5px;
+}
+
+.ui-tile p {
+    font-size: 13px;
+    margin: 0;
+    color: var(--color-primary-soft);
 }
diff --git a/apps/ui/src/ui/Tile.tsx b/apps/ui/src/ui/Tile.tsx
index 4f5b69e1..88e5a189 100644
--- a/apps/ui/src/ui/Tile.tsx
+++ b/apps/ui/src/ui/Tile.tsx
@@ -1,14 +1,45 @@
 import clsx from 'clsx'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import './Tile.css'
 
 type TileProps = PropsWithChildren<{
     onClick?: () => void
     selected?: boolean
+    iconUrl?: string
+    title: ReactNode
 }> & JSX.IntrinsicElements['div']
 
-export default function Tile({ onClick, selected = false, children, ...rest }: TileProps) {
-    return <div {...rest} className={clsx(rest.className, 'ui-tile', { selected })} onClick={onClick} tabIndex={0}>{children}</div>
+export default function Tile({
+    onClick,
+    selected = false,
+    children,
+    className,
+    iconUrl,
+    title,
+    ...rest
+}: TileProps) {
+    return (
+        <div
+            {...rest}
+            className={clsx(className, 'ui-tile', { selected })}
+            onClick={onClick}
+            tabIndex={0}
+        >
+            {
+                iconUrl && (
+                    <img
+                        src={iconUrl}
+                        className="ui-tile-icon"
+                        aria-hidden
+                    />
+                )
+            }
+            <div className="ui-tile-text">
+                <h5>{title}</h5>
+                <p>{children}</p>
+            </div>
+        </div>
+    )
 }
 
 interface TileGridProps extends PropsWithChildren {
diff --git a/apps/ui/src/utils.ts b/apps/ui/src/utils.ts
index 597b9ad9..b1a57223 100644
--- a/apps/ui/src/utils.ts
+++ b/apps/ui/src/utils.ts
@@ -35,19 +35,18 @@ export function combine(...parts: Array<string | number>) {
     return parts.filter(item => item != null).join(' ')
 }
 
-export function localStorageAssign<T extends object>(key: string, o: T) {
+export function localStorageGetJson<T extends object>(key: string) {
     try {
         const stored = localStorage.getItem(key)
         if (stored) {
-            Object.assign(o, JSON.parse(stored))
+            return JSON.parse(stored) as T
         }
     } catch (err) {
         console.warn(err)
     }
-    return o
 }
 
-export function localStorageSet<T extends object>(key: string, o: T) {
+export function localStorageSetJson<T extends object>(key: string, o: T) {
     localStorage.setItem(key, JSON.stringify(o))
 }
 
@@ -118,3 +117,43 @@ export function groupBy<T>(arr: T[], fn: (item: T) => any) {
 export function groupByKey<T>(arr: T[], key: keyof T) {
     return groupBy(arr, (item) => item[key])
 }
+
+export function arrayMove<T>(arr: T[], currentIndex: number, targetIndex: number) {
+    if (targetIndex >= arr.length) {
+        let k = targetIndex - arr.length + 1
+        while (k--) {
+            (arr as any).push(undefined)
+        }
+    }
+    arr.splice(targetIndex, 0, arr.splice(currentIndex, 1)[0])
+    return arr
+}
+
+const RECENT_PROJECTS = 'recent-projects'
+
+type RecentProjects = Array<{
+    id: number
+    when: number
+}>
+
+export function getRecentProjects() {
+    return (localStorageGetJson<RecentProjects>(RECENT_PROJECTS) ?? [])
+}
+
+export function pushRecentProject(id: number | string) {
+    const stored = getRecentProjects()
+    const idx = stored.findIndex(p => p.id === id)
+    if (idx !== -1) {
+        arrayMove(stored, idx, 0)
+    } else {
+        stored.unshift({
+            id: typeof id === 'string' ? parseInt(id, 10) : id,
+            when: Date.now(),
+        })
+    }
+    while (stored.length > 3) {
+        stored.pop()
+    }
+    localStorageSetJson(RECENT_PROJECTS, stored)
+    return stored
+}
diff --git a/apps/ui/src/views/project/ProjectForm.tsx b/apps/ui/src/views/project/ProjectForm.tsx
index e3ba985e..8f863e1b 100644
--- a/apps/ui/src/views/project/ProjectForm.tsx
+++ b/apps/ui/src/views/project/ProjectForm.tsx
@@ -1,7 +1,6 @@
-import { useNavigate } from 'react-router-dom'
 import api from '../../api'
 import TextField from '../../ui/form/TextField'
-import { ProjectCreate } from '../../types'
+import { Project } from '../../types'
 import FormWrapper from '../../ui/form/FormWrapper'
 import { SingleSelect } from '../../ui/form/SingleSelect'
 
@@ -11,16 +10,19 @@ export declare namespace Intl {
     function supportedValuesOf(input: Key): string[]
 }
 
-export default function ProjectForm() {
-    const navigate = useNavigate()
+interface ProjectFormProps {
+    onSave?: (project: Project) => void
+}
 
+export default function ProjectForm({ onSave }: ProjectFormProps) {
     const timeZones = Intl.supportedValuesOf('timeZone')
-
     return (
-        <FormWrapper<ProjectCreate>
-            onSubmit={async project => {
-                const { id } = await api.projects.create(project)
-                navigate(`/projects/${id}`)
+        <FormWrapper<Project>
+            onSubmit={async ({ id, name, description, locale, timezone }) => {
+                const project = id
+                    ? await api.projects.update(id, { name, description, locale, timezone })
+                    : await api.projects.create({ name, description, locale, timezone })
+                onSave?.(project)
             }}
         >
             {
diff --git a/apps/ui/src/views/project/Projects.tsx b/apps/ui/src/views/project/Projects.tsx
new file mode 100644
index 00000000..ef6958ea
--- /dev/null
+++ b/apps/ui/src/views/project/Projects.tsx
@@ -0,0 +1,103 @@
+import { useContext, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../../api'
+import { useResolver } from '../../hooks'
+import { Project } from '../../types'
+import Button from '../../ui/Button'
+import PageContent from '../../ui/PageContent'
+import { PreferencesContext } from '../../ui/PreferencesContext'
+import Tile, { TileGrid } from '../../ui/Tile'
+import { formatDate, getRecentProjects } from '../../utils'
+import logoUrl from '../../assets/parcelvoylogo.png'
+import { PlusIcon } from '../../ui/icons'
+import Modal from '../../ui/Modal'
+import ProjectForm from './ProjectForm'
+
+export function Projects() {
+    const navigate = useNavigate()
+    const [preferences] = useContext(PreferencesContext)
+    const [projects] = useResolver(api.projects.all)
+    const recents = useMemo(() => {
+        const recents = getRecentProjects()
+        if (!projects?.length || !recents.length) return []
+        return recents.reduce<Array<{
+            project: Project
+            when: number
+        }>>((a, { id, when }) => {
+            const project = projects.find(p => p.id === id)
+            if (project) {
+                a.push({
+                    when,
+                    project,
+                })
+            }
+            return a
+        }, [])
+    }, [projects])
+    const [open, setOpen] = useState(false)
+
+    return (
+        <PageContent
+            title="Projects"
+            desc="Projects are isolated workspaces with their own sets of users, events, lists, campaigns, and journeys."
+            actions={
+                <Button
+                    variant="primary"
+                    icon={<PlusIcon />}
+                    onClick={() => setOpen(true)}
+                >
+                    {'Create Project'}
+                </Button>
+            }
+        >
+            {
+                !!recents?.length && (
+                    <>
+                        <h3>Recently Visited</h3>
+                        <TileGrid>
+                            {
+                                recents.map(({ project, when }) => (
+                                    <Tile
+                                        key={project.id}
+                                        onClick={() => navigate('/projects/' + project.id)}
+                                        title={project.name || 'Untitled Project'}
+                                        iconUrl={logoUrl}
+                                    >
+                                        {formatDate(preferences, when)}
+                                    </Tile>
+                                ))
+                            }
+                        </TileGrid>
+                    </>
+                )
+            }
+            <h3>All Projects</h3>
+            <TileGrid>
+                {
+                    projects?.map(project => (
+                        <Tile
+                            key={project.id}
+                            onClick={() => navigate('/projects/' + project.id)}
+                            title={project.name}
+                            iconUrl={logoUrl}
+                        >
+                            {formatDate(preferences, project.created_at)}
+                        </Tile>
+                    ))
+                }
+            </TileGrid>
+            <Modal
+                open={open}
+                onClose={setOpen}
+                title="Create Project"
+            >
+                <ProjectForm
+                    onSave={project => {
+                        setOpen(false)
+                        navigate('/projects/' + project.id)
+                    }}
+                />
+            </Modal>
+        </PageContent>
+    )
+}
diff --git a/apps/ui/src/views/router.tsx b/apps/ui/src/views/router.tsx
index 74afa895..5aa96655 100644
--- a/apps/ui/src/views/router.tsx
+++ b/apps/ui/src/views/router.tsx
@@ -37,6 +37,8 @@ import OnboardingStart from './auth/OnboardingStart'
 import Onboarding from './auth/Onboarding'
 import OnboardingProject from './auth/OnboardingProject'
 import { CampaignsIcon, JourneysIcon, ListsIcon, SettingsIcon, UsersIcon } from '../ui/icons'
+import { Projects } from './project/Projects'
+import { pushRecentProject } from '../utils'
 
 export const useRoute = (includeProject = true) => {
     const { projectId = '' } = useParams()
@@ -82,17 +84,9 @@ export const router = createBrowserRouter([
         children: [
             {
                 index: true,
-                loader: async () => {
-                    const latest = localStorage.getItem('last-project')
-                    if (latest) {
-                        return redirect(`projects/${latest}`)
-                    }
-                    const projects = await api.projects.all()
-                    if (projects.length) {
-                        return redirect(`projects/${projects[0].id}`)
-                    }
-                    return redirect('projects/new')
-                },
+                element: (
+                    <Projects />
+                ),
             },
             {
                 path: 'projects/new',
@@ -106,7 +100,7 @@ export const router = createBrowserRouter([
                 path: 'projects/:projectId',
                 loader: async ({ params: { projectId = '' } }) => {
                     const project = await api.projects.get(projectId)
-                    localStorage.setItem('last-project', projectId)
+                    pushRecentProject(project.id)
                     return project
                 },
                 element: (
diff --git a/apps/ui/src/views/settings/IntegrationModal.tsx b/apps/ui/src/views/settings/IntegrationModal.tsx
index 521cacc0..8776c81f 100644
--- a/apps/ui/src/views/settings/IntegrationModal.tsx
+++ b/apps/ui/src/views/settings/IntegrationModal.tsx
@@ -47,14 +47,12 @@ export default function IntegrationModal({ onChange, provider, ...props }: Integ
             <TileGrid>
                 {options?.map(option => (
                     <Tile
-                        className="provider-tile"
                         key={`${option.channel}${option.type}`}
-                        onClick={() => setMeta(option)}>
-                        {option.icon && <img src={option.icon} />}
-                        <div className="tile-text">
-                            <h5>{option.name}</h5>
-                            <p>{snakeToTitle(option.channel)}</p>
-                        </div>
+                        title={option.name}
+                        onClick={() => setMeta(option)}
+                        iconUrl={option.icon}
+                    >
+                        {snakeToTitle(option.channel)}
                     </Tile>
                 ))}
             </TileGrid>
diff --git a/apps/ui/src/views/settings/ProjectSettings.tsx b/apps/ui/src/views/settings/ProjectSettings.tsx
index 3e6c2d52..7239c636 100644
--- a/apps/ui/src/views/settings/ProjectSettings.tsx
+++ b/apps/ui/src/views/settings/ProjectSettings.tsx
@@ -5,35 +5,42 @@ import { Project } from '../../types'
 import TextField from '../../ui/form/TextField'
 import FormWrapper from '../../ui/form/FormWrapper'
 import Heading from '../../ui/Heading'
+import { toast } from 'react-hot-toast'
 
 export default function ProjectSettings() {
     const [project, setProject] = useContext(ProjectContext)
 
-    async function handleSaveProject({ name, description, locale, timezone }: Project) {
-        const value = await api.projects.update(project.id, { name, description, locale, timezone })
-        setProject(value)
-    }
-
     return (
         <>
             <Heading size="h3" title="General" />
             <FormWrapper<Project>
-                onSubmit={handleSaveProject}
+                onSubmit={async ({ name, description, locale, timezone }) => {
+                    const value = await api.projects.update(project.id, { name, description, locale, timezone })
+                    setProject(value)
+                    toast.success('Saved project settings')
+                }}
                 defaultValues={project}
-                submitLabel="Save">
-                {form => <>
-                    <TextField form={form} name="name" required />
-                    <TextField form={form} name="description" textarea />
-                    <TextField form={form}
-                        name="locale"
-                        label="Default Locale"
-                        subtitle="This locale will be used as the default when creating campaigns and when a users locale does not match any available ones."
-                        required />
-                    <TextField form={form}
-                        name="timezone"
-                        label="Timezone"
-                        required />
-                </>}
+                submitLabel="Save"
+            >
+                {
+                    form => (
+                        <>
+                            <TextField form={form} name="name" required />
+                            <TextField form={form} name="description" textarea />
+                            <TextField form={form}
+                                name="locale"
+                                label="Default Locale"
+                                subtitle="This locale will be used as the default when creating campaigns and when a users locale does not match any available ones."
+                                required
+                            />
+                            <TextField form={form}
+                                name="timezone"
+                                label="Timezone"
+                                required
+                            />
+                        </>
+                    )
+                }
             </FormWrapper>
         </>
     )
diff --git a/package-lock.json b/package-lock.json
index 4a40e4cb..83187a2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
     "apps/platform": {
       "version": "0.1.0",
       "dependencies": {
-        "@apideck/better-ajv-errors": "^0.3.6",
         "@aws-sdk/client-s3": "^3.171.0",
         "@aws-sdk/client-ses": "^3.121.0",
         "@aws-sdk/client-sns": "^3.121.0",

From afad4ec8c9f595d2394bdf73adbe4d621ac57cae Mon Sep 17 00:00:00 2001
From: Chris Hills <christopherhills292@gmail.com>
Date: Sun, 12 Mar 2023 16:11:44 -0500
Subject: [PATCH 5/5] project picker updates, default asterisk select

---
 apps/platform/src/core/Model.ts              |  4 +-
 apps/ui/src/ui/Sidebar.tsx                   | 48 ++++++++++++--------
 apps/ui/src/views/auth/OnboardingProject.tsx | 14 +++++-
 apps/ui/src/views/project/Projects.tsx       | 16 ++++++-
 apps/ui/src/views/router.tsx                 | 33 +++++---------
 5 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/apps/platform/src/core/Model.ts b/apps/platform/src/core/Model.ts
index 8e5aca5f..0b83e482 100644
--- a/apps/platform/src/core/Model.ts
+++ b/apps/platform/src/core/Model.ts
@@ -83,7 +83,7 @@ export default class Model {
     }
 
     static query<T extends typeof Model>(this: T, db: Database = App.main.db): Database.QueryBuilder<InstanceType<T>> {
-        return this.table(db)
+        return this.table(db).clearSelect()
     }
 
     static async first<T extends typeof Model>(
@@ -277,7 +277,7 @@ export default class Model {
     }
 
     static table(db: Database = App.main.db): Database.QueryBuilder<any> {
-        return db(this.tableName)
+        return db(this.tableName).select(`${this.tableName}.*`)
     }
 
     static raw = raw
diff --git a/apps/ui/src/ui/Sidebar.tsx b/apps/ui/src/ui/Sidebar.tsx
index 9b41b2c3..bc152201 100644
--- a/apps/ui/src/ui/Sidebar.tsx
+++ b/apps/ui/src/ui/Sidebar.tsx
@@ -2,15 +2,16 @@ import './Sidebar.css'
 import NavLink from './NavLink'
 import { ReactComponent as Logo } from '../assets/logo.svg'
 import { Link, NavLinkProps, useNavigate } from 'react-router-dom'
-import { PropsWithChildren, ReactNode, useContext } from 'react'
+import { PropsWithChildren, ReactNode, useCallback, useContext } from 'react'
 import { AdminContext, ProjectContext } from '../contexts'
 import api from '../api'
 import { PreferencesContext } from './PreferencesContext'
 import { useResolver } from '../hooks'
 import { SingleSelect } from './form/SingleSelect'
-import Button, { LinkButton } from './Button'
+import Button from './Button'
 import ButtonGroup from './ButtonGroup'
-import { MoonIcon, PlusIcon, SunIcon } from './icons'
+import { MoonIcon, SunIcon } from './icons'
+import { getRecentProjects } from '../utils'
 
 interface SidebarProps {
     links?: Array<NavLinkProps & { key: string, icon: ReactNode }>
@@ -21,7 +22,23 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
     const profile = useContext(AdminContext)
     const [project] = useContext(ProjectContext)
     const [preferences, setPreferences] = useContext(PreferencesContext)
-    const [projects] = useResolver(api.projects.all)
+    const [recents] = useResolver(useCallback(async () => {
+        const recentIds = getRecentProjects().filter(p => p.id !== project.id).map(p => p.id)
+        return [
+            project,
+            ...recentIds.length
+                ? await api.projects.search({
+                    page: 0,
+                    itemsPerPage: recentIds.length,
+                    id: recentIds,
+                }).then(r => r.results ?? [])
+                : [],
+            {
+                id: 0,
+                name: 'View All',
+            },
+        ]
+    }, [project]))
 
     return (
         <>
@@ -33,8 +50,14 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
                 </div>
                 <SingleSelect
                     value={project}
-                    onChange={project => navigate(`/projects/${project.id}`)}
-                    options={projects ?? [project]}
+                    onChange={project => {
+                        if (project.id === 0) {
+                            navigate('/')
+                        } else {
+                            navigate(`/projects/${project.id}`)
+                        }
+                    }}
+                    options={recents ?? []}
                     getSelectedOptionDisplay={p => (
                         <>
                             <div className="project-switcher-label">Project</div>
@@ -44,19 +67,6 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
                     hideLabel
                     buttonClassName="project-switcher"
                     variant="minimal"
-                    optionsFooter={
-                        <div
-                            style={{
-                                borderTop: '1px solid var(--color-grey)',
-                                paddingTop: '10px',
-                                textAlign: 'center',
-                            }}
-                        >
-                            <LinkButton size="small" variant="primary" to="/projects/new" icon={<PlusIcon />}>
-                                {'Create Project'}
-                            </LinkButton>
-                        </div>
-                    }
                 />
                 <nav>
                     {
diff --git a/apps/ui/src/views/auth/OnboardingProject.tsx b/apps/ui/src/views/auth/OnboardingProject.tsx
index aa7ec780..dbfe67db 100644
--- a/apps/ui/src/views/auth/OnboardingProject.tsx
+++ b/apps/ui/src/views/auth/OnboardingProject.tsx
@@ -1,11 +1,21 @@
+import { useNavigate } from 'react-router-dom'
 import ProjectForm from '../project/ProjectForm'
 
 export default function OnboardingProject() {
+    const navigate = useNavigate()
     return (
         <>
             <h1>Project Setup</h1>
-            <p>At Parcelvoy, projects represent a single workspace for sending messages. You can use them for creating staging environments, isolating different clients, etc. Let&apos;s create your first one to get you started!</p>
-            <ProjectForm />
+            <p>
+                {
+                    `At Parcelvoy, projects represent a single workspace for sending messages.
+                    You can use them for creating staging environments, isolating different clients, etc.
+                    Let&apos;s create your first one to get you started!`
+                }
+            </p>
+            <ProjectForm
+                onSave={({ id }) => navigate('/projects/' + id)}
+            />
         </>
     )
 }
diff --git a/apps/ui/src/views/project/Projects.tsx b/apps/ui/src/views/project/Projects.tsx
index ef6958ea..eda40bae 100644
--- a/apps/ui/src/views/project/Projects.tsx
+++ b/apps/ui/src/views/project/Projects.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '../../api'
 import { useResolver } from '../../hooks'
@@ -36,6 +36,20 @@ export function Projects() {
     }, [projects])
     const [open, setOpen] = useState(false)
 
+    useEffect(() => {
+        if (projects && !projects.length) {
+            navigate('onboarding')
+        }
+    }, [projects, navigate])
+
+    if (!projects) {
+        return (
+            <div>
+                loading...
+            </div>
+        )
+    }
+
     return (
         <PageContent
             title="Projects"
diff --git a/apps/ui/src/views/router.tsx b/apps/ui/src/views/router.tsx
index 5aa96655..dbf42544 100644
--- a/apps/ui/src/views/router.tsx
+++ b/apps/ui/src/views/router.tsx
@@ -2,7 +2,6 @@ import { createBrowserRouter, Outlet, redirect, useNavigate, useParams } from 'r
 import api from '../api'
 
 import ErrorPage from './ErrorPage'
-import ProjectForm from './project/ProjectForm'
 import Sidebar from '../ui/Sidebar'
 import { LoaderContextProvider, StatefulLoaderContextProvider } from './LoaderContextProvider'
 import { AdminContext, CampaignContext, JourneyContext, ListContext, ProjectContext, UserContext } from '../contexts'
@@ -58,20 +57,6 @@ export const router = createBrowserRouter([
         path: '/login',
         element: <Login />,
     },
-    {
-        path: '/onboarding',
-        element: <Onboarding />,
-        children: [
-            {
-                index: true,
-                element: <OnboardingStart />,
-            },
-            {
-                path: 'project',
-                element: <OnboardingProject />,
-            },
-        ],
-    },
     {
         path: '*',
         errorElement: <ErrorPage />,
@@ -89,12 +74,18 @@ export const router = createBrowserRouter([
                 ),
             },
             {
-                path: 'projects/new',
-                element: (
-                    <PageContent title="Create Project">
-                        <ProjectForm />
-                    </PageContent>
-                ),
+                path: 'onboarding',
+                element: <Onboarding />,
+                children: [
+                    {
+                        index: true,
+                        element: <OnboardingStart />,
+                    },
+                    {
+                        path: 'project',
+                        element: <OnboardingProject />,
+                    },
+                ],
             },
             {
                 path: 'projects/:projectId',