Merge pull request #97 from nebari-dev/aktech/browse-registries

Add OCI registry browser

Author: aktech

docs/docs.go

@@ -2013,6 +2013,9 @@ const docTemplate = `{
                 "url"
             ],
             "properties": {
+                "api_token": {
+                    "type": "string"
+                },
                 "default_repository": {
                     "type": "string"
                 },
@@ -2246,6 +2249,9 @@ const docTemplate = `{
                 "default_repository": {
                     "type": "string"
                 },
+                "has_api_token": {
+                    "type": "boolean"
+                },
                 "id": {
                     "type": "string"
                 },
@@ -2304,6 +2310,9 @@ const docTemplate = `{
         "handlers.UpdateRegistryRequest": {
             "type": "object",
             "properties": {
+                "api_token": {
+                    "type": "string"
+                },
                 "default_repository": {
                     "type": "string"
                 },

docs/swagger.json

@@ -2007,6 +2007,9 @@
                 "url"
             ],
             "properties": {
+                "api_token": {
+                    "type": "string"
+                },
                 "default_repository": {
                     "type": "string"
                 },
@@ -2240,6 +2243,9 @@
                 "default_repository": {
                     "type": "string"
                 },
+                "has_api_token": {
+                    "type": "boolean"
+                },
                 "id": {
                     "type": "string"
                 },
@@ -2298,6 +2304,9 @@
         "handlers.UpdateRegistryRequest": {
             "type": "object",
             "properties": {
+                "api_token": {
+                    "type": "string"
+                },
                 "default_repository": {
                     "type": "string"
                 },

docs/swagger.yaml

@@ -33,6 +33,8 @@ definitions:
     type: object
   handlers.CreateRegistryRequest:
     properties:
+      api_token:
+        type: string
       default_repository:
         type: string
       is_default:
@@ -190,6 +192,8 @@ definitions:
         type: string
       default_repository:
         type: string
+      has_api_token:
+        type: boolean
       id:
         type: string
       is_default:
@@ -228,6 +232,8 @@ definitions:
     type: object
   handlers.UpdateRegistryRequest:
     properties:
+      api_token:
+        type: string
       default_repository:
         type: string
       is_default:

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import { Workspaces } from './pages/Workspaces';
 import { WorkspaceDetail } from './pages/WorkspaceDetail';
 import { RemoteWorkspaceDetail } from './pages/RemoteWorkspaceDetail';
 import { Jobs } from './pages/Jobs';
+import { Registries } from './pages/Registries';
 import { Settings } from './pages/Settings';
 import { AdminDashboard } from './pages/admin/AdminDashboard';
 import { UserManagement } from './pages/admin/UserManagement';
@@ -96,6 +97,7 @@ function App() {
               <Route path="workspaces/:id" element={<WorkspaceDetail />} />
               <Route path="remote/workspaces/:id" element={<RemoteWorkspaceDetail />} />
               <Route path="jobs" element={<Jobs />} />
+              <Route path="registries" element={<Registries />} />
               <Route path="settings" element={<Settings />} />
 
               <Route element={<AdminRoute />}>

frontend/src/api/registries.ts

@@ -1,5 +1,5 @@
 import { apiClient } from './client';
-import type { OCIRegistry, CreateRegistryRequest, UpdateRegistryRequest, Publication, PublishRequest, Job } from '@/types';
+import type { OCIRegistry, CreateRegistryRequest, UpdateRegistryRequest, Publication, PublishRequest, Job, RegistryRepository, RegistryTag, ImportEnvironmentRequest, Workspace } from '@/types';
 
 export const registriesApi = {
   // Public endpoints (for all authenticated users)
@@ -43,4 +43,21 @@ export const registriesApi = {
     const { data } = await apiClient.get(`/workspaces/${workspaceId}/publications`);
     return data;
   },
+
+  // Browse endpoints (for all authenticated users)
+  listRepositories: async (registryId: string, search?: string): Promise<{ repositories: RegistryRepository[]; fallback: boolean }> => {
+    const params = search ? { search } : {};
+    const { data } = await apiClient.get(`/registries/${registryId}/repositories`, { params });
+    return data;
+  },
+
+  listTags: async (registryId: string, repo: string): Promise<{ tags: RegistryTag[] }> => {
+    const { data } = await apiClient.get(`/registries/${registryId}/tags`, { params: { repo } });
+    return data;
+  },
+
+  importEnvironment: async (registryId: string, req: ImportEnvironmentRequest): Promise<Workspace> => {
+    const { data } = await apiClient.post(`/registries/${registryId}/import`, req);
+    return data;
+  },
 };

frontend/src/components/admin/CreateRegistryDialog.tsx

@@ -11,6 +11,7 @@ export const CreateRegistryDialog = () => {
   const [url, setUrl] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [apiToken, setApiToken] = useState('');
   const [defaultRepository, setDefaultRepository] = useState('');
   const [isDefault, setIsDefault] = useState(false);
   const [error, setError] = useState('');
@@ -27,6 +28,7 @@ export const CreateRegistryDialog = () => {
         url,
         username: username || undefined,
         password: password || undefined,
+        api_token: apiToken || undefined,
         default_repository: defaultRepository || undefined,
         is_default: isDefault,
       });
@@ -35,6 +37,7 @@ export const CreateRegistryDialog = () => {
       setUrl('');
       setUsername('');
       setPassword('');
+      setApiToken('');
       setDefaultRepository('');
       setIsDefault(false);
       setError('');
@@ -106,6 +109,22 @@ export const CreateRegistryDialog = () => {
             />
           </div>
 
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              API Token <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <Input
+              type="password"
+              value={apiToken}
+              onChange={(e) => setApiToken(e.target.value)}
+              placeholder="Registry API token for browsing private repos"
+            />
+            <p className="text-xs text-muted-foreground">
+              For Quay.io: generate an OAuth Application Token to list private repositories.
+              This is separate from the push/pull credentials above.
+            </p>
+          </div>
+
           <div className="space-y-2">
             <label className="text-sm font-medium">
               Default Repository <span className="text-muted-foreground">(optional)</span>

frontend/src/components/admin/EditRegistryDialog.tsx

@@ -17,6 +17,7 @@ export const EditRegistryDialog = ({ registry, open, onOpenChange }: EditRegistr
   const [url, setUrl] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [apiToken, setApiToken] = useState('');
   const [defaultRepository, setDefaultRepository] = useState('');
   const [isDefault, setIsDefault] = useState(false);
   const [error, setError] = useState('');
@@ -30,6 +31,7 @@ export const EditRegistryDialog = ({ registry, open, onOpenChange }: EditRegistr
       setUrl(registry.url);
       setUsername(registry.username || '');
       setPassword(''); // Don't pre-fill password for security
+      setApiToken(''); // Don't pre-fill token for security
       setDefaultRepository(registry.default_repository || '');
       setIsDefault(registry.is_default);
     }
@@ -47,6 +49,7 @@ export const EditRegistryDialog = ({ registry, open, onOpenChange }: EditRegistr
           url,
           username: username || undefined,
           password: password || undefined, // Only update if provided
+          api_token: apiToken || undefined, // Only update if provided
           default_repository: defaultRepository || undefined,
           is_default: isDefault,
         },
@@ -115,6 +118,22 @@ export const EditRegistryDialog = ({ registry, open, onOpenChange }: EditRegistr
             />
           </div>
 
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              API Token <span className="text-muted-foreground">(leave blank to keep current)</span>
+            </label>
+            <Input
+              type="password"
+              value={apiToken}
+              onChange={(e) => setApiToken(e.target.value)}
+              placeholder="Leave blank to keep current token"
+            />
+            <p className="text-xs text-muted-foreground">
+              For Quay.io: an OAuth Application Token to list private repositories.
+              {registry.has_api_token && ' A token is currently configured.'}
+            </p>
+          </div>
+
           <div className="space-y-2">
             <label className="text-sm font-medium">
               Default Repository <span className="text-muted-foreground">(optional)</span>

frontend/src/components/layout/Layout.tsx

@@ -52,36 +52,47 @@ export const Layout = () => {
                     </Button>
                   )}
                 </NavLink>
-                {isAdmin && (
-                  <NavLink to="/admin">
+                <NavLink to="/registries">
+                  {({ isActive }) => (
+                    <Button
+                      variant={isActive ? 'secondary' : 'ghost'}
+                      className="gap-2"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4"><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
+                      Registries
+                    </Button>
+                  )}
+                </NavLink>
+                {isLocalMode && (
+                  <NavLink to="/settings">
                     {({ isActive }) => (
                       <Button
                         variant={isActive ? 'secondary' : 'ghost'}
                         className="gap-2"
                       >
-                        <Shield className="h-4 w-4" />
-                        Admin
+                        <Settings className="h-4 w-4" />
+                        Settings
                       </Button>
                     )}
                   </NavLink>
                 )}
-                {isLocalMode && (
-                  <NavLink to="/settings">
+              </nav>
+            </div>
+            {!isLocalMode && (
+              <div className="flex items-center gap-4">
+                {isAdmin && (
+                  <NavLink to="/admin">
                     {({ isActive }) => (
                       <Button
                         variant={isActive ? 'secondary' : 'ghost'}
                         className="gap-2"
                       >
-                        <Settings className="h-4 w-4" />
-                        Settings
+                        <Shield className="h-4 w-4" />
+                        Admin
                       </Button>
                     )}
                   </NavLink>
                 )}
-              </nav>
-            </div>
-            {!isLocalMode && (
-              <div className="flex items-center gap-4">
                 {user?.avatar_url && !avatarError ? (
                   <img
                     src={user.avatar_url}

frontend/src/hooks/useRegistries.ts

@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { registriesApi } from '@/api/registries';
-import type { CreateRegistryRequest, UpdateRegistryRequest, PublishRequest } from '@/types';
+import type { CreateRegistryRequest, UpdateRegistryRequest, PublishRequest, ImportEnvironmentRequest } from '@/types';
 
 // Query hook for public registries (all authenticated users)
 export const usePublicRegistries = () => {
@@ -87,3 +87,35 @@ export const usePublications = (workspaceId: string) => {
     enabled: !!workspaceId,
   });
 };
+
+// Query hook for registry repositories (browse)
+export const useRegistryRepositories = (registryId: string, search?: string) => {
+  return useQuery({
+    queryKey: ['registries', registryId, 'repositories', search],
+    queryFn: () => registriesApi.listRepositories(registryId, search),
+    enabled: !!registryId,
+  });
+};
+
+// Query hook for repository tags (browse)
+export const useRepositoryTags = (registryId: string, repo: string) => {
+  return useQuery({
+    queryKey: ['registries', registryId, 'tags', repo],
+    queryFn: () => registriesApi.listTags(registryId, repo),
+    enabled: !!registryId && !!repo,
+  });
+};
+
+// Mutation hook for importing an environment from a registry
+export const useImportEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ registryId, data }: { registryId: string; data: ImportEnvironmentRequest }) =>
+      registriesApi.importEnvironment(registryId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['workspaces'] });
+      queryClient.invalidateQueries({ queryKey: ['jobs'] });
+    },
+  });
+};