Skip to content

Commit

Permalink
refactor: lens and profile actions
Browse files Browse the repository at this point in the history
  • Loading branch information
katallaxie committed Jan 8, 2024
1 parent 0c70116 commit 83b4341
Show file tree
Hide file tree
Showing 34 changed files with 106 additions and 136 deletions.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
9 changes: 3 additions & 6 deletions src/app/dashboard/lenses/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ import {
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import DateFormat from '@/components/date-format'
import { ActionsDropdown } from './components/actions-dropdown'
import { PublishButton } from './components/publish-button'
import { ActionsDropdown } from '@/components/lenses/actions-dropdown'
import { PublishButton } from '@/components/lenses/publish-button'

export type PageProps = {
params: { id: string }
Expand All @@ -31,10 +31,7 @@ export default async function Page({ params }: PageProps) {
return (
<>
<SubNav>
<SubNavTitle>
{lens?.name}
<SubNavSubtitle>{lens?.description}</SubNavSubtitle>
</SubNavTitle>
<SubNavTitle>{lens?.name}</SubNavTitle>
<SubNavActions>
{lens?.isDraft && <PublishButton lensId={lens.id} />}
<ActionsDropdown lens={lens} />
Expand Down
6 changes: 4 additions & 2 deletions src/app/dashboard/lenses/new/page.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { SubNav, SubNavTitle, SubNavSubtitle } from '@/components/sub-nav'
import { Section } from '@/components/section'
import { NewSolutionForm } from './components/new-form'
import { NewSolutionForm } from '@/components/lenses/new-form'

export default function Page() {
return (
<>
<SubNav>
<SubNavTitle>
New Lens
<SubNavSubtitle>Lenses help to evalute workloads.</SubNavSubtitle>
<SubNavSubtitle>
Measure workloads against best practices.
</SubNavSubtitle>
</SubNavTitle>
</SubNav>
<Section>
Expand Down
8 changes: 5 additions & 3 deletions src/app/dashboard/lenses/page.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import { AddLensButton } from './components/add-button'
import { AddLensButton } from '@/components/lenses/add-button'
import {
SubNav,
SubNavTitle,
SubNavActions,
SubNavSubtitle
} from '@/components/sub-nav'
import { Main } from '@/components/main'
import { LensesDataTable } from './components/data-table'
import { LensesDataTable } from '@/components/lenses/data-table'

export default function Lenses() {
return (
<>
<SubNav>
<SubNavTitle>
Lenses
<SubNavSubtitle>Review specifications for workloads</SubNavSubtitle>
<SubNavSubtitle>
Measure any architecture against best practices.
</SubNavSubtitle>
</SubNavTitle>
<SubNavActions>
<AddLensButton />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import { useRouter } from 'next/navigation'
import type { Profile } from '@/db/models/profile'
import { useAction } from '@/trpc/client'
import { rhfActionDeleteProfile } from '@/app/dashboard/profiles/actions/profile.action'
import { rhfActionDeleteProfile } from '@/actions/profile.action'

interface ActionsDropdownProps {
profile?: Profile | null
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { Button } from '@/components/ui/button'
import { useAction } from '@/trpc/client'
import { rhfActionPushlishLens } from '@/app/dashboard/lenses/actions/lens.action'
import { rhfActionPushlishLens } from '@/actions/lens.action'

interface PublishButtonProps {
lensId: string
Expand Down
2 changes: 1 addition & 1 deletion src/app/dashboard/profiles/new/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Suspense, use, useDeferredValue } from 'react'
import { Suspense } from 'react'
import { SubNav, SubNavTitle, SubNavSubtitle } from '@/components/sub-nav'
import { Section } from '@/components/section'
import { NewProfileForm } from '@/components/dashboard/profiles/new-form'
Expand Down
8 changes: 3 additions & 5 deletions src/app/dashboard/profiles/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,22 @@ import {
} from '@/components/sub-nav'
import { Main } from '@/components/main'
import { AddProfileButton } from '@/components/dashboard/profiles/add-button'
import { ProfileDataTable } from '@/components/dashboard/profiles/data-table'
import { ProfilesDataTable } from '@/components/dashboard/profiles/data-table'

export default function Page() {
return (
<>
<SubNav>
<SubNavTitle>
<p>Profiles</p>
<SubNavSubtitle>
Provide business context for a workload
</SubNavSubtitle>
<SubNavSubtitle>Business context of a workload.</SubNavSubtitle>
</SubNavTitle>
<SubNavActions>
<AddProfileButton />
</SubNavActions>
</SubNav>
<Main>
<ProfileDataTable />
<ProfilesDataTable />
</Main>
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { z } from 'zod'
export const rhfActionSchema = z.object({
name: z.string().min(3, {}).default(''),
lensesIds: z.array(z.string().uuid()).min(1).default([]),
environmentsIds: z.array(z.bigint()).min(1).default([]),
environmentsIds: z.array(z.coerce.bigint()).min(1).default([]),
description: z
.string()
.min(10, {
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboard/profiles/data-columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ColumnDef } from '@tanstack/react-table'
import { Checkbox } from '@/components/ui/checkbox'
import { Profile } from '@/db/models/profile'
import { DataTableColumnHeader } from '@/components/data-table-column-header'
import { DataTableRowActions } from '@/components/data-table-row-actions'
import { DataTableRowActions } from './data-rows-actions'
import Link from 'next/link'

export const columns: ColumnDef<Profile>[] = [
Expand Down
20 changes: 1 addition & 19 deletions src/components/dashboard/profiles/data-rows-actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { DotsHorizontalIcon } from '@radix-ui/react-icons'
import { Row } from '@tanstack/react-table'

import { Button } from '@/components/ui/button'
import { api } from '@/trpc/client'
import {
Expand All @@ -11,9 +10,6 @@ import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import Link from 'next/link'
Expand Down Expand Up @@ -43,24 +39,10 @@ export function DataTableRowActions<TData>({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[160px]">
<Link href={`/dashboard/workloads/${id}`}>
<Link href={`/dashboard/profiles/${id}`}>
<DropdownMenuItem>View</DropdownMenuItem>
</Link>
<DropdownMenuItem>Make a copy</DropdownMenuItem>
<DropdownMenuItem>Favorite</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{/* <DropdownMenuRadioGroup value={}>
{labels.map(label => (
<DropdownMenuRadioItem key={label.value} value={label.value}>
{label.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup> */}
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => deleteWorkload(id)}>
Delete
Expand Down
4 changes: 2 additions & 2 deletions src/components/dashboard/profiles/data-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { DataTable } from '@/components/data-table'
import { useQuery } from '@/lib/api'
import { api } from '@/trpc/client'

export function ProfileDataTable() {
export function ProfilesDataTable() {
const query = useQuery(({ pageIndex: offset, pageSize: limit }) =>
api.profiles.list.query({ offset, limit })
)

return (
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
<DataTable columns={columns} query={query()} />
</div>
)
Expand Down
26 changes: 11 additions & 15 deletions src/components/fancy-multi-select.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
'use client'

import * as React from 'react'
import { useEffect, useCallback, useState, useRef } from 'react'
import { X } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Command, CommandGroup, CommandItem } from '@/components/ui/command'
import { Command as CommandPrimitive } from 'cmdk'
Expand All @@ -24,29 +23,26 @@ export function FancyMultiSelect<T>({
onValueChange,
dataValues = []
}: FancyMultiSelectProps<T>) {
const inputRef = React.useRef<HTMLInputElement>(null)
const [open, setOpen] = React.useState(false)
const [selected, setSelected] = React.useState<FancyMultiSelectValue<T>[]>([
const inputRef = useRef<HTMLInputElement>(null)
const [open, setOpen] = useState(false)
const [selected, setSelected] = useState<FancyMultiSelectValue<T>[]>([
dataValues[0]
])
const [inputValue, setInputValue] = React.useState('')
const [inputValue, setInputValue] = useState('')

React.useEffect(() => {
useEffect(() => {
onValueChange?.(selected.map(s => s.value))
}, [selected, onValueChange])

const handleSelect = React.useCallback((value: FancyMultiSelectValue<T>) => {
const handleSelect = useCallback((value: FancyMultiSelectValue<T>) => {
setSelected(prev => [...prev, value])
}, [])

const handleUnselect = React.useCallback(
(select: FancyMultiSelectValue<T>) => {
setSelected(prev => prev.filter(s => s.value !== select.value))
},
[]
)
const handleUnselect = useCallback((select: FancyMultiSelectValue<T>) => {
setSelected(prev => prev.filter(s => s.value !== select.value))
}, [])

const handleKeyDown = React.useCallback(
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLDivElement>) => {
const input = inputRef.current
if (input) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import { useRouter } from 'next/navigation'
import { Lens } from '@/db/models/lens'
import { useAction } from '@/trpc/client'
import { rhfActionDeleteLens } from '@/app/dashboard/lenses/actions/lens.action'
import { rhfActionDeleteLens } from '@/actions/lens.action'

interface ActionsDropdownProps {
lens?: Lens | null
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ColumnDef } from '@tanstack/react-table'
import { Checkbox } from '@/components/ui/checkbox'
import { Lens } from '@/db/models/lens'
import { DataTableColumnHeader } from '@/components/data-table-column-header'
import { DataTableRowActions } from '@/app/dashboard/lenses/components/data-rows-actions'
import { DataTableRowActions } from '@/components/lenses/data-rows-actions'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from 'next/link'
Expand Down Expand Up @@ -87,6 +87,7 @@ export const columns: ColumnDef<Lens>[] = [
<DataTableColumnHeader column={column} title="Status" />
),
cell: ({ row }) => {
console.log(row)
return (
<div className="flex space-x-2">
<span className="max-w-[500px] truncate font-medium">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@/components/ui/dropdown-menu'
import Link from 'next/link'
import { useAction } from '@/trpc/client'
import { rhfActionDeleteLens } from '../actions/lens.action'
import { rhfActionDeleteLens } from '@/actions/lens.action'

interface DataTableRowActionsProps<TData> {
row: Row<TData>
Expand Down Expand Up @@ -46,21 +46,6 @@ export function DataTableRowActions<TData>({
<Link href={`/dashboard/lenses/${id}`} passHref>
<DropdownMenuItem>View</DropdownMenuItem>
</Link>
<DropdownMenuItem>Make a copy</DropdownMenuItem>
<DropdownMenuItem>Favorite</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{/* <DropdownMenuRadioGroup value={}>
{labels.map(label => (
<DropdownMenuRadioItem key={label.value} value={label.value}>
{label.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup> */}
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => deleteLens(id)}>
Delete
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { columns } from './data-columns'
import { DataTable } from '@/components/data-table'
import type { Lens } from '@/db/models/lens'
import { useQuery } from '@/lib/api'
import { api } from '@/trpc/client'

Expand All @@ -13,7 +12,7 @@ export function LensesDataTable() {

return (
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
<DataTable<Lens> columns={columns} query={query()} />
<DataTable columns={columns} query={query()} />
</div>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@ import 'server-only'
import { createAction, protectedProcedure } from '@/server/trpc'
import { rhfActionSchema } from './new-form.schema'
import { createLens } from '@/db/services/lenses'
import { v4 as uuidv4 } from 'uuid'

export const rhfAction = createAction(
protectedProcedure.input(rhfActionSchema).mutation(
async opts =>
await createLens({
id: uuidv4(),
name: opts.input.name,
description: opts.input.description,
spec: opts.input.spec
Expand Down
File renamed without changes.
Loading

0 comments on commit 83b4341

Please sign in to comment.