Skip to content

Commit

Permalink
add empty state
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvkhna
gvkhna committed May 30, 2024
1 parent 413b836 commit 7673932
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 40 deletions.
63 changes: 50 additions & 13 deletions src/partials/dashboard/dashboard-empty-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,71 @@ import {CodeInline} from './code-inline'
import {H2} from './h2'
import {Paragraph} from './paragraph'
import {PreBashCmd} from './pre-bash-cmd'
import {Link} from '@/components/link'

import {PlusIcon} from 'lucide-react'
import {Button} from '@/components/ui/button'

export function DashboardEmptyState() {
return (
<>
<div className='space-y-2'>
<h1 className={cn('scroll-m-20 text-4xl font-bold tracking-tight')}>Getting started</h1>
<p className='text-lg text-muted-foreground'>How to start using the warpdive cli</p>
{/* <p className='text-lg text-muted-foreground'>How to start using the warpdive cli</p> */}
</div>
<div className='pb-12 pt-8'>
<div className='pb-8 pt-8'>
<div className='mdx'>
{/* <H2 title='init' />
<Paragraph>
Use the <CodeInline>init</CodeInline> command to initialize configuration and dependencies for a new
project.
</Paragraph>
<Paragraph>
The <CodeInline>init</CodeInline> command installs dependencies, adds the <CodeInline>cn</CodeInline> util,
configures , and CSS variables for the project.
<ol>
<li>
1. Create an API Key in{' '}
<Link
href='/app/settings'
className='text-md px-0 underline'
>
Settings
</Link>
</li>
<li>2. Log into warpdive-cli</li>
</ol>
</Paragraph>
<PreBashCmd
cmd={'npx'}
args={['warpdive', 'login']}
/>
<div className='mdx'>
<ol>
<li className='flex items-center'>
<span>3. Create a project</span>
<div>
<Button
size={'sm'}
className='ml-2 flex h-7 gap-x-1 p-1.5 hover:no-underline'
asChild
>
<Link href='/app/projects/new'>
<PlusIcon className='h-2.5 w-2.5' />
{'New'}
</Link>
</Button>
</div>
</li>
</ol>
</div>
<H2 title='Build/Push' />
<Paragraph>
You will be asked a few questions to configure <CodeInline>components.json</CodeInline>:
Use the <CodeInline>npx warpdive</CodeInline> command to build or push a container image.
</Paragraph>
<PreBashCmd
cmd={'npx'}
args={['warpdive', 'build', '.', '--wd-project', 'my-project']}
/>
<i>Note: Make sure to specify the project name to keep images grouped.</i>

<PreBashCmd
cmd={'npx'}
args={['test']}
/> */}
args={['warpdive', 'push', 'alpine:latest', '--wd-project', 'my-alpine']}
/>
</div>
</div>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/partials/dashboard/h2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export interface H2Props {

export function H2(props: H2Props) {
return (
<h2 className='font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0'>
<h2 className='font-heading mt-8 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0'>
{/* id={props.title} */}
{/* <a
className='subheading-anchor font-medium underline underline-offset-4'
Expand Down
2 changes: 1 addition & 1 deletion src/partials/dashboard/pre-bash-cmd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function PreBashCmd(props: PreBashCmdProps) {
<span
key={`pre-bash-cmd-${index}`}
style={{
color: 'rgba(255, 255, 255, 0.533)'
color: 'rgba(255, 255, 255, 0.95)'
}}
>
{' '}
Expand Down
35 changes: 17 additions & 18 deletions src/partials/projects/projects-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,15 @@ export function ProjectsPage(props: ProjectsPageProps) {
}
const {data, error, isLoading} = useSWR(key, fetcher)

console.log('data: ', data)
useEffect(() => {
// if (data && data.builds) {
// const transformedItems = data.projects.map((item) => ({
// title: item.name,
// href: `/app/project/${item.pid}`,
// items: []
// }))
// setNavItems(transformedItems)
// }
if (data && data.projects) {
const transformedItems = data.projects.map((item) => ({
title: item.name,
href: `/app/project/${item.pid}`,
items: []
}))
setNavItems(transformedItems)
}
}, [data])

console.log('data: ', data)
Expand All @@ -63,27 +62,27 @@ export function ProjectsPage(props: ProjectsPageProps) {
title: 'Project',
button: (
<>
{/* <Button
<Button
size={'sm'}
className='h-8 gap-x-1 hover:no-underline'
asChild
>
<Link href={`/app/project/${pid}/edit`}>
<Pencil className='h-3 w-3' />
{'Edit'}
<Link href='/app/projects/new'>
<PlusIcon className='h-3 w-3' />
{'New'}
</Link>
</Button> */}
</Button>
</>
),
items: []
items: navItems
}
]}
/>
</ScrollArea>
</aside>
<main className='relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]'>
<div className='mx-auto w-full min-w-0'>
{data && data?.builds.length > 0 ? (
{data && data?.projectBuilds.length > 0 ? (
<>
<header className='flex items-center justify-between border-b border-white/5'>
<h1 className='text-lg font-semibold leading-7 text-foreground dark:text-white'>Deployments</h1>
Expand All @@ -92,15 +91,15 @@ export function ProjectsPage(props: ProjectsPageProps) {
role='list'
className='divide-y divide-white/5'
>
{data.builds.map((build) => (
{data.projectBuilds.map((build) => (
<BuildRow
key={build.pid}
pid={build.pid}
tag={build.tag}
createdAt={build.createdAt}
builtBy={build.builtBy}
builtWith={build.builtWith}
projectName={''}
projectName={build.projectName}
/>
))}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/server/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const dashboard = new Hono<HonoServer>().get('/', async (c) => {
// tracking bug: https://github.com/drizzle-team/drizzle-orm/issues/555
// const {id: buildId, userId: buildUserId, projectId: buildRepoId, ...buildCols} = getTableColumns(schema.builds)
const recentBuilds = await db
.select({
.selectDistinct({
builtBy: sql<string | null>`${schema.builds.builtBy}`.as('build_built_by'),
builtWith: sql<string | null>`${schema.builds.builtWith}`.as('build_built_with'),
commitSha: sql<string | null>`${schema.builds.commitSha}`.as('build_commit_sha'),
Expand Down
63 changes: 57 additions & 6 deletions src/server/projects.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,69 @@ const projects = new Hono<HonoServer>()

const userId = helper.currentUser.id

const {id: buildId, userId: buildUserId, projectId: buildProjectId, ...buildCols} = getTableColumns(schema.builds)
const {id: projectId, userId: projectUserId, ...projectCols} = getTableColumns(schema.projects)
const projectsRes = await db
.select(projectCols)
.from(schema.projects)
.where(eq(schema.projects.userId, userId))
.limit(50)
.orderBy(desc(schema.projects.updatedAt))

const builds = await db
.select(buildCols)
.from(schema.builds)
.where(eq(schema.builds.userId, userId))
// alias all columns on join due to issue for joins with drizzle/d1
// tracking bug: https://github.com/drizzle-team/drizzle-orm/issues/555
// const {id: buildId, userId: buildUserId, projectId: buildRepoId, ...buildCols} = getTableColumns(schema.builds)
const projectBuilds = await db
.selectDistinct({
builtBy: sql<string | null>`${schema.builds.builtBy}`.as('build_built_by'),
builtWith: sql<string | null>`${schema.builds.builtWith}`.as('build_built_with'),
commitSha: sql<string | null>`${schema.builds.commitSha}`.as('build_commit_sha'),
createdAt: sql<string | null>`${schema.builds.createdAt}`.as('build_created_at'),
imageSha: sql<string | null>`${schema.builds.imageSha}`.as('build_image_sha'),
objectPath: sql<string>`${schema.builds.objectPath}`.as('build_object_path'),
pid: sql<string | null>`${schema.builds.pid}`.as('build_pid'),
projectCreatedAt: sql<string | null>`${schema.projects.createdAt}`.as('project_created_at'),
projectName: sql<string>`${schema.projects.name}`.as('project_name'),
projectOrg: sql<string | null>`${schema.projects.org}`.as('project_org'),
projectPid: sql<string | null>`${schema.projects.pid}`.as('project_pid'),
projectPublic: sql<boolean | null>`${schema.projects.public}`.as('project_public'),
projectRegistryUrl: sql<string | null>`${schema.projects.registryUrl}`.as('project_registry_url'),
projectRepoUrl: sql<string | null>`${schema.projects.repoUrl}`.as('project_repo_url'),
projectUpdatedAt: sql<string | null>`${schema.projects.updatedAt}`.as('project_updated_at'),
registryUrl: sql<string | null>`${schema.builds.registryUrl}`.as('build_registry_url'),
releaseUrl: sql<string | null>`${schema.builds.releaseUrl}`.as('build_release_url'),
tag: sql<string | null>`${schema.builds.tag}`.as('build_tag')
})
.from(schema.projects)
.innerJoin(schema.builds, eq(schema.builds.projectPid, pid))
.where(eq(schema.projects.userId, userId))
.limit(50)
.orderBy(desc(schema.builds.createdAt))

return c.json({builds}, 200)
if (projects && projectBuilds) {
return c.json({projects: projectsRes, projectBuilds}, 200)
}
return c.json({message: 'User not found or incorrect authentication'}, 404)
}
return c.json({message: 'User not found or incorrect authentication'}, 404)

// const helper = await getAuthenticatedUserDB(c)
// if (helper.currentUser && helper.db) {
// const db = helper.db

// const userId = helper.currentUser.id

// const {id: buildId, userId: buildUserId, projectId: buildProjectId, ...buildCols} = getTableColumns(schema.builds)

// const builds = await db
// .select(buildCols)
// .from(schema.builds)
// .where(eq(schema.builds.userId, userId))
// .limit(50)
// .orderBy(desc(schema.builds.createdAt))

// return c.json({builds}, 200)
// }
// return c.json({message: 'User not found or incorrect authentication'}, 404)
})
.post(
'/new',
Expand Down

0 comments on commit 7673932

Please sign in to comment.