Add UI for new oauth provider CLI

Author: colinmcneil

src/extension/ui/src/App.tsx

@@ -9,7 +9,7 @@ import { useMCPClient } from './queries/useMCPClient';
 import { useRequiredImages } from './queries/useRequiredImages';
 import { useSecrets } from './queries/useSecrets';
 import { syncRegistryWithConfig } from './Registry';
-
+import useOAuthProvider from './queries/useOAuthProvider';
 export const client = createDockerDesktopClient();
 
 // Memoize the CatalogGrid component to prevent unnecessary re-renders
@@ -24,7 +24,7 @@ export function App() {
   const secrets = useSecrets(client);
   const mcpClient = useMCPClient(client);
 
-  // Create a memoized callback for syncing registry with config
+  // Create a memoized callback for syncing registry with config we can call later
   const syncRegistry = useCallback(async () => {
     if (config.config && catalogAll.registryItems) {
       await syncRegistryWithConfig(client, catalogAll.registryItems, config.config);

src/extension/ui/src/components/CatalogGrid.tsx

@@ -7,7 +7,6 @@ import {
   Box,
   Button,
   CircularProgress,
-  Divider,
   FormControlLabel,
   FormGroup,
   IconButton,
@@ -25,8 +24,8 @@ import React, { Suspense, useMemo, useState } from 'react';
 import { CATALOG_LAYOUT_SX } from '../Constants';
 import { CatalogItemRichened } from '../types/catalog';
 import YourClients from './tabs/YourClients';
-
-const ToolCatalog = React.lazy(() => import('./tabs/ToolCatalog'));
+import OAuthProviders from './tabs/OAuthProviders';
+import ToolCatalog from './tabs/ToolCatalog';
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
@@ -126,6 +125,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         >
           <Tab label="MCP Catalog" />
           <Tab label="Clients" />
+          <Tab label="OAuth Providers" />
         </Tabs>
         {tab === 0 && (
           <Stack
@@ -253,6 +253,17 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         )}
         {tab === 1 && <YourClients appProps={appProps} />}
       </Suspense>
+      <Suspense
+        fallback={
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <CircularProgress />
+          </Box>
+        }
+      >
+        {tab === 2 && <OAuthProviders client={client} />}
+      </Suspense>
     </Stack>
   );
 };
+
+export default CatalogGrid;

src/extension/ui/src/components/tabs/OAuthProviders.tsx

@@ -0,0 +1,51 @@
+import { v1 } from "@docker/extension-api-client-types";
+import useOAuthProvider from "../../queries/useOAuthProvider";
+import { Alert, Box, Button, Card, CardContent, CardHeader, Chip, CircularProgress, Collapse, Link, Stack, Typography } from "@mui/material";
+import { useState } from "react";
+import { OAuthProvider } from "../../types/oauth/Provider";
+
+const OAuthProviders = ({ client }: { client: v1.DockerDesktopClient }) => {
+    const { data, isLoading, error, authorizeOAuthProvider, unauthorizeOAuthProvider } = useOAuthProvider(client);
+    const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+    if (isLoading) {
+        return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <Typography>Loading OAuth Providers...</Typography>
+            <CircularProgress />
+        </Box>;
+    }
+    if (error) {
+        return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <Alert severity="error">Error: {error.message || JSON.stringify(error, null, 2)}</Alert>
+        </Box>;
+    }
+    if (!data) {
+        return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <Alert severity="info">No supported OAuth Providers detected</Alert>
+        </Box>;
+    }
+    if (data.length > 0) {
+        return <>
+            {data.map((provider: OAuthProvider) => {
+                return <Card>
+                    <CardHeader title={provider.app} action={provider.authorized ? <Button variant="contained" color="error" onClick={() => {
+                        unauthorizeOAuthProvider.mutateAsync(provider.app);
+                    }}>Unauthorize</Button> : <Button variant="contained" color="success" onClick={() => {
+                        authorizeOAuthProvider.mutateAsync(provider.app);
+                    }}>Authorize</Button>} />
+                    <CardContent>
+                        <Stack direction="row" alignItems="center" spacing={1}>
+                            <Typography>{provider.provider}</Typography>
+                            {provider.authorized ? <Chip label="Authorized" color="success" size="small" /> : <Chip label="Unauthorized" color="error" size="small" />}
+                        </Stack>
+                    </CardContent>
+                </Card>
+            })}
+        </>
+    }
+    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+        <Alert severity="info">No supported OAuth Providers detected</Alert>
+    </Box>;
+};
+
+export default OAuthProviders;
+

src/extension/ui/src/queries/useOAuthProvider.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { v1 } from "@docker/extension-api-client-types";
+import {
+  authorizeOAuthApp,
+  listOAuthApps,
+  unauthorizeOAuthApp,
+} from "../utils/OAuth";
+
+const useOAuthProvider = (client: v1.DockerDesktopClient) => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["oauth-providers"],
+    queryFn: () => listOAuthApps(client),
+  });
+  const authorizeOAuthProvider = useMutation({
+    mutationFn: (appId: string) => authorizeOAuthApp(client, appId),
+  });
+  const unauthorizeOAuthProvider = useMutation({
+    mutationFn: (appId: string) => unauthorizeOAuthApp(client, appId),
+  });
+  return {
+    data,
+    isLoading,
+    error,
+    authorizeOAuthProvider,
+    unauthorizeOAuthProvider,
+  };
+};
+
+export default useOAuthProvider;

src/extension/ui/src/types/oauth/Provider.ts

@@ -0,0 +1,6 @@
+export interface OAuthProvider {
+  app: string;
+  authorized: boolean;
+  provider: string;
+  tools: string[] | null;
+}

src/extension/ui/src/utils/OAuth.ts

@@ -0,0 +1,32 @@
+import { v1 } from "@docker/extension-api-client-types";
+import { OAuthProvider } from "../types/oauth/Provider";
+export const listOAuthApps = async (client: v1.DockerDesktopClient) => {
+  const output = await client.extension.host?.cli.exec("host-binary", [
+    "list-oauth-apps",
+  ]);
+  return JSON.parse(output?.stdout || "[]") as OAuthProvider[];
+};
+
+export const authorizeOAuthApp = async (
+  client: v1.DockerDesktopClient,
+  appId: string
+) => {
+  const output = await client.extension.host?.cli.exec("host-binary", [
+    "authorize",
+    "--name",
+    appId,
+  ]);
+  return output?.stdout;
+};
+
+export const unauthorizeOAuthApp = async (
+  client: v1.DockerDesktopClient,
+  appId: string
+) => {
+  const output = await client.extension.host?.cli.exec("host-binary", [
+    "unauthorize",
+    "--name",
+    appId,
+  ]);
+  return output?.stdout;
+};