Skip to content

Commit

Permalink
refactor(dashboard): more headlessui -> shadcn
Browse files Browse the repository at this point in the history
  • Loading branch information
@bryson-g
bryson-g committed Dec 4, 2024
1 parent e2760ce commit 896e236
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 104 deletions.
80 changes: 30 additions & 50 deletions dashboard/src/app/[tenantId]/components/TenantSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,42 @@
'use client'
import { useWhoAmI } from '@/contexts/WhoAmIContext'
import { Menu, Transition } from '@headlessui/react'
import { DropdownMenu, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'
import { useParams, useRouter } from 'next/navigation'
import { FC, Fragment } from 'react'
import { FC } from 'react'

export const TenantSelector: FC = () => {
const { tenants } = useWhoAmI()
const tenantId = useParams().tenantId as string
const router = useRouter()

return (
<Menu as="div" className="relative inline-block text-left">
<div className="">
<Menu.Button className="inline-flex w-full items-center justify-center gap-x-1.5 rounded bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-4 w-4 text-blue-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
/>
</svg>
{tenantId}
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-2 py-2 text-sm font-bold uppercase">Tenants</div>
{tenants.map(tenant => (
<div key={tenant} className="py-1">
<Menu.Item>
<button
className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
onClick={() => {
router.push(`/${tenant}`)
}}
>
{tenant}
</button>
</Menu.Item>
</div>
))}
</Menu.Items>
</Transition>
</Menu>
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex w-full items-center justify-center gap-x-1.5 rounded bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-4 w-4 text-blue-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
/>
</svg>
{tenantId}
</DropdownMenuTrigger>
<DropdownMenuContent className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-2 py-2 text-sm font-bold uppercase">Tenants</div>
<DropdownMenuSeparator />
{tenants.map(tenant => (
<DropdownMenuItem key={tenant} className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100" onClick={() => router.push(`/${tenant}`)}>
{tenant}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)
}
57 changes: 30 additions & 27 deletions dashboard/src/app/[tenantId]/components/VersionSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Listbox } from '@headlessui/react'
import { TagIcon } from 'lucide-react'
import { FC } from 'react'
import LinkWithTenant from './LinkWithTenant'
import {
Select,
SelectContent,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'

type Props = {
path: string
Expand All @@ -12,31 +17,29 @@ type Props = {

export const VersionSelector: FC<Props> = ({ path, currentVersion, versions, loadVersions }) => {
return (
<Listbox>
<div className="flex">
<Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">Version: </Listbox.Label>
<div className="relative">
<Listbox.Button onClick={loadVersions} className="ml-2 flex gap-2 rounded border-2 border-slate-100 px-2">
<TagIcon className="h-5 w-5" />
{currentVersion}
</Listbox.Button>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
{[...versions].reverse().map(version => {
return (
<Listbox.Option
className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
key={version}
value={version}
as={LinkWithTenant}
href={`${path}/${version}`}
>
{version}
</Listbox.Option>
)
})}
</Listbox.Options>
</div>
</div>
</Listbox>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-900">Version:</span>
<Select defaultValue={currentVersion} onOpenChange={loadVersions}>
<SelectTrigger className="w-auto">
<SelectValue>
<div className="flex items-center gap-2">
<TagIcon className="h-5 w-5" />
{currentVersion}
</div>
</SelectValue>
</SelectTrigger>
<SelectContent>
{[...versions].reverse().map(version => (
<LinkWithTenant
key={version}
href={`${path}/${version}`}
className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
>
{version}
</LinkWithTenant>
))}
</SelectContent>
</Select>
</div>
)
}
19 changes: 10 additions & 9 deletions dashboard/src/app/[tenantId]/taskDef/[name]/components/TaskDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { SearchFooter } from '@/app/[tenantId]/components/SearchFooter'
import { SEARCH_DEFAULT_LIMIT } from '@/app/constants'
import { concatWfRunIds, localDateTimeToUTCIsoString, utcToLocalDateTime } from '@/app/utils'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Field, Input, Label } from '@headlessui/react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useInfiniteQuery } from '@tanstack/react-query'
import { TaskDef as TaskDefProto, TaskStatus } from 'littlehorse-client/proto'
import { RefreshCwIcon } from 'lucide-react'
Expand Down Expand Up @@ -64,25 +65,25 @@ export const TaskDef: FC<Props> = ({ spec }) => {
</select>
</div>
<div className="mb-5 flex max-w-fit items-start justify-between">
<Field className="flex items-center justify-between">
<Label className="block w-1/2 font-bold">Created after:</Label>
<div className="flex items-center justify-between">
<Label className="mr-3 font-bold">Created after:</Label>
<Input
type="datetime-local"
value={createdAfter}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedAfter(e.target.value)}
className="focus:shadow-outline ml-3 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>

<Field className="ml-10 flex items-center justify-between">
<Label className="block w-1/2 font-bold">Created before:</Label>
<div className="ml-10 flex items-center justify-between">
<Label className="mr-4 font-bold">Created before:</Label>
<Input
type="datetime-local"
value={createdBefore}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedBefore(e.target.value)}
className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>
</div>

{isPending ? (
Expand Down
39 changes: 21 additions & 18 deletions dashboard/src/app/[tenantId]/userTaskDef/[...props]/components/UserTaskDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
import { SEARCH_DEFAULT_LIMIT } from '@/app/constants'
import { concatWfRunIds, localDateTimeToUTCIsoString, utcToLocalDateTime } from '@/app/utils'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Button, Field, Input, Label } from '@headlessui/react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useInfiniteQuery } from '@tanstack/react-query'
import { UserTaskDef as UserTaskDefProto, UserTaskRunStatus } from 'littlehorse-client/proto'
import { RefreshCwIcon } from 'lucide-react'
Expand Down Expand Up @@ -85,54 +87,55 @@ export const UserTaskDef: FC<Props> = ({ spec }) => {
<Button
onClick={() => setSelectedStatus(status)}
key={status}
className={`flex items-center border-y-2 border-l-2 p-2 text-xs first-of-type:rounded-l-lg first-of-type:border-l-2 last-of-type:rounded-r-lg last-of-type:border-r-2 ${status === selectedStatus ? 'border-blue-500 bg-blue-500 text-white' : ' text-gray-500'}`}
variant={status === selectedStatus ? "default" : "outline"}
className="rounded-none first:rounded-l-lg last:rounded-r-lg"
>
{status}
</Button>
))}
</div>
</div>
<div className="mb-5 flex max-w-fit items-start justify-between">
<Field className="flex items-center justify-between">
<Label className="block w-1/2 font-bold">User Id:</Label>
<div className="flex items-center justify-between">
<Label className="mr-3 font-bold">User Id:</Label>
<Input
type="text"
value={userId}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserId(e.target.value)}
className="focus:shadow-outline ml-6 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>

<Field className="ml-16 flex items-center justify-between">
<Label className="block w-1/2 font-bold">User Group:</Label>
<div className="ml-16 flex items-center justify-between">
<Label className="mr-4 font-bold">User Group:</Label>
<Input
type="text"
value={userGroup}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserGroup(e.target.value)}
className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>
</div>
<div className="mb-5 flex max-w-fit items-start justify-between">
<Field className="flex items-center justify-between">
<Label className="block w-1/2 font-bold">Created after:</Label>
<div className="flex items-center justify-between">
<Label className="mr-3 font-bold">Created after:</Label>
<Input
type="datetime-local"
value={createdAfter}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedAfter(e.target.value)}
className="focus:shadow-outline ml-3 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>

<Field className="ml-10 flex items-center justify-between">
<Label className="block w-1/2 font-bold">Created before:</Label>
<div className="ml-10 flex items-center justify-between">
<Label className="mr-4 font-bold">Created before:</Label>
<Input
type="datetime-local"
value={createdBefore}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedBefore(e.target.value)}
className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
className="w-full"
/>
</Field>
</div>
</div>

{isPending ? (
Expand Down

0 comments on commit 896e236

Please sign in to comment.