Merge pull request #1 from BlackBlocks-io/main

Add repository to app cards
silentnoname · Sep 27, 2024 · 44d08bd · 44d08bd
2 parents e199019 + b1de2ff
commit 44d08bd
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app/[appID]/page.tsx b/src/app/app/[appID]/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
-import { ArrowLeftIcon, ClockIcon, UserIcon, ShieldCheckIcon, CalendarIcon } from '@heroicons/react/24/outline';
+import { ArrowLeftIcon, ClockIcon, UserIcon, ShieldCheckIcon, CalendarIcon, LinkIcon } from '@heroicons/react/24/outline';
 
 interface DeploymentRecord {
   id: string;
@@ -15,6 +15,24 @@ interface DeploymentRecord {
   }[];
 }
 
+const InfoLink: React.FC<{ label: string; href: string }> = ({ label, href }) => (
+  <div className="flex items-center">
+    <LinkIcon className="h-5 w-5 text-gray-500 mr-2" />
+
+    <div className="flex flex-col">
+      <span className="text-sm text-gray-500">Repository</span>
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-600 hover:text-blue-800 hover:underline transition duration-300 ease-in-out"
+      >
+        {label}
+      </a>
+    </div>
+  </div>
+);
+
 const AppDeploymentPage: React.FC = () => {
   const [deployments, setDeployments] = useState<DeploymentRecord[]>([]);
   const [appInfo, setAppInfo] = useState({
@@ -24,6 +42,7 @@ const AppDeploymentPage: React.FC = () => {
     created: '',
     expires: '',
     owner: '',
+    repository: '',
   });
   const [isLoading, setIsLoading] = useState(true);
   const params = useParams();
@@ -37,6 +56,7 @@ const AppDeploymentPage: React.FC = () => {
     const created = searchParams.get('created') || 'Invalid Date';
     const expires = searchParams.get('expires') || 'Invalid Date';
     const owner = searchParams.get('owner') || '';
+    const repository = searchParams.get('repository') || 'Unknown';
 
     setAppInfo({
       name,
@@ -45,6 +65,7 @@ const AppDeploymentPage: React.FC = () => {
       created: new Date(created).toLocaleString(),
       expires: new Date(expires).toLocaleString(),
       owner,
+      repository,
     });
 
     const fetchDeployments = async () => {
@@ -148,6 +169,12 @@ const AppDeploymentPage: React.FC = () => {
           <InfoItem icon={<CalendarIcon className="h-5 w-5" />} label="Created" value={appInfo.created} />
           <InfoItem icon={<CalendarIcon className="h-5 w-5" />} label="Expires" value={appInfo.expires} />
           <InfoItem icon={<UserIcon className="h-5 w-5" />} label="Owner" value={appInfo.owner} />
+          <div className="md:col-span-2"></div>
+          {appInfo.repository ? ( 
+          <InfoLink label={appInfo.repository} href={appInfo.repository} />
+          ) : (
+            <InfoItem icon={<LinkIcon className="h-5 w-5" />} label="Repository" value="Unknown" />
+          )}
         </div>
       </div>
 

diff --git a/src/components/Applist.tsx b/src/components/Applist.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { bech32 } from 'bech32';
 import Link from 'next/link';
-import { ChartBarIcon, UsersIcon, ClockIcon, CalendarIcon, MagnifyingGlassIcon, ArrowsUpDownIcon } from '@heroicons/react/24/outline';
+import { ChartBarIcon, UsersIcon, ClockIcon, CalendarIcon, MagnifyingGlassIcon, ArrowsUpDownIcon, LinkIcon } from '@heroicons/react/24/outline';
 
 interface ApplicationRecord {
   id: string;
@@ -16,6 +16,7 @@ interface ApplicationRecord {
     key: string;
     value: {
       string?: string;
+      value?: { string: string }[];
     };
   }[];
 }
@@ -46,15 +47,51 @@ const AppList: React.FC = () => {
               names
               owners
               attributes {
-                key
+                ...AttrParts
                 value {
-                  ... on StringValue {
-                    string: value
+                  ... on MapValue {
+                    map: value {
+                      ...AttrParts
+                    }
                   }
                 }
               }
             }
-          }`
+          }
+      
+          fragment ValueParts on Value {
+            ... on BooleanValue {
+              bool: value
+            }
+            ... on IntValue {
+              int: value
+            }
+            ... on FloatValue {
+              float: value
+            }
+            ... on StringValue {
+              string: value
+            }
+            ... on BytesValue {
+              bytes: value
+            }
+            ... on LinkValue {
+              link: value
+            }
+          }
+      
+          fragment AttrParts on Attribute {
+            key
+            value {
+              ...ValueParts
+              ... on ArrayValue {
+                value {
+                  ...ValueParts
+                }
+              }
+            }
+          }
+          `
         });
         setApps(response.data.data.appDeploymentRecords);
       } catch (error) {
@@ -185,6 +222,7 @@ const AppList: React.FC = () => {
             <option value="name">Name</option>
             <option value="authority">Authority</option>
             <option value="owner">Owner</option>
+            <option value="repository">Repository</option>
           </select>
         </div>
       </div>
@@ -203,6 +241,7 @@ const AppList: React.FC = () => {
               <InfoItem icon={<CalendarIcon className="h-5 w-5 flex-shrink-0" />} label="Created" value={new Date(app.createTime).toLocaleString()} />
               <InfoItem icon={<CalendarIcon className="h-5 w-5 flex-shrink-0" />} label="Expires" value={new Date(app.expiryTime).toLocaleString()} />
               <InfoItem icon={<UsersIcon className="h-5 w-5 flex-shrink-0" />} label="Owner" value={app.owners.map(hexToBech32).join(', ')} />
+              <InfoItem icon={<LinkIcon className="h-5 w-5 flex-shrink-0" />} label="Repository" value={app.attributes.find(attr => attr.key === 'repository')?.value?.value?.[0]?.string || 'Unknown'} />
             </div>
             <Link 
               href={{
@@ -213,7 +252,8 @@ const AppList: React.FC = () => {
                   authority: getAuthority(app.names),
                   created: app.createTime,
                   expires: app.expiryTime,
-                  owner: hexToBech32(app.owners[0] || '')
+                  owner: hexToBech32(app.owners[0] || ''),
+                  repository: app.attributes.find(attr => attr.key === 'repository')?.value?.value?.[0]?.string || 'Unknown',
                 }
               }}
               className="mt-2 inline-block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-300 ease-in-out text-sm font-medium"