refactor: lens and profile actions

src/app/dashboard/lenses/[id]/page.tsx

@@ -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 }
@@ -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} />

src/app/dashboard/lenses/new/page.tsx

@@ -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>

src/app/dashboard/lenses/page.tsx

@@ -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 />

src/app/dashboard/profiles/[id]/components/actions-dropdown.tsx

@@ -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

src/app/dashboard/profiles/[id]/components/publish-button.tsx

@@ -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

src/app/dashboard/profiles/new/page.tsx

@@ -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'

src/app/dashboard/profiles/page.tsx

@@ -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>
     </>
   )

src/app/dashboard/workloads/new/components/new-form.schema.tsx

@@ -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, {

src/components/dashboard/profiles/data-columns.tsx

@@ -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>[] = [

src/components/dashboard/profiles/data-rows-actions.tsx

@@ -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 {
@@ -11,9 +10,6 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import Link from 'next/link'
@@ -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

src/components/dashboard/profiles/data-table.tsx

@@ -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>
   )

src/components/fancy-multi-select.tsx

@@ -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'
@@ -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) {

src/app/dashboard/lenses/[id]/components/actions-dropdown.tsx → src/components/lenses/actions-dropdown.tsx

@@ -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

src/app/dashboard/lenses/components/data-columns.tsx → src/components/lenses/data-columns.tsx

@@ -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'
@@ -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">

src/app/dashboard/lenses/components/data-rows-actions.tsx → src/components/lenses/data-rows-actions.tsx

@@ -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>
@@ -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

src/app/dashboard/lenses/components/data-table.tsx → src/components/lenses/data-table.tsx

@@ -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'
 
@@ -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>
   )
 }

src/app/dashboard/lenses/new/components/new-form.action.tsx → src/components/lenses/new-form.action.tsx

@@ -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