refactor: data table components

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

@@ -1,6 +1,6 @@
 import { SubNav, SubNavTitle, SubNavSubtitle } from '@/components/sub-nav'
 import { Section } from '@/components/section'
-import { NewSolutionForm } from '@/components/lenses/new-form'
+import { NewLensForm } from '@/components/lenses/new-form'
 
 export default function Page() {
   return (
@@ -14,7 +14,7 @@ export default function Page() {
         </SubNavTitle>
       </SubNav>
       <Section>
-        <NewSolutionForm />
+        <NewLensForm />
       </Section>
     </>
   )

src/app/dashboard/solutions/page.tsx

@@ -1,12 +1,12 @@
-import { AddSolution } from './components/add-solution'
+import { AddSolution } from '@/components/solutions/add-solution'
 import {
   SubNav,
   SubNavTitle,
   SubNavActions,
   SubNavSubtitle
 } from '@/components/sub-nav'
 import { Main } from '@/components/main'
-import SolutionsDataTable from './components/data-table'
+import SolutionsDataTable from '@/components/solutions/data-table'
 
 export default function Page() {
   return (

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

@@ -1,6 +1,6 @@
 import { SubNav, SubNavTitle, SubNavSubtitle } from '@/components/sub-nav'
 import { Section } from '@/components/section'
-import { NewProfilesForm } from './components/new-form'
+import { NewWorkloadForm } from '@/components/workloads/new-form'
 import { Suspense } from 'react'
 
 export default function Page() {
@@ -17,7 +17,7 @@ export default function Page() {
       </SubNav>
       <Section>
         <Suspense>
-          <NewProfilesForm />
+          <NewWorkloadForm />
         </Suspense>
       </Section>
     </>

src/app/teams/[id]/layout.tsx

@@ -1,5 +1,5 @@
 import { SidebarNav } from '@/components/sidebar-nav'
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 export type LayoutProps = {
   children?: React.ReactNode

src/components/data-table-toolbar.tsx

@@ -2,15 +2,12 @@
 
 import { Cross2Icon } from '@radix-ui/react-icons'
 import { Table } from '@tanstack/react-table'
-import { CgSpinner } from 'react-icons/cg'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DataTableViewOptions } from '@/components/data-table-view-options'
 
-import { statuses } from './data/data'
 import { DataTableFacetedFilter } from './data-table-faceted-filter'
-import type { DataTableFacetedFilterProps } from './data-table-faceted-filter'
 import { DataTableLoading } from './data-table-loading'
 
 interface DataTableToolbarProps<TData> {

src/components/lenses/new-form.tsx

@@ -22,11 +22,9 @@ import { z } from 'zod'
 import { useAction } from '@/trpc/client'
 import { useRouter } from 'next/navigation'
 
-export type NewSolutionFormProps = {}
+export type NewLensFormProps = {}
 
-export function NewSolutionForm({
-  ...props
-}: PropsWithChildren<NewSolutionFormProps>) {
+export function NewLensForm({ ...props }: PropsWithChildren<NewLensFormProps>) {
   const form = useForm<z.infer<typeof rhfActionSchema>>({
     resolver: zodResolver(rhfActionSchema),
     defaultValues: {

src/app/dashboard/solutions/components/add-solution.tsx → src/components/solutions/add-solution.tsx

@@ -1,11 +1,9 @@
-import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
 import { PlusIcon } from '@radix-ui/react-icons'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
   DropdownMenuLabel
 } from '@/components/ui/dropdown-menu'

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

@@ -5,7 +5,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import Link from 'next/link'
 import { Solution } from '@/db/models/solution'
 import { DataTableColumnHeader } from '@/components/data-table-column-header'
-import { DataTableRowActions } from '@/app/dashboard/solutions/components/data-rows-actions'
+import { DataTableRowActions } from './data-rows-actions'
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 

src/app/dashboard/solutions/components/data-rows-actions.tsx → src/components/solutions/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 {
@@ -47,20 +46,6 @@ export function DataTableRowActions<TData>({
           <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/app/dashboard/workloads/new/components/new-form.action.tsx → src/components/workloads/new-form.action.tsx

@@ -10,7 +10,6 @@ export const rhfAction = createAction(
   protectedProcedure.input(rhfActionSchema).mutation(
     async opts =>
       await createWorkload({
-        id: uuidv4(),
         name: opts.input.name,
         description: opts.input.description,
         environmentsIds: opts.input.environmentsIds,

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

@@ -31,12 +31,13 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { useAction } from '@/trpc/client'
 import { useRouter } from 'next/navigation'
+import type { PropsWithChildren } from 'react'
 
-export type NewProfilesFormProps = {
-  className?: string
-}
+export type NewWorkloadFormProps = {}
 
-export function NewProfilesForm({ ...props }: NewProfilesFormProps) {
+export function NewWorkloadForm({
+  ...props
+}: PropsWithChildren<NewWorkloadFormProps>) {
   const profiles = use(api.listProfiles.query({}))
   const environments = use(api.listEnvironments.query({}))
   const lenses = use(api.listLenses.query({}))

src/db/models/workload.ts

@@ -13,7 +13,9 @@ import {
   PrimaryKey,
   Table,
   UpdatedAt,
-  HasMany
+  HasMany,
+  AllowNull,
+  Default
 } from 'sequelize-typescript'
 import { Profile } from './profile'
 import { Lens } from './lens'
@@ -36,7 +38,7 @@ export interface WorkloadAttributes {
 
 export type WorkloadCreationAttributes = Omit<
   WorkloadAttributes,
-  'createdAt' | 'updatedAt' | 'deletedAt'
+  'id' | 'createdAt' | 'updatedAt' | 'deletedAt'
 >
 
 @Table({
@@ -48,6 +50,8 @@ export class Workload extends Model<
   WorkloadCreationAttributes
 > {
   @PrimaryKey
+  @AllowNull(false)
+  @Default(DataType.UUIDV4)
   @Column(DataType.UUIDV4)
   id!: string
 

src/db/services/workloads.ts

@@ -41,11 +41,8 @@ export async function createWorkload({
   lensesIds: string[]
 }) {
   return await sequelize.transaction(async transaction => {
-    const id = uuidv4()
-
     const workload = await Workload.create(
       {
-        id,
         profilesId,
         name,
         description