feat: adds component dependents (#32)

ethereal-nexus-dashboard/src/app/(layout)/(session)/components/[id]/versions/[versionId]/[tab]/page.tsx

@@ -1,6 +1,11 @@
 import {Separator} from '@/components/ui/separator';
 import {notFound} from 'next/navigation';
-import {getComponentAssets, getComponentById, getComponentVersions} from "@/data/components/actions";
+import {
+ getComponentAssets,
+ getComponentById,
+ getComponentDependentsProjectsWithOwners,
+ getComponentVersions
+} from "@/data/components/actions";
 import React from "react";
 import ComponentVersionHeader from "@/components/components/component/version/header";
 import ComponentVersionTabs from "@/components/components/component/version/tabs";
@@ -10,8 +15,9 @@ export default async function EditComponentVersion({params: {id, versionId, tab}
 
  const component = await getComponentById(id);
  const versions = await getComponentVersions(id);
+ const projects = await getComponentDependentsProjectsWithOwners(id);
 
- if (!versions.success || !component.success) {
+ if (!versions.success || !component.success || !projects.success) {
  notFound();
  }
  const selectedVersion = versions.data.filter((version: any) => version.id === versionId)[0];
@@ -21,7 +27,7 @@ export default async function EditComponentVersion({params: {id, versionId, tab}
  selectedVersion={selectedVersion} activeTab={tab}/>
  <Separator/>
  <ComponentVersionTabs activeTab={tab} versions={versions} selectedVersion={selectedVersion}
- component={component}/>
+ component={component} dependents={projects.data}/>
  </div>
  );
 }

ethereal-nexus-dashboard/src/components/components/component/version/tabs.tsx

@@ -7,7 +7,7 @@ import Readme from "@/components/components/component/version/tabs/readme";
 import Dependents from "@/components/components/component/version/tabs/dependents";
 
 
-const ComponentVersionTabs = ({activeTab, component, versions, selectedVersion}) => {
+const ComponentVersionTabs = ({activeTab, component, versions, selectedVersion,dependents}) => {
  const {push} = useRouter();
 
  return (
@@ -27,7 +27,7 @@ const ComponentVersionTabs = ({activeTab, component, versions, selectedVersion})
  selectedVersionId={selectedVersion.id}/>
  </TabsContent>
  <TabsContent value="dependents">
- <Dependents></Dependents>
+ <Dependents dependents={dependents}></Dependents>
  </TabsContent>
  <TabsContent value="versions">
  <ul role="list" className="divide-y divide-gray-100">

ethereal-nexus-dashboard/src/components/components/component/version/tabs/dependents.tsx

@@ -1,56 +1,58 @@
-"use client"
-
 import React from 'react';
-import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
 import {Button} from "@/components/ui/button";
 import {MoreHorizontalIcon} from "lucide-react";
 import {HomeIcon, PersonIcon} from "@radix-ui/react-icons";
+import {ProjectWithOwners} from "@/data/projects/dto";
+import Link from "next/link";
 
 
 interface PreviewProps {
+ dependents: ProjectWithOwners[];
 }
 
-const Dependents: React.FC<PreviewProps> = () => {
+const Dependents: React.FC<PreviewProps> = ({dependents = []}) => {
 
  return (
  <div className="grid gap-6">
- <Card>
- <CardHeader className="flex flex-row items-center gap-4">
- <HomeIcon className="w-8 h-8" />
- <div className="grid gap-1">
- <CardTitle>Corporate</CardTitle>
- <CardDescription>corporate.example.com</CardDescription>
- </div>
- <DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button className="ml-auto" size="icon" variant="ghost">
- <MoreHorizontalIcon className="w-4 h-4" />
- <span className="sr-only">Toggle menu</span>
- </Button>
- </DropdownMenuTrigger>
- <DropdownMenuContent align="end">
- <DropdownMenuItem>View Project</DropdownMenuItem>
- <DropdownMenuItem>View Settings</DropdownMenuItem>
- </DropdownMenuContent>
- </DropdownMenu>
- </CardHeader>
- <CardContent>
- <div className="grid gap-2">
- <div className="text-sm font-semibold">Project Maintainers:</div>
- <div className="items-center gap-4 text-sm">
- <div className="flex items-center gap-1">
- <PersonIcon className="w-4 h-4" />
- <span className="text-gray-500 dark:text-gray-400">Rui Silva</span>
+ {dependents.map(project => (
+ <Link key={project.id} href={`/projects/${project.id}`}>
+ <Card>
+ <CardHeader className="flex flex-row items-center gap-4">
+ <HomeIcon className="w-8 h-8"/>
+ <div className="grid gap-1">
+ <CardTitle>{project.name}</CardTitle>
+ <CardDescription>{project.description}</CardDescription>
  </div>
- <div className="flex items-center gap-1">
- <PersonIcon className="w-4 h-4" />
- <span className="text-gray-500 dark:text-gray-400">Francisco Madeira</span>
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button className="ml-auto" size="icon" variant="ghost">
+ <MoreHorizontalIcon className="w-4 h-4"/>
+ <span className="sr-only">Toggle menu</span>
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end">
+ <DropdownMenuItem>View Project</DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </CardHeader>
+ <CardContent>
+ <div className="grid gap-2">
+ <div className="text-sm font-semibold">Project Maintainers:</div>
+ <div className="items-center gap-4 text-sm">
+ {project.owners.map((owner, index) => (
+ <div key={index} className="flex items-center gap-1">
+ <PersonIcon className="w-4 h-4"/>
+ <span className="text-gray-500 dark:text-gray-400">{owner}</span>
+ </div>
+ ))}
+ </div>
  </div>
- </div>
- </div>
- </CardContent>
- </Card>
+ </CardContent>
+ </Card>
+ </Link>
+ ))}
  </div>
  );
 };

ethereal-nexus-dashboard/src/components/components/table/columns.tsx

@@ -4,6 +4,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ComponentsDataTableRowActions } from "./data-table-row-actions";
 import { DataTableColumnHeader } from '@/components/ui/data-table/data-table-column-header';
 import Link from "next/link";
+import * as React from "react";
 
 export const columns = [
  {
@@ -41,7 +42,7 @@ export const columns = [
  header: ({ column }) => (
  <DataTableColumnHeader column={column} title="Title" />
  ),
- cell: ({ row }) => row.getValue("title"),
+ cell: ({ row }) => <Link href={`/components/${row.original.id}`}>{row.getValue("title")}</Link>,
  enableSorting: true,
  enableHiding: true,
  },

ethereal-nexus-dashboard/src/components/projects/component-selection-table/columns.tsx

@@ -6,6 +6,7 @@ import { Switch } from '@/components/ui/switch';
 import { ActiveSwitch } from '@/components/projects/component-selection-table/active-switch';
 import { Checkbox } from '@/components/ui/checkbox';
 import { VersionPicker } from '@/components/projects/component-selection-table/version-picker';
+import Link from "next/link";
 
 export const columns = [
  {
@@ -36,7 +37,7 @@ export const columns = [
  header: ({ column }) => (
  <DataTableColumnHeader column={column} title="Name" />
  ),
- cell: ({ row }) => row.getValue("name"),
+ cell: ({ row }) => <Link href={`/components/${row.original.id}`}>{row.getValue("name")}</Link>,
  enableSorting: true,
  enableHiding: true,
  },
@@ -46,7 +47,7 @@ export const columns = [
  header: ({ column }) => (
  <DataTableColumnHeader column={column} title="Title" />
  ),
- cell: ({ row }) => row.getValue("title"),
+ cell: ({ row }) => <Link href={`/components/${row.original.id}`}>{row.getValue("title")}</Link>,
  enableSorting: true,
  enableHiding: true,
  },

ethereal-nexus-dashboard/src/data/components/actions.ts

@@ -18,13 +18,17 @@ import {
  componentVersionsSchema,
  ComponentWithVersion,
 } from './dto';
-import {and, eq} from 'drizzle-orm';
+import {and, eq, sql} from 'drizzle-orm';
 import {
  componentAssets,
  components,
  componentVersions,
 } from '@/data/components/schema';
 import {revalidatePath} from 'next/cache';
+import {projectComponentConfig, projects} from "@/data/projects/schema";
+import {projectWithOwners, ProjectWithOwners} from "@/data/projects/dto";
+import {members} from "@/data/member/schema";
+import {users} from "@/data/users/schema";
 
 export async function upsertComponent(
  component: ComponentToUpsert,
@@ -361,6 +365,47 @@ export async function getComponentVersions(
  }
 }
 
+export async function getComponentDependentsProjectsWithOwners(
+ component_id: string,
+): ActionResponse<ProjectWithOwners[]> {
+ if (!component_id) {
+ return actionError('No component id provided.');
+ }
+ try {
+ const select = await db.select(
+ {
+ id: projects.id,
+ name: projects.name,
+ description: projects.description,
+ owners: sql`ARRAY_AGG(${users.name})`
+ })
+ .from(projectComponentConfig)
+ .leftJoin(projects, eq(projects.id, projectComponentConfig.project_id))
+ .leftJoin(members,
+ and(
+ eq(members.resource, projectComponentConfig.project_id),
+ eq(members.role, 'owner')))
+ .leftJoin(users,eq(users.id,members.user_id))
+ .where(eq(projectComponentConfig.component_id, component_id))
+ .groupBy(
+ projects.id,
+ )
+
+ const safe = projectWithOwners.array().safeParse(select);
+ if (!safe.success) {
+ return actionZodError(
+ "There's an issue with the component records.",
+ safe.error,
+ );
+ }
+
+ return actionSuccess(safe.data);
+ } catch (error) {
+ console.error(error);
+ return actionError('Failed to fetch components from database.');
+ }
+}
+
 export async function getComponentAssets(
  component_id: string,
  version_id: string,

ethereal-nexus-dashboard/src/data/projects/dto.ts

@@ -6,6 +6,9 @@ import {
  componentVersionsSchema
 } from '@/data/components/dto';
 import { z } from 'zod';
+import {users} from "@/data/users/schema";
+import {members} from "@/data/member/schema";
+import {userSchema} from "@/data/users/dto";
 
 /**
  * @swagger
@@ -110,6 +113,10 @@ export const projectComponentsWithDialogSchema = projectComponentsSchema
  dialog: componentVersionsSchema.shape.dialog.nullable(),
  },
  );
+export const projectWithOwners = projectSchema
+ .extend( { owners: z.array(userSchema.shape.name)});
+export type ProjectWithOwners = z.infer<typeof projectWithOwners>;
+
 export type ProjectComponentsWithDialog = z.infer<
  typeof projectComponentsWithDialogSchema
 >;