@malloy-publisher/sdk 0.0.199 → 0.0.201

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CMA8U4-B.cjs.js"),o=require("./ServerProvider-C_Mnvmgc.cjs.js");exports.AnalyzePackageButton=e.AnalyzePackageButton;exports.BrowserWorkbookStorage=e.BrowserWorkbookStorage;exports.ConnectionExplorer=e.ConnectionExplorer;exports.DimensionFilter=e.DimensionFilter;exports.EmbeddedQueryResult=e.EmbeddedQueryResult;exports.Environment=e.Environment;exports.Home=e.Home;exports.Loading=e.Loading;exports.Model=e.Model;exports.ModelExplorer=e.ModelExplorer;exports.ModelExplorerDialog=e.ModelExplorerDialog;exports.Notebook=e.Notebook;exports.Package=e.Package;exports.Packages=e.Packages;exports.QueryResult=e.QueryResult;exports.RenderedResult=e.RenderedResult;exports.ResultContainer=e.ResultContainer;exports.SourceExplorerComponent=e.SourceExplorerComponent;exports.SourcesExplorer=e.SourcesExplorer;exports.Workbook=e.Workbook;exports.WorkbookList=e.WorkbookList;exports.WorkbookManager=e.WorkbookManager;exports.WorkbookStorageProvider=e.WorkbookStorageProvider;exports.createEmbeddedQueryResult=e.createEmbeddedQueryResult;exports.encodeResourceUri=e.encodeResourceUri;exports.extractDimensionSpecs=e.extractDimensionSpecs;exports.extractSourceFromQuery=e.extractSourceFromQuery;exports.generateFilterClause=e.generateFilterClause;exports.getDimensionKey=e.getDimensionKey;exports.getJoinedSources=e.getJoinedSources;exports.injectWhereClause=e.injectWhereClause;exports.makeDimensionKey=e.makeDimensionKey;exports.parseAllSourceInfos=e.parseAllSourceInfos;exports.parseDimensionFilterAnnotation=e.parseDimensionFilterAnnotation;exports.parseNotebookFilterAnnotation=e.parseNotebookFilterAnnotation;exports.parseResourceUri=e.parseResourceUri;exports.useDimensionFilters=e.useDimensionFilters;exports.useDimensionFiltersFromSpec=e.useDimensionFiltersFromSpec;exports.useDimensionFiltersQuery=e.useDimensionFiltersQuery;exports.useDimensionalFilterRangeData=e.useDimensionalFilterRangeData;exports.useModelData=e.useModelData;exports.useRawQueryData=e.useRawQueryData;exports.useRouterClickHandler=e.useRouterClickHandler;exports.ServerProvider=o.ServerProvider;exports.useServer=o.useServer;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BpoC5QHF.cjs.js"),o=require("./ServerProvider-BSyxB6sf.cjs.js");exports.AnalyzePackageButton=e.AnalyzePackageButton;exports.BrowserWorkbookStorage=e.BrowserWorkbookStorage;exports.ConnectionExplorer=e.ConnectionExplorer;exports.DimensionFilter=e.DimensionFilter;exports.EmbeddedQueryResult=e.EmbeddedQueryResult;exports.Environment=e.Environment;exports.Home=e.Home;exports.Loading=e.Loading;exports.Model=e.Model;exports.ModelExplorer=e.ModelExplorer;exports.ModelExplorerDialog=e.ModelExplorerDialog;exports.Notebook=e.Notebook;exports.Package=e.Package;exports.Packages=e.Packages;exports.QueryResult=e.QueryResult;exports.RenderedResult=e.RenderedResult;exports.ResultContainer=e.ResultContainer;exports.SourceExplorerComponent=e.SourceExplorerComponent;exports.SourcesExplorer=e.SourcesExplorer;exports.Workbook=e.Workbook;exports.WorkbookList=e.WorkbookList;exports.WorkbookManager=e.WorkbookManager;exports.WorkbookStorageProvider=e.WorkbookStorageProvider;exports.createEmbeddedQueryResult=e.createEmbeddedQueryResult;exports.encodeResourceUri=e.encodeResourceUri;exports.extractDimensionSpecs=e.extractDimensionSpecs;exports.extractSourceFromQuery=e.extractSourceFromQuery;exports.generateFilterClause=e.generateFilterClause;exports.getDimensionKey=e.getDimensionKey;exports.getJoinedSources=e.getJoinedSources;exports.injectWhereClause=e.injectWhereClause;exports.makeDimensionKey=e.makeDimensionKey;exports.parseAllSourceInfos=e.parseAllSourceInfos;exports.parseDimensionFilterAnnotation=e.parseDimensionFilterAnnotation;exports.parseNotebookFilterAnnotation=e.parseNotebookFilterAnnotation;exports.parseResourceUri=e.parseResourceUri;exports.useDimensionFilters=e.useDimensionFilters;exports.useDimensionFiltersFromSpec=e.useDimensionFiltersFromSpec;exports.useDimensionFiltersQuery=e.useDimensionFiltersQuery;exports.useDimensionalFilterRangeData=e.useDimensionalFilterRangeData;exports.useGivensForm=e.useGivensForm;exports.useModelData=e.useModelData;exports.useModelGivens=e.useModelGivens;exports.useRawQueryData=e.useRawQueryData;exports.useRouterClickHandler=e.useRouterClickHandler;exports.ServerProvider=o.ServerProvider;exports.useServer=o.useServer;

package/dist/index.es.js

@@ -1,14 +1,14 @@
-import { A as a, I as o, C as r, D as n, x as t, E as i, H as l, L as u, M as m, o as c, q as d, N as k, v as p, P as D, Q as g, R as S, B as R, r as F, S as x, W as y, F as b, J as E, G as C, y as Q, Z as W, g as v, i as M, j as P, V as A, k as f, l as B, X as H, p as K, m as L, n as N, Y as U, K as j, O as w, T as I, U as J, t as h, u as q, e as z } from "./index-Y4ooZDYA.es.js";
-import { S as O, u as T } from "./ServerProvider-BuM1usxf.es.js";
+import { A as a, I as o, C as r, D as n, x as i, E as t, H as u, L as l, M as m, o as c, q as d, N as k, v as p, P as D, Q as g, R as S, B as F, r as R, S as x, W as y, F as b, J as E, G as v, y as C, $ as M, g as Q, i as W, j as P, V as A, k as f, l as B, X as G, p as H, m as K, n as L, _ as N, K as U, O as j, T as w, U as I, Z as J, t as h, Y as q, u as z, e as O } from "./index-uW-ZBpF2.es.js";
+import { S as V, u as X } from "./ServerProvider-DSnbMlP3.es.js";
 export {
   a as AnalyzePackageButton,
   o as BrowserWorkbookStorage,
   r as ConnectionExplorer,
   n as DimensionFilter,
-  t as EmbeddedQueryResult,
-  i as Environment,
-  l as Home,
-  u as Loading,
+  i as EmbeddedQueryResult,
+  t as Environment,
+  u as Home,
+  l as Loading,
   m as Model,
   c as ModelExplorer,
   d as ModelExplorerDialog,
@@ -17,33 +17,35 @@ export {
   D as Packages,
   g as QueryResult,
   S as RenderedResult,
-  R as ResultContainer,
-  O as ServerProvider,
-  F as SourceExplorerComponent,
+  F as ResultContainer,
+  V as ServerProvider,
+  R as SourceExplorerComponent,
   x as SourcesExplorer,
   y as Workbook,
   b as WorkbookList,
   E as WorkbookManager,
-  C as WorkbookStorageProvider,
-  Q as createEmbeddedQueryResult,
-  W as encodeResourceUri,
-  v as extractDimensionSpecs,
-  M as extractSourceFromQuery,
+  v as WorkbookStorageProvider,
+  C as createEmbeddedQueryResult,
+  M as encodeResourceUri,
+  Q as extractDimensionSpecs,
+  W as extractSourceFromQuery,
   P as generateFilterClause,
   A as getDimensionKey,
   f as getJoinedSources,
   B as injectWhereClause,
-  H as makeDimensionKey,
-  K as parseAllSourceInfos,
-  L as parseDimensionFilterAnnotation,
-  N as parseNotebookFilterAnnotation,
-  U as parseResourceUri,
-  j as useDimensionFilters,
-  w as useDimensionFiltersFromSpec,
-  I as useDimensionFiltersQuery,
-  J as useDimensionalFilterRangeData,
+  G as makeDimensionKey,
+  H as parseAllSourceInfos,
+  K as parseDimensionFilterAnnotation,
+  L as parseNotebookFilterAnnotation,
+  N as parseResourceUri,
+  U as useDimensionFilters,
+  j as useDimensionFiltersFromSpec,
+  w as useDimensionFiltersQuery,
+  I as useDimensionalFilterRangeData,
+  J as useGivensForm,
   h as useModelData,
-  q as useRawQueryData,
-  z as useRouterClickHandler,
-  T as useServer
+  q as useModelGivens,
+  z as useRawQueryData,
+  O as useRouterClickHandler,
+  X as useServer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.199",
+   "version": "0.0.201",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",

package/src/components/Connections/DeleteConnectionDialog.tsx

@@ -7,6 +7,9 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 import React, { useState } from "react";
 import { Connection } from "../../client";
@@ -34,15 +37,19 @@ export default function DeleteConnectionDialog({
 
    return (
       <React.Fragment>
-         <IconButton
+         <MenuItem
             aria-label={`Delete connection ${connection?.name ?? ""}`.trim()}
             onClick={(event) => {
                event.stopPropagation();
                handleClickOpen();
             }}
+            sx={{ color: "error.main" }}
          >
-            <Delete />
-         </IconButton>
+            <ListItemIcon sx={{ color: "inherit" }}>
+               <Delete fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Delete</ListItemText>
+         </MenuItem>
 
          <Dialog
             onClose={handleClose}

package/src/components/Connections/EditConnectionDialog.tsx

@@ -8,6 +8,8 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import React, { useState } from "react";
@@ -34,6 +36,7 @@ type EditConnectionDialogProps = {
    connection: Connection;
    onSubmit: (connection: Connection) => Promise<unknown>;
    isSubmitting: boolean;
+   onCloseDialog?: () => void;
 };
 
 function initAttachedDatabases(connection: Connection) {
@@ -56,6 +59,7 @@ export default function EditConnectionDialog({
    connection,
    onSubmit,
    isSubmitting,
+   onCloseDialog,
 }: EditConnectionDialogProps) {
    const [open, setOpen] = useState(false);
    const [type, setType] = useState<Connection["type"]>(connection.type);
@@ -83,6 +87,7 @@ export default function EditConnectionDialog({
 
    const handleClose = () => {
       setOpen(false);
+      onCloseDialog?.();
    };
 
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -446,7 +451,7 @@ export default function EditConnectionDialog({
 
    return (
       <React.Fragment>
-         <IconButton
+         <MenuItem
             aria-label={`Edit connection ${connection?.name ?? ""}`.trim()}
             onClick={(event) => {
                event.preventDefault();
@@ -454,8 +459,11 @@ export default function EditConnectionDialog({
                handleClickOpen();
             }}
          >
-            <Edit />
-         </IconButton>
+            <ListItemIcon>
+               <Edit fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Edit</ListItemText>
+         </MenuItem>
          <Dialog open={open} onClose={handleClose}>
             <DialogTitle
                onClick={(event) => {

package/src/components/Environment/Connections.tsx

@@ -0,0 +1,388 @@
+import { MoreVert } from "@mui/icons-material";
+import StorageOutlinedIcon from "@mui/icons-material/StorageOutlined";
+import {
+   Box,
+   Card,
+   CardContent,
+   Dialog,
+   DialogContent,
+   DialogTitle,
+   Grid,
+   IconButton,
+   Menu,
+   Snackbar,
+   Typography,
+} from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { Connection as ApiConnection } from "../../client/api";
+import {
+   useMutationWithApiError,
+   useQueryWithApiError,
+} from "../../hooks/useQueryWithApiError";
+import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import AddConnectionDialog from "../Connections/AddConnectionDialog";
+import DeleteConnectionDialog from "../Connections/DeleteConnectionDialog";
+import EditConnectionDialog from "../Connections/EditConnectionDialog";
+import { useServer } from "../ServerProvider";
+import ConnectionExplorer from "./ConnectionExplorer";
+
+const CONNECTION_TYPE_LABELS: Record<string, string> = {
+   bigquery: "BigQuery",
+   snowflake: "Snowflake",
+   postgres: "PostgreSQL",
+   mysql: "MySQL",
+   trino: "Trino",
+   databricks: "Databricks",
+   duckdb: "DuckDB",
+   ducklake: "DuckLake",
+   s3: "S3",
+   gcs: "GCS",
+   azure: "Azure",
+};
+
+function typeLabel(type: string | undefined): string {
+   if (!type) return "";
+   return CONNECTION_TYPE_LABELS[type] ?? type;
+}
+
+type ConnectionsProps = {
+   resourceUri: string;
+};
+
+export default function Connections({ resourceUri }: ConnectionsProps) {
+   const { apiClients, mutable } = useServer();
+   const queryClient = useQueryClient();
+   const { environmentName } = parseResourceUri(resourceUri);
+   const [notificationMessage, setNotificationMessage] = useState("");
+   const [selectedConnection, setSelectedConnection] = useState<string | null>(
+      null,
+   );
+   const selectedConnectionResourceUri = encodeResourceUri({
+      environmentName,
+      connectionName: selectedConnection,
+   });
+
+   const { data, isSuccess, isError, error } = useQueryWithApiError({
+      queryKey: ["connections", environmentName],
+      queryFn: () => apiClients.connections.listConnections(environmentName),
+   });
+
+   const handleCloseDialog = () => {
+      setSelectedConnection(null);
+   };
+
+   const addConnection = useMutationWithApiError({
+      mutationFn: (payload: ApiConnection) => {
+         return apiClients.environments.updateEnvironment(environmentName, {
+            name: environmentName,
+            connections: [...data!.data, payload],
+         });
+      },
+      onSuccess() {
+         setNotificationMessage("Connection added successfully");
+         queryClient.invalidateQueries({
+            queryKey: ["connections", environmentName],
+         });
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+      },
+   });
+
+   const updateConnection = useMutationWithApiError({
+      mutationFn: (payload: ApiConnection) => {
+         return apiClients.environments.updateEnvironment(environmentName, {
+            name: environmentName,
+            connections: data!.data.map((conn) =>
+               conn.name === payload.name ? payload : conn,
+            ),
+         });
+      },
+      onSuccess(_data, variables) {
+         setNotificationMessage(
+            `Connection ${variables.name} updated successfully`,
+         );
+         queryClient.invalidateQueries({
+            queryKey: ["connections", environmentName],
+         });
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+      },
+   });
+
+   const deleteConnection = useMutationWithApiError({
+      mutationFn: (payload: ApiConnection) => {
+         return apiClients.environments.updateEnvironment(environmentName, {
+            name: environmentName,
+            connections: data!.data.filter(
+               (conn) => conn.name !== payload.name,
+            ),
+         });
+      },
+      onSuccess(_data, variables) {
+         setNotificationMessage(
+            `Connection ${variables.name} deleted successfully`,
+         );
+         queryClient.invalidateQueries({
+            queryKey: ["connections", environmentName],
+         });
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+      },
+   });
+
+   const connections = isSuccess
+      ? [...data.data].sort((a, b) =>
+           (a.name ?? "").localeCompare(b.name ?? ""),
+        )
+      : [];
+
+   const isMutating =
+      addConnection.isPending ||
+      updateConnection.isPending ||
+      deleteConnection.isPending;
+
+   return (
+      <Box>
+         <Box
+            sx={{
+               display: "flex",
+               alignItems: "flex-start",
+               justifyContent: "space-between",
+               mb: 3,
+            }}
+         >
+            <Box>
+               <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 600, letterSpacing: "-0.025em" }}
+               >
+                  Connections
+               </Typography>
+               <Typography variant="body2" color="text.secondary">
+                  Database connections available to packages in this environment
+               </Typography>
+            </Box>
+            {mutable && isSuccess && (
+               <AddConnectionDialog
+                  onSubmit={(payload) => addConnection.mutateAsync(payload)}
+                  isSubmitting={addConnection.isPending}
+               />
+            )}
+         </Box>
+
+         {!isSuccess && !isError && (
+            <Typography variant="body2" color="text.secondary">
+               Fetching Connections...
+            </Typography>
+         )}
+         {isError && (
+            <ApiErrorDisplay
+               error={error}
+               context={`${environmentName} > Connections`}
+            />
+         )}
+         {isSuccess && connections.length === 0 && (
+            <Typography variant="body2" color="text.secondary">
+               No connections yet.
+            </Typography>
+         )}
+         {isSuccess && connections.length > 0 && (
+            <Grid container spacing={2}>
+               {connections.map((conn) => (
+                  <Grid size={{ xs: 12, sm: 6, md: 4 }} key={conn.name}>
+                     <ConnectionCard
+                        connection={conn}
+                        mutable={mutable}
+                        isMutating={isMutating}
+                        onOpenExplorer={() =>
+                           setSelectedConnection(conn.name ?? null)
+                        }
+                        onEdit={(payload) =>
+                           updateConnection.mutateAsync(payload)
+                        }
+                        onDelete={(payload) => {
+                           if (!conn.resource) {
+                              deleteConnection.mutateAsync(payload);
+                           } else {
+                              setNotificationMessage(
+                                 "Cannot delete this connection",
+                              );
+                           }
+                        }}
+                     />
+                  </Grid>
+               ))}
+            </Grid>
+         )}
+
+         <Snackbar
+            open={notificationMessage !== ""}
+            autoHideDuration={6000}
+            onClose={() => setNotificationMessage("")}
+            message={notificationMessage}
+         />
+
+         <Dialog
+            open={selectedConnection !== null}
+            onClose={handleCloseDialog}
+            maxWidth="lg"
+            fullWidth
+         >
+            <DialogTitle>
+               Connection Explorer: {selectedConnection}
+               <IconButton
+                  aria-label="close"
+                  onClick={handleCloseDialog}
+                  sx={{ position: "absolute", right: 8, top: 8 }}
+               >
+                  <Box
+                     sx={{
+                        width: 24,
+                        height: 24,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                     }}
+                  >
+                     X
+                  </Box>
+               </IconButton>
+            </DialogTitle>
+            <DialogContent>
+               {selectedConnection && (
+                  <ConnectionExplorer
+                     resourceUri={selectedConnectionResourceUri}
+                     connectionName={selectedConnection}
+                     connection={data?.data?.find(
+                        (c) => c.name === selectedConnection,
+                     )}
+                  />
+               )}
+            </DialogContent>
+         </Dialog>
+      </Box>
+   );
+}
+
+type ConnectionCardProps = {
+   connection: ApiConnection;
+   mutable: boolean;
+   isMutating: boolean;
+   onOpenExplorer: () => void;
+   onEdit: (connection: ApiConnection) => Promise<unknown>;
+   onDelete: (connection: ApiConnection) => Promise<unknown> | void;
+};
+
+function ConnectionCard({
+   connection,
+   mutable,
+   isMutating,
+   onOpenExplorer,
+   onEdit,
+   onDelete,
+}: ConnectionCardProps) {
+   const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
+   const menuOpen = Boolean(menuAnchorEl);
+
+   const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      setMenuAnchorEl(event.currentTarget);
+   };
+
+   const handleMenuClose = () => {
+      setMenuAnchorEl(null);
+   };
+
+   return (
+      <Card
+         variant="outlined"
+         onClick={onOpenExplorer}
+         sx={{
+            height: "100%",
+            cursor: "pointer",
+            borderRadius: 3,
+            borderColor: "divider",
+            boxShadow: "none",
+            transition: "all 0.2s ease-in-out",
+            "&:hover": { boxShadow: 2, borderColor: "primary.main" },
+         }}
+      >
+         <CardContent sx={{ p: 2.5, "&:last-child": { pb: 2.5 } }}>
+            <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
+               <Box
+                  sx={{
+                     width: 36,
+                     height: 36,
+                     borderRadius: 1.5,
+                     bgcolor: "warning.light",
+                     display: "flex",
+                     alignItems: "center",
+                     justifyContent: "center",
+                     flexShrink: 0,
+                     color: "warning.main",
+                  }}
+               >
+                  <StorageOutlinedIcon sx={{ fontSize: 20 }} />
+               </Box>
+               <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Typography
+                     variant="subtitle1"
+                     component="h6"
+                     noWrap
+                     sx={{ fontWeight: 600, mb: 0.5 }}
+                  >
+                     {connection.name}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" noWrap>
+                     {typeLabel(connection.type)}
+                  </Typography>
+               </Box>
+               {mutable && (
+                  <>
+                     <IconButton
+                        size="small"
+                        onClick={handleMenuClick}
+                        aria-label={`Connection actions for ${connection.name ?? ""}`.trim()}
+                        sx={{ flexShrink: 0, mt: -0.5, mr: -0.5 }}
+                     >
+                        <MoreVert fontSize="small" />
+                     </IconButton>
+                     <Menu
+                        anchorEl={menuAnchorEl}
+                        open={menuOpen}
+                        onClose={handleMenuClose}
+                        onClick={(e) => e.stopPropagation()}
+                        anchorOrigin={{
+                           vertical: "bottom",
+                           horizontal: "right",
+                        }}
+                        transformOrigin={{
+                           vertical: "top",
+                           horizontal: "right",
+                        }}
+                     >
+                        <EditConnectionDialog
+                           connection={connection}
+                           onSubmit={onEdit}
+                           isSubmitting={isMutating}
+                           onCloseDialog={handleMenuClose}
+                        />
+                        <DeleteConnectionDialog
+                           connection={connection}
+                           onCloseDialog={handleMenuClose}
+                           isMutating={isMutating}
+                           onDelete={() => onDelete(connection)}
+                        />
+                     </Menu>
+                  </>
+               )}
+            </Box>
+         </CardContent>
+      </Card>
+   );
+}

package/src/components/Environment/Environment.tsx

@@ -4,6 +4,7 @@ import { parseResourceUri } from "../../utils/formatting";
 import { useServer } from "../ServerProvider";
 import About from "./About";
 import AddPackageDialog from "./AddPackageDialog";
+import Connections from "./Connections";
 import Packages from "./Packages";
 
 interface EnvironmentProps {
@@ -36,8 +37,8 @@ export default function Environment({
                {environmentName}
             </Typography>
             <Typography variant="body2" color="text.secondary">
-               Manage packages in this environment. Open a package to explore
-               its models, notebooks, and connections.
+               Manage packages and database connections in this environment.
+               Open a package to explore its models and notebooks.
             </Typography>
          </Box>
 
@@ -67,6 +68,10 @@ export default function Environment({
             />
          </Box>
 
+         <Box sx={{ mb: 5 }}>
+            <Connections resourceUri={resourceUri} />
+         </Box>
+
          <About resourceUri={resourceUri} />
       </Container>
    );