insforge 1.2.10 → 1.4.8

package/frontend/src/features/functions/components/FunctionRow.tsx

@@ -1,72 +1,72 @@
-import { CopyButton } from '@/components/CopyButton';
-import { type EdgeFunction } from '../services/function.service';
-import { cn, getBackendUrl } from '@/lib/utils/utils';
-import { format, formatDistance } from 'date-fns';
-interface FunctionRowProps {
-  function: EdgeFunction;
-  onClick: () => void;
-  className?: string;
-}
-
-export function FunctionRow({ function: func, onClick, className }: FunctionRowProps) {
-  const functionUrl = `${getBackendUrl()}/functions/${func.slug}`;
-
-  return (
-    <div
-      className={cn(
-        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all cursor-pointer',
-        className
-      )}
-      onClick={onClick}
-    >
-      <div className="grid grid-cols-12 h-full items-center">
-        {/* Name Column */}
-        <div className="col-span-2 min-w-0 px-3 py-1.5">
-          <p className="text-sm text-zinc-950 dark:text-white truncate" title={func.name}>
-            {func.name}
-          </p>
-        </div>
-
-        {/* URL Column */}
-        <div className="col-span-6 min-w-0 px-3 py-1.5">
-          <div className="flex items-center gap-3">
-            <span
-              className="text-sm text-muted-foreground dark:text-white truncate"
-              title={functionUrl}
-            >
-              {functionUrl}
-            </span>
-            <CopyButton
-              variant="secondary"
-              showText={false}
-              text={functionUrl}
-              className="h-7 w-7 dark:hover:bg-neutral-500 dark:data-[copied=true]:group-hover:bg-neutral-700 dark:data-[copied=true]:hover:bg-neutral-700"
-            />
-          </div>
-        </div>
-
-        {/* Created Column */}
-        <div className="col-span-2 px-3 py-1.5">
-          <span
-            className="text-sm text-muted-foreground dark:text-white truncate"
-            title={func.created_at}
-          >
-            {format(new Date(func.created_at), 'MMM dd, yyyy HH:mm')}
-          </span>
-        </div>
-
-        {/* Last Update Column */}
-        <div className="col-span-2 px-3 py-1.5">
-          <span
-            className="text-sm text-muted-foreground dark:text-white truncate"
-            title={func.deployed_at}
-          >
-            {func.deployed_at
-              ? formatDistance(new Date(func.deployed_at), new Date(), { addSuffix: true })
-              : 'Never'}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { CopyButton } from '@/components/CopyButton';
+import { FunctionSchema } from '@insforge/shared-schemas';
+import { cn, getBackendUrl } from '@/lib/utils/utils';
+import { format, formatDistance } from 'date-fns';
+interface FunctionRowProps {
+  function: FunctionSchema;
+  onClick: () => void;
+  className?: string;
+}
+
+export function FunctionRow({ function: func, onClick, className }: FunctionRowProps) {
+  const functionUrl = `${getBackendUrl()}/functions/${func.slug}`;
+
+  return (
+    <div
+      className={cn(
+        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="grid grid-cols-12 h-full items-center">
+        {/* Name Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <p className="text-sm text-zinc-950 dark:text-white truncate" title={func.name}>
+            {func.name}
+          </p>
+        </div>
+
+        {/* URL Column */}
+        <div className="col-span-6 min-w-0 px-3 py-1.5">
+          <div className="flex items-center gap-3">
+            <span
+              className="text-sm text-muted-foreground dark:text-white truncate"
+              title={functionUrl}
+            >
+              {functionUrl}
+            </span>
+            <CopyButton
+              variant="secondary"
+              showText={false}
+              text={functionUrl}
+              className="h-7 w-7 dark:hover:bg-neutral-500 dark:data-[copied=true]:group-hover:bg-neutral-700 dark:data-[copied=true]:hover:bg-neutral-700"
+            />
+          </div>
+        </div>
+
+        {/* Created Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-white truncate"
+            title={func.createdAt}
+          >
+            {format(new Date(func.createdAt), 'MMM dd, yyyy HH:mm')}
+          </span>
+        </div>
+
+        {/* Last Update Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-white truncate"
+            title={func.deployedAt ?? ''}
+          >
+            {func.deployedAt
+              ? formatDistance(new Date(func.deployedAt), new Date(), { addSuffix: true })
+              : 'Never'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/functions/components/FunctionsSidebar.tsx

@@ -1,56 +1,56 @@
-import { cn } from '@/lib/utils/utils';
-import { useFunctions } from '../hooks/useFunctions';
-
-interface FunctionsSidebarProps {
-  selectedSection: 'functions' | 'secrets';
-  onSectionSelect: (section: 'functions' | 'secrets') => void;
-}
-
-export function FunctionsSidebar({ selectedSection, onSectionSelect }: FunctionsSidebarProps) {
-  const { clearSelection } = useFunctions();
-  const sections = [
-    {
-      id: 'functions' as const,
-      name: 'Functions',
-    },
-    {
-      id: 'secrets' as const,
-      name: 'Secrets',
-    },
-  ];
-
-  return (
-    <div className="w-60 px-3 py-4 flex flex-col h-full bg-white dark:bg-neutral-800 border-r border-border-gray dark:border-neutral-700">
-      <div className="mb-4 w-full">
-        <p className="text-base font-bold text-zinc-950 dark:text-white">Edge Functions</p>
-      </div>
-      <div className="flex-1 overflow-y-auto">
-        <div className="space-y-2">
-          {sections.map((section) => {
-            const isSelected = selectedSection === section.id;
-
-            return (
-              <button
-                key={section.id}
-                onClick={() => {
-                  if (section.id === 'functions') {
-                    clearSelection();
-                  }
-                  onSectionSelect(section.id);
-                }}
-                className={cn(
-                  'h-9 w-full flex items-center justify-between pl-3 py-1 pr-1 rounded text-left transition-colors',
-                  isSelected
-                    ? 'bg-zinc-100 dark:bg-neutral-700 text-zinc-950 dark:text-white'
-                    : 'hover:bg-zinc-50 dark:hover:bg-neutral-700/50 text-zinc-700 dark:text-zinc-300'
-                )}
-              >
-                <p className="text-sm text-zinc-950 dark:text-white">{section.name}</p>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
+import { cn } from '@/lib/utils/utils';
+import { useFunctions } from '../hooks/useFunctions';
+
+interface FunctionsSidebarProps {
+  selectedSection: 'functions' | 'secrets';
+  onSectionSelect: (section: 'functions' | 'secrets') => void;
+}
+
+export function FunctionsSidebar({ selectedSection, onSectionSelect }: FunctionsSidebarProps) {
+  const { clearSelection } = useFunctions();
+  const sections = [
+    {
+      id: 'functions' as const,
+      name: 'Functions',
+    },
+    {
+      id: 'secrets' as const,
+      name: 'Secrets',
+    },
+  ];
+
+  return (
+    <div className="w-60 px-3 py-4 flex flex-col h-full bg-white dark:bg-neutral-800 border-r border-border-gray dark:border-neutral-700">
+      <div className="mb-4 w-full">
+        <p className="text-base font-bold text-zinc-950 dark:text-white">Edge Functions</p>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <div className="space-y-2">
+          {sections.map((section) => {
+            const isSelected = selectedSection === section.id;
+
+            return (
+              <button
+                key={section.id}
+                onClick={() => {
+                  if (section.id === 'functions') {
+                    clearSelection();
+                  }
+                  onSectionSelect(section.id);
+                }}
+                className={cn(
+                  'h-9 w-full flex items-center justify-between pl-3 py-1 pr-1 rounded text-left transition-colors',
+                  isSelected
+                    ? 'bg-zinc-100 dark:bg-neutral-700 text-zinc-950 dark:text-white'
+                    : 'hover:bg-zinc-50 dark:hover:bg-neutral-700/50 text-zinc-700 dark:text-zinc-300'
+                )}
+              >
+                <p className="text-sm text-zinc-950 dark:text-white">{section.name}</p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/functions/components/SecretRow.tsx

@@ -1,12 +1,12 @@
 import { Trash2 } from 'lucide-react';
 import { Button } from '@/components/radix/Button';
-import { type Secret } from '@/features/functions/services/secret.service';
+import { SecretSchema } from '@insforge/shared-schemas';
 import { cn } from '@/lib/utils/utils';
 import { formatDistance } from 'date-fns';
 
 interface SecretRowProps {
-  secret: Secret;
-  onDelete: (secret: Secret) => void;
+  secret: SecretSchema;
+  onDelete: (secret: SecretSchema) => void;
   className?: string;
 }
 

package/frontend/src/features/functions/components/index.ts

@@ -1,5 +1,5 @@
-export { default as FunctionEmptyState } from './FunctionEmptyState';
-export { FunctionRow } from './FunctionRow';
-export { FunctionsSidebar } from './FunctionsSidebar';
-export { default as SecretEmptyState } from './SecretEmptyState';
-export { SecretRow } from './SecretRow';
+export { default as FunctionEmptyState } from './FunctionEmptyState';
+export { FunctionRow } from './FunctionRow';
+export { FunctionsSidebar } from './FunctionsSidebar';
+export { default as SecretEmptyState } from './SecretEmptyState';
+export { SecretRow } from './SecretRow';

package/frontend/src/features/functions/hooks/useFunctions.ts

@@ -1,12 +1,13 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { functionService, type EdgeFunction } from '../services/function.service';
+import { functionService } from '../services/function.service';
+import { FunctionSchema } from '@insforge/shared-schemas';
 import { useToast } from '@/lib/hooks/useToast';
 
 export function useFunctions() {
   const queryClient = useQueryClient();
   const { showToast } = useToast();
-  const [selectedFunction, setSelectedFunction] = useState<EdgeFunction | null>(null);
+  const [selectedFunction, setSelectedFunction] = useState<FunctionSchema | null>(null);
 
   // Query to fetch all functions
   const {
@@ -26,7 +27,7 @@ export function useFunctions() {
 
   // Function to fetch and set selected function details
   const selectFunction = useCallback(
-    async (func: EdgeFunction) => {
+    async (func: FunctionSchema) => {
       try {
         const data = await functionService.getFunctionBySlug(func.slug);
         setSelectedFunction(data);
@@ -97,7 +98,7 @@ export function useFunctions() {
 
     // Helpers
     getFunctionBySlug: useCallback(
-      (slug: string): EdgeFunction | undefined => {
+      (slug: string): FunctionSchema | undefined => {
         return displayFunctions.find((func) => func.slug === slug);
       },
       [displayFunctions]

package/frontend/src/features/functions/hooks/useSecrets.ts

@@ -1,10 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  secretService,
-  type Secret,
-  type CreateSecretInput,
-} from '@/features/functions/services/secret.service';
+import { secretService } from '@/features/functions/services/secret.service';
+import type { SecretSchema, CreateSecretRequest } from '@insforge/shared-schemas';
 import { useToast } from '@/lib/hooks/useToast';
 import { useConfirm } from '@/lib/hooks/useConfirm';
 
@@ -27,11 +24,11 @@ export function useSecrets() {
   });
 
   // Filter out inactive secrets
-  const secrets = allSecrets.filter((secret: Secret) => secret.isActive);
+  const secrets = allSecrets.filter((secret: SecretSchema) => secret.isActive);
 
   // Create secret mutation
   const createSecretMutation = useMutation({
-    mutationFn: (input: CreateSecretInput) => secretService.createSecret(input),
+    mutationFn: (input: CreateSecretRequest) => secretService.createSecret(input),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ['secrets'] });
       showToast('Secret created successfully', 'success');
@@ -80,7 +77,7 @@ export function useSecrets() {
 
   // Delete secret with confirmation
   const deleteSecret = useCallback(
-    async (secret: Secret) => {
+    async (secret: SecretSchema) => {
       if (secret.isReserved) {
         showToast('Cannot delete reserved secrets', 'error');
         return false;
@@ -108,7 +105,7 @@ export function useSecrets() {
   );
 
   // Filter secrets based on search query
-  const filteredSecrets = secrets.filter((secret: Secret) =>
+  const filteredSecrets = secrets.filter((secret: SecretSchema) =>
     secret.key.toLowerCase().includes(searchQuery.toLowerCase())
   );
 

package/frontend/src/features/functions/{page → pages}/FunctionsPage.tsx

@@ -14,13 +14,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 export default function FunctionsPage() {
   const toastShownRef = useRef(false);
@@ -36,8 +29,6 @@ export default function FunctionsPage() {
     refetch,
   } = useFunctions();
 
-  const { socket, isConnected } = useSocket();
-
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
@@ -54,24 +45,6 @@ export default function FunctionsPage() {
     }
   }, [isRuntimeAvailable, showToast]);
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.FUNCTIONS) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
-
   // If a function is selected, show the detail view
   if (selectedFunction) {
     return (
@@ -124,14 +97,18 @@ export default function FunctionsPage() {
             </Tooltip>
           </TooltipProvider>
         </div>
-        <div className="flex flex-col gap-2 relative">
-          {/* Table Header */}
-          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
-            <div className="col-span-2 py-1 px-3">Name</div>
-            <div className="col-span-6 py-1 px-3">URL</div>
-            <div className="col-span-2 py-1 px-3">Created</div>
-            <div className="col-span-2 py-1 px-3">Last Update</div>
-          </div>
+        {/* Table Header */}
+        <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="col-span-2 py-1 px-3">Name</div>
+          <div className="col-span-6 py-1 px-3">URL</div>
+          <div className="col-span-2 py-1 px-3">Created</div>
+          <div className="col-span-2 py-1 px-3">Last Update</div>
+        </div>
+      </div>
+
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
           {loading ? (
             <>
               {[...Array(4)].map((_, i) => (
@@ -154,17 +131,17 @@ export default function FunctionsPage() {
               <FunctionEmptyState />
             </div>
           )}
+        </div>
 
-          {/* Loading mask overlay */}
-          {isRefreshing && (
-            <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
-              <div className="flex items-center gap-1">
-                <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
-                <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
-              </div>
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );