@malloy-publisher/sdk 0.0.34 → 0.0.35

package/src/components/Notebook/Notebook.tsx

@@ -11,11 +11,13 @@ import {
 import Stack from "@mui/material/Stack";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import React, { useEffect } from "react";
-import { Configuration, NotebooksApi } from "../../client";
+import { Configuration, NotebooksApi, CompiledNotebook } from "../../client";
 import { highlight } from "../highlighter";
-import { usePublisherPackage } from "../Package";
+import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
+import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
+import { AxiosError } from "axios";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -27,7 +29,7 @@ interface NotebookProps {
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
 }
-// Requires PublisherPackageProvider
+// Requires PackageProvider
 export default function Notebook({
    notebookPath,
    expandCodeCells,
@@ -40,7 +42,7 @@ export default function Notebook({
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
    const { server, projectName, packageName, accessToken, versionId } =
-      usePublisherPackage();
+      usePackage();
    const notebookCodeSnippet = getNotebookCodeSnippet(
       server,
       packageName,
@@ -59,7 +61,7 @@ export default function Notebook({
       isSuccess,
       isError,
       error,
-   } = useQuery(
+   } = useQuery<CompiledNotebook, ApiError>(
       {
          queryKey: [
             "notebook",
@@ -69,21 +71,44 @@ export default function Notebook({
             notebookPath,
             versionId,
          ],
-         queryFn: () =>
-            notebooksApi.getNotebook(
-               projectName,
-               packageName,
-               notebookPath,
-               versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
+         queryFn: async () => {
+            try {
+               const response = await notebooksApi.getNotebook(
+                  projectName,
+                  packageName,
+                  notebookPath,
+                  versionId,
+                  {
+                     baseURL: server,
+                     withCredentials: !accessToken,
+                     headers: {
+                        Authorization: accessToken && `Bearer ${accessToken}`,
+                     },
                   },
-               },
-            ),
+               );
+               return response.data;
+            } catch (err) {
+               // If it's an Axios error, it will have response data
+               if (err && typeof err === "object" && "response" in err) {
+                  const axiosError = err as AxiosError<{
+                     code: string;
+                     message: string;
+                  }>;
+                  if (axiosError.response?.data) {
+                     const apiError: ApiError = new Error(
+                        axiosError.response.data.message || axiosError.message,
+                     );
+                     apiError.status = axiosError.response.status;
+                     apiError.data = axiosError.response.data;
+                     throw apiError;
+                  }
+               }
+               // For other errors, throw as is
+               throw err;
+            }
+         },
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -171,7 +196,7 @@ export default function Notebook({
                   </Typography>
                )}
                {isSuccess &&
-                  notebook.data.notebookCells?.map((cell, index) => (
+                  notebook.notebookCells?.map((cell, index) => (
                      <NotebookCell
                         cell={cell}
                         notebookPath={notebookPath}
@@ -190,11 +215,10 @@ export default function Notebook({
                      />
                   ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {(error.message.includes("404") &&
-                        `${notebookPath} does not exist`) ||
-                        `${projectName} > ${packageName} > ${notebookPath} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > ${notebookPath}`}
+                  />
                )}
             </Stack>
          </StyledCardMedia>

package/src/components/Package/Config.tsx

@@ -11,26 +11,16 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Configuration, PackagesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface PackageProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken?: string;
-}
+export default function Config() {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
 
-export default function Package({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-}: PackageProps) {
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["package", server, projectName, packageName, versionId],
@@ -43,6 +33,7 @@ export default function Package({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -94,9 +85,10 @@ export default function Package({
                         </ListItem>
                      ))}
                   {isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                     </Typography>
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${packageName} > ${versionId}`}
+                     />
                   )}
                </List>
             </Box>

package/src/components/Package/Connections.tsx

@@ -11,17 +11,12 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, ConnectionsApi } from "../../client";
 import { Connection as ApiConnection } from "../../client/api";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface ConnectionsProps {
-   server?: string;
-   projectName: string;
-   accessToken: string;
-   navigate: (to: string, event?: React.MouseEvent) => void;
-}
-
 // TODO(jjs) - Move this UI to the ConnectionExplorer component
 function Connection({ connection }: { connection: ApiConnection }) {
    return (
@@ -36,8 +31,9 @@ function Connection({ connection }: { connection: ApiConnection }) {
    );
 }
 
-export default function Connections(connectionProps: ConnectionsProps) {
-   const { server, projectName, accessToken } = connectionProps;
+export default function Connections() {
+   const { server, projectName, accessToken } = usePackage();
+
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["connections", server, projectName],
@@ -50,6 +46,7 @@ export default function Connections(connectionProps: ConnectionsProps) {
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -98,9 +95,10 @@ export default function Connections(connectionProps: ConnectionsProps) {
                   <Typography variant="body2">No Connections</Typography>
                )}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > Connections`}
+                  />
                )}
             </Box>
          </StyledCardContent>

package/src/components/Package/Databases.tsx

@@ -4,7 +4,6 @@ import {
    DialogContent,
    DialogTitle,
    Divider,
-   IconButton,
    Table,
    TableBody,
    TableCell,
@@ -17,26 +16,31 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, Database, DatabasesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const databasesApi = new DatabasesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface DatabaseProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken: string;
-}
+export default function Databases() {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
+   const [open, setOpen] = React.useState(false);
+   const [selectedDatabase, setSelectedDatabase] =
+      React.useState<Database | null>(null);
+
+   const handleOpen = (database: Database) => {
+      setSelectedDatabase(database);
+      setOpen(true);
+   };
+
+   const handleClose = () => {
+      setOpen(false);
+      setSelectedDatabase(null);
+   };
 
-export default function DatabaseView({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-}: DatabaseProps) {
-   const { data, isSuccess, isError, error } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["databases", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -48,6 +52,7 @@ export default function DatabaseView({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -63,203 +68,93 @@ export default function DatabaseView({
       }
    };
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
-         <StyledCardContent>
-            <Typography variant="overline" fontWeight="bold">
-               Embedded Databases
-            </Typography>
-            <Divider />
-            <Box
-               sx={{
-                  mt: "10px",
-                  maxHeight: "200px",
-                  overflowY: "auto",
-               }}
-            >
-               {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                     Fetching Databases...
-                  </Typography>
-               )}
-               {isSuccess && data.data.length > 0 && (
-                  <TableContainer>
+      <>
+         <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+            <StyledCardContent>
+               <Typography variant="overline" fontWeight="bold">
+                  Databases
+               </Typography>
+               <Divider />
+               <Box
+                  sx={{
+                     mt: "10px",
+                     maxHeight: "200px",
+                     overflowY: "auto",
+                  }}
+               >
+                  {!isSuccess && !isError && (
+                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                        Fetching Databases...
+                     </Typography>
+                  )}
+                  {isError && (
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${packageName} > Databases`}
+                     />
+                  )}
+                  {isSuccess && data.data.length > 0 && (
                      <Table size="small">
                         <TableHead>
                            <TableRow>
-                              <TableCell>
-                                 <Typography
-                                    variant="subtitle2"
-                                    fontWeight="bold"
-                                 >
-                                    Database Name
-                                 </Typography>
-                              </TableCell>
-                              <TableCell align="right">
-                                 <Typography
-                                    variant="subtitle2"
-                                    fontWeight="bold"
-                                 >
-                                    Table Rows
-                                 </Typography>
-                              </TableCell>
+                              <TableCell>Name</TableCell>
+                              <TableCell align="right">Rows</TableCell>
                            </TableRow>
                         </TableHead>
                         <TableBody>
                            {data.data.map((database) => (
-                              <TableRow key={database.path}>
-                                 <TableCell>
-                                    <NameAndSchema database={database} />
+                              <TableRow
+                                 key={database.path}
+                                 onClick={() => handleOpen(database)}
+                                 sx={{ cursor: "pointer" }}
+                              >
+                                 <TableCell component="th" scope="row">
+                                    {database.path}
                                  </TableCell>
                                  <TableCell align="right">
-                                    <Typography variant="body2">
-                                       {formatRowSize(database.info.rowCount)}
-                                    </Typography>
+                                    {formatRowSize(database.info.rowCount)}
                                  </TableCell>
                               </TableRow>
                            ))}
                         </TableBody>
                      </Table>
+                  )}
+                  {isSuccess && data.data.length === 0 && (
+                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                        No databases found
+                     </Typography>
+                  )}
+               </Box>
+            </StyledCardContent>
+         </StyledCard>
+
+         <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+            <DialogTitle>{selectedDatabase?.path}</DialogTitle>
+            <DialogContent>
+               {selectedDatabase?.info?.columns && (
+                  <TableContainer>
+                     <Table size="small">
+                        <TableHead>
+                           <TableRow>
+                              <TableCell>Column</TableCell>
+                              <TableCell>Type</TableCell>
+                           </TableRow>
+                        </TableHead>
+                        <TableBody>
+                           {selectedDatabase.info.columns.map((column) => (
+                              <TableRow key={column.name}>
+                                 <TableCell component="th" scope="row">
+                                    {column.name}
+                                 </TableCell>
+                                 <TableCell>{column.type}</TableCell>
+                              </TableRow>
+                           ))}
+                        </TableBody>
+                     </Table>
                   </TableContainer>
                )}
-               {isSuccess && data.data.length === 0 && (
-                  <Typography variant="body2">No Embedded Databases</Typography>
-               )}
-               {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
-               )}
-            </Box>
-         </StyledCardContent>
-      </StyledCard>
-   );
-}
-
-function NameAndSchema({ database }: { database: Database }) {
-   const [open, setOpen] = React.useState(false);
-   return (
-      <Box
-         sx={{ display: "flex", alignItems: "center" }}
-         onClick={() => setOpen(!open)}
-         style={{ cursor: "pointer" }}
-      >
-         <Typography
-            variant="body2"
-            color="primary"
-            sx={{
-               maxWidth: "200px",
-               overflow: "hidden",
-               textOverflow: "ellipsis",
-               whiteSpace: "nowrap",
-            }}
-         >
-            {database.path}
-         </Typography>
-         &nbsp;
-         <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
-               <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-               >
-                  <path
-                     d="M11 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V13"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-                  <path
-                     d="M9 15L20 4"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-                  <path
-                     d="M15 4H20V9"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-               </svg>
-            </Box>
-         </Box>
-         <SchemaButton
-            database={database}
-            open={open}
-            setClose={() => setOpen(false)}
-         />
-      </Box>
-   );
-}
-
-function SchemaButton({
-   database,
-   open,
-   setClose,
-}: {
-   open: boolean;
-   setClose: () => void;
-   database: Database;
-}) {
-   return (
-      <Dialog open={open} onClose={setClose} maxWidth="sm" fullWidth>
-         <DialogTitle>
-            Schema:{" "}
-            <Typography
-               fontSize="large"
-               variant="body2"
-               fontFamily="monospace"
-               component="span"
-            >
-               {database.path}
-            </Typography>
-            <IconButton
-               aria-label="close"
-               onClick={setClose}
-               sx={{ position: "absolute", right: 8, top: 8 }}
-            >
-               <Box
-                  sx={{
-                     width: 24,
-                     height: 24,
-                     display: "flex",
-                     alignItems: "center",
-                     justifyContent: "center",
-                  }}
-               >
-                  X
-               </Box>
-            </IconButton>
-         </DialogTitle>
-         <DialogContent>
-            <TableContainer>
-               <Table
-                  size="small"
-                  sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
-               >
-                  <TableHead>
-                     <TableRow>
-                        <TableCell>NAME</TableCell>
-                        <TableCell>TYPE</TableCell>
-                     </TableRow>
-                  </TableHead>
-                  <TableBody>
-                     {database.info.columns.map((row) => (
-                        <TableRow key={row.name}>
-                           <TableCell>{row.name}</TableCell>
-                           <TableCell>{row.type}</TableCell>
-                        </TableRow>
-                     ))}
-                  </TableBody>
-               </Table>
-            </TableContainer>
-         </DialogContent>
-      </Dialog>
+            </DialogContent>
+         </Dialog>
+      </>
    );
 }

package/src/components/Package/FileTreeView.tsx

@@ -22,7 +22,7 @@ import Collapse from "@mui/material/Collapse";
 import DnsIcon from "@mui/icons-material/DnsOutlined";
 import DataArrayIcon from "@mui/icons-material/DataArrayOutlined";
 import { Database, Model } from "../../client";
-import { Typography } from "@mui/material";
+import { Typography, Tooltip } from "@mui/material";
 
 interface FiieTreeViewProps {
    items: Model[] | Database[];
@@ -65,6 +65,7 @@ type ExtendedTreeItemProps = {
    fileType: FileType;
    selectable: boolean;
    link: ((event?: React.MouseEvent) => void) | undefined;
+   error?: string;
 };
 
 interface CustomLabelProps {
@@ -72,13 +73,13 @@ interface CustomLabelProps {
 }
 
 function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
-   return (
+   const label = (
       <TreeItem2Label
          {...other}
          sx={{
             display: "flex",
             alignItems: "center",
-            color: "grey.600",
+            color: item.error ? "error.main" : "grey.600",
          }}
       >
          {(item.fileType === "directory" && <FolderIcon />) ||
@@ -88,12 +89,26 @@ function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
          <Typography
             variant="body2"
             sx={{ marginLeft: "5px" }}
-            color={item.link ? "primary.main" : "grey.600"}
+            color={
+               item.error
+                  ? "error.main"
+                  : item.link
+                    ? "primary.main"
+                    : "grey.600"
+            }
          >
             {item.label}
          </Typography>
       </TreeItem2Label>
    );
+
+   return item.error ? (
+      <Tooltip title={item.error} placement="right">
+         {label}
+      </Tooltip>
+   ) : (
+      label
+   );
 }
 
 interface CustomTreeItemProps
@@ -193,6 +208,7 @@ function getTreeViewRecursive(
          "unknown";
       if (fileType !== "unknown") {
          // This is a model or database.
+         const entry = value as Model | Database;
          treeViewItems.push({
             id: path + key,
             label: key,
@@ -202,6 +218,7 @@ function getTreeViewRecursive(
                   ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
+            error: "error" in entry ? entry.error : undefined,
          });
       } else {
          // This is a directory.