Added repositories from jfrog

ui/constants.ts

@@ -0,0 +1,12 @@
+import dotenv from 'dotenv'
+
+dotenv.config({path: '../.env'})
+
+const { JFROG_ID: ENV_JFROG_ID, JFROG_TOKEN: ENV_JFROG_TOKEN } = process.env
+
+if (!ENV_JFROG_ID || !ENV_JFROG_TOKEN) {
+    throw new Error("Missing ENV_JFROG_ID")
+}
+
+export const JFROG_ID = ENV_JFROG_ID
+export const JFROG_TOKEN = ENV_JFROG_TOKEN

ui/package.json

@@ -9,19 +9,20 @@
     "lint": "next lint --fix"
   },
   "dependencies": {
+    "dotenv": "^16.4.7",
+    "next": "15.1.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.6"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

ui/src/app/dashboard/repositories/page.tsx

@@ -1,12 +1,51 @@
-// import fetchRepositories from "@/utils/fetchRepositories"
+import fetchRepositories from "@/utils/fetchRepositories"
+
+type Repository = {
+    key: string
+    description: string
+    type: "LOCAL" | "REMOTE" | "VIRTUAL"
+    url: string
+    packageType: string
+}
+
+type RepositoryProps = {
+    repository: Repository
+    index: number
+}
 
 export default async function Repositories() {
-    // const repositories: {[key: string]: string}[] = await fetchRepositories()
+    const repositories: Repository[] = await fetchRepositories()
     return (
-        <main className="flex min-h-screen flex-col items-center justify-center bg-white p-4">
+        <main className="flex h-full w-full flex-col bg-white p-4">
             <h1 className="text-3xl font-bold text-blue-600">Repositories</h1>
             <p className="mt-2 text-gray-700">List over repositories in Artifactory.</p>
-            {/* {repositories.map((repository) => <div key={JSON.stringify(repository)}>{JSON.stringify(repository)}</div>)} */}
+            <div className="grid grid-cols-8 bg-stone-200 w-full h-[50px] items-center pl-4 text-gray-700">
+                <h1>Key</h1>
+                <h1>Type</h1>
+                <h1 className="col-span-2">URL</h1>
+                <h1>Package Type</h1>
+                <h1 className="col-span-3">Description</h1>
+            </div>
+            <div className="h-full w-full">
+                {repositories.map((repository, index) => <Repository 
+                    key={JSON.stringify(repository)} 
+                    repository={repository} 
+                    index={index}
+                />)}
+            </div>
         </main>
     )
 }
+
+function Repository({repository, index}: RepositoryProps) {
+    const color = index % 2 !== 0 ? 'bg-stone-200' : ''
+    return (
+        <div className={`h-full w-full grid grid-cols-8 w-full ${color} p-4 text-gray-700`}>
+            <h1>{repository.key}</h1>
+            <h1>{repository.type}</h1>
+            <h1 className="col-span-2">{repository.url}</h1>
+            <h1>{repository.packageType}</h1>
+            <h1 className="col-span-3">{repository.description}</h1>
+        </div>
+    )
+}

ui/src/utils/fetchRepositories.ts

@@ -1,14 +1,22 @@
-// export default async function fetchRepositories() {
-//     try {
-//         const response = await fetch("")
+import { JFROG_ID, JFROG_TOKEN } from "../../constants"
 
-//         if (!response.ok) {
-//             throw new Error(await response.text())
-//         }
+export default async function fetchRepositories() {
+    try {
+        const response = await fetch(`https://${JFROG_ID}.jfrog.io/artifactory/api/repositories`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${JFROG_TOKEN}`
+            },
+        })
 
-//         const data = response.json()
-//         return data
-//     } catch (error) {
-//         console.error(error)
-//     }
-// }
+        if (!response.ok) {
+            throw new Error(await response.text())
+        }
+
+        const data = response.json()
+        return data
+    } catch (error) {
+        console.error(error)
+    }
+}