fix(console): Allow the console to show Iceberg Views. (#116)

* fix(console): Allow the console to show Iceberg Views.

* fix: Resolve TypeScript and React hooks linting errors

- Move useMutation hook before early return to comply with React hooks rules
- Replace enum with const object to fix erasableSyntaxOnly error
- Rename duplicate SchemaField interface to ViewSchemaField to avoid type conflict

---------

Co-authored-by: Adam Christian <adam@Adams-MacBook-Pro-2.local>

Author: adam-christian-software

console/src/api/catalog/views.ts

@@ -0,0 +1,110 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { apiClient } from "../client"
+import type { ListViewsResponse, CreateViewRequest, LoadViewResult } from "@/types/api"
+
+/**
+ * Encodes a namespace array to URL format.
+ * Namespace parts are separated by the unit separator character (0x1F).
+ */
+function encodeNamespace(namespace: string[]): string {
+  return namespace.join("\x1F")
+}
+
+export const viewsApi = {
+  /**
+   * List views in a namespace.
+   * @param prefix - The catalog name (prefix)
+   * @param namespace - Namespace array (e.g., ["accounting", "tax"])
+   */
+  list: async (
+    prefix: string,
+    namespace: string[]
+  ): Promise<Array<{ namespace: string[]; name: string }>> => {
+    const namespaceStr = encodeNamespace(namespace)
+    const response = await apiClient
+      .getCatalogClient()
+      .get<ListViewsResponse>(
+        `/${encodeURIComponent(prefix)}/namespaces/${encodeURIComponent(namespaceStr)}/views`
+      )
+    return response.data.identifiers
+  },
+
+  /**
+   * Get view details.
+   * @param prefix - The catalog name
+   * @param namespace - Namespace array (e.g., ["accounting", "tax"])
+   * @param viewName - View name
+   */
+  get: async (
+    prefix: string,
+    namespace: string[],
+    viewName: string
+  ): Promise<LoadViewResult> => {
+    const namespaceStr = encodeNamespace(namespace)
+    const response = await apiClient
+      .getCatalogClient()
+      .get<LoadViewResult>(
+        `/${encodeURIComponent(prefix)}/namespaces/${encodeURIComponent(namespaceStr)}/views/${encodeURIComponent(viewName)}`
+      )
+    return response.data
+  },
+
+  /**
+   * Delete a view.
+   * @param prefix - The catalog name
+   * @param namespace - Namespace array
+   * @param viewName - View name
+   */
+  delete: async (
+    prefix: string,
+    namespace: string[],
+    viewName: string
+  ): Promise<void> => {
+    const namespaceStr = encodeNamespace(namespace)
+    await apiClient
+      .getCatalogClient()
+      .delete(
+        `/${encodeURIComponent(prefix)}/namespaces/${encodeURIComponent(namespaceStr)}/views/${encodeURIComponent(viewName)}`
+      )
+  },
+
+  /**
+   * Create a view in a namespace.
+   * @param prefix - The catalog name
+   * @param namespace - Namespace array
+   * @param request - Create view request body
+   */
+  create: async (
+    prefix: string,
+    namespace: string[],
+    request: CreateViewRequest
+  ): Promise<LoadViewResult> => {
+    const namespaceStr = encodeNamespace(namespace)
+    const response = await apiClient
+      .getCatalogClient()
+      .post<LoadViewResult>(
+        `/${encodeURIComponent(prefix)}/namespaces/${encodeURIComponent(namespaceStr)}/views`,
+        request
+      )
+    return response.data
+  },
+}
+

console/src/app.tsx

@@ -33,6 +33,7 @@ import { CatalogDetails } from "@/pages/CatalogDetails"
 import { NamespaceDetails } from "@/pages/NamespaceDetails"
 import { AccessControl } from "@/pages/AccessControl"
 import { TableDetails } from "@/pages/TableDetails"
+import { ViewDetails } from "@/pages/ViewDetails"
 
 function ThemedToaster() {
   const { effectiveTheme } = useTheme()
@@ -70,6 +71,7 @@ function App() {
                   <Route path="/catalogs/:catalogName" element={<CatalogDetails />} />
                   <Route path="/catalogs/:catalogName/namespaces/:namespace" element={<NamespaceDetails />} />
                   <Route path="/catalogs/:catalogName/namespaces/:namespace/tables/:tableName" element={<TableDetails />} />
+                  <Route path="/catalogs/:catalogName/namespaces/:namespace/views/:viewName" element={<ViewDetails />} />
                   <Route path="/access-control" element={<AccessControl />} />
                 </Route>
                 <Route path="*" element={<Navigate to="/" replace />} />

console/src/components/catalog/CatalogExplorer.tsx

@@ -25,6 +25,7 @@ import { cn } from "@/lib/utils"
 import { CatalogTreeNode, type TreeNode } from "./CatalogTreeNode"
 import { catalogsApi } from "@/api/management/catalogs"
 import { TableDetailsDrawer } from "./TableDetailsDrawer"
+import { ViewDetailsDrawer } from "./ViewDetailsDrawer"
 import { useResizableWidth } from "@/hooks/useResizableWidth"
 import { CATALOG_NODE_PREFIX } from "@/lib/constants"
 
@@ -34,10 +35,18 @@ interface CatalogExplorerProps {
   className?: string
 }
 
-interface SelectedTable {
+const CatalogEntityType = {
+    TABLE: "table",
+    VIEW: "view",
+} as const
+
+type CatalogEntityType = typeof CatalogEntityType[keyof typeof CatalogEntityType]
+
+interface SelectedCatalogEntity {
   catalogName: string
   namespace: string[]
-  tableName: string
+  name: string
+  type: CatalogEntityType
 }
 
 export function CatalogExplorer({
@@ -49,7 +58,7 @@ export function CatalogExplorer({
   const [selectedNodeId, setSelectedNodeId] = useState<string>()
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [drawerOpen, setDrawerOpen] = useState(false)
-  const [selectedTable, setSelectedTable] = useState<SelectedTable | null>(null)
+  const [selectedCatalogEntity, setSelectedCatalogEntity] = useState<SelectedCatalogEntity | null>(null)
 
   // Use custom hook for resizable width
   const { width, isResizing, handleMouseDown } = useResizableWidth()
@@ -83,9 +92,18 @@ export function CatalogExplorer({
   const handleTableClick = useCallback((
     catalogName: string,
     namespace: string[],
-    tableName: string
+    name: string
+  ) => {
+    setSelectedCatalogEntity({ catalogName, namespace, name, type: CatalogEntityType.TABLE })
+    setDrawerOpen(true)
+  }, [])
+
+  const handleViewClick = useCallback((
+    catalogName: string,
+    namespace: string[],
+    name: string
   ) => {
-    setSelectedTable({ catalogName, namespace, tableName })
+    setSelectedCatalogEntity({ catalogName, namespace, name, type: CatalogEntityType.VIEW })
     setDrawerOpen(true)
   }, [])
 
@@ -179,6 +197,7 @@ export function CatalogExplorer({
                   onToggleExpand={handleToggleExpand}
                   onSelectNode={handleSelectNode}
                   onTableClick={handleTableClick}
+                  onViewClick={handleViewClick}
                 />
               ))}
             </div>
@@ -214,15 +233,26 @@ export function CatalogExplorer({
       )}
 
       {/* Table Details Drawer */}
-      {selectedTable && (
+      {selectedCatalogEntity && selectedCatalogEntity.type === CatalogEntityType.TABLE && (
         <TableDetailsDrawer
           open={drawerOpen}
           onOpenChange={setDrawerOpen}
-          catalogName={selectedTable.catalogName}
-          namespace={selectedTable.namespace}
-          tableName={selectedTable.tableName}
+          catalogName={selectedCatalogEntity.catalogName}
+          namespace={selectedCatalogEntity.namespace}
+          tableName={selectedCatalogEntity.name}
         />
       )}
+
+        {/* View Details Drawer */}
+      {selectedCatalogEntity && selectedCatalogEntity.type === CatalogEntityType.VIEW && (
+          <ViewDetailsDrawer
+            open={drawerOpen}
+            onOpenChange={setDrawerOpen}
+            catalogName={selectedCatalogEntity.catalogName}
+            namespace={selectedCatalogEntity.namespace}
+            viewName={selectedCatalogEntity.name}
+          />
+        )}
     </>
   )
 }

console/src/components/catalog/CatalogTreeNode.tsx

@@ -31,9 +31,10 @@ import {
 import { cn } from "@/lib/utils"
 import { namespacesApi } from "@/api/catalog/namespaces"
 import { tablesApi } from "@/api/catalog/tables"
+import { viewsApi } from "@/api/catalog/views"
 import type { Catalog } from "@/types/api"
 
-export type TreeNodeType = "catalog" | "namespace" | "table"
+export type TreeNodeType = "catalog" | "namespace" | "table" | "view"
 
 export interface TreeNode {
   type: TreeNodeType
@@ -52,6 +53,7 @@ interface CatalogTreeNodeProps {
   onToggleExpand: (nodeId: string) => void
   onSelectNode?: (node: TreeNode) => void
   onTableClick?: (catalogName: string, namespace: string[], tableName: string) => void
+  onViewClick?: (catalogName: string, namespace: string[], viewName: string) => void
 }
 
 export function CatalogTreeNode({
@@ -62,6 +64,7 @@ export function CatalogTreeNode({
   onToggleExpand,
   onSelectNode,
   onTableClick,
+  onViewClick,
 }: CatalogTreeNodeProps) {
   const isExpanded = expandedNodes.has(node.id)
   const isSelected = selectedNodeId === node.id
@@ -121,6 +124,22 @@ export function CatalogTreeNode({
       currentNamespacePath.length > 0,
   })
 
+  // Fetch views when namespace is expanded
+  const viewsQuery = useQuery({
+    queryKey: [
+      "views",
+      node.catalogName || "",
+      currentNamespacePath.join(".") || "",
+    ],
+    queryFn: () =>
+      viewsApi.list(node.catalogName || "", currentNamespacePath),
+    enabled:
+      node.type === "namespace" &&
+      isExpanded &&
+      !!node.catalogName &&
+      currentNamespacePath.length > 0,
+  })
+
   // Fetch generic tables when namespace is expanded
   const genericTablesQuery = useQuery({
     queryKey: [
@@ -152,6 +171,12 @@ export function CatalogTreeNode({
         onTableClick?.(node.catalogName, node.namespace, node.name)
       }
       onSelectNode?.(node)
+    } else if (node.type === "view") {
+      // Open view details when clicking a view
+      if (node.catalogName && node.namespace && node.namespace.length > 0) {
+        onViewClick?.(node.catalogName, node.namespace, node.name)
+      }
+      onSelectNode?.(node)
     }
   }
 
@@ -261,6 +286,21 @@ export function CatalogTreeNode({
           parent: node,
         })
       })
+
+      // Add views under namespace
+      // Views API returns identifiers like [{namespace: ["accounting"], name: "sales_view"}]
+      const views = viewsQuery.data || []
+      views.forEach((view) => {
+        const namespaceId = `${node.id}.view.${view.name}`
+        children.push({
+          type: "view",
+          id: namespaceId,
+          name: view.name,
+          namespace: currentNamespacePath, // Full namespace path where view resides
+          catalogName: node.catalogName,
+          parent: node,
+        })
+      })
     }
 
     return children
@@ -269,14 +309,15 @@ export function CatalogTreeNode({
     namespacesQuery.data,
     childNamespacesQuery.data,
     tablesQuery.data,
+    viewsQuery.data,
     genericTablesQuery.data,
     currentNamespacePath,
   ])
 
   const isLoading =
     (node.type === "catalog" && namespacesQuery.isLoading) ||
     (node.type === "namespace" &&
-      (childNamespacesQuery.isLoading || tablesQuery.isLoading || genericTablesQuery.isLoading))
+      (childNamespacesQuery.isLoading || tablesQuery.isLoading || viewsQuery.isLoading || genericTablesQuery.isLoading))
 
   const Icon = useMemo(() => {
     if (node.type === "catalog") return Database
@@ -327,11 +368,12 @@ export function CatalogTreeNode({
                   onToggleExpand={onToggleExpand}
                   onSelectNode={onSelectNode}
                   onTableClick={onTableClick}
+                  onViewClick={onViewClick}
                 />
               ))}
-          {!isLoading && childNodes.length === 0 && node.type !== "table" && (
+          {!isLoading && childNodes.length === 0 && node.type !== "table" && node.type !== "view" && (
             <div className="px-2 py-1 text-xs text-muted-foreground italic">
-              No {node.type === "catalog" ? "namespaces" : "tables"} found
+              No {node.type === "catalog" ? "namespaces" : "items"} found
             </div>
           )}
         </div>